Mermaid 圖表編輯器
蜜蜂工具箱的免費線上 Mermaid 圖表編輯器支援流程圖、時序圖、甘特圖、類圖、狀態圖、餅圖、ER 圖等多種圖表,內建 5+ 套示例,即時渲染,可一鍵匯出 SVG 與 PNG 高畫質圖,完全在瀏覽器本地繪製,程式碼可直接嵌入 GitHub、Notion。
用文本語法繪製專業圖表,所見即所得即時渲染。 用 Mermaid 宣告式圖表語法描述你想要的圖,蜜蜂工具箱在瀏覽器內本地渲染成清晰的向量圖,支援匯出 PNG/SVG 滿足文件、PPT、部落格展示需求。
Mermaid 語法速查
Mermaid 是什麼
Mermaid 由 Knut Sveidqvist 在 2014 年建立,是一種用文本描述圖表的宣告式語言。與傳統拖拽式畫圖工具相比,Mermaid 讓圖表本身也成為可版本控制的原始碼。
常用圖表速查
- flowchart TD/LR —— 流程圖,
A-->B表示連線,A{?}表示判斷,A([開始])表示圓角矩形。 - sequenceDiagram —— 時序圖,
Alice->>Bob: Hello表示同步訊息,Bob-->>Alice: Hi表示返回訊息。 - gantt —— 甘特圖,用
dateFormat YYYY-MM-DD指定日期格式。 - classDiagram —— 類圖,
class Animal定義類,Animal <|-- Dog表示繼承。 - stateDiagram-v2 —— 狀態機圖,適合描述 UI 狀態、訂單狀態流轉。
- pie —— 餅圖,
"Apple" : 40等描述各扇區比例。
實戰建議
- 節點命名建議使用簡短英文,過長節點會導致佈局變形。
- 複雜圖表建議拆成多個子圖,再以
subgraph巢狀。 - 配色可使用
classDef自定義,提升可讀性。 - 嵌入時使用
%% 註釋增加可維護性。
你可以直接在左側文本框修改示例,右側即時看到渲染結果。
常見問題
什麼是 Mermaid?
Mermaid 是一種基於 JavaScript 的圖表繪製語言,通過類 Markdown 的文本描述流程圖、序列圖、甘特圖等,Docusaurus、GitHub、Obsidian 等都已原生支援。
支援哪些圖表型別?
支援 flowchart、sequenceDiagram、gantt、classDiagram、stateDiagram、pie、erDiagram、gitGraph、requirementDiagram 等。
圖表會儲存或上傳嗎?
不會。所有繪圖在你的瀏覽器本地完成,關閉標籤頁後隨之消失。
匯出 SVG/PNG 會失真嗎?
SVG 是向量,任意放大都不會模糊;PNG 以 canvas 2 倍畫素渲染,適配多數文件插圖。
如何把程式碼嵌入 Markdown?
用 `mermaid` 程式碼塊包圍,GitHub、GitLab、Hugo、Hexo、Obsidian 等都自動渲染。