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

[riiimparm]

変更内容

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

• @terrastruct/d2をCDNから動的importし、クライアントサイドでd2コードブロックをSVGに変換。配色はmermaidと同じダークテーマ
• package.json/pnpm-lock.yaml: @terrastruct/d2を追加

テスト用md

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

[naoki-00-ito]

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

[riiimparm]

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

[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なのでテーマ合わせる意味でもこのブランチで一緒に直しちゃったほうがいいか