短代碼

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" >}}

結果

代碼塊

樣式

瀏覽文檔

短代碼

語法