Mermaid是基于文本的可視化工具，它允許使用簡潔的語法，快速生成流程圖、時(shí)序圖甘特圖等多種圖表。

跟傳統(tǒng)拖拽式的繪圖工具比起來，Mermaid 的主要優(yōu)勢在以下幾個(gè)方面：

• 更適合與文檔集成，直接在 Markdown 文件中使用

• 支持版本管理，便于協(xié)作和修改

• 學(xué)習(xí)成本低，甚至非開發(fā)人員都能快速上手

以下是一些 Mermaid 的實(shí)際應(yīng)用場景：

• 繪制系統(tǒng)架構(gòu)圖

• 創(chuàng)建項(xiàng)目開發(fā)計(jì)劃的甘特圖

• 制作代碼和流程的交互說明圖

更重要的一點(diǎn)是，由于是文字描述，也可以使用AI來組織和生成相應(yīng)的語言，以便快速的完成任務(wù)

核心功能

流程圖

用于描述流程或操作步驟：

flowchart?TD?
A[開始]?-->?B{是否通過審核?}?
B?-->|是|?C[進(jìn)入開發(fā)階段]?
B?-->|否|?D[重新設(shè)計(jì)策略]?
C?-->?E[結(jié)束]?
D?-->?E

序列圖 (時(shí)序圖)

用于展示參與者之間的消息流或交互邏輯：

sequenceDiagram?
用戶->>服務(wù):?請(qǐng)求數(shù)據(jù)?
服務(wù)->>數(shù)據(jù)庫:?查詢數(shù)據(jù)?
數(shù)據(jù)庫-->>服務(wù):?數(shù)據(jù)返回?
服務(wù)-->>用戶:?返回結(jié)果

甘特圖

用于項(xiàng)目進(jìn)度管理和時(shí)間規(guī)劃：

gantt
????section?Section
????Completed?:done,????des1,?2014-01-06,2014-01-08
????Active????????:active,??des2,?2014-01-07,?3d
????Parallel?1???:?????????des3,?after?des1,?1d
????Parallel?2???:?????????des4,?after?des1,?1d
????Parallel?3???:?????????des5,?after?des3,?1d
????Parallel?4???:?????????des6,?after?des4,?1d

類圖

用于描述類的結(jié)構(gòu)和關(guān)系：

classDiagram
Class01?<|--?AveryLongClass?:?Cool
<<Interface>>?Class01
Class09?-->?C2?:?Where?am?I?
Class09?--*?C3
Class09?--|>?Class07
Class07?:?equals()
Class07?:?Object[]?elementData
Class01?:?size()
Class01?:?int?chimp
Class01?:?int?gorilla
class?Class10?{
??<<service>>
??int?id
??size()
}

狀態(tài)圖

用于描述系統(tǒng)在不同狀態(tài)之間的轉(zhuǎn)換關(guān)系：

stateDiagram-v2
[*]?-->?Still
Still?-->?[*]
Still?-->?Moving
Moving?-->?Still
Moving?-->?Crash
Crash?-->?[*]

Git

更多圖示可以查看官網(wǎng)示例

https://mermaid.js.org/intro/

安裝與使用

在線工具

可以使用 Mermaid 提供的?Live Editor?在線生成圖表，無需本地安裝工具。能夠利用Mermaid所提供的LiveEditor在線功能去生成圖表，如此一來就不用在本地進(jìn)行工具的安裝操作啦。

https://mermaid-js.github.io/mermaid-live-editor

在 Markdown 文件中使用

Mermaid 語法非常適合嵌入 Markdown 文檔，只需用代碼塊括起 Mermaid 內(nèi)容即可：

flowchart?LR
????A[開始]?-->?B[處理]
????B?-->?C[結(jié)束]

在 Node.js 項(xiàng)目中使用

如果在前端或 Node.js 項(xiàng)目中生成圖表，可以先安裝 Mermaid：

npm?install?mermaid

在 HTML 文件中引入 Mermaid：

<script?src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>
????mermaid.initialize({?startOnLoad:?true?});
</script>
<div?class="mermaid">
graph?TD
????A-->B;
????A-->C;
????B-->D;
????C-->D;

</div>

集成到 GitHub 和 GitLab

直接在GitHub或GitLab的Markdown文件里添加Mermaid代碼塊，它們會(huì)自動(dòng)渲染。此功能對(duì)于需要團(tuán)隊(duì)協(xié)作以及代碼管控的開發(fā)者而言，尤其方便。

寫在最后

Mermaid是個(gè)很高效又很輕量的工具，能把繪圖和文檔生成緊密地合在一起。不用去搞那些繁瑣的工具操作，只要用簡單的文本語法，就可以做出復(fù)雜又精美的圖表。不管是對(duì)個(gè)人開發(fā)者，還是在團(tuán)隊(duì)協(xié)作的那種情況下，Mermaid都能明顯地提高效率。

把Mermaid加到你的文檔和工作流里，這么做不但能給你省時(shí)間，還能讓你的文檔更有結(jié)構(gòu)，更加清楚明白。

項(xiàng)目地址:https://github.com/mermaid-js/mermaid

[超站]友情鏈接：

四季很好，只要有你，文娛排行榜：https://www.yaopaiming.com/
關(guān)注數(shù)據(jù)與安全，洞悉企業(yè)級(jí)服務(wù)市場：https://www.ijiandao.com/