diagram-generator

oimiragieo's avatarfrom oimiragieo

Generates architecture, database, and system diagrams using Mermaid syntax. Creates visual representations of system architecture, database schemas, component relationships, and data flows.

⭐1stars🔀0forks📁View on GitHub🕐Updated Jan 11, 2026
[Architecture Design]

When & Why to Use This Skill

The Diagram Generator skill automates the creation of professional system architectures, database schemas, and process flows using Mermaid syntax. It solves the challenge of manual documentation by instantly transforming complex technical requirements or code structures into clear, maintainable visual representations, ensuring that system design remains synchronized with development.

Use Cases

  • Architecting Microservices: Visualizing component relationships and communication paths between different services.
  • Database Schema Design: Generating Entity-Relationship Diagrams (ERD) to document table structures, primary keys, and foreign key relationships.
  • Process Flow Mapping: Creating sequence diagrams to illustrate complex API request-response cycles and authentication flows.
  • System Onboarding: Generating high-level system overviews to help new developers quickly understand the codebase structure.
  • Technical Documentation: Embedding live-updating Mermaid charts into Markdown files to enhance the clarity of READMEs and design docs.
namediagram-generator
descriptionGenerates architecture, database, and system diagrams using Mermaid syntax. Creates visual representations of system architecture, database schemas, component relationships, and data flows.
modelsonnet
allowed-toolsread, write, glob, search, codebase_search
version1.0
error_handlinggraceful
streamingsupported
templates[architecture-diagram, database-diagram, component-diagram, sequence-diagram]
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:

  • 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
  1. Use Mermaid: Standard syntax for compatibility
  2. Keep Clear: Simple, readable diagrams
  3. Show Relationships: Include all important connections
  4. Add Labels: Clear node and edge labels
  5. 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
Generate architecture diagram for the authentication system

# Generate database schema diagram
Generate database schema diagram for the user management module

# Generate component diagram
Generate component diagram showing API service relationships

# Generate sequence diagram
Generate sequence diagram for user login flow