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

1. Be specific: Describe what you want to visualize
2. Include context: Mention relevant files or components
3. Review diagrams: Verify accuracy and completeness
4. Use in docs: Add diagrams to documentation
5. 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