diagram-generation
Mermaid diagram generation for architecture visualization, data flow diagrams, and component relationships. Use for documentation, PR descriptions, and architectural analysis.
SKILL.md
Full skill instructions
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