Back to Skills

Architecture Diagram Generator

Generate Mermaid diagrams showing system architecture, data flows, and component relationships from your codebase

architecturediagramsmermaidvisualizationdocumentation

Skill Content

# Architecture Diagram Generator

Generate visual architecture diagrams in Mermaid syntax by analyzing your codebase structure.

## Overview

This skill analyzes your project's file structure, imports, and dependencies to produce:

- **System Architecture** - High-level component diagram
- **Data Flow** - Request/response paths through the system
- **Dependency Graph** - Module and package relationships
- **Database Schema** - Entity relationship diagrams

## How It Works

1. Scans your project structure and key files
2. Identifies components, services, and their relationships
3. Generates Mermaid diagram code
4. Outputs to a markdown file or clipboard

## Example Output

```mermaid
graph TD
    A[Client] --> B[API Gateway]
    B --> C[Auth Service]
    B --> D[User Service]
    D --> E[(PostgreSQL)]
    C --> F[(Redis Cache)]
```

## Usage

Invoke with: "Generate an architecture diagram for this project"

Specify diagram type:
- "Show me the data flow diagram"
- "Generate an ER diagram for the database models"
- "Create a dependency graph of the modules"

How to use

  1. Copy the skill content above
  2. Create a .claude/skills directory in your project
  3. Save as .claude/skills/architecture-diagram.md
  4. Use /architecture-diagram in Claude Code to invoke this skill