🇺🇸English
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
@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!
Weekly Installs
80
Repository
claude-office-s…s/skills
GitHub Stars
7
First Seen
7 days ago
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
claude-code67
gemini-cli27
github-copilot27
codex27
amp27
cline27
