D2対応 & mermaidサーバーレンダリング

[riiimparm]

変更内容

D2記法のコードブロックに対応。

• サーバーサイドでd2コードブロックをSVGに変換
• mermaidもサーバーサイドレンダリングに変更
• package.json/pnpm-lock.yaml: @terrastruct/d2を追加

---

d2

---

mermaid

テスト用md(mermaid)

---
title: mermaidビルド時レンダリング検証用デモ
description: 'mermaidビルド時SVGレンダリング検証用の記事です。'
author: 'RiiiM'
tags: [Tech]
pubDate: '2026-08-29'
---

mermaidをd2と同じくビルド時にNode(puppeteer)上でSVGレンダリングし、d2と共通のクラス(diagram-container/diagram-frame)でサイジングされることを確認します。

## フローチャート

```mermaid
flowchart TD
  A[開始] --> B{条件分岐}
  B -->|Yes| C[処理A]
  B -->|No| D[処理B]
  C --> E[終了]
  D --> E
```

## シーケンス図

```mermaid
sequenceDiagram
  participant Client
  participant Server
  participant DB
  Client->>Server: リクエスト
  Server->>DB: クエリ
  DB-->>Server: 結果
  Server-->>Client: レスポンス
```

## 縦長のグラフ(高さ制約確認用)

```mermaid
flowchart TD
  A --> B --> C --> D --> E --> F --> G --> H --> I --> J --> K
```

## ガントチャート

```mermaid
gantt
  title プロジェクトスケジュール
  dateFormat  YYYY-MM-DD
  section 設計
  要件定義      :a1, 2026-01-01, 5d
  基本設計      :a2, after a1, 7d
  section 実装
  開発          :a3, after a2, 14d
  テスト        :a4, after a3, 7d
```

## 円グラフ

```mermaid
pie title 言語別コミット数
  "TypeScript" : 45
  "Astro" : 30
  "CSS" : 15
  "その他" : 10
```

テスト用md(d2用)

---
title: D2コードブロックのサイズ調整検証用デモ
description: 'D2コードブロックのサイズ調整検証用の記事です。'
author: 'RiiiM'
tags: [Tech]
pubDate: '2026-08-13'
---

D2コードブロックのサイズ調整検証用の記事です。デスクトップ幅では横幅80vw・縦幅90vhの制約でアスペクト比を保ったまま表示されることを確認します。

## 横長のD2図(幅80vw基準で収まるケース)

```d2
a -> b: 1
a -> c: 2
a -> d: 3
a -> e: 4
a -> f: 5
a -> g: 6
a -> h: 7
a -> i: 8
a -> j: 9
a -> k: 10
```

## 縦長のD2図(高さ90vh制約でスケールダウンされるケース)

```d2
a -> b
b -> c
c -> d
d -> e
e -> f
f -> g
g -> h
h -> i
i -> j
j -> k
```

## コンテナ(ネスト)の例

```d2
cell tower: {
  satellites: {
    shape: package
  }
  satellites -> transmitter
}

online portal: {
  ui: {
    shape: hexagon
  }
}

data processor: {
  storage: {
    shape: cylinder
    style.multiple: true
  }
}

cell tower.satellites -> data processor.storage: transmit
online portal.ui -> data processor.storage
```

## 多様なシェイプ+スタイルの例

```d2
person: {
  shape: person
}
cloud: {
  shape: cloud
}
queue: {
  shape: queue
}
db: {
  shape: cylinder
  style.multiple: true
}
important: {
  shape: hexagon
  style.fill: "#38bdf8"
  style.stroke: "#0f172a"
  style.shadow: true
}
flagged: {
  style.fill: "#22d3ee"
  style.double-border: true
}
cube: {
  label: 3D Box
  style.3d: true
  style.fill: "#38bdf8"
}

person -> cloud
cloud -> queue
queue -> db
db -> important
important -> flagged
flagged -> cube
```

## 接続線のスタイルバリエーションの例

```d2
a -> b: normal
a -> c: dashed {
  style.stroke-dash: 4
}
a -> d: thick {
  style.stroke-width: 5
}
a <-> e: bidirectional
```


```d2
direction: right

web: {
  shape: circle
  label: "Web Browser"
}

lb: {
  shape: hexagon
  label: "Load Balancer"
}

app1: "App Server 1"
app2: "App Server 2"
app3: "App Server 3"

db: {
  shape: cylinder
  label: "Database"
}

web -> lb
lb -> app1
lb -> app2
lb -> app3
app1 -> db
app2 -> db
app3 -> db
```

[naoki-00-ito]

@riiimparm
style指定を src/layouts/BlogLayout.astro に寄せれないかな
当たらなそうだったらこのままでもOK！

[riiimparm]

d2のあるページだけにstyle追加したいのでBlogLayoutには入れないかな。後述コメにてクライアントレンダリングやめるからstyle変わるかも
mermaidと統合したほうがいいのもそうだなぁ、BlogLayoutで統合できるかみてみる

[riiimparm]

@naoki-00-ito ダークテーマ化やめてデフォルトテーマにしました。ダイアグラム用のリサイズをBlogLayout.astroに寄せた

[naoki-00-ito]

cdnでなく、package.jsonで管理している @terrastruct/d2 使えないかな？

Suggested change

	"https://esm.sh/@terrastruct/d2@0.1.33"
	"@terrastruct/d2"

[riiimparm]

@terrastruct/d2による事前レンダリングに変更

[riiimparm]

mermaidもcdnなのでテーマ合わせる意味でもこのブランチで一緒に直しちゃったほうがいいか

[riiimparm]

@naoki-00-ito cdnやめた! サーバーレンダリングをd2, mermaid双方で行うようにしました

[riiimparm]

フォーマットエラーだが #191 マージ後に解消予定