Mermaid.js クラス図の構文ガイド

クラス図とは何ですか?

A クラス図は構造的な UML図はオブジェクト指向ソフトウェアシステムの静的アーキテクチャを可視化するものです。不可欠な UML図の種類として、アプリケーション内の個々のクラス、インターフェース、データモデルをマッピングし、内部フィールド(属性)、操作機能(メソッド)、それらを結びつける構造的関係を明確に文書化します。このブループリントは、高レベルのドメイン設計を明確で保守可能なオブジェクト構造に変換する必要があるソフトウェアエンジニアにとって不可欠です。

そして Mermaid.jsを使用すると、直感的でテキストベースの定義を使ってデータモデルやシステムサービスを概要化できます。レイアウトエンジンはボックスのサイズを自動計算し、標準的なUMLデータコンパートメントを構造化し、手動でのフォーマット作業なしにキャンバス上で関係性の矢印を整列します。

コア構文ガイド:要素と構造

Mermaidで正確で標準準拠のUMLクラス図を設計するには、メンバー宣言、アクセス修飾子、構造的関係矢印を習得する必要があります。

1. クラスとクラスコンパートメントの宣言

クラスは2つの有効な形式で定義できます。シンプルなクラスの場合、classキーワードの後にクラス名を記述します。フィールドやメソッドをすぐに含めたい場合は、末尾に波かっこを使用して明確な本体ブロックを作成します:

classDiagram
    class UserProfile {
        +String username
        +String email
        +updateEmail(newEmail) void
    }

2. 可視性/アクセス修飾子の追加

標準的なUMLカプセル化ルールを文書化するには、属性またはメソッド名の直前に特定の記号を配置して、その可視性レベルを定義します:

  • + **公開:** 他のすべてのクラスからアクセス可能。
  • - **非公開:** 宣言したクラス内でのみアクセス可能。
  • # **保護:** クラス内およびそのサブクラス内でアクセス可能。
  • ~ **パッケージ / 内部:** 同じパッケージの境界内でアクセス可能。
classDiagram
    class BankAccount {
        -double balance
        #String accountHolder
        +getBalance() double
    }

3. 関係性の矢印と継承リンクをマスターする

クラスがUML図モデル内でどのように相互作用するかを示すには、専用の関係性文字列を使ってそれらのIDを接続します。Mermaidでは、線の方向が重要です。矢印の先端は親クラスまたはコンテナクラスを向いています。

  • 継承 / 一般化(破線または実線の矢印): Child --|> Parent (「は〜である」関係を表す)。
  • 実現 / 実装: Class ..|> Interface (クラスがインターフェース契約を履行することを表す)。
  • 合成(実線のダイヤモンド): Child --* Parent (厳密な所有関係を表す;親が死ぬと子も死ぬ)。
  • 集約(明確なダイヤモンド): Child --o Parent (緩いコレクション関係を表す;子は独立して存在できる)。
  • 依存関係: ClassA ..> ClassB (一時的な実行時参照を表す)。
classDiagram
    Car --|> Vehicle : "継承する"
    Engine --* Car : "部品である"

クリーンなクラスアーキテクチャレイアウトのベストプラクティス

  • クラスメンバーを視覚的にグループ化する: 常にクラス変数を本体ブロックの上部に、関数を下部にグループ化してください。このレイアウトは標準的なIDEのクラス構造と一致し、図を即座に読みやすくします。
  • 戻り値の型を指定する: メソッドを宣言する際は、戻り値の型をメソッド行の末尾に追加する(例:+fetchData() DataSet)。これにより、エンジニアリングチームに正確な実装の文脈を提供する。
  • 多重性を明確に保つ: 配列の数やコレクションのサイズを示すために、多重性のテキスト文字列を関係行のラッパーに直接追加する(例:Customer "1" --o "many" Order).

実際のMermaid.jsクラス図の例

例1:決済ゲートウェイドメインサブシステム(カプセル化とインターフェース)

この機能的なブループリントは、オンライン決済ドメインサービスをモデル化している。アクセス修飾子の使い方、クラスメンバーのグループ化、インターフェース関係の明確な実装方法を示している。

classDiagram
    class PaymentProcessor {
        <<interface>>
        +processPayment(amount) boolean
        +refundPayment(txnId) boolean
    }

    class StripeGateway {
        -String apiKey
        -String endpointUrl
        +processPayment(amount) boolean
        +refundPayment(txnId) boolean
        -logTransaction(status) void
    }

    class PayPalGateway {
        -String merchantId
        +processPayment(amount) boolean
        +refundPayment(txnId) boolean
    }

    StripeGateway ..|> PaymentProcessor : "実装する"
    PayPalGateway ..|> PaymentProcessor : "実装する"

構文の分解: <<interface>> タグは `PaymentProcessor` が高レベルのアーキテクチャ契約であることを明確に示している。2つの具体的なゲートウェイ実装クラスは、プライベートフィールド(-apiKey)を機密資格情報に使用している一方で、公開された支払いルーチン(+processPayment)を実現矢印(..|>).

例2:企業向け注文処理エンジン(組成と多重性)

この高度なシステムブループリントは、複雑なeコマース注文管理スキーマをマッピングしており、複数の相互接続されたクラス間で構造的所有関係やオブジェクト数を文書化する方法を示している。

classDiagram
    class Customer {
        +int customerId
        +String name
        +placeOrder() Order
    }

    class Order {
        +int orderId
        +Date dateCreated
        -String internalStatus
        +calculateTotal() double
    }

    class OrderItem {
        +int itemId
        +int quantity
        +double pricePerUnit
    }

    class Address {
        +String street
        +String city
        +String postalCode
    }

    Customer "1" --o "many" Order : "所有する"
    OrderItem "1..*" --* "1" Order : "構成する"
    Address "1" --> Order : "配送先"

構文の分解: この例は、集約と構成の違いを説明しています。実線のダイヤモンド矢印(--*)は、`OrderItem`が`Order`に強く結合されていることを示しています(注文が削除されると、その個別の行項目も破棄されます)。逆に、空洞のダイヤモンド矢印(--o)は、`Customer`が複数の注文を所有しているが、両方のエンティティは独立して存在できることを示しています。多重性文字列(例:"1..*")は、システムの関係要件を定義します。

上部へスクロール