メインコンテンツへスキップ

Mermaid 11.15.0

Mermaid クラス図の書き方・早見表

クラス図は型と静的な関係を表します。実行時のメッセージはシーケンス図、判断の手順はフローチャートを使います。

Mermaidエディターで作成 →

クイックスタート

メソッドには括弧を付け、戻り値の型は空白の後に書きます。

Mermaid
エディターで開く → 
classDiagram
  class Document {
    +String title
    -bool published
    +publish() bool
  }
  class Reader
  Reader --> Document : 読む

読み込み中…

構文リファレンス

構文リファレンス
構文意味
classDiagram / class Id / class Id["Label"]図、クラスid、任意の表示名を宣言します。
class Id { members } / Id : memberブロック内またはコロン記法で属性とメソッドを追加します。
+ / - / # / ~公開、非公開、保護、パッケージ内の可視性です。
+method(arg) ReturnType / method()* / member$戻り値は空白の後、*は抽象メソッド、$は静的メンバーです。
List~T~ / Box~List~T~~チルダで型引数を囲みます。カンマ区切りの型引数には未対応です。
<|-- / *-- / o-- / --> / -- / ..> / ..|> / ..継承、コンポジション、集約、関連、実線の接続、依存、実現、破線の接続です。
A "1" --> "0..*" B : label引用符付きの多重度を端に置き、コロンで関係名を付けます。
<<interface>> / <<abstract>> / <<service>> / <<enumeration>>ステレオタイプを付けます。
namespace Name { class A }クラスをまとめます。11.15では入れ子とドット区切りの名前空間に対応します。
note "Text" / note for A "Text"図全体またはクラスに注記を付けます。
direction LR / RL / TB / BT配置方向を指定します。
style A fill:#d3e5ff / classDef / cssClass / :::直接指定するか、再利用するスタイルクラスを使います。
click A href "URL" / click A call callback()リンクやコールバックは環境の許可が必要です。
%% / accTitle: / accDescr:コメントとアクセシビリティ用の説明です。

メンバーと型引数

可視性は先頭です。括弧でメソッドを区別し、その後に戻り値を書きます。ジェネリクスはチルダを使い、カンマ区切りは使えません。

Mermaid
エディターで開く → 
classDiagram
  class Repository~T~ {
    -List~T~ items
    #int count
    ~String scope
    +find(id) T
    +create() T*
    +int total$
  }

読み込み中…

関係と多重度

三角は継承や実現、ひし形は所有を表します。多重度は表示用の文字列で、検証される制約ではありません。必要なら向きを逆にします。

Mermaid
エディターで開く → 
classDiagram
  Base <|-- Derived
  Whole *-- Part
  Group o-- Member
  Reader --> Document
  A -- B
  Client ..> Service
  Contract <|.. Implementation
  X .. Y
  Reader "1" --> "0..*" Document : 読む

読み込み中…

名前空間と注記

名前空間は見た目のグループで、言語のスコープを検証しません。図やクラスに注記を付け、ステレオタイプを対象クラスに置きます。

Mermaid
エディターで開く → 
classDiagram
  direction LR
  namespace Publishing {
    class Store {
      <<interface>>
      +save() bool
    }
    class Archive
  }
  Store <|.. Archive
  note for Store "永続化の境界"
  note "静的な構造"

読み込み中…

再利用するスタイル

classDefで定義し、cssClassや:::で適用します。styleは指定した要素だけを変更します。

Mermaid
エディターで開く → 
classDiagram
  classDef important fill:#d3e5ff,stroke:#0070f3,color:#171717
  class Guide:::important
  class Archive
  cssClass "Archive" important
  style Guide fill:#d3e5ff,stroke:#0070f3,stroke-width:2px
  Guide --> Archive

読み込み中…

名前空間の配置

階層表示では親グループも描画します。hierarchicalNamespaces: falseなら完全な名前の小さなグループにまとめ、idは変更しません。

Mermaid
エディターで開く → 
---
config:
  class:
    hierarchicalNamespaces: false
---
classDiagram
  namespace Docs.Public {
    class Guide
  }
  namespace Docs.Internal {
    class Draft
  }
  Draft ..> Guide

読み込み中…

よくある間違い

閉じ括弧を忘れる

関係を追加する前にメンバーブロックを閉じます。

誤った構文（下に修正例があります）

classDiagram
  class Guide {
    +String title

型引数に山括弧を使う

List~T~を使い、カンマ区切りの型引数は避けます。

制約

  • 型システムを検証せず、実行可能なコードも生成しません。
  • カンマ区切りの型引数は未対応です。
  • 位置は自動配置で決まり、関係は強制される制約ではありません。

よくある質問 (FAQ)

戻り値の型を書くには？
+find(id) Documentのように、括弧、空白、型の順で書きます。
コンポジションを表すには？
*--を使い、所有側に塗りつぶしたひし形を置きます。集約はo--です。
クラスをまとめられる？
namespace内に宣言します。11.15は入れ子やドット区切りにも対応します。