狂攬82.7k的star，這款開源可視化神器，輕松創建流程圖和圖表

狂攬82.7k的star，這款開源可視化神器，輕松創建流程圖和圖表

作為常年和代碼、文檔打交道的開發者，你是否也曾為 “畫一張清晰的架構圖” 而頭疼？用 Visio 要手動拖拽元素，用 DrawIO 調整格式耗半天，好不容易畫完的圖還沒法和代碼同步更新 —— 直到星哥發現了Mermaid這款開源神器，才真正實現 “文檔和代碼同頻迭代”。

什么是 Mermaid？

Mermaid 是一款基于 JavaScript 的開源圖表生成工具，通過簡潔的文本語法（類似 Markdown）快速創建流程圖、時序圖、甘特圖、類圖、狀態圖等十余種專業圖表，廣泛應用于技術文檔編寫、項目管理和系統架構可視化場景。

它的核心理念是：讓文檔與開發同步演進，降低“文檔腐爛”風險。

簡單來說，你只需要寫幾行文本，就能生成流程圖、時序圖、甘特圖、類圖、狀態圖、餅圖、Git 分支圖等多種可視化圖表。

Mermaid-js的核心破局點

• ?告別手動繪制：用類Markdown的簡潔語法描述圖表，幾行代碼就能生成流程圖、時序圖、架構圖

• ?與文檔同步進化：圖表代碼可嵌入文檔，修改時只需更新代碼，圖表自動渲染最新版本

• ?全團隊友好：語法簡單直觀，非程序員也能快速上手，真正實現“誰寫文檔誰維護圖表”

• ?文本驅動：用簡單的語法描述圖表，版本可控，方便協作。

• ?多種圖表類型：支持 Flowchart、Sequence Diagram、Gantt、Class Diagram、State Diagram、Pie Chart、Git Graph 等。

• ?跨平臺集成：可直接在 GitHub、GitLab、Notion、Obsidian 等平臺渲染。

• ?實時預覽：內置 Mermaid Live Editor ，邊寫邊看效果。

• ?可嵌入生產環境：支持在 CI/CD 流程、文檔生成器、前端項目中直接調用。

打開 Mermaid Live Editor，輸入語法即可實時生成圖表。

Docker 安裝命令

前提是需要安裝Docker

docker run -p 8000:8080 --name mermaid-live-editor \ -d ghcr.io/mermaid-js/mermaid-live-editor

安裝完成之后，我們可以通過訪問：IP:8000 在線使用它。

img 本地集成

在前端項目中安裝：

npm install mermaid

在代碼中引入：

import mermaid from 'mermaid'; mermaid.initialize({ startOnLoad: true });

開始

條件判斷

執行任務1

執行任務2

結束

2. 時序圖（Sequence Diagram）

Bob John Alice Bob John Alice 你好，John 我很好 你呢？ 也不錯

3. 甘特圖（Gantt Chart）

2025-09-01 2025-09-02 2025-09-03 2025-09-04 2025-09-05 2025-09-06 2025-09-07 2025-09-08 2025-09-09 需求分析 功能實現 規劃 開發 項目進度

4.類圖

classDiagram Class01 <|-- AveryLongClass : Cool < > Class01 Class09 --> C2 : Where am I? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla class Class10 {   < >   int id   size() }

pie "Dogs" : 386 "Cats" : 85 "Rats" : 15

  journey     title My working day     section Go to work       Make tea: 5: Me       Go upstairs: 3: Me       Do work: 1: Me, Cat     section Go home       Go downstairs: 5: Me       Sit down: 3: Me

如果你厭倦了反復拖拽繪圖、截圖、更新文檔的繁瑣流程，Mermaid 絕對值得一試。 它不僅能讓你的技術文檔更直觀、更專業，還能與代碼版本管理無縫結合，讓圖表真正成為活文檔。

開源地址：https://github.com/mermaid-js/mermaid   簡體中文Readme：https://github.com/mermaid-js/mermaid/blob/develop/README.zh-CN.md 在線編輯器：https://mermaid.live

星哥建議從今天起，把你的架構圖、流程圖都用 Mermaid 管起來，省時、省心、還很酷。

寫文不易，如果你都看到了這里，請點個贊和在看，分享給更多的朋友；也別忘了關注星哥玩云！這里有滿滿的干貨分享，還有輕松有趣的技術交流～點個贊、分享給身邊的小伙伴，一起成長，一起玩轉技術世界吧！