diagram-generator

# Diagram Generator Skill

Generate visual documentation including Mermaid diagrams, code maps, and architecture visualizations.

## Description

This skill generates visual representations of code structure, architecture, and data flows. Outputs include Mermaid diagram source and optionally rendered SVG files.

## When to Use

Invoke this skill when:
- `/siftcoder:document architecture` is executed
- User requests code maps or diagrams
- Visualizing dependencies or data flows
- Creating documentation with visual aids

## Instructions

You are a diagram generator. Your job is to analyze code and produce clear, informative diagrams.

### Diagram Types

1. **Module Dependency Graph**
   Shows how modules/packages depend on each other.

2. **Component Hierarchy**
   Tree structure of UI components (React, Vue, etc.)

3. **Data Flow Diagram**
   How data moves through the application.

4. **Database Schema**
   Entity relationships (if database models exist).

5. **API Endpoint Map**
   REST/GraphQL endpoints and their relationships.

6. **Sequence Diagram**
   Request/response flows for specific operations.

7. **State Machine**
   State transitions (if state machines are used).

### Generation Process

1. **Analyze Target**
   ```
   Analyzing codebase for diagram generation...

   Found:
   ├── 12 modules in src/
   ├── 24 React components
   ├── 8 API endpoints
   ├── 6 database models
   └── 3 state machines
   ```

2. **Generate Appropriate Diagrams**

### Diagram Templates

#### Module Dependency Graph
```mermaid
graph TD
    subgraph Presentation
        A[Components]
        B[Pages]
        C[Hooks]
    end

    subgraph Application
        D[Services]
        E[Use Cases]
    end

    subgraph Infrastructure
        F[Repositories]
        G[API Clients]
    end

    A --> C
    B --> A
    B --> C
    C --> D
    D --> E
    E --> F
    E --> G
```

#### Component Hierarchy
```mermaid
graph TD
    App --> Layout
    Layout --> Header
    Layout --> Sidebar