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
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
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1---2name: aj-geddes-useful-ai-prompts-architecture-diagrams3description: Architecture Diagrams4---56# Architecture Diagrams78## Table of Contents910- [Overview](#overview)11- [When to Use](#when-to-use)12- [Quick Start](#quick-start)13- [Reference Guides](#reference-guides)14- [Best Practices](#best-practices)1516## Overview1718Create clear, maintainable architecture diagrams using code-based diagramming tools like Mermaid and PlantUML for system design, data flows, and technical documentation.1920## When to Use2122- System architecture documentation23- C4 model diagrams24- Data flow diagrams25- Sequence diagrams26- Component relationships27- Deployment diagrams28- Infrastructure architecture29- Microservices architecture30- Database schemas (visual)31- Integration patterns3233## Quick Start3435Minimal working example:3637```mermaid38graph TB39 subgraph "Client Layer"40 Web[Web App]41 Mobile[Mobile App]42 CLI[CLI Tool]43 end4445 subgraph "API Gateway Layer"46 Gateway[API Gateway<br/>Rate Limiting<br/>Authentication]47 end4849 subgraph "Service Layer"50 Auth[Auth Service]51 User[User Service]52 Order[Order Service]53 Payment[Payment Service]54 Notification[Notification Service]55 end5657 subgraph "Data Layer"58 UserDB[(User DB<br/>PostgreSQL)]59 OrderDB[(Order DB<br/>PostgreSQL)]60 Cache[(Redis Cache)]61 Queue[Message Queue<br/>RabbitMQ]62 end63// ... (see reference guides for full implementation)64```6566## Reference Guides6768Detailed implementations in the `references/` directory:6970| Guide | Contents |71|---|---|72| [System Architecture Diagram](references/system-architecture-diagram.md) | System Architecture Diagram |73| [Sequence Diagram](references/sequence-diagram.md) | Sequence Diagram |74| [C4 Context Diagram](references/c4-context-diagram.md) | C4 Context Diagram |75| [Component Diagram](references/component-diagram.md) | Component Diagram |76| [Deployment Diagram](references/deployment-diagram.md) | Deployment Diagram |77| [Data Flow Diagram](references/data-flow-diagram.md) | Data Flow Diagram |78| [Class Diagram](references/class-diagram.md) | Class Diagram |79| [Component Diagram](references/component-diagram-2.md) | Component Diagram |80| [Deployment Diagram](references/deployment-diagram-2.md) | Deployment Diagram |8182## Best Practices8384### ✅ DO8586- Use consistent notation and symbols87- Include legends for complex diagrams88- Keep diagrams focused on one aspect89- Use color coding meaningfully90- Include titles and descriptions91- Version control your diagrams92- Use text-based formats (Mermaid, PlantUML)93- Show data flow direction clearly94- Include deployment details95- Document diagram conventions96- Keep diagrams up-to-date with code97- Use subgraphs for logical grouping9899### ❌ DON'T100101- Overcrowd diagrams with details102- Use inconsistent styling103- Skip diagram legends104- Create binary image files only105- Forget to document relationships106- Mix abstraction levels in one diagram107- Use proprietary formats108109---110> Converted and distributed by [TomeVault](https://tomevault.io/claim/aj-geddes) — claim your Tome and manage your conversions.111<!-- tomevault:4.0:skill_md:2026-04-11 -->
Run npx skillmds@latest add tomevault-io/aj-geddes-useful-ai-prompts-architecture-diagrams in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Architecture Diagrams It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.