architecture-diagrams
Create system architecture diagrams using Mermaid, PlantUML, C4 model, flowcharts, and sequence diagrams. Use when documenting architecture, system design, data flows, or technical workflows.
- Installs
- 2K
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill architecture-diagrams- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads architecture-diagrams automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Architecture Diagrams
Table of Contents
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 | 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
FAQ
What does the architecture-diagrams skill do?
Create system architecture diagrams using Mermaid, PlantUML, C4 model, flowcharts, and sequence diagrams. Use when documenting architecture, system design, data flows, or technical workflows.
How do I install architecture-diagrams?
Run npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill architecture-diagrams in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/architecture-diagrams/ (personal) or .claude/skills/architecture-diagrams/ (project).
Which AI agents can use architecture-diagrams?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is architecture-diagrams safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains architecture-diagrams?
It is published by aj-geddes in aj-geddes/useful-ai-prompts. It has 1,961 recorded installs.
More from aj-geddes/useful-ai-prompts
nodejs-express-server
aj-geddes/useful-ai-prompts
Build production-ready Express.js servers with middleware, authentication, routing, and database integration. Use when creating REST APIs, managing requests/responses, implementing middleware chains, and handling server logic.
code-review-analysis
aj-geddes/useful-ai-prompts
Perform comprehensive code reviews with best practices, security checks, and constructive feedback. Use when reviewing pull requests, analyzing code quality, checking for security vulnerabilities, or providing code improvement suggestions.
rest-api-design
aj-geddes/useful-ai-prompts
Design RESTful APIs following best practices for resource modeling, HTTP methods, status codes, versioning, and documentation. Use when creating new APIs, designing endpoints, or improving existing API architecture.
jenkins-pipeline
aj-geddes/useful-ai-prompts
Build Jenkins declarative and scripted pipelines with stages, agents, parameters, and plugins. Implement multi-branch pipelines and deployment automation.
ansible-automation
aj-geddes/useful-ai-prompts
Infrastructure automation and configuration management using Ansible playbooks, roles, and inventory. Use for deploying applications, patching, and managing servers.
ios-swift-development
aj-geddes/useful-ai-prompts
Develop native iOS apps with Swift. Covers MVVM architecture, SwiftUI, URLSession for networking, Combine for reactive programming, and Core Data persistence.
Popular code quality & workflow skills
grill-me
mattpocock/skills
A relentless interview to sharpen a plan or design.
improve-codebase-architecture
mattpocock/skills
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
handoff
mattpocock/skills
Compact the current conversation into a handoff document for another agent to pick up.
domain-modeling
mattpocock/skills
Build and sharpen a project's domain model. Use when discussing codebase terminology, writing or editing a GLOSSARY.md, or recording or editing an ADR.
codebase-design
mattpocock/skills
Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.
diagnosing-bugs
mattpocock/skills
Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.