Mermaid で書ける UML 図は3つ — Bob Shell に描いてもらった（対応表つき）

どうもこんにちは、Tadash です。

図を描くのは面倒ですが、テキストで書けるなら AI に任せられます。今回は Bob Shell に、Mermaid 記法で UML 図を描いてもらいました。

ただ、Mermaid は UML の図すべてに正式対応しているわけではありません。UML には14種類の図があって、Mermaid が正式に対応しているのは3つだけです。まずは対応表で全体を押さえてから、その3つを実際に描いてもらいます。

• Mermaid … テキストで図を記述するための記法。対応しているサービスやツールで表示すると、そのまま図になります。Qiita も対応しているので、この記事の図はスクショではなく、記法がそのまま図になったものです。
• UML（Unified Modeling Language）… ソフト設計で使う図の共通言語。クラス図やシーケンス図など、全部で14種類あります。

Mermaid × UML の対応表

本記事は Mermaid v11.16.0 と UML 2.5.1 に基づきます。UML の14種類（構造図7＋振る舞い図7）に対する Mermaid の対応は、以下のとおりです。

UML の図（14種）	分類	Mermaid
クラス図	構造	✅ 正式対応
シーケンス図	振る舞い	✅ 正式対応
状態マシン図（状態遷移図）	振る舞い	✅ 正式対応
ユースケース図	振る舞い	❌ 非対応
アクティビティ図	振る舞い	❌ 非対応
コンポーネント図	構造	❌ 非対応
配置図（デプロイメント図）	構造	❌ 非対応
パッケージ図	構造	❌ 非対応
オブジェクト図	構造	❌ 非対応
合成構造図	構造	❌ 非対応
プロファイル図	構造	❌ 非対応
コミュニケーション図	振る舞い	❌ 非対応
相互作用概要図	振る舞い	❌ 非対応
タイミング図	振る舞い	❌ 非対応

正式対応はクラス図・シーケンス図・状態遷移図の3つです。残りは似た表現で近い形に寄せるか、そもそも書けません。ちなみに UML とは別ですが、設計でよく使う ER図 と、アーキテクチャ用の C4図 も Mermaid にはあります。

これ以降の図と、引用で示すプロンプトは、手元の Bob Shell で実際に生成したものです。3つとも同じ「ログイン／セッション」を、別の角度から描いてもらいました。

描いてもらった①：クラス図

ユーザー認証の簡単なクラス図を Mermaid で書いて。User・Session・AuthService の3クラスで、関連も付けて。

出てきた図です。

元のコード

classDiagram
    class User {
        -String id
        -String username
        -String password
        -String email
        +getId() String
        +getUsername() String
        +validatePassword(password) boolean
    }

    class Session {
        -String sessionId
        -String userId
        -DateTime createdAt
        -DateTime expiresAt
        +getSessionId() String
        +getUserId() String
        +isValid() boolean
        +extend() void
    }

    class AuthService {
        -Map~String, Session~ activeSessions
        +login(username, password) Session
        +logout(sessionId) boolean
        +validateSession(sessionId) boolean
        +createSession(userId) Session
        +getUser(sessionId) User
    }

    AuthService --> User : 認証
    AuthService --> Session : 管理
    Session --> User : 関連付け

属性の先頭の - は非公開、+ は公開。Map~String, Session~ のようなジェネリック型もそのまま書けます。関連は矢印にラベル（認証・管理・関連付け）を付けています。

描いてもらった②：シーケンス図

ログイン処理のシーケンス図を Mermaid で書いて。登場人物は User・UI・AuthService・DB。

出てきた図です。

元のコード

