Mermaid 流程圖實戰(zhàn)3 步把文檔圖表搬進 Git【免費下載鏈接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown項目地址: https://gitcode.com/GitHub_Trending/me/mermaid每次需求一變就得回到繪圖軟件里挪框、重連箭頭、再導(dǎo)出一遍Mermaid 把畫圖換成了寫文本用 Mermaid 流程圖語法描述結(jié)構(gòu)預(yù)覽工具直接渲染成圖代碼與圖存在同一個倉庫。這篇 15 分鐘講完從畫第一張圖到把它用進日常工作。 三分鐘上手如何用 Mermaid 畫流程圖跟著做3 步跑通。第一步在任意支持 Mermaid 的 Markdown 編輯器里開一個mermaid graph TD A[需求評審] -- B{方案通過?} B --|是| C[進入開發(fā)] B --|否| D[重新討論] D -- A第三步看預(yù)覽方框和箭頭按描述連好就算成功。把 TD 改成 LR圖從豎排變橫排想加節(jié)點照抄一行改文字即可。 ## 能力速覽Mermaid 支持哪 6 種圖 一張表說清選型 | 類型 | 適合什么 | | --- | --- | | 流程圖 | 審批流、故障處理、決策分支 | | 序列圖 | 接口調(diào)用鏈、服務(wù)間交互 | | 甘特圖 | 項目排期、里程碑跟蹤 | | 類圖 | 對象模型、繼承與依賴關(guān)系 | | 狀態(tài)圖 | 訂單狀態(tài)機、生命周期 | | ER 圖 | 數(shù)據(jù)庫表結(jié)構(gòu)、實體關(guān)系 | 各圖類型共用一套語法風(fēng)格聲明節(jié)點聲明連線完事。細(xì)節(jié)可查[官方語法文檔](https://link.gitcode.com/i/cf40c5456a207bd378e57147736258b9)。 ## 按角色分場景把 Mermaid 用進日常工作 每張圖對應(yīng)一類人挑你那份看。 ### 給寫技術(shù)文檔的人 接口怎么調(diào)、參數(shù)怎么傳口頭說不清時貼一張序列圖。文本改動后圖跟著變評審時直接看 diff比換一張截圖好溝通。 [](https://link.gitcode.com/i/ae912f006560c12174cfda72953c2c0a) *序列圖展示交互時序* ### 給排項目計劃的人 任務(wù)依賴、開始日期、負(fù)責(zé)人全寫在文本里甘特圖自動排好時間軸。調(diào)整工期就是改一行日期不用在日歷上拖格子。 [](https://link.gitcode.com/i/ae912f006560c12174cfda72953c2c0a) *甘特圖展示排期與依賴* ### 給做代碼審查的人 新人看類圖先建立模型認(rèn)知評審時拿它對照代碼結(jié)構(gòu)漂移一眼可見。類圖和代碼放同一倉庫改哪邊另一邊都看得見。 [](https://link.gitcode.com/i/ae912f006560c12174cfda72953c2c0a) *類圖展示繼承與職責(zé)* ## ? 踩坑速查渲染出錯先看這里 報錯別慌對號入座。 - 圖不渲染 → 確認(rèn)代碼塊標(biāo)記是 mermaid不是 text - 報錯說不清 → 先查中文標(biāo)點、沒閉合的括號和方括號 - 圖太寬溢出 → 節(jié)點標(biāo)簽寫短或把 TD 改成 LR - 風(fēng)格跟文檔不搭 → 初始化里設(shè)置 theme 為 forest 或 dark - 節(jié)點重疊 → 調(diào)大 flowchart 的 nodeSpacing 與 rankSpacing 挑你最常畫的那張圖今晚就改成文本。第一版丑沒關(guān)系圖先進倉庫跟著文檔一起迭代才是關(guān)鍵?！久赓M下載鏈接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown項目地址: https://gitcode.com/GitHub_Trending/me/mermaid創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考