勝過AI的技能: 玩熟Mermaid做出最專業的圖表

第1章 認識Mermaid
1.1 Mermaid 簡介
1.1.1 什麼是Mermaid
1.1.2 發展歷程與設計理念
1.1.3 為什麼選擇Mermaid
1.1.4 支援的圖表類型總覽
1.2 環境建置
1.2.1 線上編輯器Mermaid Live Editor
1.2.2 本機開發環境設定
1.2.3 VS Code 擴充套件安裝
1.2.4 第一個Mermaid 圖表
1.3 基本語法結構
1.3.1 圖表宣告語法
1.3.2 節點與連結基礎
1.3.3 標籤與文字處理
1.3.4 註解撰寫方式
1.4 本章小結

第2章 流程圖
2.1 流程圖基礎
2.1.1 應用場景
2.1.2 方向設定
2.1.3 節點定義
2.2 節點形狀
2.2.1 基本形狀
2.2.2 特殊形狀
2.3 連結線條
2.3.1 基本連結類型
2.3.2 連結文字
2.3.3 雙向箭頭
2.3.4 多重連結
2.3.5 連結長度
2.4 子圖與進階應用
2.4.1 子圖基礎
2.4.2 子圖方向
2.4.3 節點樣式
2.4.4 樣式類別
2.4.5 實戰範例：使用者登入流程
2.4.6 實戰範例：系統架構圖
2.5 本章小結

第3章 序列圖
3.1 序列圖基礎
3.1.1 應用場景
3.1.2 基本語法
3.1.3 參與者定義
3.2 訊息類型
3.2.1 基本箭頭類型
3.2.2 雙向箭頭
3.2.3 訊息文字換行
3.3 啟用與生命線
3.3.1 啟用與停用
3.3.2 堆疊啟用
3.4 註解
3.4.1 單一參與者註解
3.4.2 跨參與者註解
3.5 控制結構
3.5.1 迴圈
3.5.2 條件分支
3.5.3 可選路徑
3.5.4 平行處理
3.5.5 關鍵區域
3.5.6 中斷
3.6 進階功能
3.6.1 參與者分組
3.6.2 背景高亮
3.6.3 自動編號
3.6.4 參與者創建與銷毀
3.7 實戰範例
3.7.1 API 呼叫流程
3.7.2 線上購物流程
3.8 本章小結

第4章 類別圖
4.1 類別圖基礎
4.1.1 應用場景
4.1.2 基本語法
4.1.3 圖表方向
4.2 類別成員定義
4.2.1 使用冒號語法
4.2.2 使用大括號語法
4.2.3 方法回傳型別
4.2.4 可見性修飾符
4.2.5 靜態與抽象成員
4.3 泛型型別
4.3.1 泛型類別
4.3.2 巢狀泛型
4.4 類別關係
4.4.1 關係類型總覽
4.4.2 雙向關係
4.4.3 關係標籤
4.4.4 多重性（Cardinality）
4.4.5 棒棒糖介面
4.5 類別註解
4.5.1 介面與列舉
4.5.2 其他常用註解
4.6 命名空間
4.6.1 基本命名空間
4.6.2 跨命名空間關係
4.7 註解與說明
4.7.1 一般註解
4.7.2 多行註解
4.8 樣式設定
4.8.1 使用classDef 定義樣式
4.8.2 直接套用樣式
4.9 實戰範例
4.9.1 電商系統模型
4.9.2 設計模式範例：觀察者模式
4.10 本章小結

第5章 狀態圖（State Diagram）
5.1 基本語法
5.1.1 宣告狀態圖
5.1.2 定義狀態
5.2 狀態轉換
5.2.1 基本轉換
5.2.2 帶標籤的轉換
5.3 起始與結束狀態
5.3.1 起始狀態
5.3.2 結束狀態
5.3.3 完整的生命週期
5.4 複合狀態（巢狀狀態）
5.4.1 基本複合狀態
5.4.2 多層巢狀
5.4.3 命名複合狀態
5.5 並行狀態
5.6 選擇節點（Choice）
5.6.1 基本選擇
5.6.2 多條件選擇
5.7 分叉與合併（Fork/Join）
5.7.1 分叉（Fork）
5.7.2 合併（Join）
5.8 備註（Notes）
5.8.1 右側備註
5.8.2 左側備註
5.9 方向控制
5.9.1 左到右方向
5.9.2 上到下方向（預設）
5.9.3 複合狀態中的方向
5.10 樣式設定
5.10.1 定義樣式類別
5.10.2 行內樣式套用
5.11 註解
5.12 實務範例
5.12.1 咖啡機狀態
5.12.2 電子商務退貨流程
5.13 小結

