| name | diagram-generation |
| description | Mermaid diagram generation for architecture visualization, data flow diagrams, and component relationships. Use for documentation, PR descriptions, and architectural analysis. |
Diagram Generation Skill
Generate Mermaid diagrams to visualize architecture, data flows, and component relationships.
When to Use
Use this skill when:
- Documenting architecture
- Explaining complex changes in PRs
- Visualizing data flows
- Understanding component relationships
- Revealing architectural issues
Capabilities
Architecture Diagrams
- System architecture
- Component relationships
- Service interactions
- Module dependencies
Data Flow Diagrams
- Request/response flows
- Data transformation pipelines
- State management flows
- Event flows
Sequence Diagrams
- API call sequences
- User interaction flows
- Process workflows
- Error handling flows
Usage
Create a Mermaid diagram showing the data flow for our authentication system,
including OAuth providers, session management, and token refresh.
Best Practices
- Be specific: Describe what you want to visualize
- Include context: Mention relevant files or components
- Review diagrams: Verify accuracy and completeness
- Use in docs: Add diagrams to documentation
- Update regularly: Keep diagrams current with code
Related Resources
- Rule:
.cursor/rules/large-codebase-patterns.mdc
- Command:
/diagram
- Agent:
.cursor/skills/diagram-generation/agents/diagram-generator.md
