還在為畫圖表浪費時間排版嗎？本書帶你進入「純文字畫圖」的高效境界！本書從零開始，帶你無痛建置開發環境，並熟練掌握基礎語法。只要敲敲鍵盤，就能瞬間生成精準的流程圖，完美適應這個強調敏捷與 Vibe Coding 的開發世代，讓圖表跟程式碼一樣能輕鬆進行版本控制。
★ Mermaid 圖表繪製實戰指南
★ 環境建置與基本語法結構
★ 流程圖：節點形狀、連結線條、子圖
★ 序列圖：訊息傳遞、控制流程、進階功能
★ 類別圖：類別關係與進階用法
★ 狀態圖：複合狀態與進階功能
★ ER 圖：關係與基數設定
★ 看板／使用者旅程圖／需求圖
★ 甘特圖：任務設定與進階功能
★ 進階分析圖：象限圖、桑基圖、雷達圖、樹狀圖
★ 架構設計：架構圖、區塊圖、C4 模型
★ 整合與進階：主題樣式、Mermaid CLI、XY 圖表、ZenUML、平台整合
這本書更是你的軟體工程「圖表軍火庫」。我們深入解析物件導向設計必備的類別圖、展示系統通訊的序列圖，以及精準掌握生命週期的狀態圖。針對資料庫設計師，更詳細拆解 ER 圖的關聯與基數設定。短短幾行語法，就能把複雜的系統邏輯與資料結構表達得清清楚楚，徹底消滅團隊的溝通代溝！
這不僅是工程師必讀，更是 PM 與架構師的案頭寶典。想追蹤專案或優化體驗？書中教你輕鬆寫出甘特圖、看板與使用者旅程圖。針對進階商業分析，更收錄少見的桑基圖、雷達圖與象限圖。資深大架構師也別錯過專闢的 C4 模型 與架構區塊圖章節，從底層邏輯到高階架構，一本幫你全面打通！
掌握圖表後，我們教你將 Mermaid 發揮到極致。學習自訂專屬的主題樣式，或是透過 Mermaid CLI 將畫圖流程自動化，無縫整合進專案建置與 CI/CD 流程中。書中更獨家收錄 XY 圖表、ZenUML 語法，以及各大協作平台的高階整合技巧。現在就丟掉滑鼠，享受「Text-to-Diagram」的純粹寫碼樂趣吧！
作者簡介：
胡嘉璽
研究領域為LLM、Vibe Coding、Context Engineering、量子電腦、容器。
喜歡旅遊、重訓、天文、物理、美食、爵士樂及貓咪。
聯絡方式：github/joshhu
歡迎追蹤我的FB：胡嘉璽、社團「Vibe Coding Taiwan」
作者序
在資訊爆炸的時代，我們每天都在與複雜的系統打交道。一個 API 的呼叫流程、一段程式的邏輯結構、一個專案的時程規劃——這些抽象的概念，該如何清晰地傳達給團隊、給客戶、給未來的自己？答案藏在一個簡單的動作裡：把思維畫出來。
Mermaid 是一個用純文字繪製圖表的工具。在它出現之前，畫一張流程圖意味著打開繪圖軟體、拖曳方塊、對齊箭頭，每次修改都是一場折騰。Mermaid 改變了這件事——你只需要寫幾行程式碼，圖表就自動生成了。更棒的是，這些程式碼可以放進版本控制、可以協作編輯、可以隨時修改。文字，成了圖像的種子。
這本書寫給所有需要畫圖的人。你可能是軟體工程師，需要畫系統架構圖；可能是專案經理，需要畫甘特圖追蹤進度；可能是技術作家，需要在文件裡嵌入說明圖；也可能只是想用心智圖整理筆記的學生。不管你是誰，Mermaid 都能幫上忙。
全書共十六章，從環境建置講到平台整合，涵蓋了 Mermaid 支援的所有圖表類型。每一章都有概念說明、語法詳解、實戰範例，還附上可以直接使用的程式碼檔案。如果你是初學者，建議從第一章開始讀；如果已經有基礎，可以直接跳到需要的章節；如果趕時間，附錄 A 的語法速查表會是你的好朋友。
不管你選擇哪種讀法，我都建議你打開 Mermaid Live Editor，邊讀邊練。只有親手敲過的程式碼，才會真正變成你的。
感謝你翻開這本書。在這個什麼都講求快速的時代，願意靜下心來學一項工具，本身就是一件值得肯定的事。
那麼，就讓我們開始吧！
胡嘉璽
2026年2月2日
於台北市大安星巴克
在資訊爆炸的時代，我們每天都在與複雜的系統打交道。一個 API 的呼叫流程、一段程式的邏輯結構、一個專案的時程規劃——這些抽象的概念，該如何清晰地傳達給團隊、給客戶、給未來的自己？答案藏在一個簡單的動作裡：把思維畫出來。
Mermaid 是一個用純文字繪製圖表的工具。在它出現之前，畫一張流程圖意味著打開繪圖軟體、拖曳方塊、對齊箭頭，每次修改都是一場折騰。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 建立個人範本庫
後記
第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 特殊...
iRead灰熊愛讀書
金石堂 KingStone
TAAZE 讀冊生活
誠品網路書店
