Loading...
Loading...
Create professional diagrams using Mermaid, PlantUML, and other text-based diagram tools. Generate flowcharts, sequence diagrams, architecture diagrams, and more.
npx skill4agent add claude-office-skills/skills diagram-creatorflowchart TD
A[Start] --> B{Decision?}
B -->|Yes| C[Action 1]
B -->|No| D[Action 2]
C --> E[End]
D --> EsequenceDiagram
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 dashboardflowchart 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 & IerDiagram
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
}classDiagram
class Animal {
+String name
+int age
+makeSound()
}
class Dog {
+String breed
+bark()
}
class Cat {
+boolean indoor
+meow()
}
Animal <|-- Dog
Animal <|-- CatstateDiagram-v2
[*] --> Draft
Draft --> Submitted: Submit
Submitted --> InReview: Assign reviewer
InReview --> Approved: Approve
InReview --> Rejected: Reject
Rejected --> Draft: Revise
Approved --> [*]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, 7dmindmap
root((Project))
Features
Feature A
Feature B
Feature C
Team
Frontend
Backend
Design
Timeline
Q1
Q2
Q3gitGraph
commit
commit
branch feature
checkout feature
commit
commit
checkout main
merge feature
commit# Diagram: [Name]
**Type**: [Flowchart / Sequence / Architecture / etc.]
**Tool**: [Mermaid / PlantUML]
**Purpose**: [What it illustrates]
---
## Diagram Code
### Mermaid
```mermaid
[Mermaid code here][PlantUML code here]%%{init: {'theme':'forest'}}%%
---
## 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@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| 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 |