第6章 實體關係圖（Entity Relationship Diagram）
6.1 基本語法
6.1.1 宣告ER 圖
6.1.2 定義關係
6.2 基數符號（Cardinality）
6.2.1 基數記號說明
6.2.2 關係線條類型
6.2.3 基數範例
6.2.4 文字形式的基數
6.3 實體屬性
6.3.1 基本屬性定義
6.3.2 主鍵（Primary Key）
6.3.3 外鍵（Foreign Key）
6.3.4 唯一鍵（Unique Key）
6.3.5 複合鍵
6.3.6 屬性註解
6.4 識別與非識別關係
6.4.1 識別關係（實線）
6.4.2 非識別關係（虛線）
6.5 實體別名
6.5.1 簡短別名
6.5.2 含空格的名稱
6.6 方向控制
6.6.1 上到下（預設）
6.6.2 左到右
6.7 樣式設定
6.7.1 定義樣式類別
6.7.2 行內樣式
6.7.3 節點個別樣式
6.8 實務範例
6.8.1 電子商務系統
6.8.2 圖書館管理系統
6.8.3 醫院管理系統
6.8.4 社群媒體平台
6.9 進階技巧
6.9.1 多對多關係的聯結表
6.9.2 自我參照關係
6.10 小結

第7章 看板、使用者旅程圖與需求圖
7.1 看板
7.1.1 敏捷開發與看板方法
7.1.2 欄位定義
7.1.3 任務卡片設定
7.1.4 實戰：團隊工作看板
7.2 使用者旅程圖
7.2.1 使用者體驗設計
7.2.2 旅程標題與角色
7.2.3 階段與任務定義
7.2.4 情緒分數設定
7.2.5 實戰：購物體驗旅程
7.3 需求圖
7.3.1 需求管理概念
7.3.2 需求元素定義
7.3.3 需求關係類型
7.3.4 元素定義與滿足關係
7.3.5 風險與驗證標示
7.3.6 實戰：功能需求追蹤
7.4 本章小結

第8章 甘特圖（Gantt Chart）
8.1 基本語法
8.1.1 宣告甘特圖
8.1.2 設定日期格式
8.1.3 定義任務
8.2 區段與分組
8.2.1 建立區段
8.2.2 多團隊協作區段
8.3 任務狀態
8.3.1 已完成任務
8.3.2 進行中任務
8.3.3 關鍵任務
8.3.4 組合狀態標記
8.4 任務相依關係
8.4.1 基本相依關係
8.4.2 多重相依關係
8.4.3 使用until 設定結束時間
8.5 里程碑
8.5.1 定義里程碑
8.5.2 關鍵里程碑
8.6 排除日期
8.6.1 排除週末
8.6.2 排除特定日期
8.6.3 自訂週末定義
8.7 時間軸格式
8.7.1 軸格式設定
8.7.2 刻度間隔設定
8.7.3 頂部軸顯示
8.8 今日標記
8.8.1 自訂今日標記樣式
8.8.2 關閉今日標記
8.9 垂直標記線
8.9.1 建立垂直標記
8.10 實務範例
8.10.1 軟體開發專案
8.10.2 產品行銷活動
8.11 小結

第9章 進階分析圖表
9.1 象限圖
9.1.1 四象限分析法
9.1.2 軸線定義與標籤
9.1.3 象限命名
9.1.4 資料點配置
9.1.5 實戰：產品組合分析
9.2 桑基圖
9.2.1 桑基圖原理與應用
9.2.2 節點定義
9.2.3 流量設定
9.2.4 實戰：網站流量分析
9.3 雷達圖
9.3.1 多維度評估概念
9.3.2 軸線設定
9.3.3 資料系列定義
9.3.4 實戰：團隊能力評估
9.4 樹狀圖
9.4.1 層級結構視覺化
9.4.2 節點與層級定義
9.4.3 多層巢狀結構
9.4.4 實戰：組織架構呈現
9.5 本章小結

