ひとりマーメイド4日目
フローチャート
概要
マーメイドエンジニアのひろきです。こんにちは。
最近流行り（流行らせたい）のマーメイドについて理解を深めていこうと思います。
この記事ではフローチャートの記述について紹介します！
↓↓前回の記事はこちら
マーメイドで記述するフローチャート
前回の記事ではマーメイドの構文構造について紹介しました。マーメイドを記述する際は注意してくださいね！
今日はマーメイドの最も代表的なダイアグラムであるフローチャートの記述方法について紹介します。フローチャートはアルゴリズムやプロセスの流れを表す図です。
mermaid
flowchart TB
A([start])-->B{true?}
B--Yes-->C[process]
B--No-->D[exception]
C-->E([end])
D-->E
このようにノードとエッジで表現されます。
ノードの宣言
デフォルトではこのように記述します。
mermaid
flowchart
node
ノードの名前を任意の文字列にしたい場合は以下のように記述します。
mermaid
flowchart
node[this is a node]
グラフ
エッジは-->で表します。デフォルトでは上から下に向かってフローが進みます。
mermaid
flowchart
start --> stop
グラフの向き
グラフの向きを指定することができます。
TB(またはTD)で上から下へのグラフになります。
mermaid
flowchart TB
start --> stop
LRで左から右へのグラフになります。
mermaid
flowchart LR
start --> stop
以下のように自由自在に向きを変更することができます。
| 記述 | 向き |
|---|---|
| TB | ↓ |
| TD | ↓ |
| BT | ↑ |
| LR | → |
| RL | ← |
ノードの形
ノードの形を変更することができます。
デフォルト
デフォルトは四角です。
mermaid
flowchart
node
丸角
mermaid
flowchart
node(this is a node)
スタジアム形
mermaid
flowchart
node([this is a node])
サブルーチン
mermaid
flowchart
node[[this is a node]]
円筒形
mermaid
flowchart
node[(this is a node)]
円
mermaid
flowchart
node((this is a node))
ひし形
mermaid
flowchart
node{this is a node}
ヘキサゴン
mermaid
flowchart
node{{this is a node}}
平行四辺形
mermaid
flowchart
node[/this is a node/]
逆平行四辺形
mermaid
flowchart
node[\this is a node\]
台形
mermaid
flowchart
node[/this is a node\]
逆台形
mermaid
flowchart
node[\this is a node/]
非対称
mermaid
flowchart
node>this is a node]
二重丸
※古いバージョンのエディタではレンダリングできないことがあります。
mermaid
flowchart
node(((this is a node)))
エッジ
矢印
mermaid
flowchart LR
A --> B
直線
mermaid
flowchart LR
A --- B
不可視
※古いバージョンのエディタではレンダリングできないことがあります。
mermaid
flowchart LR
A ~~~ B
点線矢印
mermaid
flowchart LR
A -.-> B
太線矢印
mermaid
flowchart LR
A ==> B
丸矢印
mermaid
flowchart LR
A --o B
バツ矢印
mermaid
flowchart LR
A --x B
テキスト入りエッジ
矢印
２通りの記述が可能です。
mermaid
flowchart LR
A --this is text--- B
C ---|this is text| D
直線
２通りの記述が可能です。
mermaid
flowchart LR
A --this is text--- B
C ---|this is text| D
点線矢印
2通りの記述が可能です。
mermaid
flowchart LR
A-. this is text .-> B
C-.->|this is text|D
太線矢印
２通りの記述が可能です。
mermaid
flowchart LR
A ==this is text===> B
C ==>|this is text| D
不可視
※古いバージョンのエディタではレンダリングできないことがあります。
mermaid
flowchart LR
A ~~~|this is text| B
丸矢印
2通りの記述が可能です。
mermaid
flowchart LR
A --this is text---o B
C ---o|this is text| D
バツ矢印
２通りの記述が可能です。
mermaid
flowchart LR
A --this is text---x B
C ---x|this is text| D
まとめ
フローチャートの文法は果てしないですね。
次回に続きます。
↓↓次回の記事はこちら！！
参考
'