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

Quincy Pondexter blocked five jams against the Wizards! Have a pick: twenty-six letters — no forcing a jumbled quiz! My faxed joke won a pager in the cable TV quiz show. When zombies arrive, quickly fax judge Pat. GQ jock wears vinyl tuxedo for showbiz promo. J. Fox made five quick plays to win the big prize. “Now fax quiz Jack!” my brave ghost pled. Six big devils from Japan quickly forgot how to waltz. Bobby Klun awarded Jayme sixth place for her very high quiz. Battle of Thermopylae: Quick javelin grazed wry Xerxes. Heavy boxes perform quick waltzes and jigs. Hick dwarves jam blitzing foxy quip. Then a cop quizzed Mick Jagger’s ex-wives briefly.

J. Fox made five quick plays to win the big prize. My ex pub quiz crowd gave joyful thanks. Pack my box with five dozen liquor jugs. Brick quiz whangs jumpy veldt fox. Brawny gods just flocked up to quiz and vex him. The five boxing wizards jump quickly. Fox nymphs grab quick-jived waltz. Vex quest wizard, judge my backflop hand. Kvetching, flummoxed by job, W. zaps Iraq. Painful zombies quickly watch a jinxed graveyard. Sixty zips were quickly picked from the woven jute bag.

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