文章目錄
- 背景
- Mermaid
- 使用 AI 編寫 Mermaid
- 應用
背景
- 在 markdown 文檔中雖然可以插入圖片，但是也需要管理圖片，一旦圖片位置變了，文檔中的圖片就無法顯示。
- 圖片占用空間較大，對于在線文檔，為了加載速度，能不使用圖片就不使用。
- Mermaid 流程圖是一個非常好的工具，基于文本快速繪制各種圖表（如流程圖、時序圖、甘特圖等）。
- 人工手動編寫 Mermaid 有點小繁瑣，但是借用 AI 之力，繪制流程圖效率非常高。
Mermaid
Mermaid 是一種基于文本的圖表生成工具，可以通過簡單的語法快速繪制各種圖表（如流程圖、時序圖、甘特圖等）。它易于編寫、可嵌入 Markdown，并支持實時渲染，非常適合文檔編寫和技術繪圖。
Mermaid 流程圖核心特點
- 簡單直觀
- 使用純文本描述，語法類似自然語言。
- 無需圖形界面，直接嵌入代碼即可生成圖表。
- 常用圖表支持
- 流程圖（Flowchart）：描述步驟和決策邏輯。
- 時序圖（Sequence Diagram）：展示交互時序（如支付流程例子）。
- 其他：類圖、狀態圖、甘特圖等。
- 跨平臺兼容
- 支持 GitHub、GitLab、VS Code、Obsidian 等平臺的 Markdown 渲染。
為什么用 Mermaid？
- 效率高：改代碼比拖拽圖形更快。
- 版本友好：文本格式便于 Git 管理。
- 輕量化：無需依賴復雜工具（如 Visio）。
使用 AI 編寫 Mermaid
很早就了解過 Mermaid，但是由于都需要自己手動編寫文本，還是有些繁瑣和困難，而且往往自己編寫的效果不如自己想象的那么好。
借助 AI，將現有的圖片格式的流程圖丟給 AI 工具，讓它根據圖片生成 Mermaid 流程圖，或者我描述流程內容，讓它生成流程圖，大大節省了時間和精力。
目前用來生成 Mermaid 的 AI 工具有：Claude、Gemini、Grok、Deepseek、Chatgpt，為啥要用這么多呢？
同樣的一張流程圖，丟給不同的 AI 工具，生成的 Mermaid 圖，往往不一樣，特別是流程稍微復雜一點。
于是我集眾多 AI 工具之力，第一版先得到一個預期結構符合的結果，將這個結果，也就是生成的 Mermaid 文本，分別再輸入給 AI 工具，不斷優化和調整局部。
應用
下面是3張 AI 生成的 Mermaid 流程圖（非圖片格式）：
下單支付流程
對應的 mermaid 文本：
sequenceDiagramparticipant 用戶participant 前端participant 服務端participant 微信后端前端->>服務端: 1.創建訂單前端->>服務端: 2.提交訂單前端->>服務端: 3.支付下單服務端-->>前端: 4.返回支付二維碼地址前端->>服務端: 5.前端輪詢查詢訂單狀態前端->>前端: 6.前端將支付二維碼地址轉為二維碼圖形用戶->>前端: 7.用戶掃碼用戶->>微信后端: 7.用戶發起支付微信后端->>服務端: 8.商城回調接口服務端->>服務端: 9.服務器接收并更新訂單信息狀態Note over 前端: 二維碼包含商戶信息、訂單信息以及商城回調地址
token鑒權
對應的文本：
sequenceDiagramparticipant 用戶participant 客戶端participant 服務器用戶->>客戶端: 輸入用戶名和密碼客戶端->>服務器: 發送登錄請求 (用戶名, 密碼)服務器-->>客戶端: 返回 Token (包含身份信息和有效期)Note right of 服務器: Token 是加密字符串<br>包含用戶身份信息<br>服務器不存儲狀態客戶端->>客戶端: 存儲 Token (如 LocalStorage)用戶->>客戶端: 發起操作請求客戶端->>服務器: 發送請求 (Header: Authorization: Bearer Token)服務器->>服務器: 驗證 Token (解密, 檢查有效期)Note right of 服務器: 無需查數據庫<br>直接驗證 Token服務器-->>客戶端: 返回操作結果
Cookie+Session鑒權
)
