はじめに

システムの設計をドキュメント化する際、文章だけで説明しようとすると分かりにくくなりがちです。UMLは、こうした設計を図として標準化された形式で表現するための仕組みであり、MermaidはそれをMarkdownの中にテキストとして手軽に書けるようにするツールです。

本記事では、代表的な3つの図(ER図・シーケンス図・クラス図)の役割と、Mermaidでの書き方の基本を紹介します。

UMLとは

UML(Unified Modeling Language) は、Object Management Group(OMG)が標準化している、システムの設計を視覚的に表現するためのモデリング言語です。1994年に発表され、1997年にOMGの標準、2005年にはISO標準にもなっています。

UMLには14種類の図が定義されており、大きく「システムの静的な構造を表す図(構造図)」と「システムの動的な振る舞いを表す図(振る舞い図)」に分類されます。すべてを覚える必要はなく、実務では次の3種類がよく使われます。

ER図(Entity Relationship Diagram)

ER図は、データベースのテーブル(エンティティ)同士の関係を表す図です。データモデルの設計時によく使われます。

||--o{のような記号は、両端の関係の多重度(カーディナリティ)を表します。Mermaidの記法は、業界で広く使われている「鳥の足(crow's foot)」表記に対応しており、「1対1」「1対多」「多対多」といった関係を視覚的に表現できます。

シーケンス図(Sequence Diagram)

シーケンス図は、複数の登場人物(クライアント、サーバー、データベース等)が、時間の経過に沿ってどのようにメッセージをやり取りするかを表す図です。処理の流れを追いたい場合に向いています。

縦の線がそれぞれの登場人物(参加者)を表し、横向きの矢印がそのタイミングでやり取りされるメッセージを表します。「誰が」「いつ」「何を」呼び出しているかが時系列で分かるため、認証フローやAPI連携のような複数コンポーネントが絡む処理の説明に適しています。

クラス図(Class Diagram)

クラス図は、システムを構成するクラス(またはデータ構造)の属性・操作・相互の関係を表す図です。オブジェクト指向設計や、データモデルの構造を俯瞰する際に使われます。

ER図がデータベースのテーブル関係に特化しているのに対し、クラス図はより一般的にプログラム上の型・構造の関係を表現できる点が特徴です。

Mermaidとは

Mermaidは、これらのUML図を含む様々な種類の図を、専用の描画ツールを使わずテキストベースの記法だけで作成できるJavaScriptライブラリです。GitHub・GitLab・多くのドキュメント生成ツールがMermaid記法をネイティブにサポートしており、Markdownファイルの中にコードブロックとして書くだけで、対応環境上では自動的に図として描画されます。

```mermaid
graph TD
    A[開始] --> B{条件分岐}
    B -->|Yes| C[処理A]
    B -->|No| D[処理B]
```

従来、UML図は専用の作図ツールを使ってマウス操作で作成することが一般的でしたが、Mermaidを使うことでコードと同じようにテキストとして図を管理できるようになり、バージョン管理(Gitでの差分管理)や、ドキュメントの中への埋め込みが容易になるという利点があります。

まとめ

図の種類	表現する内容	主な用途
ER図	データベースのテーブル同士の関係	データモデルの設計
シーケンス図	複数の登場人物間の、時系列でのメッセージのやり取り	処理フロー・API連携の説明
クラス図	クラス・データ構造の属性・操作・関係	オブジェクト指向設計、構造の俯瞰
Mermaid	これらの図をテキストベースの記法で描画するツール	Markdown内への図の埋め込み、バージョン管理との親和性

参考

About the Unified Modeling Language Specification Version 2.5.1 - OMG
Entity Relationship Diagrams | Mermaid
Mermaid - Official Documentation