Browse Docs

Code Block

Generate Kroki diagrams by using code block.

Syntax

1```kroki {_type=[type]}
2DIAGRAM
3```

Parameters

_type

PositionNameTypeRequiredDefaultSinceExample
-_typestring---

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

PositionNameTypeRequiredDefaultSinceExample
-_outputstring-inline--

The type of output: inline, embed.

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
MainBasemain.viewsingletonbase.componentcomponentmodelmain.ts

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
blockdiagblockdiag { Kroki -> generates -> "Block diagrams"; Kroki -> is -> "very easy!"; Kroki [color = "greenyellow"]; "Block diagrams" [color = "pink"]; "very easy!" [color = "orange"]; }KrokigeneratesisBlock diagramsvery easy!