Qiitaでフローチャート with mermaid
参照元
この記事で例に挙げているのは 主にタテのフローチャート
はじめに 〜記事構成〜
大まかに２部構成、そのなかにコード例と出力例(順序はちがっても)
コード例と表示のセット
- 基本の構成
- コード例: コード部(Markdownのコードブロック)
- 出力例: Qiitaでの表示
のセットで書いてます。
その後、どんなのが生成できるか具体的にイメージできるものとして、
作成例｢🌀○○図｣
｢🌀○○図｣、｢🌀○□図｣、｢🌀□△図｣など具体例(とコード)が続く。
⚠︎作成例の ｢🌀○○図｣、｢🌀○□図｣、｢🌀□△図｣などは、 参照元などのからコピペしたものだったと思います
フロー図の 矢印 ↓→ 向き
flowchart TB …上から下 flowchart DTでも ※タテのフローチャート
flowchart BT … 下から上
flowchart LR … 左から右
flowchart RL … 右から左
✴️ コード例と表示のセット
コード例：
```mermaid
flowchart TB //「flowchart xx」の「xx」の部分によってフロー図の向き
A[起床] --> B[顔を洗う] -->
C{眠い?} -- 眠くない --> D[朝食を食べる]
C{眠い?} -- 眠い --> E[二度寝する] -- 起きる --> C{眠い?}
D[朝食を食べる] -->
F[歯を磨く] -->
G((やっぱり寝る))
```
出力結果：
線・矢印の種類
各ノード間の線種(矢印の)
```mermaid
flowchart TB
A[ノード1] --> B[ノード2] --> C[ノード3]
↑
ここの「-->」を編集する。
```
A-->B 実線 矢印
A==>B 太線 矢印
A-.->B 点線 矢印
A---B 実線
A===B 太線
A--oB 丸矢印
A--xB ✖︎バツ矢印
A<-->B 双方向矢印
A~~~B 不可視のリンク ※ノードの位置関係を揃えたいけど，線は引きたくないというとき
A-->|text|B テキスト挿入
コード例＠線・矢印
```mermaid
flowchart TB
A[Start] --> B[Stop]
C[Start] ==> D[Stop]
E[Start] -.-> F[Stop]
G[Start] --- H[Stop]
I[Start] === J[Stop]
```
```mermaid
flowchart TB
K[Start] --o L[Stop]
M[Start] --x N[Stop]
O[Start] <--> P[Stop]
id1[node1]
id2[node2]
id3[node3]
id1 ~~~ id2
id1 --> id3
A-->|text|B
```
表示＠線・矢印
コード例＠リンク連鎖
```mermaid
flowchart
id1[node1]
id2[node2]
id3[node3]
id1 --> id2 --> id3
A[node1]
B[node2]
C[node3]
A --> B & C
D[node1]
E[node2]
F[node3]
G[node4]
D & E --> F & G
```
表示＠リンク連鎖
ノードの形
長方形か菱形かなど
```mermaid
flowchart TB
A[ノード1] --> B[ノード2] --> C[ノード3]
↑ ↑
ここの[ ]を編集する。
```
A[] 長方形
A{} ひし形
A() 長方形(角が丸い)
A([]) 楕円
A(()) 円
A[/\] 台形
A[()] 円柱みたいなの
コード例＠ノードの形
```mermaid
flowchart
A[長方形]
B{ひし形}
C(角が丸い長方形)
D([楕円])
```
```mermaid
flowchart
E((円))
F[/台形\]
G[(円柱)]
```
出力例＠ノードの形
✴️ 作成例｢🌀○○図｣
🌀フローチャート図
処理の流れ、条件分岐、手順やプロセスなどを表現する時
例1：ロジック
コードこう書く
```mermaid
graph TB
Start([Start])-->B{if a > b}
B-->|True| End
B-->|False| IFS[/while\]
IFS-->C[a++]
C-->IFB[\ /]
IFB-->End([End])
```
例2：システム構成
コードこう書く
```mermaid
flowchart TB
User-->LB[Load Balancer]
LB--> Web1[Web Server] & Web2[Web Server]
Web1 & Web2 --> DB[(Database)]
```
🌀シーケンス図
フローチャートよりも時間軸に沿ったものの表現に適。
例：「User」、「Server」、「Database」それぞれの要素の相互作用を時間軸に沿って表現
コードこう書く
```mermaid
sequenceDiagram
actor U as User
participant S as Server
participant DB
U->>+S: Request
S->>DB: SQL
DB-->>S: データ
S-->>-U: HTML
U->>+S: Request
S-->>-U: JavaScript / CSS
```
🌀状態遷移図
フロー図に似てる、順序ではなく状態の遷移を表現したいとき
例:それぞれの状態と、その遷移に関しての説明を表現
コードこう書く
```mermaid
stateDiagram-v2
[*] --> 実行可能状態
実行可能状態 --> 実行状態: ディスパッチ
実行状態 --> 実行可能状態: プリエンプション
実行状態 --> 待機状態: I/O
待機状態 --> 実行可能状態: I/O完了
```
🌀クラス図 〜略〜
〜略〜
🌀ER図 〜略〜
エンティティの関係を表現
〜略〜
🌀円グラフ
コードこう書く
```mermaid
pie title 社内で使っているエディタ
"VSCode" : 30
"Vim" : 6
"Emacs" : 2
```
🌀ガントチャート
プロジェクトの計画など。プロジェクトに紐づくそれぞれのタスクのスケジュールなどを表現。
コードこう書く
```mermaid
gantt
dateFormat YYYY-MM-DD
title XXXプロジェクト 計画
excludes weekends
section リリース
開発期間 :done, 2022-04-01, 2022-04-08
アルファリリース期間 :active, 5d
ベータリリース期間 :5d
正式リリース :milestone, 0d
section 開発
機能開発 :crit, done, 2022-04-01, 3d
デバッグ :crit, done, 2d
アナウンス :crit, done, 1d
ベータ機能開発 :crit, active, 4d
バグ修正 :4d
最終検証 :1d
```
⚠︎作成例の ｢🌀○○図｣、｢🌀○□図｣、｢🌀□△図｣などは、 参照元などのからコピペしたものだったと思います
■END