mermaid-diagrams

This skill guides creation of exceptional, publication-quality Mermaid diagrams that avoid cluttered "wall of boxes" syndrome. Generate syntactically correct code with exceptional attention to visual hierarchy and communication clarity.

The user provides diagramming requirements: a data model to visualize, a process to map, an architecture to illustrate, or relationships to clarify. They may include context about the audience, purpose, or level of detail needed.

## Diagram Thinking

Before generating, understand the communication goal and commit to a CLEAR visual strategy:
- **Purpose**: What insight should the viewer gain immediately? What decision does this inform?
- **Type**: Pick the right tool: erDiagram for data models, flowchart for processes, sequenceDiagram for interactions, stateDiagram-v2 for lifecycles, classDiagram for OOP, C4Context for architecture. Each has a strength—use it.
- **Scope**: What's essential vs. noise? 5-9 entities is optimal. Split complex systems into multiple focused diagrams.
- **Flow**: How should the eye travel? Entry point to conclusion. Time flows left-to-right, hierarchy flows top-to-bottom.

**CRITICAL**: A great diagram tells a story. It has a clear focal point, logical flow, and intentional emphasis. Every element earns its place. If it requires explanation, it has failed.

Then generate Mermaid code that is:
- Syntactically correct and render-ready
- Visually balanced with clear hierarchy
- Appropriately detailed (not cluttered, not sparse)
- Styled with intention and consistency

## Diagram Excellence Guidelines

Focus on:
- **Relationships**: Always show cardinality explicitly in ERDs (`||--o{`, `}o--o{`). Use semantic link styles: solid for required, dotted for optional, thick for critical paths. Label every connection with its meaning.
- **Hierarchy & Grouping**: Use subgraphs to cluster related components. Choose direction (TB, LR) based on mental model. Let the layout breathe—Mermaid handles spacing well when you do