關於寫做那些事之快速上手Mermaid流程圖

時間  2020-05-05
標籤 關於 那些 快速 上手 mermaid 流程圖 欄目 系統架構 简体版
原文   原文鏈接

本文主要介紹瞭如何快速上手 Mermaid 流程圖,不用貼圖上傳也不用拖拉點拽繪製,基於源碼實時渲染流程圖,操做簡單易上手,普遍被集成於主流編輯器,包括 markdown 寫做環境.node

經過本節內容你將學習到如下主要內容:git

  • 瞭解什麼是流程圖以及Mermaid流程圖;
  • 掌握並能記住如何繪製Mermaid流程圖;
  • 瞭解 Gitbook 寫做環境的相關集成插件.

mermaid-flow-chart-simplemindmap-preview.png

什麼是Mermaid流程圖

關鍵詞github

- 項目地址
- 在線編輯
- 官方文檔

千言萬語不如一張圖,使用圖形展現事物處理流程的圖形稱之爲流程圖.segmentfault

Mermaid是一個基於 Javascript 的圖解和製圖工具.它基於 markdown 語法來簡化和加速生成流程圖的過程,也不止於生成流程圖.markdown

源碼編輯器

graph TD
  A[Christmas] -->|Get money| B(Go shopping)
  B --> C{Let me think}
  C -->|One| D[Laptop]
  C -->|Two| E[iPhone]
  C -->|Three| F[fa:fa-car Car]

效果工具

mermaid-flow-chart-letmethink-mermaid.png

Mermaid流程圖快速入門

佈局方向

關鍵詞佈局

+ TB
+ BT
+ LR
+ RL

mermaid-flow-chart-layout-simplemindmap.png

流程圖佈局方向,由四種基本方向組成,分別是英文單詞: top(上), bottom(下),left(左)和 right(右).其中可選值: TB (從上到下),BT (從下到上),LR (從左往右)和 RL (從右往左)四種.學習

核心: 僅支持上下左右四個垂直方向,是英文單詞首字母大寫縮寫.
  • TB
從上到下: from Top to Bottom

源碼字體

graph TB
    Start --> Stop

效果

mermaid-flow-chart-TB-mermaid.png

  • BT
從下到上: from Bottom to Top

源碼

graph BT
    Start --> Stop

效果

mermaid-flow-chart-BT-mermaid.png

  • LR
從左往右: from Left to Right

源碼

graph LR
    Start --> Stop

效果

mermaid-flow-chart-LR-mermaid.png

  • RL
從右往左: from Right to Left

源碼

graph RL
    Start --> Stop

效果

mermaid-flow-chart-RL-mermaid.png

形狀

關鍵詞

- 節點形狀
    + [矩形]
        - [[暫不支持]]
        - [(圓柱)]
        - [{暫不支持}]
        - [/平行四邊形/]
        - [\平行四邊形\]
        - [/梯形\]
        - [\梯形/]
    + (圓角矩形)
        - ((圓形))
        - ([體育場])
        - ({暫不支持})
    + {菱形}
        - {{六邊形}}
        - {[暫不支持]}
        - {(暫不支持)}
    + >不對稱矩形]

mermaid-flow-chart-shape-simplemindmap.png

流程圖節點形狀,默認支持矩形和圓兩種基本形狀,包括基本形狀的簡單變體,支持嵌套組合形式,其中 [] 表示矩形,() 表示圓弧,{} 表示尖角(竊覺得 <> 更適合)等等.

核心: 最外層表明主形狀,內層輔助修飾.

一次性節點

一次性節點,默認表現爲矩形節點,其文本內容直接顯示 id 的值,適合後續不會出現屢次引用的狀況.

id 建議直接寫成有意義的文本描述而不是當成惟一標識.

源碼

graph TD
    id

效果

mermaid-flow-chart-id-mermaid.png

可重複節點

可重複節點,指定節點形狀,其文本內容再也不是 id 的值而是 <node shape> 的值,適合後續出現屢次引用相同節點的狀況.

id 表明節點的惟一標識,當前節點的文本描述由 <node shape> 的值指定,建議 id 寫成有意義的惟一標識.
  • 矩形
通常格式: [node description] , [] 中括號表示節點是 矩形形狀, node description 是節點的描述文本.

源碼

graph LR
    id1[This is the text in the box]

效果

mermaid-flow-chart-rectangular-mermaid.png

  • 圓角矩形
通常格式: (node description) , () 小括號表示節點是 圓角矩形形狀, node description 是節點的描述文本.

源碼

graph LR
    id1(This is the text in the box)

效果

mermaid-flow-chart-rounded-rectangular-mermaid.png

  • 體育場
