majiayu000 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"