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

4. Entity-Relationship Diagram

Use for: Database design, data models

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    PRODUCT ||--o{ LINE_ITEM : "ordered in"
    
    CUSTOMER {
        int id PK
        string name
        string email
    }
    ORDER {
        int id PK
        date created_at
        int customer_id FK
    }
    PRODUCT {
        int id PK
        string name
        decimal price
    }

5. Class Diagram

Use for: OOP design, code structure

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }
    class Dog {
        +String breed
        +bark()
    }
    class Cat {
        +boolean indoor
        +meow()
    }
    
    Animal <|-- Dog
    Animal <|-- Cat

6. State Diagram

Use for: State machines, status workflows

stateDiagram-v2
    [*] --> Draft
    Draft --> Submitted: Submit
    Submitted --> InReview: Assign reviewer
    InReview --> Approved: Approve
    InReview --> Rejected: Reject
    Rejected --> Draft: Revise
    Approved --> [*]

7. Gantt Chart

Use for: Project timelines, schedules

gantt
    title Project Timeline
    dateFormat  YYYY-MM-DD
    
    section Planning
    Requirements    :a1, 2024-01-01, 14d
    Design          :a2, after a1, 21d
    
    section Development
    Backend         :b1, after a2, 30d
    Frontend        :b2, after a2, 30d
    
    section Testing
    QA Testing      :c1, after b1, 14d
    UAT             :c2, after c1, 7d

8. Mind Map

Use for: Brainstorming, concept organization

mindmap
    root((Project))
        Features
            Feature A
            Feature B
            Feature C
        Team
            Frontend
            Backend
            Design
        Timeline
            Q1
            Q2
            Q3

9. Git Graph

Use for: Branch visualization, git workflows

gitGraph
    commit
    commit
    branch feature
    checkout feature
    commit
    commit
    checkout main
    merge feature
    commit

Output Format

# Diagram: [Name]

**Type**: [Flowchart / Sequence / Architecture / etc.]
**Tool**: [Mermaid / PlantUML]
**Purpose**: [What it illustrates]

---

## Diagram Code

### Mermaid

```mermaid
[Mermaid code here]

PlantUML (Alternative)

[PlantUML code here]

Rendering Instructions

Mermaid Live Editor: https://mermaid.live/
GitHub: Paste directly in markdown files
VS Code: Install Mermaid extension
Notion: Use code block with mermaid type

Customization Options

Color Theme

Add to the beginning:

%%{init: {'theme':'forest'}}%%

Available themes: default, forest, dark, neutral

Direction

TB (top to bottom)
BT (bottom to top)
LR (left to right)
RL (right to left)

Notes

[Any notes about the diagram]
[Assumptions made]


---

## PlantUML Examples

### Sequence Diagram
```plantuml
@startuml
actor User
participant "Web App" as App
participant "API Server" as API
database "Database" as DB

User -> App: Login request
App -> API: POST /auth/login
API -> DB: SELECT user
DB --> API: User record
API --> App: JWT token
App --> User: Redirect to dashboard
@enduml

Component Diagram

@startuml
package "Frontend" {
    [React App]
    [Mobile App]
}

package "Backend" {
    [API Gateway]
    [Auth Service]
    [User Service]
}

database "PostgreSQL" as DB

[React App] --> [API Gateway]
[Mobile App] --> [API Gateway]
[API Gateway] --> [Auth Service]
[API Gateway] --> [User Service]
[User Service] --> DB
@enduml

Tips for Better Diagrams

Keep it simple - Don't overcrowd
Use consistent naming - Clear, descriptive labels
Group related items - Use subgraphs/packages
Choose appropriate type - Match diagram to concept
Consider audience - Technical vs. business
Use colors sparingly - For emphasis only
Add legends - When using symbols/colors
Maintain hierarchy - Top-down or left-right flow

Rendering Tools

Tool	URL	Best For
Mermaid Live	mermaid.live	Quick editing
PlantUML Server	plantuml.com	PlantUML rendering
Draw.io	draw.io	Manual editing
Excalidraw	excalidraw.com	Hand-drawn style
Lucidchart	lucidchart.com	Professional diagrams

Limitations

Cannot render images directly
Complex layouts may need manual adjustment
Limited styling compared to design tools
Some diagram types not supported in all tools

Built by the Claude Office Skills community. Contributions welcome!

diagram-creator