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

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

什么是 Mermaid？

Mermaid 是一款基于 JavaScript 的開源圖表生成工具，通過簡潔的文本語法（類似 Markdown）快速創(chuàng)建流程圖、時(shí)序圖、甘特圖、類圖、狀態(tài)圖等十余種專業(yè)圖表，廣泛應(yīng)用于技術(shù)文檔編寫、項(xiàng)目管理和系統(tǒng)架構(gòu)可視化場(chǎng)景。

它的核心理念是：讓文檔與開發(fā)同步演進(jìn)，降低“文檔腐爛”風(fēng)險(xiǎn)。

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

Mermaid-js的核心破局點(diǎn)

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

• ?與文檔同步進(jìn)化：圖表代碼可嵌入文檔，修改時(shí)只需更新代碼，圖表自動(dòng)渲染最新版本

• ?全團(tuán)隊(duì)友好：語法簡單直觀，非程序員也能快速上手，真正實(shí)現(xiàn)“誰寫文檔誰維護(hù)圖表”

• ?文本驅(qū)動(dòng)：用簡單的語法描述圖表，版本可控，方便協(xié)作。

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

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

• ?實(shí)時(shí)預(yù)覽：內(nèi)置 Mermaid Live Editor ，邊寫邊看效果。

• ?可嵌入生產(chǎn)環(huán)境：支持在 CI/CD 流程、文檔生成器、前端項(xiàng)目中直接調(diào)用。

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

Docker 安裝命令

前提是需要安裝Docker

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

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

img 本地集成

在前端項(xiàng)目中安裝：

npm install mermaid

在代碼中引入：

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

開始

條件判斷

執(zhí)行任務(wù)1

執(zhí)行任務(wù)2

結(jié)束

2. 時(shí)序圖（Sequence Diagram）

Bob John Alice Bob John Alice 你好，John 我很好 你呢？ 也不錯(cuò)

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 需求分析 功能實(shí)現(xiàn) 規(guī)劃 開發(fā) 項(xiàng)目進(jìn)度

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

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

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

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

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