generate-diagrams

Generate Mermaid flowchart TD diagrams for project call chains, relationships, architectures, and flows. Use when asked to "draw project call chain diagram", "generate relationship diagram", "generate architecture diagram", "draw flow chart", "generate call graph", or "generate dependency relationship diagram".

Generate Diagrams Skill

Description

Generate Mermaid flowchart TD (Top-Down) format diagrams for project relationships, call chains, architectures, and flows.

How It Works

When user requests to generate relationship diagrams, call chains, or architecture diagrams:

  1. Analyze code structure: Explore project directory structure, file organization, and dependencies

  2. Identify key components: Find major layers (presentation, business, data layers), modules, services, controllers, etc.

  3. Analyze call relationships: Read code files to understand component calls and dependencies

  4. Generate Mermaid flowchart TD diagram:

    flowchart TD
    %% Use subgraph to organize layers
    subgraph LayerName ["Layer Name"]
        NodeA[Node Name]
        NodeB[Node Name]
    end

    %% Define relationships between nodes
    NodeA -->|Relationship| NodeB
    NodeB -.->|Dotted relationship| NodeC

    %% Apply styles (optional)
    classDef styleName fill:#color,stroke:#borderColor,stroke-width:2px,color:#textColor
    class NodeA,NodeB styleName

  5. Common symbols:

    • --> Solid arrow (direct call/dependency)
    • -.-.-> Dotted arrow (indirect relationship/implementation)
    • ==> Thick arrow (important relationship)
    • |description| Description text on the line
    • subgraph Subgraph (for layer organization)
    • classDef Define style classes

  6. Style color suggestions:

    • Web/API Layer: #2196F3 (Blue)
    • Business Logic Layer: #4CAF50 (Green)
    • Data Access Layer: #FF9800 (Orange)
    • Database/Storage: #9C27B0 (Purple)
    • External Systems: #607D8B (Gray)
    • Background Tasks: #E91E63 (Pink)

  7. For complex diagrams, split into multiple subgraphs:

    • Main architecture diagram
    • Typical business flow diagram
    • Data flow diagram
    • Dependency relationship diagram

  8. After generation:

    • Provide diagram explanation
    • Explain key components and relationships
    • Provide detailed text description if needed