図表（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/

Mermaid（ビルド時）#

mermaid.mode: build にすると @mermaid-js/mermaid-cli（mmdc）で SVG を生成します。クライアント loader は不要です。

ssg.sorane.dev は Pages ビルドを軽く保つため client モードを使っています（このページの Mermaid はクライアント描画）。CI で Chromium を入れられるサイトは build モードも選べます。詳細は デプロイ を参照してください。

build:
  diagrams:
    mermaid:
      mode: build
      mmdc: mmdc

Graphviz（ビルド時）#

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

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

D2（ビルド時）#

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

設定#

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