AI-Powered AWS Architecture Diagram Generator
Transform natural language into professional cloud architecture diagrams
Features • Getting Started • Tech Stack • Contributing • License
OpenArchFlow is an open-source Progressive Web App designed for cloud architects, DevOps engineers, and developers. Go from natural language description to a running local AWS environment in seconds — generate interactive architecture diagrams with AI, export production-ready Terraform, and deploy directly to a local AWS emulator for immediate hands-on testing, all without an AWS account.
- ✨ Zero Setup: No account required. Start designing immediately.
- 🔒 Privacy First: Runs entirely in your browser. Your data never leaves your device.
- 🎨 AI-Powered: Describe your architecture in plain English, get professional diagrams instantly.
- 💰 Cost Estimation: Integrated AWS Pricing API to calculate real-world architecture costs.
- 🔧 Fully Editable: AI generates the initial design, you refine it with drag-and-drop.
- 📚 AWS Standards: Uses AWS Documentation MCP for up-to-date service recommendations.
- 🌐 Offline Capable: Local AI option (WebLLM) works without internet connection.
- 🚀 Local Deploy: Deploy your diagram to a local AWS emulator (MiniStack) with one click — no cloud account needed.
- ☁️ Cloud Backup: Sign in with Google to sync all your diagrams to Google Drive automatically.
- Peer-to-Peer Architecture: Design together in real-time with direct browser-to-browser synchronization.
- End-to-End Encryption (E2EE): All data is encrypted with a key stored in the URL fragment (
#hash), which is never sent to the signaling server (Zero-Knowledge). - No Central Storage: Your diagrams are never stored on any central server. Synchronization happens directly between peers via WebRTC.
- Live Presence: See how many peers are connected to your session directly in the toolbar.
- One-click sign-in — A single Google OAuth popup grants both identity and Drive access. Your profile photo appears in the toolbar as a status button.
- Auto-sync — Every diagram change is automatically backed up to your personal Google Drive (debounced 3 s). Only files created by this app are ever accessed (
drive.filescope). - Conflict resolution — If the cloud copy is newer on app load, you can choose "Use Cloud" or "Keep Local" — no silent overwrites.
- Unified status — The account button shows a Drive-status dot (green / syncing / error) and a popover with last-sync time, Sync Now, and Sign out actions.
Scan a live AWS account and turn its running resources into a diagram in seconds.
- 24 supported services — EC2, VPC, ECS, EKS, RDS, ElastiCache, ALB/NLB, Lambda, S3, DynamoDB, SQS, SNS, API Gateway, CloudFront, Route 53, Cognito, Step Functions, IAM, Kinesis, EventBridge, KMS, Secrets Manager, and more.
- Automatic connections — edges are inferred from ARN references across services (ELB→EC2 target groups, ECS→ALB, CloudFront→S3/ALB origins, Step Functions→Lambda).
- Flexible authentication — enter AWS Access Keys directly, or use the integrated SSO login button that auto-fills credentials after authentication. Alternatively, reuse credentials already configured for Bedrock.
- Selective import — choose which services and resources to include before importing. Resources are pre-selected and expandable per service.
- Partial-failure tolerance — permission errors on individual services show a "No access" badge without blocking the rest of the scan.
- Cloud AI (Gemini): Choose between Gemini 2.0 Flash (fastest), Gemini 2.5 Flash (balanced, default), or Gemini 2.5 Pro (most capable) — selectable directly from the AI Provider dialog.
- AWS Bedrock: Two authentication methods — SSO / IAM Identity Center (Device Authorization Flow, no manual credential entry) or Direct Access Keys (IAM user keys or STS temporary credentials). Supports all Bedrock model families (Claude, Llama, Mistral, Titan, Cohere) with dynamic model discovery per account. Credentials are silently refreshed before expiry using the stored SSO token.
- Local AI (WebLLM): Privacy-focused, runs Phi-3 entirely in your browser via WebGPU.
- Incremental Generation: AI can intelligently modify and append to existing architecture diagrams instead of starting from scratch.
- Diagram Chat: Discuss your architecture with an AI Assistant directly from the toolbar for explanations, pricing estimates, and security reviews.
- Real-time Pricing: Fetches live data from the AWS Price List API for EC2, RDS, S3, Lambda, and more
- Usage Configuration: Customize regions, instance types, and usage quantities (storage GBs, requests) for precise estimates
- Bill of Materials (BOM): View a consolidated cost breakdown for your entire architecture in a dedicated panel
- Export to CSV: Download your cost estimate for architectural proposals or budgeting
Deploy your architecture diagram to a local AWS emulator (MiniStack) running on localhost:4566 — turning OpenArchFlow into a full design → deploy → operate platform with no cloud costs and no AWS account required.
Getting started:
docker run -p 4566:4566 ministackorg/ministackThen click the Rocket icon in the toolbar, configure the endpoint, and hit Deploy All.
Supported AWS services:
| Service | What gets created | Interactive Console |
|---|---|---|
| S3 | S3 bucket | List, upload, delete objects |
| Lambda | Function (stub handler) | Invoke, edit config, upload .zip, live logs |
| DynamoDB | Table (id hash key) |
Scan items, put item |
| SQS | Queue | Send/receive/delete messages |
| SNS | Topic | Publish, subscribe |
| EventBridge | Event bus | View rules, put events |
| Kinesis | Stream (1 shard) | — |
| API Gateway | REST API + routes + stage | Add routes, test endpoints |
| IAM | Role | — |
| KMS | Key | — |
| Secrets Manager | Secret | — |
| SSM Parameter Store | Parameter | — |
| CloudWatch Logs | Read-only | Browse groups/streams, live polling |
Key capabilities:
- One-click Deploy All from the MiniStack panel — per-node status badges update in real time.
- Per-node console — click any deployed node to open its interactive console (S3 browser, Lambda invoker, SQS message reader, etc.).
- Simulation hybrid mode — when a node is deployed, simulation traffic is routed to the real MiniStack resource and uses wall-clock latency instead of synthetic values.
- Traffic Source node — generate configurable req/s traffic from the diagram canvas; live response icon shows last result.
- Browser-direct — all AWS SDK v3 calls go from your browser directly to
localhost:4566. Works even when OpenArchFlow is hosted on Vercel. - Teardown — delete all deployed resources in one action.
- HCL Code Generation: Export your AWS architecture diagram directly as production-ready HashiCorp Terraform —
main.tf,variables.tf, andoutputs.tfgenerated from your nodes and edges. - 60+ AWS Resource Mappings: EC2, Lambda, RDS, DynamoDB, S3, VPC, ALB, API Gateway, CloudFront, EKS, ECS, SQS, SNS, ElastiCache, and more — with dependency inference from diagram edges (
depends_on). - AI-Enhanced Generation: Combines Gemini 2.5 Flash with the HashiCorp Terraform MCP server to produce schema-accurate HCL with IAM roles and security groups.
- Monaco HCL Editor: Full HCL syntax highlighting, bracket matching, and snippet completions. Switch between dark/light/auto themes from the editor toolbar.
- Per-Node IaC Config: Override resource type and name directly from the Properties Panel for any AWS node.
- Cloud-Agnostic Architecture: Pluggable
IaCGeneratorinterface designed to support CDK, Pulumi, or CloudFormation in the future.
- Architecture Simulation: Playback and simulate data flows and traffic patterns to visualize how your architecture behaves
- Presentation Tools: Built-in Laser Pointer mode for presenting architectures to your team
- Auto-Layout: One-click hierarchical organization using dagre algorithm
- Massive Component Library: Hundreds of official components for AWS, Azure, Cloud Native, Observability (Datadog, Sentry), Integrations (Stripe, Twilio), and Generic shapes
- AWS Architecture Groups: Pre-styled containers for VPC, Subnet, Availability Zone, Region, On-Premises, and Security Zone — matching draw.io-level solution design capability
- Smart Connections: Automatic edge routing and labels
- Export Options: Download diagrams as high-quality PNG images or JSON files
- Multi-Diagram Support: Create, manage, and backup multiple architecture diagrams
- Import/Export: detailed JSON export for individual diagrams or full backup of all work
- Versioning: Backward-compatible file format ensures your data is safe across updates
- Technical Specifications: Generate comprehensive Markdown documentation
- Architecture Overviews: Executive summaries and component descriptions
- Best Practices: Security, scalability, and cost optimization recommendations
- Preview & Copy: View rendered Markdown or copy raw content
- Local-First: All data stored in browser's localStorage/IndexedDB
- No Backend Required: 100% client-side application
- Responsive Design: Works on desktop and tablet devices
- Dark Mode Support: Beautiful UI with glassmorphism effects
- Node.js v25+ (recommended)
- pnpm package manager
-
Clone the repository:
git clone https://github.com/dmux/OpenArchFlow.git cd OpenArchFlow -
Install dependencies:
pnpm install
-
Set up environment variables (optional for Cloud AI):
Create a
.env.localfile:cp .env.example .env.local
Add your Gemini API key (only needed for Cloud AI):
GEMINI_API_KEY=your_gemini_api_key_here UPSTASH_REDIS_REST_URL=your_upstash_url (optional, for rate limiting) UPSTASH_REDIS_REST_TOKEN=your_upstash_token (optional)
Note: You can use Local AI (WebLLM) without any API keys!
-
Run the development server:
pnpm dev
Open http://localhost:3000 to start creating diagrams!
pnpm build
pnpm start| Category | Technologies |
|---|---|
| Framework | Next.js 16+ (App Router) |
| Language | TypeScript |
| Styling | Tailwind CSS + shadcn/ui |
| Diagramming | React Flow + dagre (Auto-layout) |
| State Management | Zustand |
| AI - Cloud | Google Gemini 2.0/2.5 Flash · 2.5 Pro |
| AI - AWS | AWS Bedrock (Claude · Llama · Mistral · Titan · Cohere) via SSO |
| AI - Local | WebLLM (Phi-3-mini via WebGPU) |
| P2P Collaboration | Yjs + WebRTC |
| Documentation | react-markdown + remark-gfm |
| Local Deploy | MiniStack + AWS SDK v3 (browser) |
| IaC Editor | Monaco Editor + HCL |
| Export | html2canvas |
| Icons | Lucide React |
- Choose between Cloud AI (Gemini) or Local AI (Phi-3)
- Type your architecture description:
Serverless API with Lambda, API Gateway, DynamoDB, and S3 - Press Enter and watch your diagram appear!
- Click Actions → Auto Layout to automatically arrange components
- Drag and drop nodes to customize positions
- Connect components by dragging edges
- Click Actions → Generate Specification
- View rendered Markdown or raw code
- Copy to clipboard for your wiki/documentation
- Click the cloud/account icon in the toolbar
- Complete the Google sign-in popup — grants identity and Drive access in one step
- Your profile photo replaces the icon; diagrams auto-sync to Drive from this point on
- Click the Users icon in the toolbar
- Click Start Collaborating
- Share the generated link (E2EE) with your team
- Watch updates happen instantly across all screens!
- Start MiniStack:
docker run -p 4566:4566 -v /var/run/docker.sock:/var/run/docker.sock -e GLUE_DOCKER_IMAGE=ghcr.io/dmux/openarchflow/ministack_glue_libs_4.0.0_image_01:latest -e S3_PERSIST=1 ministackorg/ministack:full - Click the 🚀 Rocket icon in the toolbar
- Click Test Connection — you should see "Connected"
- Click Deploy All — nodes deploy in sequence with live status badges
- Click any deployed node → Open Console to interact with the resource
- Run a simulation — deployed nodes receive real traffic from the simulation engine
To emulate AWS Glue ETL jobs, query them using Athena SQL, and inspect execution logs directly in the OpenArchFlow UI, configure MiniStack using the :full image along with our custom Spark logging container:
-
Start MiniStack with Docker Socket & Custom Image:
docker run -d -p 4566:4566 \ -v /var/run/docker.sock:/var/run/docker.sock \ -e GLUE_DOCKER_IMAGE=ghcr.io/dmux/openarchflow/ministack_glue_libs_4.0.0_image_01:latest \ -e S3_PERSIST=1 \ ministackorg/ministack:full
[!NOTE] The
:fulltag of MiniStack is required to use the Athena Query tab. The default image does not contain the native DuckDB engine required to query real S3 files and returns static mocked data.(Alternatively, use the provided
.devcontainer/docker-compose.ymlto spin up MiniStack automatically with these settings). -
Run PySpark Jobs:
- Open the Glue Studio panel on a deployed Glue Catalog node.
- Start your job in the Runs tab.
- Enable ● Live to stream JVM and Spark logs directly to the dashboard interface!
- Click Actions → Export as PNG
- Download professional diagrams for presentations
- Export Single: Click the download icon (⬇️) next to a diagram in the sidebar to save it as a JSON file.
- Backup All: Click Backup All in the sidebar footer to export all your diagrams at once.
- Import: Click Import to restore diagrams from a JSON file.
- Automatically handles versioning
- Merges with existing diagrams safely (renames duplicates)
OpenArchFlow follows Semantic Versioning (MAJOR.MINOR.PATCH):
| Segment | When to bump | Example |
|---|---|---|
| MAJOR | Breaking changes to file format or public API | 1.0.0 |
| MINOR | New features, new providers, new AI capabilities (backwards-compatible) | 0.3.0 |
| PATCH | Bug fixes, dependency updates, UI tweaks | 0.2.1 |
All notable changes are documented in CHANGELOG.md, following the Keep a Changelog format.
- Update
package.json— bump the"version"field - Update
CHANGELOG.md— move items from[Unreleased]to a new dated section - Commit the release:
git add package.json CHANGELOG.md git commit -m "chore: release vX.Y.Z" - Tag the release:
git tag -a vX.Y.Z -m "Release vX.Y.Z" git push && git push --tags
The version is automatically injected into the UI at build time via
NEXT_PUBLIC_APP_VERSION— no manual UI updates needed.
We welcome contributions from the community! OpenArchFlow is built by architects and engineers for architects and engineers.
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
- Write clear, descriptive commit messages following Conventional Commits (
feat:,fix:,chore:,docs:) - Follow the existing code style (TypeScript + ESLint)
- Test your changes thoroughly
- Update
CHANGELOG.mdunder[Unreleased]for any user-visible changes - Bump the version in
package.jsonwhen submitting a release PR
- 🆕 Add more AWS services (AppSync, WAF, etc.)
- 🌍 Add internationalization (i18n)
- 📱 Mobile device support
- 🧪 Add unit and integration tests
- 📚 Improve AI prompts for better diagrams
- 🔗 Add Azure and GCP resource discovery
Your privacy is our priority:
- ✅ No data collection: We don't collect any personal data, diagrams, or API keys
- ✅ Local storage only: All your work stays on your device
- ✅ No tracking: No analytics, no cookies, no telemetry
- ✅ Open source: The entire codebase is available for inspection
- ✅ Optional cloud AI: Use Local AI for complete offline privacy
This project is open source and available under the MIT License.
Rafael Sales
📧 rafael.sales@gmail.com
🌐 rfsales.dev
🐙 GitHub
If you find OpenArchFlow useful, please consider:
- ⭐ Starring the repository
- 🐛 Reporting bugs or suggesting features via Issues
- 🤝 Contributing to the project
- 📢 Sharing with your network
Built with ❤️ by the developer and architect community, for the community.
Special thanks to:
- AWS for comprehensive documentation and service icons
- Google Gemini for powerful AI capabilities
- WebLLM team for enabling local AI inference
- The open-source community for amazing tools and libraries
Made with ☕ and 💻 for Cloud Architects