Mermaid(Obsidianダイアグラム)
Obsidian に組み込まれているダイアグラム生成ライブラリ。コードブロックに mermaid を指定することで、テキストベースでフローチャート・ER図・棒グラフ・円グラフ等を描画できる。プラグイン不要(Obsidian 標準対応)。
基本構文
```mermaid
(ダイアグラム定義)
```対応ダイアグラム種類
フローチャート
graph TD
A-->B
A-->C
B-->D
C-->D
TD(Top-Down)以外に LR(Left-Right)等の方向指定も可能。
ER図 / クラス図
classDiagram
class 商品情報{
商品ID
商品名
価格
}
class 注文明細{
注文ID
商品ID
注文数
}
商品情報-->注文明細
棒グラフ
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr]
y-axis "Revenue" 4000 --> 11000
bar [5000, 6000, 7500, 8200]
line [5000, 6000, 7500, 8200]
円グラフ
pie title タイトル
"項目A" : 85
"項目B" : 14
"項目C" : 1
シーケンス図(sequenceDiagram)
状態遷移・メッセージのやり取りを表現。participant でアクターを定義し、->> (実線)や -->> (破線)で矢印を引く。loop ... end でループブロック、Note right of X: で注釈を追加できる。
sequenceDiagram
participant 太郎
participant 花子
太郎->>花子: こんにちは
花子-->>太郎: 良いですよ!
ガントチャート(gantt)
プロジェクト進捗管理に使用。done / active でタスクのステータスを表現し、after des2 等で依存関係を定義できる。
gantt
dateFormat YYYY-MM-DD
title サンプル
section セクション名
完了タスク :done, t1, 2022-07-06, 2022-07-08
進行中 :active, t2, 2022-07-09, 3d
次のタスク : t3, after t2, 5d
Gitグラフ(gitGraph)
Git のブランチとコミット履歴を可視化。commit・branch・checkout の3コマンドで構成。
gitGraph
commit
commit
branch develop
commit
checkout main
commit
ステータス図(stateDiagram-v2)
システムの状態遷移を表現。<<choice>> で分岐ノードを定義できる。フローチャートよりシステム設計寄りの用途に向く。
stateDiagram-v2
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
ユーザージャーニー図(journey)
カスタマージャーニーのユーザー活動を可視化。各アクションにスコア(1〜5)とアクター名を付与できる。
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
要件図(requirementDiagram)
SysML で使用される図。要件同士・モデル要素との関係(satisfies 等)を表現する。システム要件管理に活用できる。
活用シーン
- 業務フロー・処理フローの可視化(フローチャート)
- システム間のメッセージ連携の整理(シーケンス図)
- プロジェクト進捗管理(ガントチャート)
- データベース設計(ER図・クラス図)
- Git ブランチ戦略の説明(Gitグラフ)
- ユーザー体験の可視化(ユーザージャーニー図)
- 売上・進捗等の数値グラフ(棒グラフ)
- 割合の比較(円グラフ)
Mermaid のツールバーから GUI で挿入することもできる(EditingToolbar 等経由)。