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

Schwarzkopf vexed Iraq big-time in July. Fat hag dwarves quickly zap jinx mob. BlewJ’s computer quiz favored proxy hacking. Bawds jog, flick quartz, vex nymph. How razorback-jumping frogs can level six piqued gymnasts! Fickle jinx bog dwarves spy math quiz. Then a cop quizzed Mick Jagger’s ex-wives briefly. Jack, love my big wad of sphinx quartz! Jack quietly moved up front and seized the big ball of wax. Cozy lummox gives smart squid who asks for job pen. Quick fox jumps nightly above wizard. “Now fax quiz Jack!” my brave ghost pled. By Jove, my quick study of lexicography won a prize.

Fickle bog dwarves jinx empathy quiz. A quivering Texas zombie fought republic linked jewelry. Jackdaws love my big sphinx of quartz. Vamp fox held quartz duck just by wing. Six big devils from Japan quickly forgot how to waltz. Grumpy wizards make a toxic brew for the jovial queen. Joaquin Phoenix was gazed by MTV for luck. Fat hag dwarves quickly zap jinx mob. The wizard quickly jinxed the gnomes before they vaporized. Just poets wax boldly as kings and queens march over fuzz. Amazingly few discotheques provide jukeboxes.

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