通常格式: ([node description]) , () 小括號嵌套 [] 中括號表示節點是大弧度的圓角矩形形狀,也就是 體育場形狀, node description 是節點的描述文本.

源碼

graph LR
    id1([This is the text in the box])

效果

mermaid-flow-chart-stadium-mermaid.png

  • 圓柱
通常格式: [(node description)] , [] 中括號嵌套 () 小括號表示節點是 圓柱形狀, node description 是節點的描述文本.

源碼

graph LR
    id1[(Database)]

效果

mermaid-flow-chart-cylindrical-mermaid.png

  • 圓形
通常格式: ((node description)) , () 小括號嵌套 () 小括號表示節點是 圓形形狀, node description 是節點的描述文本.

源碼

graph LR
    id1((This is the text in the circle))

效果

mermaid-flow-chart-circle-mermaid.png

  • 不對稱矩形
通常格式: >node description] ,左邊是右尖括號 > ,右邊是右中括號 ] 表示 不對稱矩形形狀, node description 是節點的描述文本.

源碼

graph LR
    id1>This is the text in the box]

效果

mermaid-flow-chart-asymmetrical-rectangle-mermaid.png

  • 菱形
通常格式: {node description} , {} 大括號表示 菱形形狀, node description 是節點的描述文本.

源碼

graph LR
    id1{This is the text in the box}

效果

mermaid-flow-chart-diamond-mermaid.png

  • 六角形
通常格式: {{ node description} } , {} 大括號嵌套 {} 大括號表示 六角形形狀, node description 是節點的描述文本.

源碼

graph LR
    id1\{\{This is the text in the box\}\}
Gitbook 語法中雙大括號 {} 表示特殊意義,上述源碼只能轉義處理,實際上並不須要 \ 進行轉義.

效果

mermaid-flow-chart-hexagonal-mermaid.png

  • 平行四邊形
通常格式: [/node description/] , [] 中括號嵌套 // 左斜槓表示 左斜平行四邊形形狀, node description 是節點的描述文本.

源碼

graph TD
    id1[/This is the text in the box/]

效果

mermaid-flow-chart-left-oblique-parallelogram-mermaid.png

  • 平行四邊形
通常格式: [\node description\] , [] 中括號嵌套 \\ 右斜槓表示 右斜平行四邊形形狀, node description 是節點的描述文本.

源碼

graph TD
    id1[\This is the text in the box\]

效果

mermaid-flow-chart-right-oblique-parallelogram-mermaid.png

  • 梯形
通常格式: [/node description\] , [] 中括號嵌套 /\ 左右斜槓表示 上短下長梯形形狀, node description 是節點的描述文本.

源碼

graph TD
    A[/Christmas\]

效果

mermaid-flow-chart-top-trapezoidal-mermaid.png

  • 另外一種梯形
通常格式: [\node description/] , [] 中括號嵌套 \/ 右左斜槓表示 上長下短梯形形狀, node description 是節點的描述文本.

源碼

graph TD
    B[\Go shopping/]

效果

mermaid-flow-chart-bottom-trapezoidal-mermaid.png

鏈接線

關鍵詞

+ 實線/虛線
    - --
    - -.
+ 有箭頭/無箭頭
    - >
    - -
+ 有描述/無描述
    - 實線
        + --描述文字
        + |描述文字|
    - 虛線
        + -.描述文字
        + |描述文字|
+ 加粗
    - ==
+ 組合形式
    - -->
    - ---
    - -.->
    - -.-
    - 有描述實線有箭頭
        + --描述文字-->
        + -->|描述文字|
    - 有描述實線無箭頭
        + --描述文字---
        + ---|描述文字|
    - 有描述虛線有箭頭
        + -.描述文字-.->
        + -.->|描述文字|
    - 有描述虛線無箭頭
        + -.描述文字-.-
        + -.-|描述文字|
    - ==>
    - ===
    - 有描述加粗實線有箭頭(2)
        + ==描述文字==>
        + ==>|描述文字|
    - 有描述加粗實線無箭頭(2)
        + ==描述文字===
        + ===|描述文字|

mermaid-flow-line-simplemindmap.png

流程圖鏈接線樣式,支持實線和虛線以及有箭頭樣式和無箭頭樣式,除此以外還支持添加鏈接線描述文字,其中 -- 表明實線,實線中間多一點 -.- 表明虛線,添加箭頭用右尖括號 > ,沒有箭頭繼續用短橫線 -.

核心: 先實線再虛線,先有箭頭再去箭頭,左邊位置添加描述文字須要區分實現仍是虛線,右邊位置添加描述文字格式一致.
  • 有箭頭無描述實線
通常格式: --> ,其中 -- 表示實線, > 表示有箭頭.

