[轉(zhuǎn)帖]Mermaid 使用教程：從入門到精通

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

liguoquan

2023年12月2日 16:45 本文熱度 1136

：Mermaid 使用教程：從入門到精通

Mermaid 使用教程：從入門到精通——流程圖、時(shí)序圖、甘特圖、類圖等圖形繪制輕松搞定

FlowUs息流

已認(rèn)證賬號(hào)

17 人贊同了該文章

Mermaid 使用教程：從入門到精通——流程圖、時(shí)序圖、甘特圖、類圖等圖形繪制輕松搞定

什么是 Mermaid 語法？

mermaid是一種Javascript庫(kù), 可以用于生成流程圖、序列圖、甘特圖等各種圖表。由于其簡(jiǎn)單易用、功能強(qiáng)大,越來越多的人開始使用它來創(chuàng)建圖表。

如何使用 Mermaid 語法？

使用一些專門支持 Mermaid 渲染的在線編輯器。推薦 Mermaid Live Edit
使用支持 Mermaid 語法的編輯器。比如，FlowUs 息流。

你可以在FlowUs中直接使用mermaid語法來創(chuàng)建各種類型的圖表，還支持將直接將圖片直接保存下來！
快來和息寶一起應(yīng)用mermaid的強(qiáng)大功能,進(jìn)一步精細(xì)化圖表制作吧！

Mermaid 語法不會(huì)寫？

圖表類型支持

餅形圖(Pie Chart)
流程圖(Flow Chart)
時(shí)序圖(Sequence Diagram)
狀態(tài)圖(State Diagram)
甘特圖(Gantt Diagram)
類圖(class Diagram)
用戶旅程圖

餅圖

Pie Chart,中文也稱之為“餅狀圖”,是一種常用的數(shù)據(jù)可視化工具,可以用于展示不同部分之間的占比關(guān)系。使用Mermaid 繪制餅形圖也十分簡(jiǎn)單,只需要按照以下格式編寫即可:

pie
title 數(shù)據(jù)比例圖
"選項(xiàng)1" : 25
"選項(xiàng)2" : 50
"選項(xiàng)3" : 25

其中,title是餅形圖的標(biāo)題,選項(xiàng)1/2/3是各個(gè)數(shù)據(jù)選項(xiàng)的名稱,25/50/25則是它們對(duì)應(yīng)的數(shù)值。你可以根據(jù)需要自行修改數(shù)據(jù)選項(xiàng)的個(gè)數(shù)以及對(duì)應(yīng)的數(shù)值。

除此之外,還有一些可選的參數(shù)可以進(jìn)行設(shè)置:

colors:用于設(shè)置各個(gè)數(shù)據(jù)選項(xiàng)對(duì)應(yīng)的顏色。默認(rèn)情況下,Mermaid會(huì)自動(dòng)為每個(gè)數(shù)據(jù)選項(xiàng)分配一種顏色,也可以手動(dòng)指定顏色;
labelFormat:用于設(shè)置餅形圖上的數(shù)據(jù)標(biāo)簽格式,可以是數(shù)字、百分比等。
labelPosition:用于設(shè)置數(shù)據(jù)標(biāo)簽的位置,可以是餅形圖內(nèi)部、外部或者中心位置。

在繪制完餅形圖之后,你可以將它嵌入到你的文章或者報(bào)告中,這樣就能夠清晰直觀地展示數(shù)據(jù)的占比關(guān)系了。

流程圖

除了餅形圖之外,Mermaid還支持多種圖表類型,其中最常用的就是流程圖了。

流程圖可以用于展示某個(gè)過程中各個(gè)步驟的順序和關(guān)系,例如軟件開發(fā)過程中的各個(gè)階段、某個(gè)業(yè)務(wù)流程中的各個(gè)環(huán)節(jié)等等。

使用Mermaid繪制流程圖同樣也是非常簡(jiǎn)單的:

graph LR
  A-->B
  B-->C  
  C-->D  
  D-->E

其中,每個(gè)人物或狀態(tài)都用一個(gè)大寫字母表示。箭頭表示流程中的方向,可以是兩個(gè)人物之間直接的連線,也可以是虛擬的線。

