Mermaid diagram generation expert. Activate when: - User asks to create flowcharts, sequence diagrams, or architecture diagrams - User mentions "mermaid", "diagram", "visualize flow", "sequence diagram" - Need to document system architecture or data flows - Creating documentation that benefits from visual representation
/plugin marketplace add pagerguild/guilde-lite/plugin install diagram-generation@guilde-pluginsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
examples/README.mdreferences/README.mdExpert at generating Mermaid diagrams for documentation.
flowchart TD
A[Start] --> B{Decision}
B -->|Yes| C[Action 1]
B -->|No| D[Action 2]
C --> E[End]
D --> E
Use for:
sequenceDiagram
participant User
participant API
participant Database
User->>API: Request
API->>Database: Query
Database-->>API: Result
API-->>User: Response
Use for:
classDiagram
class User {
+String name
+String email
+login()
+logout()
}
class Order {
+Int id
+List items
+calculate_total()
}
User "1" --> "*" Order : places
Use for:
stateDiagram-v2
[*] --> Pending
Pending --> Processing : submit
Processing --> Completed : finish
Processing --> Failed : error
Failed --> Pending : retry
Completed --> [*]
Use for:
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
PRODUCT ||--o{ LINE_ITEM : "appears in"
Use for:
gitGraph
commit
branch feature
checkout feature
commit
commit
checkout main
merge feature
commit
Use for:
flowchart TD
subgraph External["External Systems"]
A[External API]
end
subgraph Internal["Internal Services"]
B[Service A]
C[Service B]
end
A --> B
B --> C
API Flow:
flowchart LR
Client --> Gateway --> Service --> Database
Error Handling:
flowchart TD
A[Request] --> B{Validate}
B -->|Valid| C[Process]
B -->|Invalid| D[Return Error]
C --> E{Success?}
E -->|Yes| F[Return Result]
E -->|No| G[Retry/Fail]
Microservice Communication:
flowchart TB
subgraph Frontend
UI[Web UI]
end
subgraph Backend
API[API Gateway]
Auth[Auth Service]
Orders[Order Service]
Payments[Payment Service]
end
subgraph Data
DB[(Database)]
Cache[(Redis)]
end
UI --> API
API --> Auth
API --> Orders
API --> Payments
Orders --> DB
Auth --> Cache
Place diagrams in:
docs/architecture/ for system architecturedocs/flows/ for process flowsReference diagrams in markdown:
## Architecture Overview
See the system architecture diagram:
\`\`\`mermaid
flowchart TD
...
\`\`\`
bash scripts/doc-sync-check.sh check <file> - Check if diagram docs need updatingtask docs:validate - Validate all documentation including diagramsThis skill should be used when the user asks about libraries, frameworks, API references, or needs code examples. Activates for setup questions, code generation involving libraries, or mentions of specific frameworks like React, Vue, Next.js, Prisma, Supabase, etc.