源碼

graph LR
    A-->B

效果

mermaid-flow-chart-solid-line-arrow-mermaid.png

  • 無箭頭實線
通常格式: --- ,其中 -- 表示實線, - 表示無箭頭.

源碼

graph LR
    A --- B

效果

mermaid-flow-chart-solid-line-noarrow-mermaid.png

  • 帶描述的有箭頭實線
通常格式: --connection line description--> ,其中左邊的 -- 添加到 實線左邊位置,右邊的 --> 表示 帶箭頭的實線.

源碼

graph LR
    A-- text -->B

效果

mermaid-flow-chart-solid-line-arrow-left-desc-mermaid.png

通常格式: |connection line description| ,其中 || 添加到 鏈接線右邊位置.

源碼

graph LR
    A-->|text|B

效果

mermaid-flow-chart-solid-line-arrow-right-desc-mermaid.png

  • 帶描述的無箭頭實線
通常格式: --connection line description ,其中左邊的 -- 添加到 實線左邊位置,右邊的 --- 表示 不帶箭頭的實線.

源碼

graph LR
    A-- This is the text ---B

效果

mermaid-flow-chart-solid-line-noarrow-left-desc-mermaid.png

通常格式: |connection line description| ,其中 || 添加到 鏈接線右邊位置.

源碼

graph LR
    A---|This is the text|B

效果

mermaid-flow-chart-solid-line-noarrow-right-desc-mermaid.png

  • 有箭頭虛線
通常格式: -.connection line description.-> ,其中左邊的 -. 添加到 虛線左邊位置,右邊的 .-> 表示 帶箭頭的虛線.

源碼

graph LR
   A-. text .-> B

效果

mermaid-flow-chart-dotted-line-arrow-left-desc-mermaid.png

  • 有箭頭加粗實線
通常格式: ==> ,表示加粗實線.

源碼

graph LR
   A ==> B

效果

mermaid-flow-chart-bold-solid-line-arrow-mermaid.png

  • 帶描述的有箭頭加粗實線
通常格式: ==connection line description ,左邊的 == 添加到加粗實現左邊,右邊的 ==> 表明加粗實線.

源碼

graph LR
   A == text ==> B

效果

mermaid-flow-chart-bold-solid-line-arrow-left-desc-mermaid.png

  • 帶描述的有箭頭加粗實線
通常格式: |connection line description| ,其中 || 添加到 鏈接線右邊位置.

源碼

graph LR
   A ==>|text| B

效果

mermaid-flow-chart-bold-solid-line-arrow-right-desc-mermaid.png

高級用法

關鍵詞

+ -->-->
+ &
+ ""
+ %%
+ subgraph

mermaid-flow-chart-advance-simplemindmap.png

  • 多節點鏈式鏈接

源碼

支持鏈式鏈接方式,A-->B-->C 等價於 A-->B 和 B-->C 形式.

graph LR
   A -- text --> B -- text2 --> C

效果

mermaid-flow-chart-chain-link-mermaid.png

  • 多節點共同鏈接

支持共同鏈接方式,A-->B & C 等價於 A-->B 和 A-->C 形式.

源碼

graph LR
   a --> b & c--> d

效果

mermaid-flow-chart-common-link-mermaid.png

  • 多節點相互鏈接

多節點共同鏈接的變體形式,A & B --> C & D 等價於 A-->C ,A-->D,B-->C 和 B-->D 四種組合形式.

源碼

graph TB
    A & B--> C & D

效果

mermaid-flow-chart-eachother-link-mermaid.png

  • 雙引號包裹特殊字符

鏈接線描述文字存在特殊字符使用雙引號 "" 包裹處理,如遇到 [] 和 () 以及 {} 等特殊字符狀況.

源碼

graph LR
    id1["This is the (text) in the box"]

效果

mermaid-flow-chart-special-character-mermaid.png

  • 雙引號包裹轉義字符

支持 Html 轉移字符

源碼

graph LR
    A["A double quote:#quot;"] -->B["A dec char:#9829;"]

效果

mermaid-flow-chart-escape-character-mermaid.png

  • 嵌套子流程圖

定義

subgraph title
    graph definition
end

示例

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

mermaid-flow-chart-subgraph-mermaid.png

  • 註釋語法

註釋以 %% 開頭而且獨佔一行.

graph LR
%% this is a comment A -- text --> B{node}
   A -- text --> B -- text2 --> C

mermaid-flow-chart-comment-mermaid.png

快速入門流程圖回顧總結

關鍵詞

- 英文單詞縮寫
- 幾何化形狀
- 有限語法

mermaid-flow-chart-summary-simplemindmap.png

Mermaid 是一款開源的製圖工具,可以使用 Markdown 語法繪製流程圖,支持更改流程圖節點形狀,添加描述文字以及更改鏈接線樣式等等.

英文單詞縮寫

四種佈局方向的值是英文單詞首字母大寫縮寫形式,默認僅支持垂直方向.
中文 英文 示例
圖解 graph graph 流程圖類型標識
子圖 subgraph subgraph 嵌套子流程圖標識
上 top TB 或 BT ,從上到下或從下到上的佈局方向
下 bottom BT 或 TB,從下到上或從上到下的佈局方向
左 left LR 或 RL,從左往右或從右往左的佈局方向
右 right RL 或 LR,從右往左或從左往右的佈局方向

幾何化形狀

鍵盤符號形象化幾何形狀,組合形式表示形狀的疊加,其中最外層符號是主形狀,嵌套符號是輔助形狀.
  • 基本單元
表示法 含義 類型 備註
[] 矩形 節點形狀 支持
() 圓角矩形 節點形狀 支持
{} 菱形 節點形狀 支持
<> 菱形 節點形狀 不支持
-- 實線 鏈接線樣式 支持
-. 虛線 鏈接線樣式 支持
== 加粗實線 鏈接線樣式 支持
=: 加粗虛線 鏈接線樣式 不支持
> 有箭頭 鏈接線樣式 支持
- 無箭頭 鏈接線樣式 支持
雙豎線 右邊鏈接線描述文字 鏈接線描述文字 支持
-- 左邊實線鏈接線描述文字 鏈接線描述文字 支持
-. 左邊虛線鏈接線描述文字 鏈接線描述文字 支持
== 左邊加粗實線鏈接線描述文字 鏈接線描述文字 支持
=: 左邊加粗虛線鏈接線描述文字 鏈接線描述文字 不支持
  • 組合單元
表示法 含義 類型 備註
[[]] 正方形 節點形狀 不支持
[()] 圓柱體 節點形狀 支持
[{}] 棱柱體 節點形狀 不支持
(()) 圓形 節點形狀 支持
([]) 體育場 節點形狀 支持
({}) 圓弧 節點形狀 不支持
雙大括號 六邊形 節點形狀 支持
{[]} 正多邊形 節點形狀 不支持
{()} 圓弧 節點形狀 不支持
--> 實線帶箭頭 鏈接線樣式 支持
--- 實線無箭頭 鏈接線樣式 支持
-.> 虛線帶箭頭 鏈接線樣式 不支持
-.-> 虛線帶箭頭 鏈接線樣式 支持
.-> 虛線帶箭頭 鏈接線樣式 支持
-.- 虛線無箭頭 鏈接線樣式 支持
.- 虛線無箭頭 鏈接線樣式 支持
==> 加粗實線帶箭頭 鏈接線樣式 支持
=== 加粗實線無箭頭 鏈接線樣式 支持
=:> 加粗虛線帶箭頭 鏈接線樣式 不支持
=:=> 加粗虛線帶箭頭 鏈接線樣式 不支持
=:= 加粗虛線無箭頭 鏈接線樣式 不支持
:= 加粗虛線無箭頭 鏈接線樣式 不支持
雙豎線 右邊鏈接線描述文字 鏈接線描述文字 支持
--connection line description--> 左邊實線帶箭頭鏈接線描述文字 鏈接線描述文字 支持
-.connection line description-.-> 左邊虛線帶箭頭鏈接線描述文字 鏈接線描述文字 支持
--connection line description--- 左邊實線無箭頭鏈接線描述文字 鏈接線描述文字 支持
-.connection line description-.- 左邊虛線無箭頭鏈接線描述文字 鏈接線描述文字 支持
==connection line description==> 左邊加粗實線帶箭頭鏈接線描述文字 鏈接線描述文字 支持
=:connection line description=:=> 左邊加粗虛線帶箭頭鏈接線描述文字 鏈接線描述文字 不支持
==connection line description=== 左邊加粗實線無箭頭鏈接線描述文字 鏈接線描述文字 支持
=:connection line description=:= 左邊加粗虛線無箭頭鏈接線描述文字 鏈接線描述文字 不支持

有限語法

不管是節點形狀仍是鏈接線樣式,語法支持是有限的,並非隨意組合的疊加狀態,也可能隨着後續更新會支持更多,一切以官方文檔爲主.

除了提供最基礎的操做節點的能力以外,還能夠根據 JS 和 CSS 相關知識高度自定義流程圖行爲表現,具體可參考官方文檔.

官方文檔: https://mermaid-js.github.io/mermaid/#/flowchart?id=styling-and-classes

snowdreams1006-wechat-open.png

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程