ZU
zuisong/docsify-kroki
A docsify plugin to render graph like plantuml, mermaid, ..etc
docsify-kroki
Install
- Insert script into docsify document:
<script src="//unpkg.com/docsify-kroki"></script>Usage
#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
Options
<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>langs
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.
serverPath
By default, the official Kroki server is used. If you have your own, configure
it using the serverPath option: