浏览文档

代码块

通过使用代码块生成 Kroki 图表。

语法

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

参数

_type

索引名称类型必填默认值版本示例
-_typestring---

图表类型,比如:blockdiagbpmnbytefieldseqdiagactdiagnwdiagpacketdiagrackdiagc4plantumld2dbmlditaaerdexcalidrawgraphvizmermaidnomnomlpikchrplantumlstructurizrsvgbobsymbolatortikzvegavegalitewavedromwireviz

_output

索引名称类型必填默认值版本示例
-_outputstring-inline--

输出的类型:inlineembed

其他

你可以为图表设置任意属性,比如 idclassdata-* 等等。

示例

内联 SVG Kroki 示例

源码
 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```
结果
MainBasemain.viewsingletonbase.componentcomponentmodelmain.ts

Embed SVG Kroki 示例

源码
 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```
结果

带有自定义属性的 Kroki 示例

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