工具網址：https://www.mermaidchart.com/
Mermaid 是一個基於文字的圖表繪製工具，由 Knut Sveidqvist 在 2016 年創立的。採用 JavaScript 實作，能在瀏覽器環境直接渲染圖形。Mermaid 語法是一種輕量級的標記語言，讓使用者用簡單的文字語法就能生成各種圖表，特別適合在文件、筆記、Wiki、GitHub 或程式碼專案中能夠快速嵌入流程圖、時序圖、甘特圖等可視化內容，方便地與程式碼版本一起管理和協作。
在首頁選擇 Playground 就能免註冊免費使用，但可下載svg檔，無法下載png檔。免費用戶可以同存在三個檔案，超過無法建立新檔案，需要先刪除舊檔案，就能繼續免費使用。
跨平台支援：
- GitHub / GitLab 的 Markdown 原生支援
- Notion、Obsidian、VS Code 等都能安裝外掛直接渲染
- 可在瀏覽器直接用 Mermaid Live Editor 預覽
使用場景：
- 產品經理：用流程圖描述使用者路徑、可視化程式之間關係，方便與團隊討論。
- 工程師：編寫技術文件README.md、專案文件可有可視化的架構。
- 設計師：用甘特圖安排設計進度、心智圖創意發想。
- 學生 / 教師：課堂筆記與知識整理。
使用步驟：
步驟一：可以藉由各種大型語言模型（LLM）來對話方式生成或將現有資料轉換成 mermaid 程式碼。
Prompt：根據 Gemini Storybook 功能使用流程 畫出 在 Mermaid 上使用的flowchart code，並預想可能失敗或未登入的狀態。
可以藉由各種大型語言模型來生成流程圖 mermaid code
步驟二： 選擇想要的圖表 ( diagram )，目前提供20種不同類型，像是流程圖（Flowchart）、時序圖（Sequence Diagram）、甘特圖（Gantt Chart）、狀態圖（State Diagram）、用例圖（User Journey）、 Git 分支圖（Git Graph）、 思維導圖（Mindmap）等...
步驟三：將 mermaid 程式碼直接貼到左側 Edit Code 裡面。右側就會出現圖表視覺。
步驟四：可進一步用中文使用 「Use AI 」來修改或新增圖表。但免費只能使用三次。建議在原本在大型語言模型（LLM）用對話方式調整好。
步驟五：有內建一些圖示，可連結其他額外的線上 Svg 檔，最後可輸出 Export 為 png 檔、svg檔、Mermaid 自家的 mmg。
其他運用
顧客旅程地圖較為陽春，只有顧客情緒與流程的可視化，而不是完整的服務藍圖。
運用於 VS Code：
在 VS Code 可安裝 Mermaid Plugin 插件來呈現圖表。或是藉由 Markdown Preview Enhanced 插件，使用時程式碼的外層需加上三個反引號（```）後面一定要加 `mermaid` 才會解析成圖表。
安裝 Mermaid Plugin 插件來呈現圖表
安裝 Markdown Preview Enhanced 插件來呈現圖表
運用於 Whimsical：
目前 Whimsical 基本上不支援匯入或使用 Mermaid ，但直接在空白處貼上 flowchart TD 的 Mermaid code，仍然可轉換圖表。
運用於 Notion：
例如用 sequenceDiagram 來製作團隊工作協作流程，可直接將 Mermaid Code 貼上 Notion 數位筆記上，程式碼選為 Mermaid 並且換成預覽就可呈現。
總結
Mermaid 介面簡潔易操作，能透過 markdown 純文字語法快速生成多種圖表，方便在文件、筆記和專案中嵌入可視化內容。無論是 GitHub、Notion 或 VS Code 都能輕鬆整合。對於需要再開發文件上做圖表溝通，極為方便。雖然網頁上免費用戶有檔案數量限制，可將 Code 存在其他地方。不超過三個即可仍可免費使用。但整體操作可藉由語言模型來生成。運用在更多樣化且複雜的圖表，呈現上較不夠完整。
