mermaidって?
プログラミングや開発などを行うにあたって、データの構造や流れをUMLで表したり、データベースの構造をER図で記述することがあると思います。
mermaidはテキストベースでダイアグラムを生成できるツールで、シンプルな構文を用いてクラス図やフローチャート、シーケンス図、ER図などの様々なダイアグラムを簡単に作成し図示することが可能です。
mermaidのルールに従ってコードを記述するだけで作成したダイアグラムをビジュアル化して生成でき、それをQiitaなどの記事上に手軽に挿入できる点が魅力です。
# 簡単な書き方
Mermaidでダイアグラムを作成する際の基本ルールを以下にまとめます。
1. クラス図(Class Diagram)
classDiagramと記述して開始します。
class クラス名 {}でクラスを定義し、内部にフィールドやメソッドを定義します。
クラス間の関係は、次のような記号で表現します:
-->:依存関係
--|>:継承関係
*--:コンポジション(全体と部分)
o--:集約(部分は全体の一部だが、全体が消滅しても部分は存在可能)
classDiagram
class User {
+String name
+String email
+login()
+logout()
}
class Post {
+String title
+String content
+publish()
+delete()
}
User --> Post : creates
2. シーケンス図(Sequence Diagram)
sequenceDiagramと記述して開始します。
participant 名称で各オブジェクトを定義します。
矢印でオブジェクト間のメッセージを記述します:
->>:同期メッセージ
-->>:非同期メッセージ
sequenceDiagram
participant User
participant Server
participant Database
User->>Server: Login request
Server->>Database: Check credentials
Database-->>Server: Valid credentials
Server-->>User: Login successful
3. ER図(Entity Relationship Diagram)
erDiagramと記述して開始します。
テーブルはテーブル名 {}で定義し、内部にカラムを記述します。
テーブル間の関係は以下の記号で定義します:
||--||:1対1の関係
||--o{:1対多の関係
o{--o{:多対多の関係
erDiagram
USERS {
INT id
VARCHAR name
VARCHAR email
}
POSTS {
INT id
VARCHAR title
TEXT content
INT user_id
}
USERS ||--o{ POSTS: "has"
Qiitaなどのマークダウンで記述する際は「```mermaid」と記述することのよりビジュアル化されます。
これらのルールを守ることで、Mermaidを使って簡単にダイアグラムを作成できます。