時間管理、頭腦風暴、閱讀、會議記錄神器-Mermaid
這是我參與更文挑戰的第4天，活動詳情查看： 更文挑戰javascript
緣起
看到Mermaid是由於我開始用掘金編輯器寫文章，平常我會用xmind或者流程圖來記錄，甚至我還徒手畫過xmind。用結構圖來梳理內容，更直觀，清晰也有更本身得思考，俗話說的好千萬字抵不過一張圖。看到Mermaid我立馬就愛了，用代碼生成結構圖，其實就至關與手寫筆記的過程。這篇文章也就應運而生 
css
你能獲得什麼
- 你能夠用代碼生成任意你想要的
流程圖、狀態圖、甘特圖、時序圖、餅圖、類圖、關係圖、旅程圖 - 無論在閱讀、學習知識、會議紀要、頭腦風暴、時間管理這絕對是一款利器，提升學習效率，梳理學習思路在畫圖的過程當中二次知識深化告別點點點，一路coding 一路爽
- 歷史代碼可追蹤，由於這是代碼哇
Mermaid是什麼
mermaid 是一個 JS 實現的一個三方庫java
淺顯的理解就是 生成圖表 的 「Markdown語法」 用純文本格式編寫圖表node
在哪裏可使用Mermaid
- js文件中做爲三方庫引入 npm倉庫地址
- cdn形式引入
<body>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</body>
複製代碼
- 支持Markdown語法的編輯器 好比
掘金編輯器語雀印象筆記TyporaMermaid在線編輯器 - IDE：VScode中下載插件：Markdown Preview Mermaid Support
圖表類型
-
flowchart 流程圖git
-
時序圖github
-
甘特圖web
-
類圖npm
-
狀態圖markdown
-
關係圖app
-
旅程圖
-
餅圖
Mermaid - 流程圖
基本結構
- 圓角矩形 表示「開始」與「結束」
- 矩形表示行動方案、普通工做環節用
- 菱形表示問題判斷或斷定（審覈/審批/評審）環節
- 用平行四邊形表示輸入輸出
- 箭頭表明工做流方向
流程圖與節點的建立
id 存在的意義 當節點內多文字過多 節點與節點之間的關係複雜 便可用id指代 當前節點便可
流程圖聲明：- 關鍵字：
graph - 源代碼
```mermaid graph //流程圖聲明 S[聲明一個流程圖] // 節點建立 Id[節點內容] ``` 複製代碼 - 生成結果
- 關鍵字：
節點內容：- 節點內容爲純文本：
-
語法：id(純文本)
-
源代碼
```mermaid graph s(節點爲純文本不包含特殊字符) ``` 複製代碼 -
生成結果
-
- 內容包含特殊字符
-
語法：id("內容+特殊字符")
-
源代碼
```mermaid graph s("開始(START)") ``` 複製代碼 -
生成結果
-
- 內容包含轉義字符
- 語法：id(":轉義字符;")
- 源代碼
```mermaid graph s("開始:#9829;") ``` 複製代碼 - 生成結果
- 節點內容爲純文本：
流程圖佈局
流程圖默認的佈局爲的自上到下
```mermaid
graph
s[開始]-->
e[結束]
```
複製代碼
自上向下-
語法：
- graph BT
- graph TD
-
源代碼：
```mermaid graph TD s[開始]--> e[結束 ``` 複製代碼```mermaid graph TB s[開始]--> e[結束 ``` 複製代碼 -
生成結果
-
自下向上- 語法：
- graph BT
- 源代碼：
```mermaid graph BT s[開始]--> e[結束 ``` 複製代碼 - 生成結果
- 語法：
自左向右-
語法:
- graph LR
-
源代碼
```mermaid graph LR s[開始]--> e[結束 ``` 複製代碼 -
生成結果:
-
自右向左- 語法:
- graph RL
- 源代碼
```mermaid graph RL s[開始]--> e[結束 ``` 複製代碼 - 生成結果:
- 語法:
流程圖節點形狀
矩形- 語法： id[節點內容]
- 源代碼
```mermaid graph s[開始] e[結束] ``` 複製代碼 - 生成結果：
圓角矩形節點-
語法：id(節點內容)
-
源代碼
```mermaid graph s(開始) e(結束)id() ``` 複製代碼 -
生成結果：
-
體育場形狀- 語法：id([內容])
- 源代碼
```mermaid graph s([開始 - 體育場圖]) --> e([結束 - 體育場圖]) ``` 複製代碼 - 生成結果：
圓柱形- 語法：id[(內容)]
- 源代碼
```mermaid graph s[(開始 - 圓柱)] --> e[(結束 - 圓柱)] ``` 複製代碼 - 生成結果：
圓形-
語法：id((內容))
-
源代碼
```mermaid graph s((開始 - 圓柱)) --> e((結束 - 圓柱)) ``` 複製代碼 -
生成結果：
-
菱形-
語法：id{內容}
-
源代碼
```mermaid graph s{開始 - 菱形} --> e{結束 - 菱形} ``` 複製代碼 -
生成結果：
-
六角形- 語法：id{{內容}}
- 源代碼
```mermaid graph s{{開始 - 六角形}} --> e{{結束 - 六角形}} ``` 複製代碼 - 生成結果：
不對稱-
語法：id>內容]
-
源代碼
```mermaid graph s>開始-非對稱] --> E>結束-非對稱] ``` 複製代碼 -
生成結果：
-
平行四邊形-
語法：
- 右 id[/內容/]
- 左 id[\內容\]
-
源代碼
```mermaid graph s[\開始\] --> E[/結束/] ``` 複製代碼 -
生成結果：
-
梯形-
語法：id[/內容]
-
源代碼
```mermaid graph s[/開始\] --> E[/結束\] ``` 複製代碼 -
生成結果：
-
節點與節點之間的連接
-
實線- 語法：--
- 源代碼：
```mermaid graph LR s[開始] --- e[結束] ``` 複製代碼 - 生成效果
graph LR s[開始] --- e[結束]
-
虛線- 語法 -.-
- 源代碼
```mermaid graph LR s[開始] -.- e[結束] ``` 複製代碼 - 生成效果
graph LR s[開始] -.- e[結束]
-
粗連接線- ===
- 源代碼
```mermaid graph LR s[開始] === e[結束] ``` 複製代碼 - 生成效果
graph LR s[開始] === e[結束]
-
實線箭頭-
語法 -->
-
源代碼
```mermaid graph LR s[開始] --> e[結束] ``` 複製代碼 -
生成效果:
graph LR s[開始] --> e[結束]
-
-
虛線箭頭- 語法 -.->
- 源代碼
```mermaid graph LR s[開始] -.-> e[結束] ``` 複製代碼 - 生成效果：
graph LR s[開始] -.-> e[結束]
-
粗線箭頭- 語法 ==>
- 源代碼
```mermaid graph LR s[開始] ==> e[結束] ``` 複製代碼 - 生成效果
graph LR s[開始] ==> e[結束]
-
帶文字的連接線-實線-
語法 --內容--- 或者 --->|內容|
-
源代碼
```mermaid graph LR s[開始] --過程--- e[結束] ``` 複製代碼或者
```mermaid graph LR s[開始] --->|過程| e[結束] ``` 複製代碼 -
生成效果：
graph LR s[開始] --過程--- e[結束]
-
-
帶文字的連接線-虛線-
語法 -.內容.->
-
源代碼
```mermaid graph LR s[開始] -.過程.-> e[結束] ``` 複製代碼 -
生成效果：
graph LR s[開始] -.過程.-> e[結束]
-
-
帶文字的連接線-實線粗線-
語法 ==內容==>
-
源代碼
```mermaid graph LR s[開始] ==過程==> e[結束] ``` 複製代碼 -
生成效果：
graph LR s[開始] ==過程==> e[結束]
-
關係鏈
1. 流程關係 橫向 縱向
單行
-
源代碼
```mermaid graph LR s[買菜] --走路-->P[菜市場]--付錢--> e[結束買菜] ``` 複製代碼 -
生成效果
graph LR s[買菜] --走路-->P[菜市場]--付錢--> e[結束買菜]
多行
-
源代碼
```mermaid graph LR s[買菜] --走路-->P[菜市場]--付錢--> e[結束買菜] s--走路--> o[永輝超市]--付錢--> e ``` 複製代碼 -
生成效果
graph LR s[買菜] --走路-->P[菜市場]--付錢--> e[結束買菜] s--走路--> o[永輝超市]--付錢--> e
2. 閉合關係
- 源代碼（單循環）：
```mermaid
graph LR
s[家] --走路-->P[菜市場]--走路-->L[水果店]--走路--> j[超市]-->s
```
複製代碼
- 生成效果
graph LR s[家] --走路-->P[菜市場]--走路-->L[水果店]--走路--> j[超市]-->s
- 源代碼（多循環）：
```mermaid
graph LR
s[買菜] --走路-->P[菜市場]--付錢--> s
s--網上--> o[永輝超市]--付錢--> s
```
複製代碼
- 生成效果
graph LR s[買菜] --走路-->P[菜市場]--付錢--> s s--網上--> o[永輝超市]--付錢--> s
3. 平行與交叉關係
張三 李四 都會內卷和躺平
graph z[張三]-->C[內卷] & D[躺平]
graph L[李四]-->C[內卷] & D[躺平]
合併
- 源代碼
```mermaid
graph
z[張三]-->C[內卷]
z-->D[躺平]
L[李四]-->C[內卷]
L-->D
```
複製代碼
graph z[張三]-->C[內卷] z-->D[躺平] L[李四]-->C[內卷] L-->D
更簡易的寫法 只須要一行
- 源代碼
```mermaid
graph
z[張三] & L[李四]-->C[內卷] & D[躺平]
```
複製代碼
- 生成效果
graph z[張三] & L[李四]-->C[內卷] & D[躺平]
4. 控制鏈接長度
- 源代碼
```mermaid
graph
z[張三]-->X{選擇躺平仍是內卷}
x--內卷-->Y[努力]
Y--努力-->R[從新思考]
R-->X
X-->|躺平|N[喝快樂水]
```
複製代碼
graph
z[張三]-->X{選擇躺平仍是內卷}
x--內卷-->Y[努力]
Y--努力-->R[從新思考]
R-->X
X-->|躺平|N[喝快樂水]
上圖可得當角色選擇躺平得邏輯不是預期得展現 須要調整 選擇增長躺平得長度 邏輯便可正確
- 源代碼
```mermaid
graph
z[張三]-->X{選擇躺平仍是內卷}
x--內卷-->Y[努力]
Y--努力-->R[從新思考]
R-->X
X--->|躺平|N[喝快樂水] //增長長度
複製代碼
graph
z[張三]-->X{選擇躺平仍是內卷}
x--內卷-->Y[努力]
Y--努力-->R[從新思考]
R-->X
X--->|躺平|N[喝快樂水]
邏輯上 躺平與從新思考並非平行關係 理想狀態 選擇躺平長度大於選擇內卷 可用----> 連接線會增長2個層級的長度
- 源代碼：
```mermaid graph z[張三]-->X{選擇躺平仍是內卷} x--內卷-->Y[努力] Y--努力-->R[從新思考] R-->X X--躺平---->N[喝快樂水] ``` 複製代碼
graph
z[張三]-->X{選擇躺平仍是內卷}
x--內卷-->Y[努力]
Y--努力-->R[從新思考]
R-->X
X--躺平---->N[喝快樂水]
可用----> 連接線會增長3個層級的長度 一下是各個類型鏈接線增長層級長度語法
| 增長層級長度 | 1 | 2 | 3 |
|---|---|---|---|
| 實線 | --- | ---- | ----- |
| 帶箭頭的實線 | --> | ---> | ----> |
| 粗實線 | === | ==== | ===== |
| 帶箭頭的粗實線 | ==> | ===> | ====> |
| 虛線 | -.- | -..- | -...- |
| 帶箭頭的虛線 | -.-> | -..-> | -...-> |
子圖表 subgraph
- 基本語法
graph
節點關係
subgraph title //子圖表的名稱
子圖表的節點關係
end //子圖標結束標誌
複製代碼
- 源代碼
```mermaid
graph TB
c1-->a2
subgraph 表1
a1-->a2
end
subgraph 表2
b1-->b2
end
subgraph 表3
c1-->c2
end
```
複製代碼
- 生成效果
graph TB
c1-->a2
subgraph 表1
a1-->a2
end
subgraph 表2
b1-->b2
end
subgraph 表3
c1-->c2
end
交互
爲節點添加事件 以及點擊跳轉 這個如今還不是很好用
- 語法：
var callback = function(){ alert('A callback was triggered'); } 複製代碼 - 源代碼：
```mermaid graph LR; A-->B; B[跳轉百度]-->C; C-->D; click A callback "Tooltip for a callback" click B "http://www.baidu.com" "This is a tooltip for a link" click A call callback() "Tooltip for a callback" click B href "http://www.github.com" "This is a tooltip for a link" ``` 複製代碼 - 生成效果
graph LR; A-->B; B[跳轉百度]-->C; C-->D; click A callback "Tooltip for a callback" click B "http://www.baidu.com" "This is a tooltip for a link" click A call callback() "Tooltip for a callback" click B href "http://www.github.com" "This is a tooltip for a link"
註釋
-
語法 %%
-
源代碼
```mermaid graph LR %% this is a comment A -- text --> B{node} A -- text --> B -- text2 --> C ``` 複製代碼 -
生成效果
graph LR %% this is a comment A -- text --> B{node} A -- text --> B -- text2 --> C
添加樣式
方式1
咱們須要給開始和結束添加樣式
- 語法： style id key:value,key:value
- 源代碼：
```mermaid graph LR s["開始(實線邊框，4px，邊框顏色：#007fff 掘金藍 ,背景色：red)"] e["結束(虛線邊框，4px，邊框顏色：red,背景色：#007fff 掘金藍 文本顏色爲白色)"] style s fill:red ,stroke:#007fff,stroke-width:4px style e fill:#007fff,stroke:red,stroke-width:4px,stroke-dasharray: 5 5,color:#fff ``` 複製代碼 - 生成效果
graph LR s["開始(實線邊框，4px，邊框顏色：#007fff 掘金藍 ,背景色：red)"] e["結束(虛線邊框，4px，邊框顏色：red,背景色：#007fff 掘金藍 文本顏色爲白色)"] style s fill:red ,stroke:#007fff,stroke-width:4px style e fill:#007fff,stroke:red,stroke-width:4px,stroke-dasharray: 5 5,color:#fff
方式2 類
-
- 定義樣式 class
- 語法：classDef className 樣式定義
-
- 應用 :::classname
- 源代碼：
```mermaid graph LR s[開始]:::ownstyle-->e[結束] classDef ownstyle fill:#007fff,stroke:red,stroke-width:4px,stroke-dasharray: 5 5,color:#fff ``` 複製代碼 - 生成效果
graph LR s[開始]:::ownstyle-->e[結束] classDef ownstyle fill:#007fff,stroke:red,stroke-width:4px,stroke-dasharray: 5 5,color:#fff
方式3 css class形式添加樣式
-
定義
<style> .cssClass > rect{ fill:red; stroke:#FFFF00; stroke-width:4px; } </style> 複製代碼 -
實例： 源代碼
```mermaid graph LR; A-->B[AAA<span>BBB</span>]; B-->D; class A cssClass; ``` 複製代碼生成效果：
graph LR; A-->B[AAA<span>BBB</span>]; B-->D; class A cssClass;
Mermaid - 時序圖（序列圖）
時序圖又名序列圖是UML交互圖的一種
主要用來表示對象之間發送消息的時間順序
複製代碼
基本結構
角色Actor 系統角色 但是是人或者其餘系統子系統對象Object 交互過程當中扮演的角色 通常位於時序圖頂部生命線Lifeline 生命線表明時序圖中的對象在一段時期內的存在控制焦點Activation 控制焦點表明時序圖中的對象執行一項活動的時期消息Message 定義交互和協做中交換信息的類
學習流程圖的時候還能明白點，到了時序圖好像都是沒有聽過的詞彙 不要慌張 咱們仍是一邊看一遍作就會明白其中的含義能夠跳過
時序圖的建立
- 時序圖聲明
- 關鍵字：
sequenceDiagram - 源代碼：
```mermaid sequenceDiagram ``` 複製代碼 - 生成效果：
sequenceDiagram
- 關鍵字：
- 參與者
關鍵字：participant基本對象聲明：-
語法：
participant 參與者名稱 -
源代碼
``` mermaid sequenceDiagram participant 張三 participant 李四 ``` 複製代碼 -
生成效果：
sequenceDiagram participant 張三 participant 李四
-
對象聲明-別名 Aliases：-
語法：
participant 別名 as 參與者名稱 -
源代碼
``` mermaid sequenceDiagram participant Z as 張三 participant L as 李四 ``` 複製代碼 -
生成效果：
sequenceDiagram participant Z as 張三 participant L as 李四
-
消息 Message
-
語法：participant1 箭頭 participant2：消息內容
-
源代碼：
張三跟李四的對話用不一樣的鏈接線來鏈接
```mermaid sequenceDiagram participant Z as 張三 participant L as 李四 Z->L:我是沒有箭頭的實線 L-->Z:我是沒有箭頭的虛線 Z->>L:帶箭頭的實線 L-->>Z:帶箭頭的虛線 Z-xL:帶x箭頭實線 L-)Z:結束時候 帶箭頭的實線 Z--)L:結束時候 帶箭頭的虛線 ``` 複製代碼 -
生成效果：
sequenceDiagram participant Z as 張三 participant L as 李四 Z->L:我是沒有箭頭的實線 L-->Z:我是沒有箭頭的虛線 Z->>L:帶箭頭的實線 L-->>Z:帶箭頭的虛線 Z-xL:帶x箭頭實線 L-)Z:結束時候 帶箭頭的實線 Z--)L:結束時候 帶箭頭的虛線 -
線型對照表
線形 含義 -> 無箭頭的實線 --> 沒箭頭的虛線 ->> 帶箭頭的實線 -->> 帶箭頭的實線 -x 帶x號箭頭實線 --x 結尾x號箭頭實線 -) 結束 帶箭頭的實線 --) 結束 帶箭頭的虛線
控制焦點 Activations
- 語法：
activate participant //激活 消息 deactivate participant //釋放激活 複製代碼
這個有一些抽象咱們用一個場景來去理解
-
場景1：
張三：hi李四你還好麼 // 李四聽了開始回話 此時李四是激活狀態 開始進行對話 李四：hi張三我能夠聽到你，我很好，不用擔憂。 //李四會話結束 不會再跟張三有活動 此時李四的激活狀態被釋放 複製代碼- 源代碼：
```mermaid sequenceDiagram participant Z as 張三 participant L as 李四 Z->>L:hi李四你還好麼 activate L L->>Z:hi張三我能夠聽到你，我很好，不用擔憂。 deactivate L ``` 複製代碼 - 生成效果：
sequenceDiagram participant Z as 張三 participant L as 李四 Z->>L:hi李四你還好麼 activate L L->>Z:hi張三我能夠聽到你，我很好，不用擔憂。 deactivate L
- 源代碼：
-
場景2：
張三：hi李四你還好麼 張三：你能夠聽到我說話麼 //李四開始回話 被激活 李四：hi張三我能夠聽到你 李四：不用擔憂我 複製代碼- 源代碼：
```mermaid sequenceDiagram participant Z as 張三 participant L as 李四 Z->>L:hi李四你還好麼 activate L Z->>L:你能夠聽到我說話麼 activate L L->>Z:hi張三我能夠聽到你 deactivate L L->>Z:我很好，不用擔憂。 deactivate L ``` 複製代碼 - 生成效果：
sequenceDiagram participant Z as 張三 participant L as 李四 Z->>L:hi李四你還好麼 activate L Z->>L:你能夠聽到我說話麼 activate L L->>Z:hi張三我能夠聽到你 deactivate L L->>Z:我很好，不用擔憂。 deactivate L
- 源代碼：
時序圖-批註 Note
- 語法：
-
單個對象：
Note 位置 of participant:批註內容
-
對個對象：
Note 位置 角色名稱1，角色名稱2:批註內容
-
- 位於對象左側：
- 源代碼
```mermaid sequenceDiagram participant 張三 Note left of 張三 :我是張三 ``` 複製代碼 - 生成效果
sequenceDiagram participant 張三 Note left of 張三 :我是張三
- 源代碼
- 位於對象右側：
- 源代碼
```mermaid sequenceDiagram participant 張三 Note right of 張三 :我是張三 ``` 複製代碼 - 生成效果
sequenceDiagram participant 張三 Note right of 張三 :我是張三
- 源代碼
- 位於對象上方（須要兩個對象）：
- 源代碼
```mermaid sequenceDiagram participant 張三 participant 李四 Note over of 張三&李四 :我是張三 ``` 複製代碼 - 生成效果
sequenceDiagram participant 張三 participant 李四 張三->>李四:李四你好麼 Note over 張三,李四 :他們正在溝通
- 源代碼
時序圖-邏輯循環 Loop
交互過程當中表示某些循環的環節
- 語法：
loop 循環描述 循環內容 end //結束標記 複製代碼 - 場景：
李四跟張三是好朋友 李四生病了 張三很關心他 每過一小時 爲了避免讓張三如此擔憂 李四就約定每個小時給張三發消息
-
源代碼：
```mermaid sequenceDiagram participant 張三 participant 李四 張三->>李四:李四你好麼 loop 每過一小時李四發消息給張三 李四 --> 張三:我很好 end ``` 複製代碼 -
生成效果：
sequenceDiagram participant 張三 participant 李四 張三->>李四:李四你好麼 loop 每過一小時李四發消息給張三 李四 --> 張三:我很好 end
時序圖 抉擇（Alt）&選項（Opt）
組合片斷用來解決交互執行的條件及方式。它容許在序列圖中直接表示邏輯組件，用於經過指定條件或子進程的應用區域，爲任何生命線的任何部分定義特殊條件和子進程。
Alt 抉擇
用來指明在兩個或更多的消息序列之間的互斥的選擇，至關於經典的if..else.. 只能發生一種狀況
- 語法：
alt 第一種狀況描述
具體發生的動做
else 剩餘狀況描述
具體發生的動做
end
複製代碼
- 場景：
場景:張三：李四你還好麼 若是李四生病了他會說：我不是很好 若是李四很健康他會說：我很好 又是很好的一天 複製代碼- 源代碼：
```mermaid sequenceDiagram participant 張三 participant 李四 張三 ->>李四:你生病了麼 alt 第一種狀況描述 李四-->>張三:是的，我很難受 else 剩餘狀況描述 李四-->>張三:我沒生病，挺好的 end ``` 複製代碼 - 生成效果：
sequenceDiagram participant 張三 participant 李四 張三 ->>李四:你生病了麼 alt 第一種狀況描述 李四-->>張三:是的，我很難受 else 剩餘狀況描述 李四-->>張三:我沒生病，挺好的 end
- 源代碼：
opt 選擇"
包含一個可能發生或不發生的序列 就是一種場景有可能發生也有可能不發生
-
語法：
opt 狀況描述 有可能發生的動做 end 複製代碼 -
場景：
場景:張三：李四你還好麼 李四會可能會說謝謝你的問候也可能不會說 這個並沒有法預測 複製代碼- 源代碼：
```mermaid sequenceDiagram participant 張三 participant 李四 張三 ->>李四:你還好麼 opt 可能的回答 李四-->>張三:謝謝你的問候 end ``` 複製代碼 - 生成效果：
sequenceDiagram participant 張三 participant 李四 張三 ->>李四:你還好麼 opt 可能的回答 李四-->>張三:謝謝你的問候 end
- 源代碼：
時序圖 並行關係 par
並行處理。 一個對象同時發出的交互動做
- 基本語法：
par 動做描述1 participant1 ->> participant2: 內容 and 動做描述2 participant1 ->> participant3: 內容 end 複製代碼- 場景：
participants: 張三 李四 王五 張三 在下午5點分別給李四和王五分一條信息：內容是吃了麼 李四回覆：吃了 張三回覆：沒吃 複製代碼- 源代碼
```mermaid sequenceDiagram autonumber participant 張三 participant 李四 participant 王五 par [給李四發消息] 張三 ->> 李四: 吃了麼 and [王五發送消息] 張三 ->> 王五: 吃了麼 end 李四 ->> 張三:沒吃呢 王五 ->> 張三:吃了 ``` 複製代碼 - 生成效果
sequenceDiagram autonumber participant 張三 participant 李四 participant 王五 par [給李四發消息] 張三 ->> 李四: 吃了麼 and [王五發送消息] 張三 ->> 王五: 吃了麼 end 李四 ->> 張三:沒吃呢 王五 ->> 張三:吃了
- 源代碼
- 場景：
- 嵌套語法：
par 動做描述1 participant1 ->> participant2: 內容 and 動做描述2 participant1 ->> participant3: 內容 end par 動做描述1 participant3 ->> participant4:內容 and 王五發消息給A8 participant3 ->> participant5:內容 end 複製代碼- 場景：
participants: 張三 李四 王五 趙六 A8 王五明天請吃飯 張三發消息問李四明天去不去 同時發消息給王五問明天都有哪些人蔘加 王五發消息給趙六:明天一塊兒吃飯8 同事也發消息給A8告訴他讓他帶着小夥伴一塊兒 複製代碼- 源代碼
```mermaid sequenceDiagram participant 張三 participant 李四 participant 王五 participant 張三 participant 趙六 participant A8 par 張三發消息給李四 張三 -->> 李四:明天王5請客吃飯 and 張三發消息給王五 張三 -->> 王五: 明天吃飯都有誰呢 end par 王五發消息給趙六 王五->>趙六:明天準時到場哈 and 王五發消息給A8 王五 ->>A8:明天帶上你的夥伴一塊兒來哈 end ``` 複製代碼 - 生成效果
sequenceDiagram participant 張三 participant 李四 participant 王五 participant 張三 participant 趙六 participant A8 par 張三發消息給李四 張三 -->> 李四:明天王5請客吃飯 and 張三發消息給王五 張三 -->> 王五: 明天吃飯都有誰呢 end par 王五發消息給趙六 王五->>趙六:明天準時到場哈 and 王五發消息給A8 王五 ->>A8:明天帶上你的夥伴一塊兒來哈 end
- 源代碼
背景高亮
-
語法：
rect rgba(0,213,123) 複製代碼 -
源代碼：
```mermaid sequenceDiagram participant 張三 participant 李四 participant 王五 participant 張三 participant 趙六 participant A8 par 張三發消息給李四 rect rgba(0,113,133) 張三 -->> 李四:明天王5請客吃飯 end and 張三發消息給王五 rect rgba(0,113,133) 張三 -->> 王五: 明天吃飯都有誰呢 end end par 王五發消息給趙六 rect rgba(0,213,123) 王五->>趙六:明天準時到場哈 end and 王五發消息給A8 rect rgba(0,213,123) 王五 ->>A8:明天帶上你的夥伴一塊兒來哈 end end ``` 複製代碼 -
生成效果：
sequenceDiagram participant 張三 participant 李四 participant 王五 participant 張三 participant 趙六 participant A8 par 張三發消息給李四 rect rgba(0,113,133) 張三 -->> 李四:明天王5請客吃飯 end and 張三發消息給王五 rect rgba(0,113,133) 張三 -->> 王五: 明天吃飯都有誰呢 end end par 王五發消息給趙六 rect rgba(0,213,123) 王五->>趙六:明天準時到場哈 end and 王五發消息給A8 rect rgba(0,213,123) 王五 ->>A8:明天帶上你的夥伴一塊兒來哈 end end
複製代碼 - 場景：
相關文章
- 1. GTD時間管理閱讀筆記
- 2. 頭腦風暴的練習
- 3. CIO40: 工業4.0之頭腦風暴
- 4. 【頭腦風暴】產品流程圖
- 5. 思維導圖——頭腦風暴
- 6. 會議管理心得記錄
- 7. 頭腦風暴-記一道有趣的問題
- 8. 頭腦風暴 軟件_頭腦風暴和思維導圖的最佳網站和軟件
- 9. 閱讀記錄
- 10. Zoom視頻會議第三方閱讀記錄
- 更多相關文章...
- • RSS 閱讀器 - RSS 教程
- • ADO 添加記錄 - ADO 教程
- • Docker容器實戰(一) - 封神Server端技術
- • Tomcat學習筆記（史上最全tomcat學習筆記）
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. GTD時間管理閱讀筆記
- 2. 頭腦風暴的練習
- 3. CIO40: 工業4.0之頭腦風暴
- 4. 【頭腦風暴】產品流程圖
- 5. 思維導圖——頭腦風暴
- 6. 會議管理心得記錄
- 7. 頭腦風暴-記一道有趣的問題
- 8. 頭腦風暴 軟件_頭腦風暴和思維導圖的最佳網站和軟件
- 9. 閱讀記錄
- 10. Zoom視頻會議第三方閱讀記錄