diagram-generator

neversight/diagram-generator

Design

About

SKILL.md

Diagram Generator Skill - Generates architecture, database, and system diagrams using Mermaid syntax to visualize system structure, relationships, and flows. - Creating architecture diagrams - Documenting database schemas - Visualizing component relationships - Documenting data flows - Creating sequence diagrams - Generating system overviews

Step 1: Identify Diagram Type

Determine what type of diagram is needed:

Architecture Diagram: System structure and components
Database Diagram: Schema and relationships
Component Diagram: Component interactions
Sequence Diagram: Process flows
Flowchart: Decision flows

Step 2: Extract Structure

Analyze code and documentation (Use Parallel Read/Grep/Glob):

Read architecture documents
Analyze component structure
Extract database schema
Identify relationships
Understand data flows

Step 3: Generate Mermaid Diagram

Create diagram using Mermaid syntax:

Use appropriate diagram type
Define nodes and relationships
Add labels and descriptions
Include styling if needed

Step 4: Embed in Documentation

Embed diagram in markdown:

Use mermaid code blocks
Add diagram description
Reference in documentation

**Integration with Architect Agent**: - Generates architecture diagrams - Documents system structure - Visualizes component relationships

Integration with Database Architect Agent:

Generates database schema diagrams
Documents table relationships
Visualizes data models

Integration with Technical Writer Agent:

Embeds diagrams in documentation
Creates visual documentation
Enhances documentation clarity

Use Mermaid: Standard syntax for compatibility
Keep Clear: Simple, readable diagrams
Show Relationships: Include all important connections
Add Labels: Clear node and edge labels
Update Regularly: Keep diagrams current with code

**Architecture Diagram**

graph TB
    Client[Client Application]
    API[API Gateway]
    Auth[Auth Service]
    User[User Service]
    DB[(Database)]

    Client --> API
    API --> Auth
    API --> User
    User --> DB
    Auth --> DB

**Database Schema Diagram**

erDiagram
    USERS ||--o{ ORDERS : places
    USERS {
        uuid id PK
        string email
        string name
    }
    ORDERS ||--|{ ORDER_ITEMS : contains
    ORDERS {
        uuid id PK
        uuid user_id FK
        date created_at
    }
    ORDER_ITEMS {
        uuid id PK
        uuid order_id FK
        uuid product_id FK
        int quantity
    }

**Component Diagram**

graph LR
    A[Component A] --> B[Component B]
    A --> C[Component C]
    B --> D[Component D]
    C --> D

**Sequence Diagram**

sequenceDiagram
    participant User
    participant API
    participant Auth
    participant DB

    User->>API: Login Request
    API->>Auth: Validate Credentials
    Auth->>DB: Query User
    DB-->>Auth: User Data
    Auth-->>API: JWT Token
    API-->>User: Auth Response

**Example Commands**:

# Generate architecture diagram
node .claude/tools/diagram-generator/scripts/generate.mjs --type architecture "authentication system"

# Generate database schema diagram
node .claude/tools/diagram-generator/scripts/generate.mjs --type database "user management module"

# Generate component diagram
node .claude/tools/diagram-generator/scripts/generate.mjs --type component "API service relationships"

# Generate sequence diagram
node .claude/tools/diagram-generator/scripts/generate.mjs --type sequence "user login flow"

Memory Protocol (MANDATORY)

Before starting: Read .claude/context/memory/learnings.md

After completing:

New pattern -> .claude/context/memory/learnings.md
Issue found -> .claude/context/memory/issues.md
Decision made -> .claude/context/memory/decisions.md

ASSUME INTERRUPTION: If it's not in memory, it didn't happen.