Architecture Diagrams

Turns system architecture into code using Mermaid and PlantUML instead of dragging boxes around in diagramming tools. Covers the usual suspects: C4 models, sequence diagrams, data flows, deployment views, component relationships. The text-based approach means your diagrams live in version control alongside your code, which actually matters when architectures evolve and you need to track what changed. Includes reference implementations for common diagram types and pushes you toward conventions like subgraphs for grouping and color coding that means something. The main discipline here is keeping diagrams focused on one aspect rather than cramming everything into a single unreadable mess.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 6
skills.sh installs: 2K
GitHub stars: 379
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add aj-geddes/useful-ai-prompts --skill architecture-diagrams --agent claude-code

Installs into .claude/skills of the current project.

Files

Overview

Create clear, maintainable architecture diagrams using code-based diagramming tools like Mermaid and PlantUML for system design, data flows, and technical documentation.

When to Use

System architecture documentation
C4 model diagrams
Data flow diagrams
Sequence diagrams
Component relationships
Deployment diagrams
Infrastructure architecture
Microservices architecture
Database schemas (visual)
Integration patterns

Quick Start

Minimal working example:

graph TB
    subgraph "Client Layer"
        Web[Web App]
        Mobile[Mobile App]
        CLI[CLI Tool]
    end

    subgraph "API Gateway Layer"
        Gateway[API Gateway<br/>Rate Limiting<br/>Authentication]
    end

    subgraph "Service Layer"
        Auth[Auth Service]
        User[User Service]
        Order[Order Service]
        Payment[Payment Service]
        Notification[Notification Service]
    end

SKILL.md on GitHub