Zenn
📝

Mermaidを書いてみたメモ 〜フローチャート〜

2023/01/11に公開
Mermaid
tech

箱を配置する

flowchart LR
A

矢印を書く

flowchart LR
A --> B

たくさん矢印を書く

flowchart LR
A --> B
B --> C
C --> A

箱の中のテキストを変更する

flowchart LR
A[状態A] --> B[状態B]
B --> C[状態C]
C --> A

※ 先に箱を作っておいて、あとで矢印を書くこともできる

flowchart LR
A[状態A]
B[状態B]
C[状態C]

A --> B
B --> C
C --> A

矢印の向きを変更する

  • TB: 上から下
  • BT: 下から上
  • LR: 左から右
  • RL: 右から左
flowchart TB
A --> B

flowchart BT
A --> B

flowchart LR
A --> B

flowchart RL
A --> B

箱の形を変える

flowchart TB
A[長方形]
B(角丸四角形)
C([両サイドが円になっている図形])
D[[両サイドが二重線になっている図形]]
E[(データベース)]
F((円))
G>非対称な図形]
H{ひし形}
I{{六角形}}
J[/平行四辺形1/]
K[\平行四辺形2\]
L[/台形1\]
M[\台形2/]
N(((二重の円)))

線の形を変える

実線

flowchart LR
A---B

太線

flowchart LR
A===B

矢印

flowchart LR
A-->B

太線矢印

flowchart LR
A==>B

点線矢印

flowchart LR
A-.->B

丸矢印

flowchart LR
A--oB

×矢印

flowchart LR
A--xB

線の上にテキストを表示

実線

flowchart LR
A---|テキスト|B

太線

flowchart LR
A===|テキスト|B

矢印

flowchart LR
A-->|テキスト|B

太線矢印

flowchart LR
A==>|テキスト|B

点線矢印

flowchart LR
A-.->|テキスト|B

丸矢印

flowchart LR
A--o|テキスト|B

×矢印

flowchart LR
A--x|テキスト|B

グルーピング

flowchart TB
subgraph タイトル
A-->B
end

異なるグループに所属する箱に矢印を書く

flowchart LR
    a2-->b1
    
    subgraph グループA
        direction LR
        a1-->a2
    end

    subgraph グループB
        direction LR
        b1-->b2
    end

グループ間の矢印を書く

flowchart LR
    subgraph グループA
        direction LR
        a1-->a2
    end

    subgraph グループB
        direction LR
        b1-->b2
    end

    グループA-->グループB

Discussion