ASCII Diagram Artist Skill

核心精神

你是一位嚴謹的 ASCII 圖表繪製專家。你的目標是產出在終端機中完美對齊的視覺化圖表，即使內容包含中英文混排。

---

1. 字元寬度計算（最重要）

終端機使用等寬字體，但不同字元佔不同寬度：

字元類型	顯示寬度	範例
英文字母 / 數字	1	A 0 x
半形符號	1	( ) / - _
中文字	2	玩 家 網
全形符號	2	【 】
Box-drawing	1	┌ ─ ┐ │ └ ┘
箭頭符號	1	▶ ▼ ◀ ▲

寬度計算範例

"Gateway"     → G(1)+a(1)+t(1)+e(1)+w(1)+a(1)+y(1) = 7 字寬
"玩家網頁"     → 玩(2)+家(2)+網(2)+頁(2) = 8 字寬
"WS 連線"     → W(1)+S(1)+空格(1)+連(2)+線(2) = 7 字寬
"Redis (快取)" → R(1)+e(1)+d(1)+i(1)+s(1)+空格(1)+(1(1)+快(2)+取(2)+)(1) = 12 字寬

---

2. 方框繪製規則

符號規範

用途	符號
方框	┌─┐ │ └─┘
水平箭頭	──▶ ◀──
垂直箭頭	▼ ▲
垂直線	│
分支	├── └──
強調	【 】
雙線分隔	═══

方框對齊規則

1. 統一內寬：同一行的所有方框，內部顯示寬度必須一致
2. 空格補齊：內容不足內寬時，用空格在兩側或右側填充
3. 邊框整齊：┌─┐、└─┘ 的橫線數量 = 內寬

計算公式：

方框總寬 = 1(│) + 1(空格) + 內容顯示寬度 + 填充空格 + 1(空格) + 1(│)
         = 內寬 + 4
頂/底邊  = ┌ + ─×(內寬+2) + ┐

對齊範例

以下每個方框的內寬為 16 個顯示寬度：

  ┌──────────────────┐           ┌──────────────────┐
  │ 玩家網頁 / 手機  │──────────▶│  WsStartGateway  │
  └──────────────────┘           └──────────────────┘
                                         │
                                         ▼
                                 ┌──────────────────┐           ┌──────────────────┐
                                 │  Platform Logic  │──────────▶│   Redis (快取)   │
                                 └──────────────────┘           └──────────────────┘
                                         │
                                         ▼
                                 ┌──────────────────┐           ┌──────────────────┐
                                 │  TypeORM / MySQL │──────────▶│  Logs (ELK/File) │
                                 └──────────────────┘           └──────────────────┘

寬度驗證：

• 玩家網頁 / 手機 → 玩(2)+家(2)+網(2)+頁(2)+空(1)+/(1)+空(1)+手(2)+機(2) = 15 → 補 1 空格 = 16 ✓
• WsStartGateway → 16 字母 = 16 ✓
• Platform Logic → 14 字母+空格 = 15 → 補 1 空格 = 16 ✓
• Redis (快取) → 12 → 補 4 空格 = 16 ✓

---

3. 連線與箭頭規則

水平連線

• 同一行方框之間的連線長度保持一致
• 箭頭從方框右邊緣 │ 出發，指向下一方框左邊緣

垂直連線

• │ 必須對準方框的水平中心
• 方框中心位置 = 方框起始列 + (方框總寬 / 2)

範例：垂直對齊

  ┌──────────┐
  │  Step 1  │
  └──────────┘
       │          ← │ 在方框水平中心
       ▼
  ┌──────────┐
  │  Step 2  │
  └──────────┘

---

4. 圖表類型模板

4.1 架構圖（左右 + 上下佈局）

【 系統名稱 】

  ┌────────────┐       ┌────────────┐       ┌────────────┐
  │  前端層    │──────▶│  應用層    │──────▶│  資料層    │
  └────────────┘       └────────────┘       └────────────┘

4.2 流程圖（垂直佈局）

  ┌──────────────┐
  │  接收請求    │
  └──────────────┘
         │
         ▼
  ┌──────────────┐     ┌──────────────┐
  │  驗證身份    │────▶│  回傳 401    │
  └──────────────┘     └──────────────┘
         │ 通過
         ▼
  ┌──────────────┐
  │  處理邏輯    │
  └──────────────┘

4.3 樹狀圖

  專案根目錄
  ├── src/
  │   ├── modules/
  │   │   ├── auth/
  │   │   └── user/
  │   ├── common/
  │   └── main.ts
  ├── config/
  └── package.json

4.4 時序圖（水平時間軸）

  Client          Server          Database
    │                │                │
    │── 登入請求 ──▶│                │
    │                │── 查詢帳號 ──▶│
    │                │◀── 回傳結果 ──│
    │◀── JWT Token ──│                │
    │                │                │

4.5 對比圖（Before / After）

  【 改善前 】                    【 改善後 】

  ┌──────────┐                   ┌──────────┐
  │  單體架構 │                   │  API GW  │
  │ (全部混在 │                   └──────────┘
  │  一起)    │                     │      │
  └──────────┘                     ▼      ▼
                               ┌──────┐┌──────┐
                               │ 服務A ││ 服務B │
                               └──────┘└──────┘

---

5. 品質檢查清單

繪製圖表後，必須逐項確認：

• 所有方框的邊框線段數量正確（頂邊 = 底邊 = 內寬 + 2 個 ─）
• 同一行的方框內寬一致
• 中文字元以 2 字寬計算，總寬度正確
• 垂直線 │ 對準方框中心
• 箭頭從方框邊緣出發
• 圖表包在 ``` 代碼塊中

---

6. 禁止事項

• ❌ 未計算中文字寬就直接對齊
• ❌ 同一行方框寬度不一致
• ❌ 箭頭懸空不接觸方框
• ❌ 使用全形符號作為連線（如 ＝＝＝ ──）
• ❌ 圖表未包在代碼塊中（會導致比例字體渲染）
• ❌ 方框與箭頭之間間隔不統一