Skip to content
diagram-generator logo

Generate architecture diagram

diagram-generator

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

SKILL.md

Full skill instructions

<identity> Diagram Generator Skill - Generates architecture, database, and system diagrams using Mermaid syntax to visualize system structure, relationships, and flows. </​identity> <capabilities> - Creating architecture diagrams - Documenting database schemas - Visualizing component relationships - Documenting data flows - Creating sequence diagrams - Generating system overviews </​capabilities> <instructions> <execution_process>

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> **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 </​integration>

<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> </​instructions>
<examples> <code_example> **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

</​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> </​examples>

<examples> <usage_example> **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

</​usage_example> </​examples>

More Automation skills

Daily schedule and task summary combining calendar events and pending to-dos for a specified date.

17.5K 451.2K
View

Delegate independent tasks to specialized agents working concurrently with isolated context.

295.4K 206.3K
View
playwright-cli logo
Automation

playwright-cli

Browser automation with 40+ commands for navigation, interaction, form filling, and web testing.

13.8K 175.3K
View

Launch Chromium with real-device fingerprints for multi-account operations, web scraping, and AI agent automation.

883 111.7K
View
firecrawl logo
Automation

firecrawl

Web scraping, search, crawling, and browser automation with LLM-optimized markdown output.

644 102.7K
View
browser-use logo
Automation

browser-use

Fast, persistent browser automation with session continuity across sequential agent commands.

117.2K 96.7K
View
agents-sdk logo
Automation

agents-sdk

Build stateful AI agents on Cloudflare Workers with persistent state, RPC methods, scheduling, and workflow orchestration.

3K 88K
View

Agents & automation AI tools

K
Agents & automation

Komos AI

A tool to turn screen demos into automated workflows.

Freemium
View
Microsoft Power Automate logo
Agents & automation

Microsoft Power Automate

Automate Your Business Processes Effortlessly with Microsoft Power Automate

Free
View
Agentgpt logo
Agents & automation

Agentgpt

Deploy autonomous AI Agents effortlessly in your browser.

Free
View
Cheat Layer logo
Agents & automation

Cheat Layer

Automate Your Business with Cheat Layer's Cutting-Edge AI

Paid
View
Magical AI logo
Agents & automation

Magical AI

Get sh*t done faster with AI-powered writing and task automation.

Free
View
MagicFlow logo
Agents & automation

MagicFlow

Create AI workflows with drag-and-drop simplicity.

Free
View
PixieBrix logo
Agents & automation

PixieBrix

Extend your apps, accelerate work

Paid
View