Agent skill · design visual · aj-geddes
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.
Why this skill is useful
Provides specific patterns and examples for creating architecture diagrams using Mermaid and PlantUML that the AI wouldn't reliably generate on its own.
What it needs
About 1k tokens when loaded. Last updated 2026-03-04. 307 stars on the source repository.
What this skill does
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: 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
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aj-geddes/architecture-diagrams