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