architecture-diagrams

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
• When to Use
• Quick Start
• Reference Guides
• 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)

References

Detailed implementations in the references/ directory:

Guide	Contents
System Architecture Diagram	System Architecture Diagram
Sequence Diagram	Sequence Diagram
C4 Context Diagram	C4 Context Diagram
Component Diagram	Component Diagram
Deployment Diagram	Deployment Diagram
Data Flow Diagram	Data Flow Diagram
Class Diagram	Class Diagram
Component Diagram	Component Diagram
Deployment Diagram	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

❌ 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

Core Workflow

Follow the primary workflow, commands, and decision points documented in the sections below.

Examples

Use the examples and snippets already present in this document whenever they apply to the task.