例如,上面的流程圖中,大寫字母A表示流程的初始狀態(tài),箭頭指向B表示從狀態(tài)A到狀態(tài)B的流程方向。

節(jié)點(diǎn)還可以調(diào)用修飾函數(shù),對(duì)節(jié)點(diǎn)進(jìn)行顏色、邊框、虛線等方面的設(shè)置,如下所示:

graph LR
A --> B --> C --> D
style A fill:#F0F0F0,stroke:#333,stroke-width:2px;
style B fill:#FFF,stroke:#333,stroke-width:2px,stroke-dasharray: 5 5;
style C fill:#FFA500,stroke:#333,stroke-width:2px;
style D fill:#FFF,stroke:#333,stroke-width:2px,stroke-dasharray: 5 5;

其中,style關(guān)鍵詞用于調(diào)用修飾函數(shù),上面的代碼中,我們對(duì)節(jié)點(diǎn)A、B、C、D進(jìn)行了不同的設(shè)置,使它們具有不同的顏色和邊框樣式。

時(shí)序圖

時(shí)序圖可以用于展示系統(tǒng)交互、程序控制流程等。在 Mermaid 中,時(shí)序圖的渲染方式也是非常簡(jiǎn)便的。

sequenceDiagram    
participant User    
participant System    
User->>System: 發(fā)送請(qǐng)求    
System->>User: 返回響應(yīng)

狀態(tài)圖

狀態(tài)圖用于展示對(duì)象的狀態(tài)和狀態(tài)間的轉(zhuǎn)移過程。在mermaid中,狀態(tài)圖的語法也是非常簡(jiǎn)單的。狀態(tài)圖可以用于展示對(duì)象的生命周期、狀態(tài)轉(zhuǎn)移等。

stateDiagram
[*] --> 暫停
    暫停 --> 播放
    暫停 --> 停止
    播放 --> 暫停
    播放 --> 停止
    停止 --> [*]

甘特圖

甘特圖用于展示項(xiàng)目進(jìn)度安排、任務(wù)分配等信息,也是mermaid支持的一種圖表類型。

gantt
title 甘特圖示例
dateFormat  YYYY-MM-DD
section 項(xiàng)目A    
任務(wù)1           :a1, 2023-05-01, 10d    
任務(wù)2           :after a1  , 20d
section 項(xiàng)目B    
任務(wù)3           :2023-05-15  , 12d    
任務(wù)4           :2023-05-20  , 10d

甘特圖也支持更多的屬性設(shè)定,如顏色、進(jìn)度等,可以參考官方文檔進(jìn)行進(jìn)一步學(xué)習(xí)。

類圖

類圖用于展示類之間的關(guān)系,屬性和方法。在mermaid中,類圖的語法也是非常常用的。

classDiagram
class Animal {
        +name: string
        +age: int
        +eat(food: string): void
    }
class Dog {
        +sound: string
        +bark(): void
    }
class Cat {
        +climb(): void
    }
    Animal <|-- Dog
    Animal <|-- Cat

class類圖中還有更多的屬性設(shè)定,如抽象類、接口、關(guān)聯(lián)關(guān)系等,可以參考官方文檔進(jìn)行更多學(xué)習(xí)。

用戶旅程

用戶旅程圖主要分為多個(gè)階段或步驟,描述了用戶在使用產(chǎn)品或服務(wù)時(shí)的流程和情感反應(yīng)。

在每個(gè)步驟中,可以進(jìn)一步描述用戶的行為和反饋,可以幫助產(chǎn)品團(tuán)隊(duì)更好地理解用戶需求和體驗(yàn),進(jìn)而進(jìn)行產(chǎn)品優(yōu)化和改進(jìn)。

在mermaid中,用戶旅程圖的語法如下:

journey
title 用戶旅程圖
section 登錄
已有賬號(hào)         : 已有賬號(hào)頁面
點(diǎn)擊登錄         : 登錄操作
登錄成功         : 登錄成功頁面
section 注冊(cè)
沒有賬號(hào)         : 注冊(cè)頁面
點(diǎn)擊注冊(cè)         : 注冊(cè)操作
注冊(cè)成功         : 注冊(cè)成功頁面