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