Mermaid 是一個用於畫流程圖、狀態圖、時序圖、甘特圖的庫，使用 JS 進行本地渲染，廣泛集成於許多 Markdown 編輯器中。 之前用過 PlantUML，但是發現這個東西的實現原理是生成 UML 的圖片后上傳服務端，每次再從服務端讀取，因此覺得不夠魯棒，隱私性也不好，因而棄 ...

流程圖的示例 時序圖的示例 甘特圖的示例 FAQ 很多時候，你想解釋自己的想法/代碼，但是用語言來表達會很啰嗦，並且讀者也不易理解。一般這種情況下，我們都會想使用圖解來解釋。但是，我們也不會想下載那些繁重的工具，比如Visio。 Mermaid 是一個用來 ...

甘特圖 甘特圖（Gantt chart）又稱為橫道圖、條狀圖(Bar chart)。其通過條狀圖來顯示項目、進度和其他時間相關的系統進展的內在關系隨着時間進展的情況。以提出者亨利·勞倫斯·甘特 ...

1. Mermaid 點我查看官方文檔 mermaid的語法研究 所有代碼包裹在``里面 需用mermaid標識 基本構成 node(節點) edge(邊) text(文本內容) 如 simple introduce ...

作者：黃永剛 mermaid簡介 當撰寫文檔的時候，對於流程圖的生成大多使用Visio等繁重的工具，沒有一種輕便的工具能夠畫圖從而簡化文檔的編寫，就像markdown那樣。 mermaid解決這個痛點，這是一個類似markdown語法的腳本語言，通過JavaScript實現 ...

序列圖（時序圖） 序列圖是一種交互圖，它顯示了進程如何相互操作以及按什么順序操作。 sequenceDiagram participant l as 大灰狼 participan ...

Markdown教程<2> mermaid圖形繪制（1） 博客園中的markdown編輯器同時支持mermaid圖表引擎與tex公式引擎，可以使用mermaid直接畫出流程圖，時序圖，甘特圖等，比較方便，下面介紹一下在markdown中使用mermaid繪制圖表 注意 ...

1. mermaid：示意圖 vscode 中安裝 mermaid 插件以后，可以很容易地畫示意圖，例如： 上面最后一行應為```，顯示不了，所以用'''示意。效果如下： 還可以做出更多細致的效果，參考：https://blog.csdn.net/swinfans/article ...