uml-diagram

UML Diagram Generation Skill

This skill generates UML diagrams and diagrams with Mermaid and PlantUML.

Overview

With this skill, you can automatically generate various diagrams such as system design, software architecture, data flow, process flow, and more. The generated diagrams are displayed in HTML and also include editable code.

Main Features

Rich Diagram Types: Class diagrams, sequence diagrams, ER diagrams, flowcharts, state machine diagrams, etc.
Two engines: Supports both Mermaid (lightweight and fast) and PlantUML (highly functional)
Interactive: Instantly displayed in the browser, with zoom and pan support
Export: Downloadable in SVG and PNG formats
Editable: Directly edit the generated code and reflect changes instantly
Theme Support: Light/dark themes, custom styles
Responsive: Supports any screen size

How to Use

Basic Usage

クラス図を作成してください。
クラス:
- User（ユーザー）
  - properties: id, name, email
  - methods: login(), logout()
- Product（商品）
  - properties: id, name, price
  - methods: getPrice(), setPrice()
関係: User "1" -- "*" Product

Sequence Diagram

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

Flowchart

注文処理フローチャートを作成:
開始 → 商品選択 → カート追加 → 在庫確認
→ 在庫あり?
  - YES → 決済処理 → 完了
  - NO → エラー表示 → 終了

Supported Diagram Types

1. Class Diagram

Purpose: Object-oriented design, visualization of class structures

Main Elements:

Classes (properties, methods)
Interface
Relationships (inheritance, implementation, association, aggregation, composition)
Visibility (public, private, protected)

Example:

以下のクラス図を作成:
- Animal（抽象クラス）
  - name: string
  - age: int
  - makeSound(): void
- Dog extends Animal
  - breed: string
  - bark(): void
- Cat extends Animal
  - color: string
  - meow(): void

2. Sequence Diagram

Purpose: Interactions between objects, chronological display of processing flows

Main Elements:

Actor
Object/Component
Messages (synchronous, asynchronous)
Activation
Lifeline

Example:

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

3. ER Diagram (Entity Relationship Diagram)

Purpose: Database design, visualization of entity relationships

Main Elements:

Entity (table)
Attributes (columns)
Primary keys, foreign keys
Relationships (1:1, 1:N, N:M)

Example:

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

Purpose: Visualization of algorithms and business processes

Main Elements:

Start/End
Process Box
Decision (conditional branching)
Input/Output
Loop

Example:

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

5. State Diagram

Purpose: State transitions of objects, lifecycle management

Main Elements:

State
Transition
Event
Start state, end state

Example:

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

6. Activity Diagram

Purpose: Business processes, workflows

Main Elements:

Activity
Branch, merge
Fork, join (parallel processing)
Swimlanes (by responsible party)

7. Component Diagram

Purpose: System architecture, module configuration

Main Elements:

Component
Interface
Dependencies
Package

Example:

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

Purpose: Project management, schedule planning

Example:

プロジェクトスケジュール:
タスク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. User Journey Map

Purpose: UX design, visualization of user experience

10. Mind Map

Use cases: Idea organization, concept mapping

Mermaid vs PlantUML

Mermaid (recommended)

Benefits:

Renders directly in the browser (lightweight)
Simple syntax
Real-time preview
Standard support in GitHub and GitLab
Modern design

Supported diagrams:

Flowchart ✅
Sequence diagram ✅
Class diagram ✅
State diagram ✅
ER diagram ✅
Gantt Chart ✅
Pie Chart ✅
User Journey ✅
Git Graph ✅

Syntax example:

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

PlantUML

Benefits:

Richer variety of diagram types
Detailed customization
UML standard compliant
Abundant skin themes

Supported diagrams:

All UML diagrams ✅
Architecture diagrams ✅
Wireframe ✅
JSON/YAML visualization ✅

Syntax example:

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

Customization options

Theme

Mermaid Theme:

default - Default
dark - Dark Mode
forest - Green tones
neutral - Neutral
base - Base

PlantUML Skin:

bluegray - Blue Gray
cerulean-outline - Cerulean
sketchy-outline - Sketch style
vibrant - Vivid

Color customization

クラス図を作成:
- Userクラス: 背景色=#lightblue
- Adminクラス: 背景色=#lightcoral
スタイル: モダン

Font and size

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

Implementation examples

Example 1: Microservices architecture diagram

Input:

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

フロントエンド:
- 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上で動作

What is generated:

Complete architecture diagram (Mermaid)
Dependencies between services
Data Flow
Editable code

Example 2: User authentication flow

Input:

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: データ表示

Example 3: Database schema

Input:

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

Diagram display

The generated HTML file:

# ブラウザで直接開く
open diagram.html

# またはローカルサーバーで
python -m http.server 8000
# http://localhost:8000/diagram.html

Interactive features

Zoom: Zoom in/out with mouse wheel
Pan: Drag to move the diagram
Export: Download in SVG/PNG format
Edit: Edit the code directly and reflect changes instantly
Copy: Copy the diagram code to the clipboard
Theme switching: Light/dark switching

Export formats

SVG (recommended)

Vector format (high quality even when enlarged)
Small file size
Editable

PNG

Raster format
High versatility
Convenient for embedding in documents

Code

Mermaid/PlantUML syntax
Can be embedded in Markdown files
Version controllable

Best practices

Diagram design

Keep it simple: One concept per diagram
Appropriate level of abstraction: Not too detailed, not too abstract
Naming conventions: Consistent naming
Layout: Readable layout (left to right, top to bottom)
How to use colors: Meaningful color coding

Class diagram

Make relationships clear (inheritance, implementation, association)
List only important methods
Distinguish between interfaces and implementation classes

Sequence diagram

Time series from top to bottom
Place actors on the left side
Split complex branches into separate diagrams

ER diagram

Clarify the primary key
Show foreign key constraints
Consider the normalization level

Flowchart

Clarify the start and end
One flow to one result
Avoid infinite loops

Troubleshooting

Diagram is not displayed

Cause: Mermaid/PlantUML library loading error Solution: Check internet connection, check for errors in browser console

Syntax error

Cause: Invalid syntax Solution: Check console error messages, refer to syntax documentation

Layout is broken

Cause: Too many elements, complex relationships Solution: Split the diagram, change layout direction (TB, LR, RL, BT)

Japanese characters are garbled

Cause: Font settings Solution: Check UTF-8 encoding, specify a Japanese-compatible font

Advanced features

Subgraph (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

Notes/Comments (PlantUML)

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

Styling (Mermaid)

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

Reference links

Limitations

Very complex diagrams may cause performance degradation
PlantUML requires server rendering (online)
Some features may not work in older browsers

Version information

Mermaid: 10.6.0
PlantUML: Latest (online)
Skill version: 1.0.0

Usage example:

ECサイトの注文処理シーケンス図を作成してください。
アクター: User, Frontend, API, Database, PaymentGateway
フロー:
1. ユーザーが商品をカートに追加
2. チェックアウトボタンクリック
3. 注文情報をAPIに送信
4. 在庫確認
5. 決済処理
6. 注文確定
7. 確認メール送信

With this prompt, a complete sequence diagram HTML will be generated!

About this skill

Overview

Main Features

How to Use

Basic Usage

Sequence Diagram

Flowchart

Supported Diagram Types

1. Class Diagram

2. Sequence Diagram

3. ER Diagram (Entity Relationship Diagram)

4. Flowchart

5. State Diagram

6. Activity Diagram

7. Component Diagram

8. Gantt Chart

9. User Journey Map

10. Mind Map

Mermaid vs PlantUML

Mermaid (recommended)

PlantUML

Customization options

Theme

Color customization

Font and size

Implementation examples

Example 1: Microservices architecture diagram

Example 2: User authentication flow

Example 3: Database schema

Diagram display

Interactive features

Export formats

SVG (recommended)

PNG

Code

Best practices

Diagram design

Class diagram

Sequence diagram

ER diagram

Flowchart

Troubleshooting

Diagram is not displayed

Syntax error

Layout is broken

Japanese characters are garbled

Advanced features

Subgraph (Mermaid)

Notes/Comments (PlantUML)

Styling (Mermaid)

Reference links

Limitations

Version information