Code Block
Generate Kroki diagrams by using code block.
Donate
Become a backer or sponsor to support our work.
On this page
Sponsors
Syntax
1```kroki {_type=[type]}
2DIAGRAM
3```
Parameters
_type
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
| - | _type | string | ✓ | - | - | - |
The diagram type, such as blockdiag, bpmn, bytefield, seqdiag, actdiag, nwdiag, packetdiag, rackdiag, c4plantuml, d2, dbml, ditaa, erd, excalidraw, graphviz, mermaid, nomnoml, pikchr, plantuml, structurizr, svgbob, symbolator, tikz, vega, vegalite, wavedrom, wireviz.
_output
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
| - | _output | string | - | inline | - | - |
The type of output: inline, embed, img, object.
Others
You can set any attributes for diagrams, such as id, class and data-*.
Examples
Inline SVG Kroki Example
Source
1```kroki {_type=plantuml}
2skinparam ranksep 20
3skinparam dpi 125
4skinparam packageTitleAlignment left
5
6rectangle "Main" {
7 (main.view)
8 (singleton)
9}
10rectangle "Base" {
11 (base.component)
12 (component)
13 (model)
14}
15rectangle "<b>main.ts</b>" as main_ts
16
17(component) ..> (base.component)
18main_ts ==> (main.view)
19(main.view) --> (component)
20(main.view) ...> (singleton)
21(singleton) ---> (model)
22```Result
Embed SVG Kroki Example
Source
1```kroki {_type=d2 _output=embed}
2D2 Parser: {
3 shape: class
4
5 # Default visibility is + so no need to specify.
6 +reader: io.RuneReader
7 readerPos: d2ast.Position
8
9 # Private field.
10 -lookahead: "[]rune"
11
12 # Protected field.
13 # We have to escape the # to prevent the line from being parsed as a comment.
14 \#lookaheadPos: d2ast.Position
15
16 +peek(): (r rune, eof bool)
17 rewind()
18 commit()
19
20 \#peekn(n int): (s string, eof bool)
21}
22
23"github.com/terrastruct/d2parser.git" -> D2 Parser
24```Result
Kroki Example With Custom Attributes
Source
1```kroki {_type=blockdiag id="example-blockdiag" class="kroki-blockdiag" data-value="blockdiag"}
2blockdiag {
3 Kroki -> generates -> "Block diagrams";
4 Kroki -> is -> "very easy!";
5
6 Kroki [color = "greenyellow"];
7 "Block diagrams" [color = "pink"];
8 "very easy!" [color = "orange"];
9}
10```Result