UML Diagram Generation Skill

UML図とダイアグラムをMermaidおよびPlantUMLで生成するスキルです。

概要

このスキルを使用すると、システム設計、ソフトウェアアーキテクチャ、データフロー、プロセスフローなど、様々な図を自動生成できます。生成された図はHTMLで表示され、編集可能なコードも含まれます。

主な機能

• 豊富な図タイプ: クラス図、シーケンス図、ER図、フローチャート、ステートマシン図など

• 2つのエンジン: Mermaid（軽量・高速）とPlantUML（高機能）の両方をサポート

• インタラクティブ: ブラウザで即座に表示、ズーム、パン可能

• エクスポート: SVG、PNG形式でダウンロード可能

• 編集可能: 生成されたコードを直接編集して即座に反映

• テーマ対応: ライト/ダークテーマ、カスタムスタイル

• レスポンシブ: あらゆる画面サイズに対応

使用方法

基本的な使い方

クラス図を作成してください。 クラス:

• User（ユーザー）
  • properties: id, name, email
  • methods: login(), logout()
• Product（商品）
  • properties: id, name, price
  • methods: getPrice(), setPrice() 関係: User "1" -- "*" Product

シーケンス図

ログインシーケンス図を作成:

1. ユーザー → フロントエンド: ログイン情報入力
2. フロントエンド → API: POST /login
3. API → データベース: ユーザー検証
4. データベース → API: ユーザー情報返却
5. API → フロントエンド: JWT トークン
6. フロントエンド → ユーザー: ログイン成功

フローチャート

注文処理フローチャートを作成: 開始 → 商品選択 → カート追加 → 在庫確認 → 在庫あり?

• YES → 決済処理 → 完了
• NO → エラー表示 → 終了

サポートする図タイプ

1. クラス図 (Class Diagram)

用途: オブジェクト指向設計、クラス構造の可視化

主な要素:

• クラス（プロパティ、メソッド）

• インターフェース

• 関係（継承、実装、関連、集約、コンポジション）

• 可視性（public, private, protected）

例:

以下のクラス図を作成:

• Animal（抽象クラス）
  • name: string
  • age: int
  • makeSound(): void
• Dog extends Animal
  • breed: string
  • bark(): void
• Cat extends Animal
  • color: string
  • meow(): void

2. シーケンス図 (Sequence Diagram)

用途: オブジェクト間の相互作用、処理フローの時系列表示

主な要素:

• アクター

• オブジェクト/コンポーネント

• メッセージ（同期、非同期）

• アクティベーション

• ライフライン

例:

ユーザー登録のシーケンス図: ユーザー → UI: 登録情報入力 UI → バリデーター: 入力検証 バリデーター → UI: 検証結果 UI → API: POST /register API → DB: ユーザー作成 DB → API: 成功 API → EmailService: 確認メール送信 API → UI: 登録完了 UI → ユーザー: 完了メッセージ

3. ER図 (Entity Relationship Diagram)

用途: データベース設計、エンティティ関係の可視化

主な要素:

• エンティティ（テーブル）

• 属性（カラム）

• 主キー、外部キー

• リレーションシップ（1:1, 1:N, N:M）

例:

ECサイトのER図:

• User
  • id (PK)
  • name
  • email
• Order
  • id (PK)
  • user_id (FK)
  • total_amount
• Product
  • id (PK)
  • name
  • price
• OrderItem
  • order_id (FK)
  • product_id (FK)
  • quantity

User 1--* Order Order -- Product (through OrderItem)

4. フローチャート (Flowchart)

用途: アルゴリズム、業務プロセスの可視化

主な要素:

• 開始/終了

• 処理ボックス

• 判断（条件分岐）

• 入出力

• ループ

例:

パスワードリセットフロー: 開始 → メールアドレス入力 → ユーザー存在確認 → 存在する? YES → トークン生成 → メール送信 → リンククリック待機 → 新パスワード入力 → パスワード更新 → 完了 NO → エラー表示 → 終了

5. ステートマシン図 (State Diagram)

用途: オブジェクトの状態遷移、ライフサイクル管理

主な要素:

• 状態

• 遷移

• イベント

• 開始状態、終了状態

例:

注文のステートマシン図: [開始] → 新規注文 新規注文 --[支払い完了]--> 支払済 支払済 --[出荷]--> 発送済 発送済 --[配達完了]--> 完了 新規注文 --[キャンセル]--> キャンセル済 支払済 --[キャンセル]--> キャンセル済

6. アクティビティ図 (Activity Diagram)

用途: ビジネスプロセス、ワークフロー

主な要素:

• アクティビティ

• 分岐、結合

• フォーク、ジョイン（並列処理）

