acc-mermaid-template
Generates Mermaid diagrams for technical documentation. Provides templates for flowcharts, sequence diagrams, class diagrams, ER diagrams, and C4 models.
Best use case
acc-mermaid-template is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Generates Mermaid diagrams for technical documentation. Provides templates for flowcharts, sequence diagrams, class diagrams, ER diagrams, and C4 models.
Teams using acc-mermaid-template should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/acc-mermaid-template/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How acc-mermaid-template Compares
| Feature / Agent | acc-mermaid-template | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Generates Mermaid diagrams for technical documentation. Provides templates for flowcharts, sequence diagrams, class diagrams, ER diagrams, and C4 models.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Mermaid Diagram Template Generator
Generate Mermaid diagrams for technical documentation.
## Diagram Templates
### Flowchart - Basic
```mermaid
flowchart TD
A[Start] --> B{Decision}
B -->|Yes| C[Action 1]
B -->|No| D[Action 2]
C --> E[End]
D --> E
```
### Flowchart - Process
```mermaid
flowchart LR
subgraph Input
A[Request]
end
subgraph Processing
B[Validate]
C[Transform]
D[Store]
end
subgraph Output
E[Response]
end
A --> B --> C --> D --> E
```
### Flowchart - Architecture Layers
```mermaid
flowchart TB
subgraph presentation[Presentation Layer]
direction LR
AC[Action]
RS[Responder]
end
subgraph application[Application Layer]
direction LR
UC[UseCase]
DTO[DTO]
end
subgraph domain[Domain Layer]
direction LR
EN[Entity]
VO[ValueObject]
EV[Event]
end
subgraph infrastructure[Infrastructure Layer]
direction LR
RP[Repository]
AD[Adapter]
end
presentation --> application
application --> domain
infrastructure -.-> domain
```
### Sequence - Basic
```mermaid
sequenceDiagram
participant C as Client
participant S as Server
participant D as Database
C->>S: Request
S->>D: Query
D-->>S: Result
S-->>C: Response
```
### Sequence - With Authentication
```mermaid
sequenceDiagram
participant C as Client
participant A as Auth
participant S as Service
participant D as Database
C->>A: Login(credentials)
A->>D: Verify user
D-->>A: User data
A-->>C: JWT Token
C->>S: Request + Token
S->>A: Validate token
A-->>S: Token valid
S->>D: Query
D-->>S: Data
S-->>C: Response
```
### Sequence - With Error Handling
```mermaid
sequenceDiagram
participant C as Client
participant S as Service
participant D as Database
C->>S: Create order
alt Valid request
S->>D: INSERT order
D-->>S: order_id
S-->>C: 201 Created
else Validation error
S-->>C: 400 Bad Request
else Database error
S->>D: INSERT order
D-->>S: Error
S-->>C: 500 Internal Error
end
```
### Sequence - Async with Queue
```mermaid
sequenceDiagram
participant C as Client
participant A as API
participant Q as Queue
participant W as Worker
participant D as Database
C->>A: POST /jobs
A->>D: Create job (pending)
A->>Q: Publish job
A-->>C: 202 Accepted {job_id}
W->>Q: Consume job
W->>D: Update job (processing)
W->>W: Process
W->>D: Update job (completed)
```
### Class - Domain Model
```mermaid
classDiagram
class Order {
<<aggregate root>>
-OrderId id
-CustomerId customerId
-OrderStatus status
-Money total
+confirm() void
+cancel() void
+ship() void
}
class OrderItem {
<<entity>>
-OrderItemId id
-ProductId productId
-Quantity quantity
-Money price
}
class OrderStatus {
<<enumeration>>
PENDING
CONFIRMED
SHIPPED
CANCELLED
}
class Money {
<<value object>>
-int cents
-string currency
+add(Money) Money
+equals(Money) bool
}
Order "1" *-- "*" OrderItem : contains
Order --> OrderStatus : has
Order --> Money : total
OrderItem --> Money : price
```
### Class - Repository Pattern
```mermaid
classDiagram
class OrderRepositoryInterface {
<<interface>>
+findById(OrderId id) Order
+save(Order order) void
+delete(OrderId id) void
}
class DoctrineOrderRepository {
-EntityManager em
+findById(OrderId id) Order
+save(Order order) void
+delete(OrderId id) void
}
class InMemoryOrderRepository {
-array orders
+findById(OrderId id) Order
+save(Order order) void
+delete(OrderId id) void
}
OrderRepositoryInterface <|.. DoctrineOrderRepository
OrderRepositoryInterface <|.. InMemoryOrderRepository
```
### ER - Database Schema
```mermaid
erDiagram
users ||--o{ orders : places
orders ||--|{ order_items : contains
order_items }o--|| products : references
users {
uuid id PK
varchar email UK
varchar name
timestamp created_at
}
orders {
uuid id PK
uuid user_id FK
varchar status
int total_cents
varchar currency
timestamp created_at
}
order_items {
uuid id PK
uuid order_id FK
uuid product_id FK
int quantity
int price_cents
}
products {
uuid id PK
varchar name
varchar sku UK
int price_cents
varchar currency
}
```
### State - Entity Lifecycle
```mermaid
stateDiagram-v2
[*] --> Draft : create()
Draft --> Pending : submit()
Draft --> [*] : delete()
Pending --> Approved : approve()
Pending --> Rejected : reject()
Pending --> Draft : requestChanges()
Approved --> Published : publish()
Approved --> Draft : unpublish()
Rejected --> Draft : revise()
Rejected --> [*] : delete()
Published --> Archived : archive()
Published --> Draft : unpublish()
Archived --> [*]
```
### C4 - Context Diagram
```mermaid
flowchart TB
subgraph boundary[System Boundary]
S[("📦 Order Management System\n\nManages customer orders\nand inventory")]
end
C[("👤 Customer\n\nPlaces and tracks orders")]
A[("👤 Admin\n\nManages products\nand orders")]
P[("💳 Payment Gateway\n\nProcesses payments")]
E[("📧 Email Service\n\nSends notifications")]
W[("🚚 Warehouse\n\nFulfills orders")]
C -->|"Browse, Order, Track"| S
A -->|"Manage"| S
S -->|"Process payment"| P
S -->|"Send emails"| E
S -->|"Ship orders"| W
```
### C4 - Container Diagram
```mermaid
flowchart TB
subgraph boundary[Order Management System]
WA[("🌐 Web App\nReact SPA")]
API[("⚙️ API\nPHP/Symfony")]
WRK[("⚡ Worker\nPHP")]
DB[("🗄️ Database\nPostgreSQL")]
CACHE[("💾 Cache\nRedis")]
Q[("📬 Queue\nRabbitMQ")]
end
C[("👤 Customer")]
P[("💳 Payment")]
E[("📧 Email")]
C -->|"HTTPS"| WA
WA -->|"REST/JSON"| API
API -->|"SQL"| DB
API -->|"Cache"| CACHE
API -->|"Publish"| Q
WRK -->|"Consume"| Q
WRK -->|"SQL"| DB
API -->|"HTTPS"| P
WRK -->|"SMTP"| E
```
### CQRS Flow
```mermaid
flowchart LR
subgraph commands[Write Side]
CMD[Command] --> CH[Handler]
CH --> AG[Aggregate]
AG --> ES[Event Store]
end
subgraph events[Event Bus]
ES --> EB[Event Bus]
end
subgraph queries[Read Side]
EB --> PR[Projector]
PR --> RM[Read Model]
Q[Query] --> QH[Handler]
QH --> RM
end
```
## Node Shapes Reference
```mermaid
flowchart LR
A[Rectangle] --> B(Rounded)
B --> C{Diamond}
C --> D([Stadium])
D --> E[(Database)]
E --> F((Circle))
F --> G>Asymmetric]
G --> H{{Hexagon}}
```
## Arrow Reference
```mermaid
flowchart LR
A1 --> B1
A2 --- B2
A3 -.-> B3
A4 ==> B4
A5 --o B5
A6 --x B6
A7 <--> B7
A8 -->|label| B8
```
## Styling
```mermaid
flowchart LR
A[Start]:::green --> B[Process]:::blue --> C[End]:::red
classDef green fill:#9f6,stroke:#333,stroke-width:2px
classDef blue fill:#69f,stroke:#333,stroke-width:2px
classDef red fill:#f66,stroke:#333,stroke-width:2px
```
## Generation Instructions
When generating Mermaid diagrams:
1. **Choose appropriate type** based on what you're showing
2. **Limit to 7±2 elements** per diagram
3. **Use descriptive labels** (not A, B, C)
4. **Add subgraphs** for grouping
5. **Show direction** of flow/dependencies
6. **Include legend** if using custom styles
7. **Test rendering** before finalizingRelated Skills
beautiful-mermaid
Render Mermaid diagrams as pure ASCII text (default) or themed SVGs using the beautiful-mermaid renderer. Use when the user asks for a Mermaid diagram (flowchart, sequence, class, state, or ER), wants a diagram file generated, or needs terminal-friendly ASCII output.
beautiful-mermaid-renderer
Render Mermaid diagrams using beautiful-mermaid as Unicode/ASCII (terminal/chat) or SVG (rich UI). Use when you need a quick, good-looking diagram preview in plain text or want to generate an SVG from Mermaid source (Bun preferred).
beautiful-mermaid-diagrams
Create beautiful diagrams using Mermaid syntax including flowcharts, sequence diagrams, class diagrams, ER diagrams, and state diagrams. Use when users ask to diagram, visualize, model, map out, or show the flow of systems, processes, architectures, or interactions.
aidf-task-templates
Task template definitions for AIDF. Provides structured templates for component, refactor, test, docs, architecture, and bugfix task types.
template-skill
Replace with description of the skill and when Claude should use it.
obsidian-clipper-template-creator
Guide for creating templates for the Obsidian Web Clipper. Use when you want to create a new clipping template, understand available variables, or format clipped content.
railway-templates
Search and deploy services from Railway's template marketplace. Use when user wants to add a service from a template, find templates for a specific use case, or deploy tools like Ghost, Strapi, n8n, Minio, Uptime Kuma, etc. For databases (Postgres, Redis, MySQL, MongoDB), prefer the railway-database skill.
mermaid-diagrams
Mermaid diagram creation for flowcharts, sequences, ERDs, and more. Generate diagrams from text in markdown files. Use for documentation, architecture diagrams, and visual representations. Triggers on mermaid, flowchart, sequence diagram, ERD, entity relationship, gantt chart, pie chart, class diagram, state diagram, journey map.
mermaid-diagram-generator
Creates Mermaid diagrams for flowcharts, sequence diagrams, ERDs, and architecture visualizations in markdown. Use when users request "Mermaid diagram", "flowchart", "sequence diagram", "ERD diagram", or "architecture diagram".
ln-751-command-templates
Generates individual .claude/commands files from templates
fastapi-templates
Create production-ready FastAPI projects with async patterns, dependency injection, and comprehensive error handling. Use when building new FastAPI applications or setting up backend API projects.
agent-card-templates
A2A agent card JSON templates with schema validation and examples for different agent types. Use when creating agent cards, implementing A2A protocol discovery, setting up agent metadata, configuring authentication schemes, defining agent capabilities, or when user mentions agent card, agent discovery, A2A metadata, service endpoint configuration, or agent authentication setup.