図表（Mermaid）

sorane は Markdown のコードフェンスで書いた図を HTML で表示します。ソースは .md 代替ファイルと OKF バンドルにそのまま残ります（bunsen Strategy A）。

Mermaid（クライアント描画）#

```mermaid フェンスを使います。alt は info string または %% alt: コメントで指定できます。

flowchart LR
  FM[YAML frontmatter] --> PARSE[parseAiDisclosure]
  PARSE --> JSONLD[BlogPosting JSON-LD]
  PARSE --> HTML[EU バッジ]
  JSONLD --> AGENTS[エージェント]
  HTML --> HUMAN[読者]

シーケンス図#

sequenceDiagram
  participant MD as content/*.md
  participant BUILD as runBuild
  participant DIST as dist/
  MD->>BUILD: parse + render
  BUILD->>DIST: HTML + assets/diagrams/

Graphviz（ビルド時 SVG）#

build.diagrams.graphviz.enabled: true と Graphviz dot CLI が必要です。

digraph G {
  render -> build
  build -> dist
}

D2（ビルド時 SVG）#

```d2 フェンスはビルド時に SVG へコンパイルします（build.diagrams.d2.enabled: true と d2 CLI が必要）。

設定#

build.diagrams で有効化・モードを切り替えます。詳細は 設定 を参照してください。