Mermaid 圖表工具入門教程10 分鐘跑起來幾行文本畫出流程圖與序列圖【免費(fèi)下載鏈接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown項(xiàng)目地址: https://gitcode.com/GitHub_Trending/me/mermaidMermaid 是一個(gè)開源的圖表工具你用幾行 Markdown 風(fēng)格的文本就能渲染出流程圖、序列圖、甘特圖、類圖等專業(yè)圖表。它適合寫技術(shù)文檔的開發(fā)者、需要畫架構(gòu)圖的產(chǎn)品經(jīng)理以及任何希望圖在文檔里、文檔和代碼同步更新的人。這篇文章帶你從零完成 Mermaid 安裝并在本地跑起實(shí)時(shí)預(yù)覽環(huán)境。為什么值得試試1. 圖即文本改需求只改幾行字傳統(tǒng)繪圖工具里改一個(gè)節(jié)點(diǎn)要點(diǎn)來點(diǎn)去而 Mermaid 的圖表定義就是幾行文本可以放進(jìn)同一個(gè)倉庫做版本管理、做 diff 評(píng)審。需求變了改文本、圖自動(dòng)重繪不會(huì)像截圖那樣畫完就過期。2. 一套語法覆蓋主流圖表類型流程圖、時(shí)序圖、類圖、甘特圖、狀態(tài)圖、ER 圖、思維導(dǎo)圖等全部共用同一套語法體系。倉庫里docs/syntax/目錄按圖種逐個(gè)給出語法說明從流程圖到象限圖幾乎你能想到的都齊了。3. 本地開發(fā)環(huán)境自帶實(shí)時(shí)編輯器不需要先學(xué) API克隆倉庫、裝完依賴一條命令啟動(dòng)開發(fā)服務(wù)器就能在瀏覽器里邊寫邊看渲染效果調(diào)主題、換圖種都是即時(shí)反饋的。10 分鐘跑起來 ① 環(huán)境自檢Mermaid 要求 Node 16 或更高倉庫用 pnpm 管理依賴。先確認(rèn)這兩樣node -v # 應(yīng)顯示 v16 或更高 pnpm -v # 沒有 pnpm 可執(zhí)行 npm install -g pnpm② 克隆倉庫并安裝依賴git clone https://gitcode.com/GitHub_Trending/me/mermaid.git cd mermaid pnpm install③ 啟動(dòng)開發(fā)服務(wù)器驗(yàn)證成功pnpm dev啟動(dòng)后打開瀏覽器訪問http://localhost:9000看到開發(fā)頁面能加載、圖表能渲染就說明環(huán)境跑通了。如果 9000 端口被占用可以通過環(huán)境變量MERMAID_DEV_PORT指定其他端口。真實(shí)場(chǎng)景演示場(chǎng)景一梳理業(yè)務(wù)流程graph TD開頭幾行就能描述條件判斷—執(zhí)行—結(jié)束的邏輯節(jié)點(diǎn)用方括號(hào)、判斷用花括號(hào)。場(chǎng)景二畫出接口調(diào)用時(shí)序sequenceDiagram聲明參與者后用-和--區(qū)分請(qǐng)求與響應(yīng)一張系統(tǒng)交互圖幾行寫完。場(chǎng)景三排項(xiàng)目進(jìn)度甘特圖任務(wù)按日期排布支持排除周末等特定日期后自動(dòng)調(diào)整任務(wù)時(shí)間線進(jìn)度管理文檔里非常好用。常用配置主題切換全站用 initialize單圖用 frontmatter內(nèi)置 default、neutral、dark、forest 四個(gè)主題另有一個(gè)可深度定制的 base 主題。全局設(shè)置寫在初始化代碼里這段代碼的作用是告訴 Mermaid 使用哪個(gè)主題并在頁面加載時(shí)自動(dòng)渲染import mermaid from mermaid; mermaid.initialize({ theme: forest, // 可選 default / neutral / dark / forest startOnLoad: true, });只想改某一張圖的主題時(shí)在圖表定義頂部加 frontmatter 即可--- config: theme: dark --- graph TD a -- bsecurityLevel控制點(diǎn)擊與 HTML 能力默認(rèn)值strict會(huì)把節(jié)點(diǎn)文本中的 HTML 標(biāo)簽轉(zhuǎn)義并禁用點(diǎn)擊跳轉(zhuǎn)。如果你信任圖表來源、需要節(jié)點(diǎn)可點(diǎn)擊可在 initialize 中改為loose或antiscript渲染不可信內(nèi)容時(shí)建議保持strict或改用sandbox。避坑 FAQ現(xiàn)象節(jié)點(diǎn)里的 HTML 顯示成純文本、點(diǎn)擊沒反應(yīng)→ 原因securityLevel默認(rèn)為 strict會(huì)轉(zhuǎn)義標(biāo)簽并禁用交互。 → 解決在mermaid.initialize()中把securityLevel設(shè)為loose前提是圖表來源可信?，F(xiàn)象pnpm install卡住或報(bào)錯(cuò)→ 原因本地 store 緩存異?；蚓W(wǎng)絡(luò)中斷。 → 解決執(zhí)行pnpm store prune清理緩存后再用pnpm install --force重試?，F(xiàn)象圖不渲染頁面上只有原始文本→ 原因通常是語法拼寫錯(cuò)誤或 initialize 之后才渲染導(dǎo)致配置未生效。 → 解決打開瀏覽器控制臺(tái)看報(bào)錯(cuò)信息定位語法問題確認(rèn)先調(diào)用mermaid.initialize()再觸發(fā)渲染?，F(xiàn)象改了主題配置圖沒變化→ 原因配置在渲染之后才寫入本次渲染已按舊配置完成。 → 解決調(diào)整調(diào)用順序讓 initialize 先于渲染執(zhí)行或修改后手動(dòng)重新渲染。生態(tài)與資源官方文檔入口docs/各圖種語法參考docs/syntax/配置項(xiàng)說明docs/config/setup/主題定制詳解docs/config/theming.md本地演示頁面集合demos/核心源碼packages/mermaid/src/社區(qū)參與指南docs/community/寫在最后Mermaid 的價(jià)值就在文本驅(qū)動(dòng)三個(gè)字圖隨文檔走文檔隨代碼走?，F(xiàn)在你已經(jīng)在本地跑起了開發(fā)環(huán)境下一步建議打開demos/flowchart.html這類演示頁把里面的圖定義改成自己的業(yè)務(wù)感受從文本到成圖的完整鏈路。上手了流程圖再按docs/syntax/逐個(gè)圖種推進(jìn)用不了幾天就能覆蓋你日常文檔里 90% 的畫圖需求 ??【免費(fèi)下載鏈接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown項(xiàng)目地址: https://gitcode.com/GitHub_Trending/me/mermaid創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考