architecture-diagrams

Name: architecture-diagrams
Author: aj-geddes

Generate system architecture diagrams using Mermaid, PlantUML, C4 models, and flowcharts for technical documentation. Supports multiple diagram types: system architecture, sequence diagrams, C4 context and component diagrams, deployment diagrams, data flows, and class diagrams Text-based, version-control-friendly formats that integrate directly into documentation and code repositories Includes best practices for consistent notation, meaningful color coding, logical grouping with subgraphs, and keeping diagrams synchronized with evolving systems Reference guides and templates for common patterns like microservices architecture, integration flows, and infrastructure design

INSTALLATION

npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill architecture-diagrams

Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

Architecture Diagrams

[Overview](#overview)

[When to Use](#when-to-use)

[Quick Start](#quick-start)

[Reference Guides](#reference-guides)

[Best Practices](#best-practices)

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

    subgraph "Data Layer"

        UserDB[(User DB<br/>PostgreSQL)]

        OrderDB[(Order DB<br/>PostgreSQL)]

        Cache[(Redis Cache)]

        Queue[Message Queue<br/>RabbitMQ]

    end

// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

Guide

Contents

System Architecture Diagram

Best Practices

✅ DO

Use consistent notation and symbols

Include legends for complex diagrams

Keep diagrams focused on one aspect

Use color coding meaningfully

Include titles and descriptions

Version control your diagrams

Use text-based formats (Mermaid, PlantUML)

Show data flow direction clearly

Include deployment details

Document diagram conventions

Keep diagrams up-to-date with code

Use subgraphs for logical grouping

❌ DON'T

Overcrowd diagrams with details

Use inconsistent styling

Skip diagram legends

Create binary image files only

Forget to document relationships

Mix abstraction levels in one diagram

Use proprietary formats

architecture-diagrams

SKILL.md

Architecture Diagrams

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

Best Practices

✅ DO

❌ DON'T

Stop writing automation&scrapers

architecture-diagrams

SKILL.md

Architecture Diagrams

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

Best Practices

✅ DO

❌ DON'T

Let your agent run on any real-world website

Related skills

Stop writing automation&scrapers