第10章 系統架構圖
10.1 架構圖基礎
10.1.1 基本結構
10.1.2 群組定義
10.1.3 服務定義
10.1.4 邊線連接
10.1.5 連接節點（Junction）
10.2 區塊圖基礎
10.2.1 基本區塊
10.2.2 多列布局
10.2.3 區塊連接
10.2.4 帶標籤的連接
10.2.5 區塊樣式
10.2.6 巢狀區塊
10.3 C4 架構圖
10.3.1 系統上下文圖
10.3.2 容器圖
10.3.3 元件圖
10.3.4 部署圖
10.4 實務範例
10.4.1 微服務架構
10.4.2 三層式架構區塊圖
10.4.3 雲端部署架構
10.5 本章小結

第11章 心智圖與時間軸
11.1 心智圖
11.1.1 心智圖思考法則
11.1.2 根節點定義
11.1.3 分支與層級
11.1.4 節點形狀設定
11.1.5 圖示整合
11.1.6 Markdown 格式文字
11.1.7 實戰：專案腦力激盪
11.2 時間軸
11.2.1 時間軸應用場景
11.2.2 時期定義
11.2.3 事件設定
11.2.4 分組與區段
11.2.5 實戰：公司發展歷程
11.3 本章小結

第12章 Git 分支圖與封包圖
12.1 Git 分支圖
12.1.1 版本控制視覺化需求
12.1.2 提交（Commit）定義
12.1.3 分支（Branch）操作
12.1.4 合併（Merge）與變基（Rebase）
12.1.5 標籤設定
12.1.6 Cherry-pick 操作
12.1.7 圖表方向
12.1.8 實戰：Git Flow 工作流程
12.2 封包圖
12.2.1 網路協定視覺化
12.2.2 欄位定義
12.2.3 位元與位元組表示
12.2.4 加入標題
12.2.5 設定每行位元數
12.2.6 實戰：TCP 封包結構
12.2.7 實戰：UDP 封包結構
12.3 本章小結

第13章 主題樣式與配置
13.1 主題設定
13.1.1 內建主題介紹
13.1.2 主題變數設定
13.1.3 自訂主題建立
13.2 樣式客製化
13.2.1 樣式類別定義
13.2.2 行內樣式套用
13.2.3 節點樣式設定
13.2.4 連結樣式設定
13.3 指令與配置
13.3.1 初始化指令（init）
13.3.2 圖表指令設定
13.3.3 全域配置選項
13.3.4 安全性設定
13.4 進階功能
13.4.1 無障礙設計支援
13.4.2 數學公式整合
13.4.3 圖示庫使用
13.4.4 版面配置調整
13.5 實戰範例
13.5.1 品牌風格系統架構圖
13.5.2 狀態燈號儀表板
13.6 本章小結

第14章 Mermaid CLI 工具
14.1 安裝與設定
14.1.1 Node.js 環境準備
14.1.2 Mermaid CLI 安裝
14.1.3 組態檔設定
14.2 命令列操作
14.2.1 基本轉換指令
14.2.2 輸出格式選項
14.2.3 主題設定
14.2.4 批次處理
14.3 自動化整合
14.3.1 CI/CD 流程整合
14.3.2 文件自動產生
14.3.3 實戰：建立圖表產生腳本
14.4 進階技巧
14.4.1 自訂CSS 樣式
14.4.2 在Docker 中執行
14.4.3 圖示套件整合
14.5 常見問題與疑難排解
14.5.1 中文字元顯示為方塊
14.5.2 Puppeteer 啟動失敗
14.5.3 記憶體不足
14.5.4 特定圖表類型不支援中文
14.6 本章小結