sequenceDiagram
    actor User as ユーザー
    participant UI as UI
    participant AuthService as 認証サービス
    participant DB as データベース

    User->>UI: ユーザー名とパスワードを入力
    UI->>UI: 入力値の検証

    alt 入力値が無効
        UI->>User: エラーメッセージを表示
    else 入力値が有効
        UI->>AuthService: login(username, password)
        AuthService->>DB: ユーザー情報を取得

        alt ユーザーが存在しない
            DB-->>AuthService: ユーザーなし
            AuthService-->>UI: 認証失敗
            UI->>User: エラーメッセージを表示
        else ユーザーが存在
            DB-->>AuthService: ユーザー情報
            AuthService->>AuthService: パスワードを検証

            alt パスワードが一致しない
                AuthService-->>UI: 認証失敗
                UI->>User: エラーメッセージを表示
            else パスワードが一致
                AuthService->>AuthService: セッションを作成
                AuthService->>DB: セッション情報を保存
                DB-->>AuthService: 保存完了
                AuthService-->>UI: セッション情報
                UI->>UI: セッションを保持
                UI->>User: ログイン成功画面を表示
            end
        end
    end

->> が呼び出し、-->> が戻り、alt／else が条件分岐です。頼んだのは基本のログインだけですが、Bob は入力エラー・ユーザー不在・パスワード不一致まで、分岐を自分で足してきました。

描いてもらった③：状態遷移図

ログインセッションの状態遷移図を Mermaid で書いて。未認証・認証中・認証済・期限切れの状態で。

出てきた図です。

元のコード

stateDiagram-v2
    [*] --> 未認証: 初期状態

    未認証 --> 認証中: ログイン開始

    認証中 --> 認証済: 認証成功
    認証中 --> 未認証: 認証失敗

    認証済 --> 認証済: セッション延長
    認証済 --> 期限切れ: タイムアウト
    認証済 --> 未認証: ログアウト

    期限切れ --> 未認証: セッション破棄
    期限切れ --> 認証中: 再認証開始

    未認証 --> [*]: セッション終了

    note right of 未認証
        ユーザーは未ログイン状態
        セッションIDなし
    end note

    note right of 認証中
        認証処理を実行中
        一時的な状態
    end note

    note right of 認証済
        有効なセッションを保持
        リソースへのアクセス可能
    end note

    note right of 期限切れ
        セッションの有効期限切れ
        再認証が必要
    end note

[*] が開始・終了、矢印のラベルがイベント（きっかけ）、note right of が補足です。

正式対応していない図はどうする？

ユースケース図やアクティビティ図のように Mermaid が正式対応していない図は、似た表現で近い形に寄せるのが現実的です。厳密な UML 記法（棒人間のアクターや楕円のユースケース）にはなりませんが、「誰が何をするか」を伝えるだけなら十分に足ります。

がっちり UML で描きたいときは、UML の全種類をカバーする PlantUML の出番です。こちらもテキストで図を書く記法で、描画する専用ツールがセットになっています。

まとめ

• Mermaid が正式対応している UML 図は、クラス図・シーケンス図・状態遷移図の3つです。
• 残りの11種は、似た表現で近い形に寄せるか、そもそも書けません。
• テキストで書ける図なら、Bob に「〇〇の△△図を Mermaid で」と頼むだけです。

手で作図を始めるより、Bob のような AI に言葉で頼んで、まず形にしてもらうほうが早いです。出てきた図はそのままレビューにも設計書にも回せます。テキストで図を書く一番の利点は、そこにあると思います。

---

※2026-07-23 時点。Mermaid v11.16.0、UML 2.5.1 に基づきます。Mermaid の対応図はバージョンで増減します。図が正しく表示されるかは、Mermaid の各種ビューアでご確認ください。

出典

• Mermaid 公式（対応図タイプ一覧）
• Class diagrams | Mermaid
• Sequence diagrams | Mermaid
• State diagrams | Mermaid
• UML 2.5.1 仕様 | OMG
• Add Use Case diagram type · Issue #4628（ユースケース図の対応状況）

※投稿内容は個人の見解であり、必ずしも私の所属団体・企業における立場、戦略、意見を代表するものではありません。

---