Mermaidを使ったクラス図の描き方

クラス図を作成する際は、従来はVisioなどの描画ツールやホワイトボードを使用するのが一般的でした。  しかし近年では、軽量でコードベースで扱えるMermaidを用いてクラス図を描くエンジニアも増えています。

本記事では、Mermaidを使ってクラス図を描く理由から具体的な書き方、エディタやAIの活用方法、最後に実例紹介までをまとめて解説します。

1.Mermaidでクラス図を描く理由

1.1 描画ツールの不足

従来の作図ツールは直感的で分かりやすい反面、以下のような課題があります。

• コードやドキュメントに組み込みづらい
• インストールやライセンスが必要でコストがかかる
• チームでの共有に不向き（ファイル形式がバラバラ）

1.2 mermaidの長所短所

Mermaidを使えば、テキストベースでクラス図を記述できるため、Gitでのバージョン管理やMarkdownへの埋め込みが簡単です。また、ドキュメントと設計図を一元管理できる点は大きなメリットです。

ただし、細かなレイアウト調整には限界があるため、デザイン重視の資料には向いていない場合もあります。

よりきれいなUMLクラス図を作成したい場合、記事の最後にテンプレートを用意しますので、どうぞご自由にお使いください。

2.Mermaidでクラス図を描く方法

2.1 記述方法の基本

Mermaidの基本的なクラス図コードは次のようになります。

classDiagram

class User {
    +String name
    +String email
    +login()
}

class Product {
    +String name
    +float price
}

User --> Product : buys

各部分の意味

①classDiagram

Mermaid に「クラス図を描く」と指示するキーワードです。これがないと Mermaid はクラス図として認識しません。

②class User { ... } / class Product { ... }

class クラス名 { 属性とメソッド } の形でクラスを定義します。

中身の書き方：

+ は public（公開） の属性やメソッド

- は private（非公開）

③User --> Product : buys

これは User が Product を「購入する」関係を表す矢印。

【-->】は 単方向の関連（Association）を示します。

【: buys】 は関係のラベルです。

以下、クラス図における関係の種類とMermaid記法を表でまとめしました。

④属性とメソッドの意味

+String name：User クラスの公開属性「名前」

+String email：User クラスの公開属性「メール

+login()：User クラスの公開メソッド「ログイン機能」

+float price：Product クラスの公開属性「価格」

+String name：Product クラスの公開属性「商品名」

このようにシンプルな記法で基本構造を表せます。詳細をMermaid公式サイトでご確認ください。

2.2 仕様の設定

Mermaidでは、色や線の種類を追加することで図を分かりやすくできます。

style クラス名 fill:背景色, stroke:枠線色, stroke-width:線の太さ, color:文字色

2.3 Mermaid Editorの導入

Mermaidを試すには次の方法があります。

①Mermaid Live Editor

ブラウザ上でコードを書いて即座にプレビュー可能。完成した図をPNGやSVGとしてエクスポートできます。

② VSCodeプラグイン：Markdown Preview Mermaid Support

VSCode上でMermaidコードを記述すると、Markdownプレビューでクラス図を表示できます。ドキュメント作成と並行して利用できる点が便利です。

2.4 AIの導入

AIを使えば、自然言語で指示するだけでMermaidコードを生成できます。たとえば、Google Geminiに以下のように入力します。

図書館管理システムのクラス図を作成してください。
Book、Member、Loan、Librarianのクラスを含め、
書籍と貸出記録の一対多の関係、会員と管理者の区別を明示してください。 

生成されたコードをMermaid Editorに貼り付ければ、素早くクラス図を得られます。

3. Mermaid記法で作成されたクラス図の例

3.1 販売管理システム

顧客、注文、商品、請求書の関係を整理したシンプルな例です。

3.2 図書館管理システム

書籍、会員、貸出記録、管理者を管理するシステム例です。

4.FAQ

4.1 Mermaidでクラス図をカスタマイズできますか？

はい。色、線、レイアウトのスタイルを柔軟に設定可能です。ただし詳細なレイアウト指定は難しいため、見やすさを意識した最小限のカスタマイズがおすすめです。

4.2 Mermaid以外にクラス図を簡単に描けるツールはありますか？

AstahやPlantUML、EdrawMaxなどがあります。操作性や用途によって選択肢は異なりますが、Markdownやコードと統合するならMermaidが最も手軽です。

5.クラス図作成ツールEdrawMax

クラス図を描くとき、Mermaidのようなコードベースのツールでは、関係線の記号や矢印の方向を正確に書かなければならず、少しのミスで図が崩れてしまいます。レイアウト調整や色分けも手動で行う必要があり、大規模な図になるほど修正に時間と労力がかかります。 

こうした課題を解消できるのが EdrawMaxです。ノードはマウス操作だけで簡単に配置でき、複雑な関係も自動的に整理されます。多彩なテンプレートやカスタマイズ機能を活用すれば、わかりやすいクラス図を効率よく作成可能。さらに、ドキュメント化やチームでの共有もスムーズに行え、開発プロセス全体の生産性が向上します。

 クラス図を作成する際、EdrawMaxのメリットは以下のようです。

• 直感的なドラッグ＆ドロップ操作

  • クラスや関係線を簡単に配置・調整でき、複雑な図でも瞬時に整理可能。

• 豊富な UML テンプレートと記号ライブラリ

• 自動整列・自動接続機能

  • 関係線の向きや位置を自動で整えてくれるので、手動修正の手間が不要。

• スタイル・色分けの自由度が高い

  • クラスごとに背景色や文字色を変更でき、役割や種類を直感的に識別可能。

• 複数形式での出力・共有が可能

  • PDF、PNG、SVG、Word などに出力でき、資料作成やチーム共有に便利。

5.クラス図のテンプレート

補足として、編集可能なUML図を用意しました。クリックすればオンラインで無料編集可能です。

クラス図

コンポーネント図

アクティビティ図