短代码

2024年3月15日 1 分钟阅读短代码文档

使用短代码生成 Kroki 图表。

赞助

成为我们的资助者或赞助商，以支持我们的工作。

本页内容

赞助商

语法

闭合语法

1{{< kroki _type=[type] >}}
2DIAGRAM
3{{< /kroki >}}

其与代码块用法相似。

自闭合语法

1{{< kroki _type=[type] _name=[name] />}}

参数

`_name`

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

图表文件名称，支持站点资源和页面资源。

`_type`

索引	名称	类型	必填	默认值	版本	示例
-	`_type`	`string`	✓	-	-	-

图表类型，比如：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`

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

输出的类型：inline、embed、img、object。

其他

你可以为图表设置任意属性，比如 id、class 和 data-* 等等。

示例

站点文件 Kroki 示例

assets/diagrams/hello.dot

  <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="ln">1</span><span class="cl">digraph G {Hello-&gt;World}

源码

1{{< kroki _type="graphviz" _name="diagrams/hello.dot" >}}

结果

页面文件 Kroki 示例

diagrams/mermaid.dot

  <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="ln">1</span><span class="cl">graph TD

2 A[ Anyone ] –>|Can help | B( Go to github.com/yuzutech/kroki ) 3 B –> C{ How to contribute? } 4 C –> D[ Reporting bugs ] 5 C –> E[ Sharing ideas ] 6 C –> F[ Advocating ]

源码

1{{< kroki _type="mermaid" _name="diagrams/mermaid.dot" >}}

结果

代码块

样式

浏览文档

短代码

语法