Shortcode

March 15, 2024 2 min read Shortcode Docs

Generate Kroki diagrams by using shortcode.

Donate

Become a backer or sponsor to support our work.

On this page

Syntax

Closing Syntax

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

It’s similar to the usage of code block.

Self-Closing Syntax

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

Parameters

`_name`

Position	Name	Type	Required	Default	Since	Example
-	`_name`	`string`	-	-	-	-

The name of diagram file, site’s resource and page’s resource are supported.

`_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

Site’s File Kroki Example

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}

Source

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

Result

Page’s File Kroki Example

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 ]