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