| name | mermaid |
| description | Generate Mermaid overview diagrams for architecture and component visualization. Use when asked to create, generate, or draw Mermaid diagrams, architecture overviews, component diagrams, dependency graphs, or system visualizations. Triggers on "mermaid diagram", "architecture diagram", "component overview", "dependency graph", "draw a diagram", or requests to visualize system structure. Not for sequence diagrams or class diagrams. |
Mermaid Overview Diagrams
Rules
- prefer flowchart (graph) with TD or LR direction
- wrap in
```mermaid fenced code block
- use stadium-shaped nodes:
([text])
- use meaningful node IDs reflecting component names
- use
--> for dependencies, -.-> for optional/async dependencies
- label arrows only when ambiguous:
Gateway -->|routes| Service
- visualize only high-level concepts — omit classes, methods, implementation details
- use subgraphs for logical grouping (subsystems)
- write diagram into the target file (e.g. README.md) when context is clear
BCE Shape Mapping
| Element | Mermaid syntax | Style class |
|---|
| Business Component (BC) | Orders([Orders]) | bc |
| Subsystem | subgraph Billing | subsystem |
| External service | PayGW([Payment Gateway]) | ext |
| Boundary layer | Boundary([Boundary]) | boundary |
| Control layer | Control([Control]) | control |
| Entity layer | Entity([Entity]) | entity |
Style Classes
Define these classDef entries at the end of the graph and apply with class or ::::
classDef bc fill:#dae8fc,stroke:#6c8ebf,color:#000
classDef ext fill:#fff2cc,stroke:#d6b656,color:#000,stroke-dasharray:5 5
classDef boundary fill:#d5e8d4,stroke:#82b366,color:#000
classDef control fill:#e1d5e7,stroke:#9673a6,color:#000
classDef entity fill:#fff2cc,stroke:#d6b656,color:#000
Color Palette
- BC blue: fill
#dae8fc, border #6c8ebf
- External yellow: fill
#fff2cc, border #d6b656
- Boundary green: fill
#d5e8d4, border #82b366
- Control purple: fill
#e1d5e7, border #9673a6
- Entity yellow: fill
#fff2cc, border #d6b656
Example — Between Components
graph LR
subgraph Billing
Orders([Orders]) -->|charges| Payments([Payments])
end
Orders -.->|async| Notifications([Notifications])
Payments -->|REST| PayGW([Payment Gateway])
classDef bc fill:#dae8fc,stroke:#6c8ebf,color:#000
classDef ext fill:#fff2cc,stroke:#d6b656,color:#000,stroke-dasharray:5 5
class Orders,Payments,Notifications bc
class PayGW ext
