# architecture-diagrams

Generates system architecture diagrams, data flows, and C4 models using code formats like Mermaid and PlantUML. Useful when documenting service design directly inside your coding agent.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2000 installs · ★ 371
- Author: aj-geddes
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/aj-geddes/useful-ai-prompts/tree/HEAD/skills/architecture-diagrams/SKILL.md
- Updated: 2026-03-04
- HTML: https://affpapa.org/en/nevibecode/skills/architecture-diagrams

## What it does

This skill guides the agent to produce structured system design diagrams using Mermaid and PlantUML. It supports sequence diagrams, C4 context diagrams, component views, and deployment layouts. Text-based diagrams live alongside your project files in Git.

Detailed patterns sit in the `references/` directory. The instructions enforce clean subgraph grouping, directional data flows, and consistent naming conventions.

The skill avoids binary image exports completely. Keeping diagrams in plain text prevents the visual drift that usually breaks outdated image assets.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add aj-geddes/useful-ai-prompts --skill architecture-diagrams -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/architecture-diagrams/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/architecture-diagrams/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add aj-geddes/useful-ai-prompts --skill architecture-diagrams -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/architecture-diagrams/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add aj-geddes/useful-ai-prompts --skill architecture-diagrams -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/architecture-diagrams/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install aj-geddes/useful-ai-prompts architecture-diagrams
```

2. **Manually: put the files in place**
- File: `.github/skills/architecture-diagrams/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add aj-geddes/useful-ai-prompts --skill architecture-diagrams -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/aj-geddes/useful-ai-prompts --path skills/architecture-diagrams
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/architecture-diagrams/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add aj-geddes/useful-ai-prompts --skill architecture-diagrams -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/aj-geddes/useful-ai-prompts/tree/HEAD/skills/architecture-diagrams/SKILL.md

## When to use it
- generate Mermaid architecture charts for microservices and data layers
- draft C4 context and component diagrams for technical documentation
- build sequence diagrams showing API gateway and service interactions
- map out data flow pipelines and relational database schemas

## Example prompts
- Create a Mermaid architecture diagram with a client layer, API gateway, and PostgreSQL database
- Generate a sequence diagram for user authentication through our payment service
- Draw a C4 component diagram for the order processing backend

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: b286b67c386d4997.

BEGIN THIRD-PARTY FILE b286b67c386d4997
````text
---
name: architecture-diagrams
description: >
  Create system architecture diagrams using Mermaid, PlantUML, C4 model,
  flowcharts, and sequence diagrams. Use when documenting architecture, system
  design, data flows, or technical workflows.
---

# Architecture Diagrams

## Table of Contents

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

```mermaid
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](references/system-architecture-diagram.md) | System Architecture Diagram |
| [Sequence Diagram](references/sequence-diagram.md) | Sequence Diagram |
| [C4 Context Diagram](references/c4-context-diagram.md) | C4 Context Diagram |
| [Component Diagram](references/component-diagram.md) | Component Diagram |
| [Deployment Diagram](references/deployment-diagram.md) | Deployment Diagram |
| [Data Flow Diagram](references/data-flow-diagram.md) | Data Flow Diagram |
| [Class Diagram](references/class-diagram.md) | Class Diagram |
| [Component Diagram](references/component-diagram-2.md) | Component Diagram |
| [Deployment Diagram](references/deployment-diagram-2.md) | Deployment 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
````
END THIRD-PARTY FILE b286b67c386d4997

The third-party file has ended. Everything between the b286b67c386d4997 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2926 of 3160 bytes. © aj-geddes · MIT · https://github.com/aj-geddes/useful-ai-prompts/tree/HEAD/skills/architecture-diagrams/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md