NotionでMermaidを使うことで、フローチャートやシーケンス図などの図表を簡単に作成できます。本記事では、NotionでのMermaidの基本的な使い方から、作成できるグラフの種類まで詳しく解説します。
Mermaidとは
MermaidはMarkdown風の記法でフローチャートやシーケンス図などの図表を作成できるツールです。テキストベースで図表を描けるため、コードのように管理でき、バージョン管理も容易です。Notionでは標準でMermaidに対応しており、専用のコードブロックを使って図表を作成できます。
Mermaidの使い方
NotionでMermaidを使用する手順を説明します。
/mermaid と入力し、コードブロックを作成します。
これでMermaidを作成する準備は完了です。
あとはMermaidの記法にのっとりコードを書いていくだけです。
Mermaidで表現できるグラフ
フローチャート
フローチャートはプロセスの流れや判断分岐を視覚的に表現する図表です。
flowchart TD
A[開始] --> B{条件判定}
B -->|Yes| C[処理A]
B -->|No| D[処理B]
C --> E[終了]
D --> E
シーケンス図
シーケンス図はシステム間やオブジェクト間のやり取りを時系列で表現する図表です。
sequenceDiagram
participant A as ユーザー
participant B as システム
A->>B: ログイン要求
B->>A: 認証画面表示
A->>B: 認証情報送信
B->>A: ログイン完了
クラス図
クラス図はオブジェクト指向設計でクラス間の関係を表現する図表です。
classDiagram
class User {
+String name
+String email
+login()
+logout()
}
class Admin {
+String role
+manageUsers()
}
User <|-- Admin
状態遷移図
状態遷移図はシステムやオブジェクトの状態変化を表現する図表です。
stateDiagram-v2
[*] --> 待機中
待機中 --> 処理中 : 開始
処理中 --> 完了 : 成功
処理中 --> エラー : 失敗
エラー --> 待機中 : リセット
完了 --> [*]
ER図
ER図はデータベースの設計でエンティティ間の関係を表現する図表です。
erDiagram
USER {
int id PK
string name
string email
}
ORDER {
int id PK
int user_id FK
date order_date
}
PRODUCT {
int id PK
string name
decimal price
}
USER ||--o{ ORDER : places
ORDER }o--|| PRODUCT : contains
ユーザージャーニー
ユーザージャーニーはユーザーの行動や体験の流れを表現する図表です。
journey
title ユーザー登録の流れ
section 登録前
サイト訪問: 3: ユーザー
情報収集: 4: ユーザー
section 登録
フォーム入力: 2: ユーザー
確認メール: 5: システム
認証完了: 5: ユーザー
section 登録後
初回ログイン: 5: ユーザー
チュートリアル: 4: ユーザー
ガントチャート
ガントチャートはプロジェクトのスケジュール管理に使用する図表です。
gantt
title プロジェクトスケジュール
dateFormat YYYY-MM-DD
section 設計
要件定義 :done, des1, 2024-01-01, 2024-01-15
基本設計 :active, des2, 2024-01-16, 2024-01-31
section 開発
実装 :dev1, 2024-02-01, 2024-03-15
テスト :dev2, 2024-03-16, 2024-03-31
パイチャート
パイチャートはデータの割合を視覚的に表現する図表です。
pie title データ分析結果
"カテゴリA" : 45
"カテゴリB" : 30
"カテゴリC" : 15
"その他" : 10
クアドラントチャート
クアドラントチャートは2つの軸で項目を分類し、4つの象限で表現する図表です。
quadrantChart
title Reach and influence
x-axis Low Reach --> High Reach
y-axis Low Influence --> High Influence
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Git図
Git図はGitのブランチやコミットの履歴を視覚化する図表です。
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
まとめ
NotionでMermaidを活用することで、様々な種類の図表を簡単に作成できます。本記事では以下のグラフを紹介しました。
- フローチャート
- シーケンス図
- クラス図
- 状態遷移図
- ER図
- ユーザージャーニー
- ガントチャート
- パイチャート
- クアドラントチャート
- Git図
テキストベースで作成できるため、修正や更新も簡単に行えます。用途に応じて適切な図表を選択し、プロジェクトの可視化や情報整理に役立てましょう。
