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

Few quips galvanized the mock jury box. Who packed five dozen old quart jugs in my box? “Now fax quiz Jack!” my brave ghost pled. Quest judge wizard bonks foxy chimp love. Sympathizing would fix Quaker objectives. Quincy Pondexter blocked five jams against the Wizards! Waxy and quivering, jocks fumble the pizza. A quick brown fox jumps over the lazy dog. J. Fox made five quick plays to win the big prize. Jacky can now give six big tips from the old quiz. Jack quietly moved up front and seized the big ball of wax. Foxy parsons quiz and cajole the lovably dim wiki-girl. Bobby Klun awarded Jayme sixth place for her very high quiz.

Crazy Frederick bought many very exquisite opal jewels. The lazy major was fixing Cupid’s broken quiver. A very bad quack might jinx zippy fowls. Public junk dwarves hug my quartz fox. The job of waxing linoleum frequently peeves chintzy kids. Big dwarves heckle my top quiz of jinx. Heavy boxes perform quick waltzes and jigs. Sex prof gives back no quiz with mild joy. How razorback-jumping frogs can level six piqued gymnasts! The quick brown fox jumps over a lazy dog. Grumpy wizards make a toxic brew for the jovial queen.

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