Embedded Diagram as Code SVG Generation

One of the many issues when creating pictures is the lack of dynamic changes and having to re-save and upload images. By specifying an API generating images instead, one can simply create pictures on the fly using Graphviz and PlantUML thanks to API's like gravizo. (Which is simply a End-point running graphviz)

Graphviz

<amp-img 
  layout=responsive
  width=600
  height=300
  src='https://g.gravizo.com/svg?
 digraph G {
   main -> parse -> execute;
   main -> init;
   main -> cleanup;
   execute -> make_string;
   execute -> printf
   init -> make_string;
   main -> printf;
   execute -> compare;
 }
'/>

PlantUML

https://ampbyexample.com/advanced/how_to_support_images_with_unknown_dimensions/

<div class="fixed-height-container h300">
<amp-img 
  class=contain //note that this requires additional css
  layout=fill
  width=600
  height=400
  src='https://g.gravizo.com/svg?
@startuml;

actor User;
participant "First Class" as A;
participant "Second Class" as B;
participant "Last Class" as C;

User -> A: DoWork;
activate A;

A -> B: Create Request;
activate B;

B -> C: DoWork;
activate C;

C --> B: WorkDone;
destroy C;

B --> A: Request Created;
deactivate B;

A --> User: Done;
deactivate A;

@enduml
'/>
</div>

Required CSS

/* Need to add some CSS for PlantUML scaling to work out of the box */
amp-img.contain img{
  object-fit: contain;
}

.fixed-height-container{
  position: relative;
  width: 100%;
}

.h300{
  height: 300px;
}

Embedding as Markdown

Want to add it to github using MarkDown? Sample principle applies!

![Alt Text](https://g.gravizo.com/svg?
 digraph G {
   main -> parse -> execute;
   main -> init;
   main -> cleanup;
   execute -> make_string;
   execute -> printf
   init -> make_string;
   main -> printf;
   execute -> compare;
  })