0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【ほぼ自分用】Qiitaでmermaidを使用してダイアグラムを出力する

Posted at

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を使って簡単にダイアグラムを作成できます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?