Kroki Diagram Tests

This page exercises the Kroki fence conventions, which follow the obsidian-kroki plugin. Every section states what it should render as. Heavier diagrams for every block name and deliberate edge cases live in [[Misc/Kroki Edge Cases]].

Ordinary Kroki types

Each of these should render as an SVG image served from /diagrams/.

GraphViz

D2

BlockDiag

SeqDiag

Erd

Nomnoml

Svgbob

Structurizr

TikZ

WaveDrom

DBML

Locally rendered types

These types are rendered at build time by npm packages instead of the Kroki server (see src/helpers/kroki-local.js): kroki-mermaid, nomnoml, vega, vegalite, wavedrom, bytefield, dbml. The Nomnoml, WaveDrom and DBML blocks above and the kroki-mermaid block below are rendered this way; the build log shows [Kroki] Rendered locally (<type>). If a local render fails, the build falls back to the Kroki server.

Vega

Vega-Lite

Bytefield

PlantUML

Both kroki-plantuml (the obsidian-kroki block name) and plain plantuml render through Kroki.

Mermaid

kroki-mermaid renders as an image: locally via isomorphic-mermaid at build time, with the Kroki server as fallback.

Plain mermaid is NOT sent to Kroki (matching obsidian-kroki, where Obsidian renders it natively). It should become <pre class="mermaid"> and be rendered in the browser by mermaid.js.

graph TD
  A[Start] --> B[Browser]
  B --> C[End]

@from_file: includes

Path is relative to src/site/notes/. This one should render as an image:

This one points at a missing file and should render a visible error block, not break the build:

Kroki (graphviz): Included file not found: Misc/kroki-includes/does-not-exist.dot

Disabled type

diagramsnet is disabled by default (needs a self-hosted Kroki with the companion container), so this should render as a normal code block:

<mxfile><diagram name="Page-1"></diagram></mxfile>