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

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

liguoquan

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

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

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

FlowUs息流

已認(rèn)證賬號

17 人贊同了該文章

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

什么是 Mermaid 語法？

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

如何使用 Mermaid 語法？

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

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

Mermaid 語法不會寫？

圖表類型支持

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

餅圖

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

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

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

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

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

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

流程圖

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

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

使用Mermaid繪制流程圖同樣也是非常簡單的:

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

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

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

節(jié)點還可以調(diào)用修飾函數(shù),對節(jié)點進行顏色、邊框、虛線等方面的設(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ù),上面的代碼中,我們對節(jié)點A、B、C、D進行了不同的設(shè)置,使它們具有不同的顏色和邊框樣式。

時序圖

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

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

狀態(tài)圖

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

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

甘特圖

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

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

甘特圖也支持更多的屬性設(shè)定,如顏色、進度等,可以參考官方文檔進行進一步學(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)系等,可以參考官方文檔進行更多學(xué)習(xí)。

用戶旅程

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

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

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

journey
title 用戶旅程圖
section 登錄
已有賬號         : 已有賬號頁面
點擊登錄         : 登錄操作
登錄成功         : 登錄成功頁面
section 注冊
沒有賬號         : 注冊頁面
點擊注冊         : 注冊操作
注冊成功         : 注冊成功頁面