Architecture Diagrams
Turn system design into maintainable Mermaid or PlantUML diagrams for READMEs, ADRs, and onboarding without one-off drawing tools.
Overview
Architecture Diagrams is an agent skill most often used in Build (also Validate and Ship) that produces Mermaid, PlantUML, and C4-style architecture diagrams as maintainable code.
Install
npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill architecture-diagramsWhat is this skill?
- Mermaid and PlantUML patterns for flowcharts, sequence, and deployment views
- C4 model layering for context, container, and component documentation
- Microservices, integration, and data-flow diagram templates
- Database schema and infrastructure relationship sketches as code
- Quick-start graph with client, API gateway, service, and data layers
Adoption & trust: 1.4k installs on skills.sh; 250 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need to explain how your system fits together but lack consistent, updatable diagrams in your repo.
Who is it for?
Indie builders documenting microservices, monolith layers, or agent pipelines who want diagrams that diff in Git.
Skip if: Pixel-perfect marketing visuals, heavy UI mockups, or teams that mandate a single proprietary diagramming SaaS with no code export.
When should I use this skill?
Documenting architecture, system design, data flows, technical workflows, C4, sequence, deployment, microservices, or integration patterns.
What do I get? / Deliverables
You get copy-paste diagram source for architecture, flows, and sequences that you can revise with every design change.
- Mermaid or PlantUML diagram source
- C4 or flow diagram suited to the documented system
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Architecture diagrams most often land in Build documentation, but the same skill supports early scope communication and pre-ship review artifacts. Code-based diagrams (C4, sequence, deployment) are documentation deliverables that stay in repo next to the system they describe.
Where it fits
Sketch container-level C4 to align prototype boundaries before coding.
Add a layered service-and-database Mermaid graph to the project README.
Sequence diagram for auth, API, and payment calls across services.
Deployment diagram for reviewers explaining gateway and data stores in production.
How it compares
Use for text-native diagram code in docs—not Figma-style visual design or automatic infra discovery from live AWS.
Common Questions / FAQ
Who is architecture-diagrams for?
Solo and indie developers who document their own systems and want architecture artifacts that stay in sync with the codebase.
When should I use architecture-diagrams?
During Validate to communicate scope, during Build for README and ADR diagrams, and during Ship when capturing deployment or integration flows for reviewers.
Is architecture-diagrams safe to install?
It is prompt and template guidance with no required cloud access—review the Security Audits panel on this page like any third-party skill.
SKILL.md
READMESKILL.md - Architecture Diagrams
# 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 ### ❌ 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 # System Architecture Diagram ## System Architecture Diagram ```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 subgraph "External Services" Stripe[Stripe API] SendGrid[SendGrid] S3[AWS S3] end Web --> Gateway Mobile --> Gateway