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

-->

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

-->

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

安装

PlantUML Examples

Sequence Diagram