為什么需要它
一些可視化工具再給我們帶來直觀性的同時(shí)典阵，也增加了操作的難度倒慧，需要精細(xì)地調(diào)整組件的大小和樣式，更多的時(shí)候，我們不是為了寫一份漂亮的報(bào)告而畫流程圖，只是需要便捷地向他人分享自己的 idea，在這樣的需求下，代碼生成流程圖顯然更適合屯援。
對(duì) gitlab 的支持
You can generate diagrams and flowcharts from text by using Mermaid or PlantUML. You can also use Kroki to create a wide variety of diagrams.
gitlab 配置 plantuml
plantuml/plantuml-server: PlantUML Online Server
https://github.com/plantuml/plantuml-server
plantuml-server 啟動(dòng)完成后，需要在 GitLab 上配置開啟 PlantUML念脯，管理員登錄 -> Admin Area -> Settings狞洋，復(fù)選框選中 Enable PlantUML，輸入 PlantUML URL（就是剛剛啟動(dòng)的 PlantUML Server 服務(wù)監(jiān)聽地址）绿店。好了現(xiàn)在可以開始 PlantUML 之旅了徘铝。
gitlab 配置 Mermaid
在 GitLab 10.3 中引入 。您可以訪問官方頁面以獲取更多詳細(xì)信息惯吕。
gitlab 配置 Kroki
可以訪問官方頁面以獲取更多詳細(xì)信息。
對(duì) github 的支持
支持時(shí)間：https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/
目前版本已內(nèi)置怕午，可以直接使用废登。
mermaid-js/mermaid: Generation of diagram and flowchart from text in a similar manner as markdown
https://github.com/mermaid-js/mermaid
對(duì) mermaid 的詳細(xì)說明
如果您不熟悉使用 Mermaid，或者需要幫助來確定 Mermaid 代碼中的問題郁惜，則 Mermaid Live Editor 是一個(gè)有用的工具堡距，可用于在 Mermaid 圖中創(chuàng)建和解決問題。
Mermaid 支持軟件項(xiàng)目中一系列不同的常見圖表類型兆蕉，涵蓋流程圖羽戒、UML、Git 圖虎韵、用戶體驗(yàn)流程圖易稠，甚至可怕的甘特圖。
To generate a diagram or flowchart, write your text inside the mermaid block:
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
對(duì) Typora 的支持
真正實(shí)現(xiàn)畫圖功能的并不是 Typora 本身包蓝，它只是內(nèi)置了對(duì) Mermaid 的支持驶社。Mermaid 集成功能建議去 gitlab 和 GitHub 查看幫助文檔，了解更多信息测萎。
總結(jié)
由于無論 gitlab 還是 GitHub 都對(duì) Mermaid 有了良好的支持亡电，在對(duì)比渲染流程，所以我優(yōu)先考慮此方式硅瞧。
參考文檔
GitLab Flavored Markdown | GitLab
https://docs.gitlab.com/ee/user/markdown.html#mermaid
GitLab Markdown - 《Gitlab 中文文檔》 - 書棧網(wǎng) · BookStack
https://www.bookstack.cn/read/gitlab-doc-zh/docs-408.md#mermaid
Mermaid：如何在Markdown文本中添加流程圖份乒，附支持github的方法_DenryDu的博客-CSDN博客_gitlab mermaid
https://blog.csdn.net/weixin_43661154/article/details/112101437
Typora通過mermaid使用流程圖、腦圖-CSDN博客_mermaid 思維導(dǎo)圖
https://blog.csdn.net/Alexhcf/article/details/112801877
