diagram-generator

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
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"]

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

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

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

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

**Example Commands**: