|
| 1 | +# Diagrams |
| 2 | + |
| 3 | +The `diagram` directive allows you to render various types of diagrams using the [Kroki](https://kroki.io/) service. Kroki supports many diagram types including Mermaid, D2, Graphviz, PlantUML, and more. |
| 4 | + |
| 5 | +## Basic usage |
| 6 | + |
| 7 | +The basic syntax for the diagram directive is: |
| 8 | + |
| 9 | +```markdown |
| 10 | +::::{diagram} [diagram-type] |
| 11 | +<diagram content> |
| 12 | +:::: |
| 13 | +``` |
| 14 | + |
| 15 | +If no diagram type is specified, it defaults to `mermaid`. |
| 16 | + |
| 17 | +## Supported diagram types |
| 18 | + |
| 19 | +The diagram directive supports the following diagram types: |
| 20 | + |
| 21 | +- `mermaid` - Mermaid diagrams (default) |
| 22 | +- `d2` - D2 diagrams |
| 23 | +- `graphviz` - Graphviz/DOT diagrams |
| 24 | +- `plantuml` - PlantUML diagrams |
| 25 | +- `ditaa` - Ditaa diagrams |
| 26 | +- `erd` - Entity Relationship diagrams |
| 27 | +- `excalidraw` - Excalidraw diagrams |
| 28 | +- `nomnoml` - Nomnoml diagrams |
| 29 | +- `pikchr` - Pikchr diagrams |
| 30 | +- `structurizr` - Structurizr diagrams |
| 31 | +- `svgbob` - Svgbob diagrams |
| 32 | +- `vega` - Vega diagrams |
| 33 | +- `vegalite` - Vega-Lite diagrams |
| 34 | +- `wavedrom` - WaveDrom diagrams |
| 35 | + |
| 36 | +## Examples |
| 37 | + |
| 38 | +### Mermaid flowchart (default) |
| 39 | + |
| 40 | +::::::{tab-set} |
| 41 | + |
| 42 | +:::::{tab-item} Source |
| 43 | +```markdown |
| 44 | +::::{diagram} |
| 45 | +flowchart LR |
| 46 | + A[Start] --> B{Decision} |
| 47 | + B -->|Yes| C[Action 1] |
| 48 | + B -->|No| D[Action 2] |
| 49 | + C --> E[End] |
| 50 | + D --> E |
| 51 | +:::: |
| 52 | +``` |
| 53 | +::::: |
| 54 | + |
| 55 | +:::::{tab-item} Rendered |
| 56 | +::::{diagram} |
| 57 | +flowchart LR |
| 58 | + A[Start] --> B{Decision} |
| 59 | + B -->|Yes| C[Action 1] |
| 60 | + B -->|No| D[Action 2] |
| 61 | + C --> E[End] |
| 62 | + D --> E |
| 63 | +:::: |
| 64 | +::::: |
| 65 | + |
| 66 | +:::::: |
| 67 | + |
| 68 | +### Mermaid sequence diagram |
| 69 | + |
| 70 | +::::::{tab-set} |
| 71 | + |
| 72 | +:::::{tab-item} Source |
| 73 | +```markdown |
| 74 | +::::{diagram} mermaid |
| 75 | +sequenceDiagram |
| 76 | + participant A as Alice |
| 77 | + participant B as Bob |
| 78 | + A->>B: Hello Bob, how are you? |
| 79 | + B-->>A: Great! |
| 80 | +:::: |
| 81 | +``` |
| 82 | +::::: |
| 83 | + |
| 84 | +:::::{tab-item} Rendered |
| 85 | +::::{diagram} mermaid |
| 86 | +sequenceDiagram |
| 87 | + participant A as Alice |
| 88 | + participant B as Bob |
| 89 | + A->>B: Hello Bob, how are you? |
| 90 | + B-->>A: Great! |
| 91 | +:::: |
| 92 | +::::: |
| 93 | + |
| 94 | +:::::: |
| 95 | + |
| 96 | +### D2 diagram |
| 97 | + |
| 98 | +::::::{tab-set} |
| 99 | + |
| 100 | +:::::{tab-item} Source |
| 101 | +```markdown |
| 102 | +::::{diagram} d2 |
| 103 | +x -> y: hello world |
| 104 | +y -> z: nice to meet you |
| 105 | +:::: |
| 106 | +``` |
| 107 | +::::: |
| 108 | + |
| 109 | +:::::{tab-item} Rendered |
| 110 | +::::{diagram} d2 |
| 111 | +x -> y: hello world |
| 112 | +y -> z: nice to meet you |
| 113 | +:::: |
| 114 | +::::: |
| 115 | + |
| 116 | +:::::: |
| 117 | + |
| 118 | +### Graphviz diagram |
| 119 | + |
| 120 | +::::::{tab-set} |
| 121 | + |
| 122 | +:::::{tab-item} Source |
| 123 | +```markdown |
| 124 | +::::{diagram} graphviz |
| 125 | +digraph G { |
| 126 | + rankdir=LR; |
| 127 | + A -> B -> C; |
| 128 | + A -> C; |
| 129 | +} |
| 130 | +:::: |
| 131 | +``` |
| 132 | +::::: |
| 133 | + |
| 134 | +:::::{tab-item} Rendered |
| 135 | +::::{diagram} graphviz |
| 136 | +digraph G { |
| 137 | + rankdir=LR; |
| 138 | + A -> B -> C; |
| 139 | + A -> C; |
| 140 | +} |
| 141 | +:::: |
| 142 | +::::: |
| 143 | + |
| 144 | +:::::: |
| 145 | + |
| 146 | +## Error handling |
| 147 | + |
| 148 | +If the diagram content is empty or the encoding fails, an error message will be displayed instead of the diagram. |
0 commit comments