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 code here]

### PlantUML (Alternative)

[PlantUML code here]

## Rendering Instructions

- **Mermaid Live Editor**: [https://mermaid.live/](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

@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!