• スイムレーン（担当者別）

7. コンポーネント図 (Component Diagram)

用途: システムアーキテクチャ、モジュール構成

主な要素:

• コンポーネント

• インターフェース

• 依存関係

• パッケージ

例:

3層アーキテクチャのコンポーネント図:

• Presentation Layer
  • Web UI
  • Mobile UI
• Business Logic Layer
  • User Service
  • Order Service
  • Payment Service
• Data Access Layer
  • Database
  • Cache
  • External API

8. ガントチャート (Gantt Chart)

用途: プロジェクト管理、スケジュール計画

例:

プロジェクトスケジュール: タスク1: 要件定義 (2024-01-01 to 2024-01-15) タスク2: 設計 (2024-01-16 to 2024-02-15) タスク3: 実装 (2024-02-16 to 2024-04-30) タスク4: テスト (2024-04-01 to 2024-05-15) タスク5: リリース (2024-05-16 to 2024-05-31)

9. ユーザージャーニーマップ

用途: UX設計、ユーザー体験の可視化

10. マインドマップ

用途: アイデア整理、概念マッピング

Mermaid vs PlantUML

Mermaid（推奨）

メリット:

• ブラウザで直接レンダリング（軽量）

• シンプルな構文

• リアルタイムプレビュー

• GitHub、GitLabで標準サポート

• モダンなデザイン

対応図:

• フローチャート ✅

• シーケンス図 ✅

• クラス図 ✅

• ステート図 ✅

• ER図 ✅

• ガントチャート ✅

• パイチャート ✅

• ユーザージャーニー ✅

• Gitグラフ ✅

構文例:

graph TD A[開始] --> B{条件} B -->|Yes| C[処理1] B -->|No| D[処理2] C --> E[終了] D --> E

PlantUML

メリット:

• より豊富な図タイプ

• 詳細なカスタマイズ

• UML標準準拠

• スキンテーマ豊富

対応図:

• すべてのUML図 ✅

• アーキテクチャ図 ✅

• ワイヤーフレーム ✅

• JSON/YAML可視化 ✅

構文例:

@startuml actor User User -> System: Request System -> Database: Query Database --> System: Data System --> User: Response @enduml

カスタマイズオプション

テーマ

Mermaid テーマ:

• default

• デフォルト

• dark

• ダークモード

• forest

• 緑系

• neutral

• ニュートラル

• base

• ベース

PlantUML スキン:

• bluegray

• ブルーグレー

• cerulean-outline

• セルリアン

• sketchy-outline

• スケッチ風

• vibrant

• ビビッド

色のカスタマイズ

クラス図を作成:

• Userクラス: 背景色=#lightblue
• Adminクラス: 背景色=#lightcoral スタイル: モダン

フォントとサイズ

大きめのフォントでフローチャートを作成 フォントサイズ: 16px フォントファミリー: Arial

実装例

例1: マイクロサービスアーキテクチャ図

入力:

マイクロサービスアーキテクチャのコンポーネント図を作成:

フロントエンド:

• Web App
• Mobile App

API Gateway:

• Kong

サービス:

• User Service (Node.js)
• Order Service (Java)
• Payment Service (Python)
• Notification Service (Go)

データストア:

• PostgreSQL (User, Order)
• MongoDB (Product)
• Redis (Cache)

メッセージング:

• RabbitMQ
• Kafka

外部連携:

• Stripe API
• SendGrid API

すべてのサービスはDocker上で動作

生成されるもの:

• 完全なアーキテクチャ図（Mermaid）

• サービス間の依存関係

• データフロー

• 編集可能なコード

例2: ユーザー認証フロー

入力:

OAuth2.0認証フローのシーケンス図:

アクター:

• User (ユーザー)
• Client App (クライアントアプリ)
• Auth Server (認証サーバー)
• Resource Server (リソースサーバー)

フロー:

1. User → Client App: ログインボタンクリック
2. Client App → Auth Server: 認可リクエスト
3. Auth Server → User: ログイン画面表示
4. User → Auth Server: 認証情報入力
5. Auth Server → User: 認可確認
6. User → Auth Server: 許可
7. Auth Server → Client App: 認可コード
8. Client App → Auth Server: トークンリクエスト
9. Auth Server → Client App: アクセストークン
10. Client App → Resource Server: リソースリクエスト（トークン付き）
11. Resource Server → Client App: リソース返却
12. Client App → User: データ表示

例3: データベーススキーマ

入力:

ECサイトのER図:

テーブル:

1. users

   • id (PK, INT)
   • email (VARCHAR, UNIQUE)
   • password_hash (VARCHAR)
   • name (VARCHAR)
   • created_at (TIMESTAMP)

2. products

   • id (PK, INT)
   • name (VARCHAR)
   • description (TEXT)
   • price (DECIMAL)
   • stock (INT)
   • category_id (FK)

3. categories

   • id (PK, INT)
   • name (VARCHAR)
   • parent_id (FK, nullable)

4. orders

   • id (PK, INT)
   • user_id (FK)
   • total_amount (DECIMAL)
   • status (ENUM)
   • created_at (TIMESTAMP)

5. order_items

   • id (PK, INT)
   • order_id (FK)
   • product_id (FK)
   • quantity (INT)
   • price (DECIMAL)

6. reviews

   • id (PK, INT)
   • user_id (FK)
   • product_id (FK)
   • rating (INT)
   • comment (TEXT)
   • created_at (TIMESTAMP)

リレーション:

• users 1--* orders
• orders 1--* order_items
• products 1--* order_items
• products *--1 categories
• categories 1--* categories (self-reference)
• users 1--* reviews
• products 1--* reviews

図の表示

生成されたHTMLファイルは:

ブラウザで直接開く

open diagram.html

またはローカルサーバーで

python -m http.server 8000

http://localhost:8000/diagram.html

インタラクティブ機能

• ズーム: マウスホイールでズームイン/アウト

• パン: ドラッグで図を移動

• エクスポート: SVG/PNG形式でダウンロード

• 編集: コードを直接編集して即座に反映

• コピー: 図のコードをクリップボードにコピー

• テーマ切り替え: ライト/ダーク切り替え

エクスポート形式

SVG（推奨）

• ベクター形式（拡大しても高画質）

• ファイルサイズ小

• 編集可能

PNG

• ラスター形式

• 汎用性が高い

• ドキュメントへの埋め込みに便利

コード

• Mermaid/PlantUML 構文

• Markdownファイルに埋め込み可能

• バージョン管理可能

ベストプラクティス

図の設計

• シンプルに保つ: 1つの図で1つの概念

• 適切な抽象度: 詳細すぎず、抽象的すぎず

• 命名規則: 一貫性のある名前付け

• レイアウト: 読みやすい配置（左から右、上から下）

• 色の使い方: 意味のある色分け

クラス図

• 関係性を明確に（継承、実装、関連）

• 重要なメソッドのみ記載

• インターフェースと実装クラスを区別

シーケンス図

• 時系列を上から下へ

• アクターは左側に配置

• 複雑な分岐は別図に分割

ER図

• 主キーを明確に

• 外部キー制約を表示

• 正規化レベルを考慮

フローチャート

• 開始と終了を明確に

• 1つのフローは1つの結果へ

• 無限ループを避ける

トラブルシューティング

図が表示されない

原因: Mermaid/PlantUMLライブラリの読み込みエラー 解決: インターネット接続確認、ブラウザコンソールでエラー確認

構文エラー

原因: 不正な構文 解決: コンソールエラーメッセージ確認、構文ドキュメント参照

レイアウトが崩れる

原因: 要素が多すぎる、関係が複雑 解決: 図を分割、レイアウト方向を変更（TB, LR, RL, BT）

日本語が文字化け

原因: フォント設定 解決: UTF-8エンコーディング確認、日本語対応フォント指定

高度な機能

サブグラフ（Mermaid）

graph TB subgraph Frontend A[Web UI] B[Mobile UI] end subgraph Backend C[API] D[Database] end A --> C B --> C C --> D

ノート・コメント（PlantUML）

@startuml class User { +id: int +name: string } note right: ユーザー情報を\n管理するクラス @enduml

スタイリング（Mermaid）

%%{init: {'theme':'dark', 'themeVariables': { 'primaryColor':'#ff6b6b'}}}%% graph TD A[Start] --> B[End]

参考リンク

• Mermaid 公式ドキュメント

• Mermaid Live Editor

• PlantUML 公式サイト

• PlantUML Web Server

制限事項

• 非常に複雑な図はパフォーマンス低下の可能性

• PlantUMLはサーバーレンダリング必要（オンライン）

• 古いブラウザでは一部機能が動作しない可能性

バージョン情報

• Mermaid: 10.6.0

• PlantUML: Latest (online)

• スキルバージョン: 1.0.0

使用例:

ECサイトの注文処理シーケンス図を作成してください。 アクター: User, Frontend, API, Database, PaymentGateway フロー:

1. ユーザーが商品をカートに追加
2. チェックアウトボタンクリック
3. 注文情報をAPIに送信
4. 在庫確認
5. 決済処理
6. 注文確定
7. 確認メール送信

このプロンプトで、完全なシーケンス図HTMLが生成されます！