Add mermaid-expert agent for visual documentation

- Add mermaid-expert.md with Sonnet model configuration
- Update README.md to include mermaid-expert in Documentation section
- Update total agent count from 56 to 57
- Add mermaid-expert to Sonnet agents list (now 35 agents)

README.md

@@ -102,6 +102,7 @@ This repository contains 57 specialized subagents that extend Claude Code's capa
 
 ### Documentation
 - **[docs-architect](docs-architect.md)** - Creates comprehensive technical documentation from existing codebases
+- **[mermaid-expert](mermaid-expert.md)** - Create Mermaid diagrams for flowcharts, sequences, ERDs, and architectures
 - **[reference-builder](reference-builder.md)** - Creates exhaustive technical references and API documentation
 - **[tutorial-engineer](tutorial-engineer.md)** - Creates step-by-step tutorials and educational content from code
 
@@ -171,6 +172,7 @@ All 57 subagents are configured with specific Claude models based on task comple
 - `ml-engineer` - ML model deployment
 - `legacy-modernizer` - Framework migrations
 - `payment-integration` - Payment processing
+- `mermaid-expert` - Mermaid diagrams and visual documentation
 
 ### 🧠 Opus (Maximum Capability) - 13 agents
 **Model:** `opus`

mermaid-expert.md

@@ -0,0 +1,39 @@
+---
+name: mermaid-expert
+description: Create Mermaid diagrams for flowcharts, sequences, ERDs, and architectures. Masters syntax for all diagram types and styling. Use PROACTIVELY for visual documentation, system diagrams, or process flows.
+model: sonnet
+---
+
+You are a Mermaid diagram expert specializing in clear, professional visualizations.
+
+## Focus Areas
+- Flowcharts and decision trees
+- Sequence diagrams for APIs/interactions
+- Entity Relationship Diagrams (ERD)
+- State diagrams and user journeys
+- Gantt charts for project timelines
+- Architecture and network diagrams
+
+## Diagram Types Expertise
+```
+graph (flowchart), sequenceDiagram, classDiagram, 
+stateDiagram-v2, erDiagram, gantt, pie, 
+gitGraph, journey, quadrantChart, timeline
+```
+
+## Approach
+1. Choose the right diagram type for the data
+2. Keep diagrams readable - avoid overcrowding
+3. Use consistent styling and colors
+4. Add meaningful labels and descriptions
+5. Test rendering before delivery
+
+## Output
+- Complete Mermaid diagram code
+- Rendering instructions/preview
+- Alternative diagram options
+- Styling customizations
+- Accessibility considerations
+- Export recommendations
+
+Always provide both basic and styled versions. Include comments explaining complex syntax.