Back to list
oimiragieo

diagram-generator

by oimiragieo

1🍴 0📅 Jan 21, 2026

SKILL.md


name: diagram-generator description: Generates architecture, database, and system diagrams using Mermaid syntax. Creates visual representations of system architecture, database schemas, component relationships, and data flows. allowed-tools: read, write, glob, search, codebase_search version: 1.0 best_practices:

  • Use Mermaid syntax for diagrams
  • Extract structure from code and documentation
  • Create clear, readable diagrams
  • Include relationships and dependencies
  • Generate both high-level and detailed views error_handling: graceful streaming: supported templates: [architecture-diagram, database-diagram, component-diagram, sequence-diagram]

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 </execution_process>

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

<best_practices>

  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 </best_practices>
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

</code_example>

<code_example> 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
    }

</code_example>

<code_example> Component Diagram

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

</code_example>

<code_example> 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

</code_example>

# 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

</usage_example>

Score

Total Score

50/100

Based on repository quality metrics

SKILL.md

SKILL.mdファイルが含まれている

+20
LICENSE

ライセンスが設定されている

0/10
説明文

100文字以上の説明がある

0/10
人気

GitHub Stars 100以上

0/15
最近の活動

3ヶ月以内に更新がある

0/10
フォーク

10回以上フォークされている

0/5
Issue管理

オープンIssueが50未満

+5
言語

プログラミング言語が設定されている

+5
タグ

1つ以上のタグが設定されている

0/5

Reviews

💬

Reviews coming soon