ダイアグラムデザイン

インラインSVGとCSSを含む自己完結型HTMLファイルとして、視覚的なダイアグラムを作成できます。意見のあるエディトリアルデザインシステムに従っています。

13種類のダイアグラム。1つの共有デザインシステム、複雑性予算、および判断ゲート。タイプ固有の規約はreferences/に存在し、タイプを選択したときのみ読み込まれます。

---

0. 初回セットアップ — スタイルガイドゲート

新しいプロジェクトで最初のダイアグラムを生成する前に、スタイルガイドがカスタマイズされていることを確認してください。

references/style-guide.mdを開き、デフォルトトークンを確認します。まだ出荷時のデフォルト(ペーパー#faf7f2、インク#1c1917、アクセント#b5523a ラスト)のままの場合、一時停止してユーザーに尋ねます:

「このプロジェクトでは初めてのダイアグラムです。スタイルガイドはまだデフォルト(ニュートラルなストーン+ラスト)です。ブランドに合わせてカスタマイズしたいですか？オプション:(a)オンボーディングを実行 — ウェブサイトから色とフォントを取得します、(b)トークンを手動で貼り付ける、(c)とりあえずデフォルトで進める。」

その後、分岐します:

• (a) → references/onboarding.mdに従い、サイトを取得し、パレット+フォントを抽出し、差分を提案し、style-guide.mdを書き込みます。
• (b) → ユーザーのトークンを受け入れ、style-guide.mdの新しい「カスタムトークン」セクションに書き込みます。
• (c) → 進めます。ユーザーはオンボーディングを後で実行できることをオプションで通知します。

スタイルガイドがカスタマイズされた後(またはユーザーが明示的にデフォルトを選択した場合)、その後の実行ではこのゲートをスキップします。カスタマイズを検出する簡単な方法: style-guide.mdのaccent値が#b5523aと異なる場合、カスタマイズされたと想定します。

デフォルトスキンのダイアグラムをブランド付きプロジェクトにサイレントに出荷しないでください — これはこのゲートが防ぐために存在する失敗パターンです。

---

1. 哲学

最高品質の判断は通常、削除です。

.impeccable.mdから:「確信した抑制。すべての要素を稼いでください。1つのカラーアクセント、2つのファミリー、小さなスペーシング語彙。それを削除してもページが傷つかないなら、削除してください。」

ダイアグラムに適用:

• すべてのノードは別個のアイデアを表します。常に一緒に移動する2つのノードは1つのノードです。
• すべての接続は情報を伝えます。レイアウトから関係が明白な場合、線を削除します。
• コーラルはエディトリアル、フラグではありません。 1～2個のフォーカルノード(ダイアグラムあたり)。5つのノードで使用するとシグナルが消えます。
• ダイアグラムは、すべてが追加されたときに完成ではありません。何も削除できないときに完成です。

ターゲット密度:4/10。 技術的に完全であるのに十分です。ガイドが必要なほど密ではありません。9ノード以上の場合、おそらく2つのダイアグラムです。

---

2. 使用時期

13種類のダイアグラム(§3)のいずれかを使用します。リーダーが散文、表、または箇条書きリストよりも視覚から学ぶ場合。

使用しないでください:

• クイックユニコードダイアグラム → wiretextを使用します。
• 物のリスト → 表または箇条書き。
• シンプルなビフォー/アフター → 表。
• ワンシェイプ「ダイアグラム」→ 文を書くだけです。

描く前に、尋ねます:リーダーはこれからよく書かれたパラグラフよりも学ぶでしょうか? いいえの場合、描きません。

---

3. ダイアグラムタイプ

選択ガイド

表示内容	使用	リファレンス
システムのコンポーネント+接続	アーキテクチャ	type-architecture.md
分岐を伴う決定ロジック	フローチャート	type-flowchart.md
アクター間の時間順メッセージ	シーケンス	type-sequence.md
ステート+トランジション+ガード	ステートマシン	type-state.md
エンティティ+フィールド+リレーションシップ	ER/データモデル	type-er.md
時間に位置付けられたイベント	タイムライン	type-timeline.md
ハンドオフを伴うクロスファンクショナルプロセス	スイムレーン	type-swimlane.md
2軸配置/優先順位付け	クワドラント	type-quadrant.md
包含/スコープを介した階層	ネスト	type-nested.md
親→子関係	ツリー	type-tree.md
スタックされた抽象化レベル	レイヤースタック	type-layers.md
セット間のオーバーラップ	ベン図	type-venn.md
ランク付き階層またはコンバージョンドロップオフ	ピラミッド/ファネル	type-pyramid.md

経験則:

• 3列の表が同じことを伝えるなら、表を選びます。
• 2つのタイプを組み合わせる場合、支配的な軸を選びます — 文法を混合しないでください。
• 複雑性予算を超えた場合(§7)、概要+詳細に分割します。

描く前に、関連するreferences/type-*.mdを常に読み込んでください — レイアウト規約、アンチパターン、そのタイプの例ファイルが含まれています。

---

4. ユニバーサルアンチパターン

これらは任意のタイプの「AI slop」ダイアグラムをマークします:

アンチパターン	失敗する理由
ダークモード+シアン/パープルグロー	デザイン決定なしで「テクニカル」に見える
JetBrains Monoを総括的な「dev」フォントとして	モノはテクニカルコンテンツ — ポート、コマンド、URL用。名前はGeist sansに。
すべてのノードに同一のボックス	階層を消す
ダイアグラム領域内にフローティングレジェンド	ノードと衝突
マスキング矩形なしの矢印ラベル	線を通して出血
矢印の垂直writing-modeテキスト	読めない
デフォルトとしての3つの等幅サマリーカード	ジェネリックグリッド — 幅を変更
任意の要素へのシャドウ	シャドウはアウト。ボーダーはイン。
ボックスのrounded-2xl	最大半径6～10px、またはなし
すべての「重要な」ノードのコーラル	コーラルは1～2個のエディトリアルアクセント、シグナリングシステムではない

タイプ固有のアンチパターンは各references/type-*.mdに存在します。

---

5. デザインシステム

デザインシステムはスキン可能です。 すべての色、タイポグラフィ、トークンは単一の情報源に存在します — references/style-guide.md。このファイルはセマンティックロール(paper、ink、muted、accent、link、…)について説明します。デフォルトスキンはlittlemight.com(暖かいペーパー、インク、コーラル)です。自身のブランドを適用するには、style-guide.mdを直接編集するか、references/onboarding.mdで説明されているURL ベースのフローを実行します。

以下またはタイプリファレンスの仕様が「ink」、「accent」、「muted」などと言及する場合、style-guide.mdで現在の16進値を確認します。

セマンティックロール(概要)

ロール	目的
paper、paper-2	ページBGおよびコンテナBG
ink	プライマリテキスト/ストローク
muted、soft	セカンダリテキスト、デフォルト矢印、サブラベル
rule、rule-solid	ヘアラインボーダー
accent、accent-tint	1～2個のフォーカル要素(ダイアグラムあたり)
link	HTTP/APIコール、外部矢印

フォーカルルール: accentは最大1～2個の要素に行きます。その他はすべてink/muted/softです。4つのことをアクセントしたいなら、まだフォーカルが決定していません。

ノードタイプ→処理

タイプ	フィル	ストローク
フォーカル(最大1～2個)	accent-tint	accent
バックエンド/API/ステップ	white	ink
ストア/ステート	ink @ 0.05	muted
外部/クラウド	ink @ 0.03	ink @ 0.30
入力/ユーザー	muted @ 0.10	soft
オプション/非同期	ink @ 0.02	ink @ 0.20 dashed 4,3
セキュリティ/境界	accent @ 0.05	accent @ 0.50 dashed 4,4

タイポグラフィ(サマリー — style-guide.mdで完全仕様)

• タイトル — Instrument Serif、1.75rem、400 — H1のみ
• ノード名 — Geist(sans)、12px、600 — 人間が読めるラベル
• サブラベル — Geist Mono、9px — ポート、URL、フィールドタイプ
• アイブロー/タグ — Geist Mono、7～8px、大文字、トラッキング — タイプタグ、軸ラベル
• 矢印ラベル — Geist Mono、8px — 矢印上の注釈
• エディトリアルアサイド — Instrument Serif italic、14px — コールアウトのみ

モノはテクニカルコンテンツ用です。 名前はGeist sansです。ページタイトルはInstrument Serifです。イタリックInstrument Serifは注釈コールアウト用に予約されています。JetBrains Monoを総括的な「dev」フォントとして使用しないでください。

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

---

6. コアSVGプリミティブ

ユニバーサルビルディングブロック。タイプ専用プリミティブ(lifeline、activation bar、region)は関連するreferences/type-*.mdに存在します。オプショナルプリミティブ:

• エディトリアルコールアウト → primitive-annotation.md
• 手書きバリアント → primitive-sketchy.md

背景

<defs>
  <pattern id="dots" width="22" height="22" patternUnits="userSpaceOnUse">
    <circle cx="1" cy="1" r="0.9" fill="rgba(11,13,11,0.10)"/>
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#f5f4ed"/>
<rect width="100%" height="100%" fill="url(#dots)" opacity="0.6"/>

矢印マーカー(常に3つすべて定義)

<marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
  <polygon points="0 0, 8 3, 0 6" fill="#52534e"/>
</marker>
<marker id="arrow-accent" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
  <polygon points="0 0, 8 3, 0 6" fill="#f7591f"/>
</marker>
<marker id="arrow-link" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
  <polygon points="0 0, 8 3, 0 6" fill="#1a70c7"/>
</marker>

矢印	ストローク	用途
デフォルト	muted #52534e	内部、ジェネリック
アクセント	コーラル #f7591f	プライマリ/ハイライト/ヘッドライン
リンクブルー	#1a70c7	HTTP/APIコール、外部システム
ダッシュ	stroke-dasharray="5,4" + 任意の色	オプション、パッシブ、戻り、非同期

ボックスの前に矢印を描き、z順序が線をノードの後ろに配置します。

ノードボックス — 完全パターン

<!-- 1. 不透明ペーパーマスク — 矢印が透明フィルを通して出血するのを防ぐ -->
<rect x="X" y="Y" width="W" height="H" rx="6" fill="#f5f4ed"/>
<!-- 2. スタイル付きボックス -->
<rect x="X" y="Y" width="W" height="H" rx="6" fill="FILL" stroke="STROKE" stroke-width="1"/>
<!-- 3. 矩形タイプタグ(rx=2、ピルではない) -->
<rect x="X+8" y="Y+6" width="28" height="12" rx="2" fill="transparent" stroke="STROKE@0.40" stroke-width="0.8"/>
<text x="X+22" y="Y+15" fill="STROKE@0.8" font-size="7" font-family="'Geist Mono', monospace"
      text-anchor="middle" letter-spacing="0.08em">API</text>
<!-- 4. ノード名(Geist sans — 人間が読める) -->
<text x="CX" y="CY+2" fill="#0b0d0b" font-size="12" font-weight="600"
      font-family="'Geist', sans-serif" text-anchor="middle">Node Name</text>
<!-- 5. テクニカルサブラベル(Geist Mono) -->
<text x="CX" y="CY+18" fill="#52534e" font-size="9"
      font-family="'Geist Mono', monospace" text-anchor="middle">tech:port</text>

矢印ラベル — 常にマスク

すべての矢印ラベルの後ろに不透明な矩形が必要です。ないと線を通して出血します。

<rect x="MID_X-18" y="ARROW_Y-12" width="36" height="12" rx="2" fill="#f5f4ed"/>
<text x="MID_X" y="ARROW_Y-3" fill="#65655c" font-size="8"
      font-family="'Geist Mono', monospace" text-anchor="middle" letter-spacing="0.06em">WRITE</text>

ルール:14文字以下、すべて大文字、セグメント中点に中央、線の上8～10px。垂直writing-modeは使用しないでください。

レジェンド — 下部の水平ストリップ

レジェンドをダイアグラム領域の内部に配置しないでください。 すべてのノード後の水平ストリップとして、ヘアライン区切りで配置:

<line x1="30" y1="LEGEND_Y-8" x2="VIEWBOX_W-30" y2="LEGEND_Y-8"
      stroke="rgba(11,13,11,0.10)" stroke-width="0.8"/>
<text x="30" y="LEGEND_Y+8" fill="#52534e" font-size="8" font-family="'Geist Mono', monospace"
      letter-spacing="0.14em">LEGEND</text>
<!-- アイテム — 水平行、約160pxずつ離隔 -->

SVG viewBoxの高さを約60px拡張します。

---

7. レイアウト&スペーシング

4pxグリッド

すべての値 — フォントサイズ、パディング、ノードサイズ、ギャップ、x/y座標 — 4で割り切れます。 交渉の余地なし。

カテゴリ	許可値
フォントサイズ	8、12、16、20、24、28、32、40
ノード幅/高さ	80、96、112、120、128、140、144、160、180、200、240、320
x / y座標	4の倍数
ノード間のギャップ	20、24、32、40、48
ボックス内のパディング	8、12、16
枠線半径	4、6、8

除外:ストロークの幅(0.8、1、1.2)、不透明度値、22×22ドットパターン。

クイックチェック:座標が1、2、3、5、6、7、9で終わる場合 — 修正します。

複雑性予算(ダイアグラムごと)

制限	ルール
最大ノード	9
最大矢印/トランジション	12
最大コーラル要素	2
最大ライフライン(シーケンス)	5
最大レーン(スイムレーン)	5
最大アイテム(クワドラント)	12
最大エンティティ(ER)	8
最大ネストレベル(ネスト)	6
最大ツリー深度	4
最大レイヤー(レイヤースタック)	6
最大円(ベン図)	3
最大レイヤー(ピラミッド)	6
最大注釈コールアウト	2

超過する場合、2つのダイアグラムに分割します(概要+詳細)。

ページレイアウト

1. ヘッダー — アイブロー(Geist Mono)、タイトル(Instrument Serif)、オプショナルサブタイトル(Geist muted)。
2. ダイアグラムコンテナ — #efeee5 bg、1px rgba(11,13,11,0.12) ボーダー、8px半径、overflow-x: auto。
3. サマリーカード — 2～3列グリッド、変動幅(例:1.1fr 1fr 0.9fr)。
4. フッター — Geist Monoのコロフォン、muted、ヘアライントップボーダー。

---

8. サマリーカードパターン

3つの同一ジェネリックカードを使用しないでください。処理を変更:

<div class="card">
  <p class="eyebrow">SECTION LABEL</p>
  <div class="card-header">
    <span class="card-dot coral"></span>
    <h3>Card Title</h3>
  </div>
  <ul><li>Item</li></ul>
</div>

ルール:

• background: #ffffff(ペーパーではない — シャドウなしの軽いリフト)
• border: 1px solid rgba(11,13,11,0.12)
• border-radius: 6px、padding: 1.25rem
• box-shadowなし
• カードドット:7px、border-radius: 50% — ink / muted / coral / link / soft バリアント

---

9. 出力前チェックリスト(判断ゲート)

任意のダイアグラムを作成する前に実行します。

タイプフィット:

• 表示内容に適したタイプですか?(§3選択ガイド)
• 表/パラグラフが同じことを実現できますか?(はいなら — 描きません。)
• 一致するreferences/type-*.mdを読み込みましたか?

削除テスト:

• ノードを削除できますか?(リーダーはまだ理解できますか?)
• 2つのノードをマージできますか?(常に一緒に移動しますか?)
• 矢印を削除できますか?(レイアウトから関係は明白ですか?)
• ラベルを削除できますか?(色または形状はそれを既にシグナルしていますか?)

シグナル:

• コーラルは2個以下の要素で使用されていますか?多い場合、実際にフォーカルステータスに値するはどれですか?
• レジェンドは使用されているすべてのタイプをカバーしている — 追加のものはない?
• タイプの複雑性予算内ですか(§7)?

テクニカル:

• ボックスの前に矢印が描かれていますか?
• すべての矢印ラベルの後ろに不透明なfill="#f5f4ed"の矩形がありますか?
• レジェンドは水平下部ストリップで、フローティングではありませんか?
• 垂直writing-modeテキストはありませんか?
• viewBoxはレジェンドストリップ(約60px)に拡張されていますか?
• すべてのフォントサイズ、座標、幅、高さ、ギャップは4で割り切れますか?

タイポグラフィ:

• 人間が読める名前はGeist sansで、Geist Monoではありませんか?
• テクニカルサブラベル(ポート、コマンド、URL)はGeist Monoですか?
• ページタイトルはInstrument Serifですか?
• 注釈コールアウト(ある場合)italic Instrument Serifですか?(primitive-annotation.mdを参照)
• JetBrains Monoはどこにもありませんか?

---

10. テンプレート&バリアント

すべてのダイアグラムは3つのバリアントで出荷されます(assets/を参照):

バリアント	ファイルパターン	使用時期
ミニマルライト(デフォルト)	template.html、example-<type>.html	スクリーンショット対応。ダイアグラム+タイトル。暖かいペーパー。
ミニマルダーク	template-dark.html、example-<type>-dark.html	ダークモードサイト、スライド、高コントラスト投稿。
フルエディトリアル	template-full.html、example-<type>-full.html	ダイアグラムがヒーローである長編投稿。

スケッチバリアント(オプション、上記のいずれにでも適用) — primitive-sketchy.mdを参照。SVGタービュランスフィルターはストロークを揺らして手書き感を出します。エッセイには良いですが、テクニカルドキュメントには適していません。

新しいダイアグラムを作成するには

1. 最初のバリアント(ミニマルならtemplate.html、カード用ならtemplate-full.html)をコピーします。
2. 一致するreferences/type-<name>.mdを読み込んでレイアウト規約を確認します。
3. アイブロー、h1、SVG本体を置き換えます。
4. §9判断