目次
Mermaidで美しいダイアグラムを作成する方法
Mermaidは、テキストからダイアグラムを生成するJavaScriptベースのツールです。マークダウンのような簡単な構文で、フローチャート、シーケンス図、ガントチャート、クラス図などを作成できます。
フローチャートの例
フローチャートはプロセスの流れを示すのに最適です。以下は簡単なフローチャートの例です：
graph TD A[開始] --> B{条件判断} B -->|Yes| C[処理1] B -->|No| D[処理2] C --> E[終了] D --> E
graph TD
A[開始] --> B{条件判断}
B -->|Yes| C[処理1]
B -->|No| D[処理2]
C --> E[終了]
D --> E
基本的なフローチャートの例
シーケンス図の例
シーケンス図は、オブジェクト間の相互作用を時系列で表現します：
sequenceDiagram participant ブラウザ participant サーバー participant データベース
ブラウザ->>サーバー: リクエスト送信 サーバー->>データベース: データ照会 データベース-->>サーバー: 結果返却 サーバー-->>ブラウザ: レスポンス送信sequenceDiagram participant ブラウザ participant サーバー participant データベース ブラウザ->>サーバー: リクエスト送信 サーバー->>データベース: データ照会 データベース-->>サーバー: 結果返却 サーバー-->>ブラウザ: レスポンス送信
Webアプリケーションの基本的な通信フロー
ガントチャートの例
プロジェクト管理に便利なガントチャートも作成できます：
gantt title プロジェクトスケジュール dateFormat YYYY-MM-DD
section 計画フェーズ 要件定義 :a1, 2023-10-01, 7d 設計 :a2, after a1, 10d
section 開発フェーズ 実装 :a3, after a2, 15d テスト :a4, after a3, 7d
section リリースフェーズ デプロイ :a5, after a4, 2d 運用開始 :milestone, after a5, 0dgantt title プロジェクトスケジュール dateFormat YYYY-MM-DD section 計画フェーズ 要件定義 :a1, 2023-10-01, 7d 設計 :a2, after a1, 10d section 開発フェーズ 実装 :a3, after a2, 15d テスト :a4, after a3, 7d section リリースフェーズ デプロイ :a5, after a4, 2d 運用開始 :milestone, after a5, 0d
プロジェクトスケジュールのガントチャート
クラス図の例
オブジェクト指向設計のためのクラス図も作成できます：
classDiagram class User { +String name +String email +register() +login() }
class Post { +String title +String content +Date createdAt +create() +update() }
class Comment { +String content +Date createdAt +create() }
User "1" -- "n" Post : creates Post "1" -- "n" Comment : has User "1" -- "n" Comment : writes
classDiagram
class User {
+String name
+String email
+register()
+login()
}
class Post {
+String title
+String content
+Date createdAt
+create()
+update()
}
class Comment {
+String content
+Date createdAt
+create()
}
User "1" -- "n" Post : creates
Post "1" -- "n" Comment : has
User "1" -- "n" Comment : writes
ブログシステムの簡易クラス図
Mermaidの利点
- 簡単な構文: マークダウンに似た構文で直感的に記述できます
- 多彩な図表: フローチャート、シーケンス図、ガントチャートなど様々な図が作成可能
- コードとしての管理: テキストベースなのでバージョン管理がしやすい
- レスポンシブ: 様々な画面サイズに対応
- ダークモード対応: テーマに合わせて自動的に見た目が変わります
まとめ
Mermaidを使えば、専用の作図ツールなしに様々なダイアグラムを簡単に作成・共有できます。特に技術ドキュメントやブログでは非常に便利なツールです。