工具網址: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 存在其他地方。不超過三個即可仍可免費使用。但整體操作可藉由語言模型來生成。運用在更多樣化且複雜的圖表,呈現上較不夠完整。