- Insert script into docsify document:
<script src="//unpkg.com/docsify-kroki"></script>#Demo ## embedding it directly ```mermaid graph TD; A-->B; A-->C; B-->D; C-->D; ``` ```plantuml @startuml Alice -> Bob: Authentication Request Bob --> Alice: Authentication Response Alice -> Bob: Another authentication Request Alice <-- Bob: another authentication Response @enduml ``` ## load from external files <script> window.$docsify = { // default kroki: { langs: [ "actdiag", "blockdiag", "bpmn", "bytefield", "c4plantuml", "d2", "dbml", "ditaa", "erd", "excalidraw", "graphviz", "mermaid", "nomnoml", "nwdiag", "packetdiag", "pikchr", "plantuml", "rackdiag", "seqdiag", "structurizr", "svgbob", "symbolator", "tikz", "vega", "vegalite", "wavedrom", "wireviz", ], // default serverPath: "//kroki.io/", }, }; </script>By default, those markdown language render by kroki:
actdiag | blockdiag | bpmn | bytefield | c4plantuml |
d2 | dbml | ditaa | erd | excalidraw |
graphviz | mermaid | nomnoml | nwdiag | packetdiag |
pikchr | plantuml | rackdiag | seqdiag | structurizr |
svgbob | symbolator | tikz | vega | vegalite |
wavedrom | wireviz |
you can add more to langs array.
By default, the official Kroki server is used. If you have your own, configure it using the serverPath option: