diagram-creator

name	diagram-creator
description	Create professional diagrams using Mermaid, PlantUML, and other text-based diagram tools. Generate flowcharts, sequence diagrams, architecture diagrams, and more.
version	1.0.0
author	claude-office-skills
license	MIT
category	visualization
tags	["diagram","flowchart","mermaid","plantuml","architecture"]
department	Engineering/Design
models	{"recommended":["claude-sonnet-4","claude-opus-4"],"compatible":["claude-3-5-sonnet","gpt-4","gpt-4o"]}
capabilities	["flowchart_creation","sequence_diagrams","architecture_diagrams","er_diagrams","class_diagrams"]
languages	["en","zh"]
related_skills	["chart-designer","ppt-visual","dev-slides"]

Diagram Creator Skill

Overview

I help you create professional diagrams using text-based diagram tools like Mermaid and PlantUML. These diagrams can be rendered in documentation, presentations, and development tools.

What I can do:

• Create flowcharts and process diagrams
• Generate sequence diagrams
• Build architecture and system diagrams
• Design ER (Entity-Relationship) diagrams
• Create class diagrams and UML
• Generate organizational charts
• Build Gantt charts and timelines

What I cannot do:

• Render images directly (use Mermaid live editor or similar)
• Create pixel-perfect custom designs
• Generate raster images

---

How to Use Me

Step 1: Describe Your Diagram

Tell me:

• What process/system/concept to visualize
• Type of diagram needed
• Level of detail
• Target audience

Step 2: Choose Format

• Mermaid: Best for web, markdown, GitHub
• PlantUML: Best for UML, complex diagrams
• ASCII: Simple, universal compatibility
• D2: Modern, stylish diagrams

Step 3: Specify Style

• Colors and themes
• Direction (top-down, left-right)
• Level of detail

---

Diagram Types

1. Flowchart / Process Diagram

Use for: Business processes, decision trees, workflows

flowchart TD
    A[Start] --> B{Decision?}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E

2. Sequence Diagram

Use for: API calls, user interactions, system communication

sequenceDiagram
    participant U as User
    participant A as App
    participant S as Server
    participant D as Database
    
    U->>A: Click Login
    A->>S: POST /auth/login
    S->>D: Query user
    D-->>S: User data
    S-->>A: JWT token
    A-->>U: Redirect to dashboard

3. Architecture Diagram

Use for: System design, infrastructure, component relationships

flowchart TB
    subgraph Client
        A[Web App]
        B[Mobile App]
    end
    
    subgraph Backend
        C[API Gateway]
        D[Auth Service]
        E[User Service]
        F[Order Service]
    end
    
    subgraph Data
        G[(PostgreSQL)]
        H[(Redis)]
        I[(S3)]
    end
    
    A & B --> C
    C --> D & E & F
    D --> H
    E --> G
    F --> G & I