Leo的恒河沙

使用 Typora 工具繪製流程圖_participant as 使用 typro_時了了的博客 - CSDN 博客#

#Omnivore

使用 Typora 工具繪製流程圖#

版權聲明：本文為博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。

使用 Typora 工具繪製流程圖#

• Typora 編輯器簡介
• 使用 Mermaid 語法繪製流程圖
• 1. 流程圖方向
• 2. 節點形狀
• 3. 節點間的連線
• 4. 子圖表（subgraph）
• 5. 序列圖（sequenceDiagram）
• 6. 參與者（participant）
• 7. 消息線
• 8. 處理中（activate）
• 9. 標註（Note）
• 10. 循環（loop）
• 11. 判斷（alt/opt）
• 使用 flow 語法繪製標準流程圖
• 1. 標準流程圖
• 2. 標準流程圖（橫向）

Typora 編輯器簡介#

Typora 編輯器讓人們能更簡單地用 Markdown 語言書寫文字，解決了使用傳統的 Markdown 編輯器寫文的痛點，並且界面簡潔優美，實現了即時預覽等功能。
Typora 官網： https://typora.io/.
windos 版本下載地址：https://typora.io/#windows.

使用 Mermaid 語法繪製流程圖#

Mermaid 可讓您使用文本和代碼創建圖表和可視化。它是一種基於 Javascript 的圖表和圖表工具，可呈現受 Markdown 啟發的文本定義以動態創建和修改圖表。
官網: https://mermaidjs.github.io/.
Github 項目地址: https://github.com/knsv/mermaid.

1. 流程圖方向#

2. 節點形狀#

* 描述可以使用引號抑制一些特殊字符的使用。eg[“box”]

3. 節點間的連線#

4. 子圖表（subgraph）#

subgraph 子圖表名稱 子圖表中的描述語句... end

• 1
• 2
• 3

舉個栗子：

• 代碼

graph TB id1(圓角矩形)--普通線-->id2[矩形] subgraph 子圖表名稱 id2==粗線==>id3{菱形} id3-.虛線.->id4>右向旗幟] id3--無箭頭---id5((圓形)) end

• 1

• 2

• 3

• 4

• 5

• 6

• 7

• 代碼結果顯示

子圖表名稱

單線加文字

粗線加文字

虛線加文字

無箭頭

菱形

矩形

右向旗幟

圓形

圓角矩形

5. 序列圖（sequenceDiagram）#

sequenceDiagram [參與者1][消息線][參與者2]:消息體 ...

• 1
• 2
• 3

舉個栗子：

• 代碼

sequenceDiagram 敢敢->>+憨憨: 在嗎？ 憨憨->>-敢敢: 在的

• 1

• 2

• 3

• 代碼結果顯示

敢敢 憨憨 在嗎？ 在的 敢敢 憨憨

* 代碼中的 + - 對用來表示時序塊。

6. 參與者（participant）#

上例中的敢敢、憨憨都是參與者，上例中的語法是最簡單的，也可以明顯表明參與者有哪些

sequenceDiagram participant 參與者 1 participant 參與者 2 ... participant 簡稱 as 參與者 3 #該語法可以在接下來的描述中使用簡稱來代替參與者 3

• 1
• 2
• 3
• 4
• 5

舉個栗子：

• 代碼

sequenceDiagram participant 敢敢 as A participant 憨憨 as B A->>B: 在嗎？ B->>A: 在的

• 1

• 2

• 3

• 4

• 5

• 代碼結果顯示

敢敢 憨憨 幹嘛呢？ 在聽音樂 敢敢 憨憨

7. 消息線#

8. 處理中（activate）#

在消息線末尾增加 + ，則消息接收者進入當前消息的 “處理中” 狀態；
在消息線末尾增加 - ，則消息接收者離開當前消息的 “處理中” 狀態。
或者使用以下語法直接說明某個參與者進入 “處理中” 狀態

activate 參與者

• 1

9. 標註（Note）#

Note 位置表述 參與者: 標註文字

• 1

• 位置表述

10. 循環（loop）#

loop 循環的條件 循環體描述語句 end

• 1
• 2
• 3

11. 判斷（alt/opt）#

alt 條件 1 描述 分支 1 描述語句 else 條件 2 描述 # else 分支可選 分支 2 描述語句 else ... ... end

• 1
• 2
• 3
• 4
• 5
• 6
• 7

opt 條件描述 分支描述語句 end

• 1
• 2
• 3

舉個例子

• 代碼

sequenceDiagramDiagram participant gg as 敢敢 participant hh as 憨憨 loop 每日問候 gg->>hh: 工作做完了嗎？ hh-->>gg: 做完了,你呢？ activate gg Note left of gg: 思考一下 alt 沒做完 gg-xhh: 沒做完，加班ing else 做完了 gg-xhh: 做完了，一起打王者吧！ end opt 節日愉快 hh-->gg: 生日快樂~ hh-->gg: 勞動節快樂~ hh-->gg: 兒童節快樂~ end end

• 代碼結果顯示

敢敢 憨憨 工作做完了嗎？ 做完了，你呢？ 思考一下 沒做完，加班 ing 做完了，一起打王者吧！ alt [沒做完] [做完了] 生日快樂～勞動節快樂～兒童節快樂～opt [節日愉快] loop [每日問候] 敢敢 憨憨

使用 flow 語法繪製標準流程圖#

1. 標準流程圖#

舉個例子

• 代碼

flowchat st=>start: 開始框 op=>operation: 處理框 cond=>condition: 判斷框(是或否?) sub1=>subroutine: 子流程 io=>inputoutput: 輸入輸出框 e=>end: 結束框 st->op->cond cond(yes)->io->e cond(no)->sub1(right)->op

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

*Typora 編輯時輸入 flow 即可，CSDN 在編輯時關鍵字 flow 會被自動轉換成 mermaid 語法 flowchat，所以代碼首行會顯示 flowchat。

• 代碼結果顯示

Created with Raphaël 2.2.0 開始框 處理框 判斷框 (是或否？) 輸入輸出框 結束框 子流程 yes no

2. 標準流程圖（橫向）#

舉個例子

• 代碼

flowchatchat st=>start: 開始框 op=>operation: 處理框 cond=>condition: 判斷框(是或否?) sub1=>subroutine: 子流程 io=>inputoutput: 輸入輸出框 e=>end: 結束框 st(right)->op(right)->cond cond(yes)->io(bottom)->e cond(no)->sub1(right)->op

• 1

• 2

• 3

• 4

• 5

• 6

• 7

• 8

• 9

• 10

• 代碼結果顯示

Created with Raphaël 2.2.0 開始框 處理框 判斷框 (是或否？) 輸入輸出框 結束框 子流程 yes no

文章知識點與官方知識檔案匹配，可進一步學習相關知識