arch-designer
Use when the user wants to generate architecture diagrams, visualize their codebase structure, create pitch decks with system diagrams, or understand their infrastructure layout from code
When & Why to Use This Skill
The Architecture Designer skill enables developers to automatically generate professional, ByteByteGo-quality system diagrams directly from their codebase. By analyzing Infrastructure as Code (IaC) files like Terraform and Docker Compose, it visualizes complex infrastructure layouts, service dependencies, and data flows, streamlining technical documentation and system design understanding.
Use Cases
- Automated Documentation: Generate and maintain up-to-date architecture diagrams for README files and project wikis to ensure documentation never lags behind code.
- Infrastructure Visualization: Map out cloud resources (AWS, Lambda, S3, etc.) and service networking from Terraform and Docker Compose configurations.
- Pitch Deck Creation: Quickly generate professional-grade system diagrams tailored for investor presentations or client-facing decks.
- Developer Onboarding: Help new team members grasp the system's structural layout and component interactions through clear, visual flow indicators.
- Interactive Design Refinement: Use conversational AI to zoom into specific auth flows, add explanatory callouts, or reorganize visual components for better clarity.
| name | arch-designer |
|---|---|
| description | Use when the user wants to generate architecture diagrams, visualize their codebase structure, create pitch decks with system diagrams, or understand their infrastructure layout from code |
Architecture Designer
Generate professional, ByteByteGo-quality architecture diagrams from your codebase.
When to Use
Use this plugin when:
- User asks about architecture visualization or diagrams
- User wants to document their system architecture
- User is preparing a pitch deck or presentation
- User asks "what does my architecture look like?"
- User wants to understand infrastructure from Terraform/Docker files
- User needs diagrams for documentation or README
Available Commands
| Command | Purpose |
|---|---|
/arch:generate |
Scan codebase and generate full architecture diagram suite |
/arch:view $SCOPE |
Generate a focused diagram for a specific component or flow |
/arch:deck --investor |
Create investor pitch deck with auto-generated diagrams |
/arch:deck --client |
Create client-facing presentation deck |
/arch:export |
Export diagrams in multiple formats (SVG, PNG, PDF) |
/arch:refresh |
Regenerate diagrams after code changes |
Supported Sources
The plugin can analyze:
- Terraform - AWS resources (Lambda, DynamoDB, S3, SQS, API Gateway, etc.)
- Docker Compose - Services, dependencies, networking
Future analyzers will add support for:
- Kubernetes manifests
- AWS CDK
- CloudFormation
- Application code (Express routes, database connections)
How It Works
- Analyzers scan IaC files and extract components
- GraphBuilder merges results into a unified architecture graph
- Dagre layout positions nodes using hierarchical algorithm
- SVG renderer creates animated, styled diagrams
Output Location
Diagrams are saved to docs/architecture/latest/:
overview.svg- Animated SVG with flow indicatorsoverview.png- Static image for embeddingembed.html- Copy-paste snippet for README
Interactive Refinement
After generation, you can refine diagrams conversationally:
- "Zoom into the auth flow"
- "Add a callout explaining the cache layer"
- "Move the database to the right"
- "Highlight the payment processing path"