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 のブランチとコミット履歴を可視化。commitbranchcheckout の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 等経由)。

関連