目次
まとめ
Mermaid は、Markdown にインスパイアされたテキスト定義とレンダラーを使用して複雑な図を作成および変更する、JavaScript ベースの作図およびグラフ作成ツールです。
Mermaid
Diagramming and charting tool
ガントチャートや円グラフ、マインドマップも記述できるが、今回は使用頻度の高いフローチャートの記法を記載する。
フローチャートのフロー方向の記法
| 記法 |
フロー方向 |
| TB、TD |
上から下 |
| BT |
下から上 |
| LR |
左から右 |
| RL |
右から左 |
フローチャートの線書式の記法
| 記法 |
線書式 |
| A --> B |
矢印 |
| A ==> B |
太線矢印 |
| A -.-> B |
点線矢印 |
| A --- B |
線 |
| A === B |
太線 |
フローチャートのノード間の記法
```mermaid
flowchart TD
A-->|ここにコメントを記述|B
```
フローチャートのノード図形の記法
| 記法 |
ノード図形 |
| A[] |
長方形 |
| A{} |
ひし形 |
| A() |
角丸長方形 |
| A([]) |
楕円形 |
| A(()) |
円形 |
GitHubにおけるmermaidの記法
```mermaid
flowchart TD
A[Start] --> B[fold_1]
B --> C{fold_1_1}
C --> D[fold_1_1_1]
C --> E[...]
C --> F[fold_1_1_3]
D --> G[fold_1_1_1_1]
```
Azure DevOpsにおけるmermaidの記法
-
~~~や```ではなく、:::でmarkdownを囲む
-
flowchartではなく、graphでmarkdownを囲む
:::mermaid
graph TD
A[Start] --> B[fold_1]
B --> C{fold_1_1}
C --> D[fold_1_1_1]
C --> E[...]
C --> F[fold_1_1_3]
D --> G[fold_1_1_1_1]
:::
参考リンク
