使用 Mermaid 畫(huà)流程圖

1 節(jié)點(diǎn)

flowchart LR
  這是一個(gè)描述性文本

2 文本節(jié)點(diǎn)

flowchart LR
  id[這是一個(gè)文本節(jié)點(diǎn)]

3 圖

graph TD
  start --> stop

4 方向

  • TB
  • BT
  • RL
  • LR

5 節(jié)點(diǎn)形狀

5.1 圓角矩形

開(kāi)始或結(jié)束。

flowchart LR
  id(圓角矩形)

5.2 體育場(chǎng)節(jié)點(diǎn)

開(kāi)始或結(jié)束。

flowchart LR
  id([體育場(chǎng)節(jié)點(diǎn)])

5.3 子程序

已經(jīng)定義過(guò)的程序、流程,不在圖表中詳細(xì)列出。

flowchart LR
  id[[子程序]]

5.4 數(shù)據(jù)庫(kù)

flowchart LR
  id[(數(shù)據(jù)庫(kù))]

5.5 圓形

表示同一頁(yè)內(nèi)流程圖引用另一個(gè)流程圖,頁(yè)內(nèi)引用。

流程圖之間的接口。

圈內(nèi)有一個(gè)字母或數(shù)字。在相互聯(lián)系的流程圖內(nèi),連接符號(hào)使用同樣的字母或數(shù)字,以表示各個(gè)過(guò)程是如何連接的。

flowchart LR
  id((1)) --- id2((1))

5.6 不對(duì)稱(chēng)節(jié)點(diǎn)

文檔輸入、輸出。

flowchart LR
  id>不對(duì)稱(chēng)節(jié)點(diǎn)]

5.7 菱形

分支判斷。

flowchart LR
  id1{菱形}

5.8 六邊形

表示初始化或預(yù)處理的過(guò)程。

flowchart LR
  id{{六邊形}}

5.9 平行四邊形

數(shù)據(jù)輸入或輸出。

flowchart LR
  id[/平行四邊形/]
  id2[\平行四邊形\]

5.10 梯形

表示手動(dòng)操作。

flowchart LR
  id[/梯形\]
  id2[\梯形/]

5.11 雙圓

flowchart LR
  id(((雙圓)))

6 節(jié)點(diǎn)之間的連接

6.1 箭頭線

flowchart LR
  A --> B

6.2 無(wú)箭頭的鏈接

批注連接線。

flowchart LR
  A --- B

6.3 帶文本的鏈接

flowchart LR
  A -- 文本 --- B

6.4 帶文本的箭頭

flowchart LR
  A -- 文本 --> B

6.5 虛線箭頭

流程的可選分支。

flowchart LR
  A -.-> B

6.6 帶文本的虛線

flowchart LR
  A -. 文本 .-> B

6.7 粗體鏈接

flowchart LR
  A ==> B

6.8 粗體帶文本

flowchart LR
  A == 文本 ==> B

6.9 連接鏈

flowchart LR
  A -- text --> B --> C
  D --> E & F --> G
  I & J --> K & L
  W --> Y
  W --> Z
  X --> Y
  X --> Z

6.10 新箭頭

flowchart LR
  A --o B --> C

6.11 雙向箭頭

flowchart LR
  A o--o B
  B <--> C
  C x--x D
25.png

6.12 添加更多的短劃線讓鏈接更長(zhǎng)

flowchart TB
  A[開(kāi)始] --> B{是嗎}
  B -- yes--> C[ok]
  C --> D[反思] --> B
  B -- No ---> E[結(jié)束]
flowchart TB
  A[開(kāi)始] --> B{是嗎}
  B -- yes--> C[ok]
  C --> D[反思] --> B
  B -- No --> E[結(jié)束]
flowchart LR
  A -.-> B
  B -..-> C -...-> D
  E --- F ---- G ----- H

7 特殊字符

flowchart LR
  id["現(xiàn)在可以打出?、:”了!"]

8 子圖

flowchart TB
  subgraph one
    a1 --> a2
  end
  subgraph two
    b1 --> b2
  end
  subgraph three
    c1 --> a2 & c2
  end

8.2 子圖之間的連接

flowchart TB
  subgraph one
    A --> B
    end
  subgraph two
    C --> D
    end
  subgraph three
    E --> F
    end
  one --> two

8.3 子圖的方向

flowchart LR
  subgraph TOP
    direction TB
    subgraph B1
      direction RL
      i1 --> f1
      end
    subgraph B2
      direction BT
      i2 --> f2
      end
    B1 --> B2
    end
  A --> TOP --> B

參考:Flowcharts - Basic Syntax | Mermaid

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容