Generate SVG diagrams with the Kroki service by placing textual diagram descriptions into Markdown code blocks.

Kroki produces a growing number of diagram types from textual descriptions. Their public server is free of charge and its software gets published as open-source. You can run our own instance in case you don’t want to rely on theirs.

This theme includes a codeblock render hook which allows to enhance the diagrams in a similar way as images.

The following examples of supported diagram types are taken from the Kroki page.

Mermaid

This is the same diagram as the last one on the Mermaid page.

If you are pleased with the results from Kroki for your type of Mermaid diagram, you should seriously consider generating Mermaid diagrams like this. Server-side rendered SVGs don’t need client-side processing anymore and will show up immediately on your page.
Diag 1: If you are pleased with the results from Kroki for your type of Mermaid diagram, you should seriously consider generating Mermaid diagrams like this. Server-side rendered SVGs don’t need client-side processing anymore and will show up immediately on your page.

Block

blockdiagblockdiag { Kroki -> generates -> "Block diagrams"; Kroki -> is -> "very easy!"; Kroki [color = "greenyellow"]; "Block diagrams" [color = "pink"]; "very easy!" [color = "orange"]; }KrokigeneratesisBlock diagramsvery easy!

BPMN

Bytefield

Sequential

blockdiagseqdiag { browser -> webserver [label = "GET /seqdiag/svg/base64"]; webserver -> processor [label = "Convert text to image"]; webserver <-- processor; browser <-- webserver; }browserwebserverprocessorGET /seqdiag/svg/base64Convert text to image

Action

blockdiagactdiag { write -> convert -> image lane user { label = "User" write [label = "Writing text"]; image [label = "Get diagram image"]; } lane Kroki { convert [label = "Convert text to image"]; } }UserKrokiWriting textConvert text to imageGet diagram image

Network

Packet

Rack

Crazy Frederick bought many very exquisite opal jewels. Hick dwarves jam blitzing foxy quip. Bawds jog, flick quartz, vex nymphs. Quincy Pondexter blocked five jams against the Wizards! A quick movement of the enemy will jeopardize six gunboats. JCVD might pique a sleazy boxer with funk. A wizard’s job is to vex chumps quickly in fog. A quivering Texas zombie fought republic linked jewelry. Glib jocks quiz nymph to vex dwarf. The jay, pig, fox, zebra and my wolves quack! Jackie will budget for the most expensive zoology equipment. Quirky spud boys can jam after zapping five worthy Polysixes. A very big box sailed up then whizzed quickly from Japan.

Vex quest wizard, judge my backflop hand. Fax back Jim’s Gwyneth Paltrow video quiz. Big fjords vex quick waltz nymph. My ex pub quiz crowd gave joyful thanks. Quizzical twins proved my hijack-bug fix. Quincy Pondexter blocked five jams against the Wizards! Quick blowing zephyrs vex daft Jim. Go, lazy fat vixen; be shrewd, jump quick. Grumpy wizards make a toxic brew for the jovial queen. Twelve ziggurats quickly jumped a finch box. Lovak won the squad prize cup for sixty big jumps.

DitAA

UserrequestKrokiinflateDitaaprocess

Erd

PersonPersonnameheightweightbirth_location_idLocationLocationidcitystatecountryPerson--Location10..N

Excalidraw

D2

DBML

GraphViz

Dcluster_pKrokicluster_c1Servercluster_gc_1Docker/Servercluster_gc_2Docker/Mermaidcluster_c2CLIFilebeatFilebeatJavaJavaNode.jsNode.jsPuppeteerPuppeteerChromeChromeGolangGolang

NOMNOML

Pikchr

PlantUML

C4 with PlantUML

Structurizr

Software System - System ContextUser[Person]Software System[Software System]Uses!!!

Vega

Vega Lite

Wavedrom

Wireviz