狂攬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. 流程圖(Flowchart)開始
條件判斷
執行任務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 管起來,省時、省心、還很酷。
寫文不易,如果你都看到了這里,請點個贊和在看,分享給更多的朋友;也別忘了關注星哥玩云!這里有滿滿的干貨分享,還有輕松有趣的技術交流~點個贊、分享給身邊的小伙伴,一起成長,一起玩轉技術世界吧!
特別聲明:以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布,本平臺僅提供信息存儲服務。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.