ascii-diagramlisted

# ASCII Diagram — 会話内の即席図解 ## 原則 1. **その場で読める最小の図**を描く。HTML 生成のトークンコストをかけずに構造を伝えるのが役割 2. 図は**等幅前提**。1行の幅は最大 100 桁（ターミナル・チャット両対応） 3. **図の中のテキストは半角英語のみ**（箱ラベル・矢印ラベル・注記・タイトルすべて）。全角文字は環境により幅が揺れて罫線が崩れるため、コードブロック内には入れない 4. 図中の英語は**平易な語彙で短く**: 中学英語レベルの単語・名詞句中心（`Start` `Check` `Save file` `retry x3` 程度）。凝った言い回し・長文にしない。迷ったら図中は短い英語、説明は図の外の日本語に置く 5. 図だけで完結させない: 図の直後に1-3行の**日本語**で「読み方・要点」を添える。日本語での補足説明はすべてここで行う 6. 要素が多すぎて崩れるなら、詳細を削って階層を1段落とすか、html-artifact への切替を提案する ## 罫線パレット - 箱・線: `┌ ┐ └ ┘ ─ │ ├ ┤ ┬ ┴ ┼`（基本）、`═ ║ ╔ ╗ ╚ ╝`（強調したい境界のみ） - 矢印: `→ ← ↑ ↓ ⇄ ⇒`、斜め・分岐は `/ \` か折れ線で - ラベルは箱の中に。箱の外の注記は `#` で（注記も半角英語） ## 型（用途別） **構成図 / データフロー**: ``` ┌──────────┐ ┌───────────┐ ┌──────────┐ │ Client │ ───→ │ API (BFF) │ ───→ │ DB │ └──────────┘ └─────┬─────┘ └─��────────┘ │ publish ↓ ┌───────────┐ │ Queue │ └───────────┘ ``` **シーケンス**（時系列は上から下・関与者は列）: ``` User Agent External │ request │ │ │ ───────────→ │ API call │ │ │ ───────────→ │ │ │ ←─────────── │ │ ←─────────── │ result │ ``` **状態遷移 / フロー**（分岐は条件ラベル必須）: ``` [Start] → [Check] ─ OK ─→ [Run] → [Done] │ └─ NG ─→ [Fix] ─┐ ↑──────────┘ # retry x3 max ``` **比較・対置**（2案の構造差は横並び。案の説明は図の下の日本語で）: ``` Plan A: direct call Plan B: via queue ┌────┐ ┌────┐ ┌────┐ ┌─────┐ ┌────┐ │