圖表設計
若為韓文請求，圖表中的所有文字（標題、標籤、輔助說明、圖例）皆以韓文書寫，僅保留必要的英文專有名詞。當詢問品牌風格時，若使用者未指定，則直接以預設風格進行。 （韓文版修改：방구석프로 bangpro.ai.kr · 原始版本：github.com/cathrynlavery/diagram-design，MIT 授權）
建立圖表為自包含的 HTML 檔案，內嵌 SVG 並採用編輯設計系統。
四十五種視覺類型。語意模式描述行為；類型參考描述佈局。
0. 首次設定 — 風格指南檢查閘
在為新專案產生第一張圖表之前，請確認風格指南已經過客製化。
不要無聲地將預設外觀的圖表放入已建立品牌的專案中。
首先，依照 references/profiles.md 解析專案中任何 .diagram-design 標記；成功解析的標記會選取對應的設定檔並跳過此閘。該參考文件負責處理失敗情況、受保護的預設設定以及儲存行為。
開啟 references/style-guide.md 並檢查預設的 token。如果它們仍然是出廠預設值（背景 #f5f5f5、文字 #2d3142、強調色 #bf4520），請暫停並詢問使用者：
"這是您在此專案中的第一張圖表，且風格指南仍為預設值。是否要立即客製化？選項：(a) 網站 URL，(b) 已安裝的技能，(c) 本機資料夾/設計系統，(d) 貼上 token，(e) 保留預設，(f) 載入已儲存的設定檔。"
然後根據 references/onboarding.md 的對應章節進行分支處理；對於 (f)，請遵循 references/profiles.md。
一旦風格指南已客製化（或使用者明確選擇預設值），之後的執行將跳過此閘。領先的設定檔標頭會指明已複製的啟用中設定檔。如果沒有標頭，任何與出廠預設值不同的語意角色值或字型家族都表示 已客製但未儲存：跳過閘門並提供儲存為設定檔的選項。所有 token 皆為預設值且沒有標記/標頭時，則觸發閘門。在入職流程後，提供儲存為命名的客戶設定檔的選項，詳見 references/profiles.md。
1. 設計哲學
最高品質的動作通常是刪除。
應用於示意圖：
- 每個節點代表一個獨特的概念。兩個總是同時出現的節點應合併為一個。
- 每條連線都承載資訊。如果從佈局就能看出關係，請移除該線條。
- 珊瑚色是 編輯強調，而非標記。 每張圖表使用 1–2 個焦點節點。在 5 個節點上使用它會抹滅訊號。
- 示意圖不是加入所有東西才算完成。而是當沒有任何東西可以移除時才算完成。
目標密度：4/10。 足以在技術上完整。但不會密集到需要指南。超過 9 個節點，通常應該拆分為兩張圖表。
2. 何時使用
當讀者從視覺化圖表中能比從文字、表格或項目清單學到更多時，即可使用 45 種視覺類型（§3）中的任何一種。
不適用於：
- 快速 Unicode 圖表 → 使用如 wiretext 的獨立純文字工具。此技能不包含此功能。
- 清單 → 使用表格或項目符號。
- 僅屬性的前後比較 → 使用表格；拓撲變更 → 使用架構差異圖。
- 單一形狀的「圖表」→ 直接撰寫句子。
在繪製前，請問：讀者從這張圖中學到的會比從一段優質段落中學到的多嗎？ 如果不會，就不要繪製。
3. 選擇：先語意模式，再視覺類型
當行為、狀態、強制或風險承載意義時，先載入 references/semantic-patterns.md 並選擇一個主要模式。然後選擇最接近的視覺類型進行佈局。如果沒有模式匹配，則直接選擇類型。
| 行為觸發條件 | 語意模式 → 最接近的類型 |
|---|---|
| 扇入、佇列深度、有限容量、瓶頸 | 扇入佇列 / 瓶頸 → 資料流 |
| 跨階段的反覆問題/輸入/治理/輸出插槽 | 帶語意插槽的階段框架 → 流程 |
| 對話或鬆散的輸入轉變為結構化的持久產出 | 非結構化輸入 → 結構化產出 → 資料流 |
| 兩個規則追蹤需要通過/失敗/跳過/未到達及首次分歧 | 配對政策評估追蹤 → 流程圖 |
| 信任邊界加上允許/禁止的入口或部署路徑 | 安全鋪設道路 → 架構 |
| 依執行位置分組的控制項 | 治理 / 控制目錄 → 層次堆疊 |
| 防禦措施彌補先前的漏洞，且殘餘風險會傳播 | 補償性安全層 → 層次堆疊 |
| 階層式、可透過 ID 定址的分解，需要每個區塊的 I/O、約束和程式碼連結 | 可追蹤區塊分解 → 樹狀圖 |
| 一個主體經歷階段、等待、重試、取消和最終結果 | 生命週期階段圖 → 狀態機 |
模式擁有語意基元和其較嚴格的預算；類型擁有佈局語法。僅在要求動畫或動畫能實質闡明有序變更時使用 references/animation.md；靜態仍為預設。
視覺類型指南（45 種）
| 如果展示… | 使用 | 參考資料 |
|---|---|---|
| 單一快照中的元件 + 連線；嵌入的管理與流量範圍 | 架構圖 | type-architecture.md |
| 同步的 Before / After 拓撲之間的結構變更，附有變更記錄 | 架構差異圖 | type-architecture-delta.md |
| 按階段或部門劃分的舊有 IT 環境；顯示 現狀 | IT 現狀圖 | type-it-state.md |
| 具有分支的決策邏輯 | 流程圖 | type-flowchart.md |
| 參與者之間按時間排序的訊息 | 時序圖 | type-sequence.md |
| 狀態 + 轉換 + 守衛條件 | 狀態機 | type-state.md |
| 實體 + 欄位 + 關係 | ER / 資料模型 | type-er.md |
| 按時間定位的事件 | 時間軸 | type-timeline.md |
| 跨職能流程與交接 | 泳道圖 | type-swimlane.md |
| 雙軸定位 / 優先級排序 | 象限圖 | type-quadrant.md |
| 多個實體在 3–5 個定量標準上的評分 | 雷達圖 / 蜘蛛圖 | type-radar.md |
| 一個定量序列在循環類別上的分佈；角度=類別，半徑=大小 | 極座標圖 | type-polar.md |
| 增強循環；最後一步回饋到第一步，且樞紐累積狀態 | 循環圖 | type-loop.md |
| 透過包含 / 範圍體現的階層 | 巢狀圖 | type-nested.md |
| 父 → 子關係 | 樹狀圖 | type-tree.md |
| 人員/代理/團隊擁有權、彙報、路由、升級 | 組織圖 | type-org-chart.md |
| 堆疊的抽象層級 | 層次堆疊 | type-layers.md |
| 一個物體的部分沿著一個軸拉開：分解圖、開箱、組裝順序 | 分解等角圖 | type-exploded.md |
| 從上方一個角度看到的單一樓層或場地：帶家具的房間、按階段劃分的建築物 | 等角平面圖 | type-axonometric-plan.md |
| 集合之間的重疊 | 韋恩圖 | type-venn.md |
| 排名階層或轉換流失 | 金字塔 / 漏斗圖 | type-pyramid.md |
| 跨類別的定量比較 | 長條圖 | type-bar.md |
| 由正負貢獻連接的起始總額到結束總額（預算橋接、員工人數差異） | 瀑布圖 | type-waterfall.md |
| 部分與整體的關係，其中相對大小是重點 | 矩形樹狀圖 | type-treemap.md |
| 交叉表資料；填色編碼每個儲存格的值 | 熱力圖 | type-heatmap.md |
| 隨時間變化的連續趨勢、恰好兩個狀態之間的變化（坡度圖）、每個序列一個分佈（脊線圖）、或多個快照之間的排名變動（凸起圖） | 折線圖 | type-line.md |
| 時間軸上的任務和階段 | 甘特圖 | type-gantt.md |
| 兩個變數的相關性或分佈；氣泡圖（三個變數）和蜂群圖（一個變數，每個項目一個點）變體 | 散點圖 | type-scatter.md |
| 容器叢集上的端到端資料堆疊 | 高階圖 | type-high-level.md |
| 具有資料交接的多參與者順序流程 | 流程圖 | type-process.md |
| 具有品質等級和存取策略的多層資料儲存 | 獎章架構 | type-medallion.md |
| 按角色劃分的資料流：每個管線步驟的負責人員與工作內容 | 資料流 | type-data-flow.md |
| 資料平台的整合拓撲 — 來源 → 核心 → 消費者 | 資料平台整合圖 | type-dp-integration.md |
| 按角色 / 按元件的存取權限矩陣 | 資料平台安全矩陣 | type-dp-security-matrix.md |
| 一個數量在階段間分裂和合併，頻寬寬度 = 數量 | 桑基圖 | type-sankey.md |
| 一個觀察到的效果的多個原因，按類別分組（根本原因分析） | 魚骨圖 | type-fishbone.md |
| 針對演進的價值鏈 — 要建置什麼、購買什麼、以及正在轉移什麼 | 沃德利地圖 | type-wardley.md |
| 按狀態顯示的在製品，附有 WIP 限制和受阻項目 | 看板 | type-kanban.md |
| 一個人在體驗的各個階段中做了什麼，以及感受如何 | 使用者旅程圖 | type-journey.md |
| 客戶做什麼 vs 服務隱藏什麼，跨階段，並有可見界線 | 服務藍圖 | type-service-blueprint.md |
| 軟體在哪裡運行 — 區域、主機、工件、副本、連接埠 | 部署圖 | type-deployment.md |
| 什麼依賴什麼，具有樹狀圖無法表達的扇入和循環 | 依賴關係圖 | type-dependency.md |
| 具有操作、繼承、組合的類別（其他 UML 路徑請見他處） | UML 類別圖 | type-uml-class.md |
| 敘事主幹按發行版本切片，附有切割線 | 故事地圖 | type-story-map.md |
| 實體表格：SQL 類型、約束、索引、欄位級別的外鍵 | 資料庫 schema | type-db-schema.md |
經驗法則：
- 如果三欄表格能傳達相同資訊，請選擇表格。
- 如果兩種類型看起來都有用，請選擇主導軸；語意模式可能加入特定行為的基元，而非第二套佈局語法。
- 如果超出複雜度預算（§7），請拆分為總覽 + 詳細資訊。
在繪製前，務必載入指南中連結的所選類型參考。 當路由到上方時，也請載入 semantic-patterns.md；當選擇動畫時，請載入 animation.md。
繪製前確認
在渲染之前，用一條簡短訊息說明計劃：所選的視覺類型（以及語意模式，如果有的話）、尺寸預設值，以及任何因複雜度預算（§7）而被迫省略的項目。如果可以聯繫到使用者，請讓他們在您繪製之前重新導向；如果無法聯繫，則繼續進行，並在交付物旁註明假設。僅在請求已明確指定類型、尺寸和內容時才跳過此暫停。
4. 通用反模式
這些標記出任何類型的「AI 生成劣質」示意圖：
| 反模式 | 失敗原因 |
|---|---|
| 深色模式 + 青色/紫色發光 | 看起來「技術性」但缺乏設計決策 |
| JetBrains Mono 作為通用的「開發者」字型 | 等寬字型適用於 技術性 內容 — 連接埠、命令、URL。名稱應使用 Geist sans。 |
| 每個節點使用相同的方框 | 抹滅了階層 |
| 圖例浮在圖表區域內 | 與節點衝突 |
| 箭頭標籤沒有遮罩矩形 | 會穿透線條 |
箭頭上的垂直 writing-mode 文字 | 不可讀 |
| 3 個等寬摘要卡片作為預設 | 通用網格 — 應變化寬度 |
| 任何元素上的陰影 | 陰影已過時。邊框才是趨勢。 |
方框使用 rounded-2xl | 最大圓角 6–10px 或無 |
| 每個「重要」節點都使用珊瑚色 | 珊瑚色是 1–2 個編輯強調，不是訊號系統 |
| 重現 Mermaid 的渲染器佈局 | 導入自動間距和路由，而非進行編輯佈局 |
| 違反任何 §6 的六條連線規則 | 自動失敗：對角線傾斜、標籤接觸其筆畫、遮罩被後續節點裁剪、路徑重疊、共享連接點、在非端點方框後方通過 |
特定類型的反模式位於指南中連結的各類型參考文件中。
5. 設計系統
設計系統是可換膚的。 references/style-guide.md 是顏色、字型、token 和預設色板的唯一真理源；此檔案命名語意角色（背景、文字、柔和、強調、連結、…）。若要套用品牌，請編輯 style-guide.md 或執行 references/onboarding.md 中基於 URL 的流程。
當以下規範或類型參考中提到「文字」、「強調」、「柔和」等時，請在
style-guide.md中查詢目前的十六進位值。
類型參考片段將角色寫為佔位符：{ink}、{ink @ 0.40}（角色加上透明度），以及 {node-name}、{sublabel}、{eyebrow}、{arrow-label}、{title}、{callout}（字型）。在輸出之前，請針對 style-guide.md 解析每個佔位符。
…
[為符合翻譯長度限制而截斷]