hivemind: Skill for Claude Code

Mermaid Diagrams & Architecture Visualization

Generate Mermaid.js diagrams for system architecture, data flows, sequence diagrams, ERDs, and project planning. Use when the user asks to visualize architecture, create flowcharts, draw sequence diagrams, map data flows, or document system design.

Triggers

• "draw a diagram", "create a flowchart", "architecture diagram"
• "sequence diagram", "data flow", "ERD", "entity relationship"
• "visualize the system", "map the architecture"
• "Mermaid diagram", "system diagram"
• When documenting or explaining complex systems

Diagram Types

1. System Architecture (C4-style)

graph TB
    subgraph Frontend
        UI[React App] --> API[API Gateway]
    end
    subgraph Backend
        API --> Auth[Auth Service]
        API --> Core[Core Service]
        Core --> DB[(PostgreSQL)]
        Core --> Cache[(Redis)]
    end

2. Sequence Diagrams

sequenceDiagram
    participant U as User
    participant F as Frontend
    participant A as API
    participant D as Database
    U->>F: Click Submit
    F->>A: POST /api/data
    A->>D: INSERT INTO...
    D-->>A: OK
    A-->>F: 201 Created
    F-->>U: Success Toast

3. Data Flow / Pipeline

flowchart LR
    Input[Raw Data] --> Process[Transform]
    Process --> Validate{Valid?}
    Validate -->|Yes| Store[(Database)]
    Validate -->|No| Error[Error Queue]
    Store --> Notify[Send Notification]

4. Entity Relationship Diagrams

erDiagram
    USER ||--o{ PROJECT : owns
    PROJECT ||--|{ TASK : contains
    USER ||--o{ TASK : assigned_to

5. State Diagrams

stateDiagram-v2
    [*] --> Idle
    Idle --> Running: start
    Running --> Paused: pause
    Paused --> Running: resume
    Running --> Done: complete
    Running --> Error: fail
    Error --> Idle: reset

6. Gantt / Timeline

gantt
    title Project Timeline
    section Phase 1
        Design: 2024-01-01, 2w
        Prototype: 2024-01-15, 1w
    section Phase 2
        Development: 2024-01-22, 4w
        Testing: 2024-02-19, 2w