第15章 XY 圖表與ZenUML
15.1 XY 圖表基礎
15.1.1 基本語法結構
15.1.2 折線圖的繪製
15.1.3 混合圖表
15.2 XY 圖表進階配置
15.2.1 圖表尺寸與方向設定
15.2.2 數據標籤顯示
15.2.3 多數據系列與圖例
15.2.4 顏色自訂與主題
15.2.5 數值範圍與座標軸設定
15.3 ZenUML 序列圖概述
15.3.1 基本語法與參與者
15.3.2 同步與非同步訊息
15.3.3 回應訊息與返回值
15.4 ZenUML 控制結構
15.4.1 條件判斷（If-Else）
15.4.2 迴圈處理（Loop/While）
15.4.3 平行處理（Parallel）
15.4.4 例外處理（Try-Catch-Finally）
15.5 ZenUML 進階技巧
15.5.1 自我呼叫
15.5.2 物件創建
15.5.3 參與者群組
15.6 實戰範例
15.6.1 業績儀表板
15.6.2 產品比較分析
15.6.3 微服務認證流程
15.6.4 訂單處理系統
15.7 本章小結

第16章 平台整合與生態系統
16.1 文件平台整合
16.1.1 GitHub 整合
16.1.2 GitLab 整合
16.1.3 HackMD 整合
16.1.4 Notion 整合
16.1.5 Obsidian 整合
16.2 開發工具整合
16.2.1 Visual Studio Code 整合
16.2.2 命令列工具
16.3 線上編輯器
16.3.1 Mermaid Live Editor
16.4 官方資源與社群
16.4.1 官方文檔
16.4.2 社群支援
16.5 JavaScript API 簡介
16.6 最佳實踐
16.7 本章小結

附錄A 語法速查表
A.1 圖表類型速查
A.1.1 圖表宣告語法
A.1.2 流程圖方向設定
A.2 常用語法對照表
A.2.1 流程圖節點形狀
A.2.2 流程圖連結類型
A.2.3 序列圖訊息類型
A.2.4 序列圖控制結構
A.2.5 類別圖關係符號
A.2.6 類別圖存取修飾詞
A.2.7 實體關係圖基數符號
A.2.8 狀態圖語法
A.2.9 甘特圖語法
A.2.10 XY 圖表語法
A.2.11 心智圖語法
A.2.12 時間軸語法
A.3 特殊字元處理
A.3.1 需要跳脫的字元
A.3.2 使用引號包裹文字
A.3.3 Unicode 字元
A.3.4 換行處理
A.3.5 註解語法
A.3.6 空白與縮排
A.3.7 ID 命名規則

附錄B 常見問題與疑難排解
B.1 語法錯誤排除
B.1.1 圖表無法渲染
B.1.2 節點ID 衝突
B.1.3 特殊字元導致錯誤
B.1.4 連結語法錯誤
B.1.5 子圖語法問題
B.1.6 序列圖參與者問題
B.2 渲染問題處理
B.2.1 圖表顯示不完整
B.2.2 文字重疊或溢出
B.2.3 樣式沒有套用
B.2.4 連結線顯示異常
B.2.5 在不同平台顯示不一致
B.3 效能最佳化建議
B.3.1 大型圖表效能問題
B.3.2 網頁載入效能
B.3.3 記憶體使用最佳化
B.3.4 CI/CD 環境最佳化
B.3.5 行動裝置效能
B.3.6 偵錯技巧

附錄C 學習資源
C.1 官方資源連結
C.1.1 官方網站與文件
C.1.2 線上編輯器
C.1.3 GitHub 儲存庫
C.1.4 npm 套件
C.2 推薦學習路徑
C.2.1 初學者學習順序
C.2.2 依角色選擇學習重點
C.2.3 學習時間估算
C.3 範例程式碼庫
C.3.1 本書範例檔案
C.3.2 線上範例資源
C.3.3 建立個人範本庫
後記

胡嘉璽
研究領域為LLM、Vibe Coding、Context Engineering、量子電腦、容器。
喜歡旅遊、重訓、天文、物理、美食、爵士樂及貓咪。
聯絡方式：github/joshhu
歡迎追蹤我的FB：胡嘉璽、社團「Vibe Coding Taiwan」