mermaidの使い方

概要

mermaidとは、PlantUMLのようなグラフやクラス図の作成が出来る。
こちらはプラグインなしで使用できる。
記述方法は、

```mermaid
グラフの種類
表示内容
...   

である。

Quote

作図というとマウスをポチポチして細かい調整をして…とめんどくさいイメージがあると思います。

しかし、Mermaidはその必要はなく、全てテキストで記述することで綺麗な図を生成してくれます。

書き方こそ覚える必要がありますが、慣れてしまえばマウスを用いて作図を行うより圧倒的に早く、綺麗な図を作成することができます。

---

円グラフ

円グラフはpieキーワードを使用する。

コード例

‘‘‘mermaid
pie title 日本の面積
"森":67
"平野":33
‘‘‘

動作例

pie title 日本の面積
"森":67
"平野":33

プロパティの詳しい説明

名称	概要
title	タイトル
"項目名":割合	項目を追加して割合通りに描画する

publish: false

フローチャート

フローチャートには、graphキーワードを使用する。

コード例

‘‘‘mermaid
graph LR
  Start([Start])-->B{if a > b}
  
  B-->|True| End
  B-->|False| IFS[/while\]
  IFS-->C[a++]
  C-->IFB[\  /]
  
  IFB-->End([End])
‘‘‘

動作例

graph LR
  Start([Start])-->B{if a > b}
  B-->|True| End
  B-->|False| IFS[/while\]
  IFS-->C[a++]
  C-->IFB[\  /]
  IFB-->End([End])

プロパティの詳しい説明

名称	概要
graph TD	グラフを上下方向にする。
graph LR	グラフを左右方向にする。
start	フローチャート開始
end	フローチャート終了
if(条件式)	分岐処理
-->	処理の方向
IFS[/while\]	ループ処理の開始
IFB[\ /]	ループ処理の終了

---

シーケンス図

シーケンス図には、sequenceDiagramキーワードを使用する。

コード例

‘‘‘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
‘‘‘

動作例

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

プロパティの詳しい説明

名称	概要
actor	人
participant	ブロック
処理元 ->> 処理先:処理内容	処理の流れ
->>+	ライフタイム開始
->>-	ライフタイム終了

publish: false

システム構成図

システム構成図には、flowchartキーワードを使用する。

コード例

‘‘‘mermaid
flowchart TB
  User-->|data|LB[Load Balancer]
  LB--> Web1[Web Server] & Web2[Web Server]
  Web1 & Web2 --> DB[(Database)]
‘‘‘

動作例

flowchart TB
  User-->|data|LB[Load Balancer]
  LB--> Web1[Web Server] & Web2[Web Server]
  Web1 & Web2 --> DB[(Database)]

プロパティの詳しい説明

名称	概要
名前	ブロック定義
-->	流れ
ブロック名称\[システム名]	ブロックの詳細的な定義
ブロック１ & ブロック2	複数のブロックを&でつなげることが出来る。
-->｜処理など｜	｜｜の中に処理などを記入できる

---

状態遷移図

状態遷移図には、stateDiagram-v2を使用する。

コード例

‘‘‘mermaid
stateDiagram-v2
  [*] --> 実行可能状態
  実行可能状態 --> 実行状態: ディスパッチ
  実行状態 --> 実行可能状態: プリエンプション
  実行状態 --> 待機状態: I/O
  待機状態 --> 実行可能状態: I/O完了
‘‘‘

動作例

stateDiagram-v2
  [*] --> 実行可能状態
  実行可能状態 --> 実行状態: ディスパッチ
  実行状態 --> 実行可能状態: プリエンプション
  実行状態 --> 待機状態: I/O
  待機状態 --> 実行可能状態: I/O完了

プロパティの詳しい説明

名称	概要
[*]	スタート
状態の名称	名を書く
-->	処理の流れ
ブロック --> ブロック: 流れの内容	状態の流れの内容を書く。

publish: false

ガントチャート

ガントチャートには、ganttを使用する。

コード例

‘‘‘mermaid
gantt
	dateFormat YYYY-MM-DD
	title ガントチャート
	section セクション1
		タスク1:done, 2024-01-01, 2024-01-03
		タスク2:done, 2024-01-03, 2024-01-05
		タスク3:done, 2024-01-05, 2024-01-07
	section セクション2
		タスク4:done, 2024-01-02, 2024-01-06
		タスク5:done, 2024-01-06, 2024-01-08
		タスク6:done, 2024-01-08, 2024-01-10
‘‘‘

動作例

gantt
	dateFormat YYYY-MM-DD
	title ガントチャート
	section セクション1
		タスク1:done, 2024-01-01, 2024-01-03
		タスク2:done, 2024-01-03, 2024-01-05
		タスク3:done, 2024-01-05, 2024-01-07
	section セクション2
		タスク4:done, 2024-01-02, 2024-01-06
		タスク5:done, 2024-01-06, 2024-01-08
		タスク6:done, 2024-01-08, 2024-01-10

プロパティの詳細な説明

名称	概要
dateFormat	日時表記フォーマット
title	タイトル
section	区切り
タスク名:done, 開始日時, 終了日時	作業の開始の終了を表記