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. Generate interactive AWS architecture diagrams from natural language descriptions using AI, Large Language Models (LLMs), AI Agents, and AWS MCP (Model Context Protocol).
- ✨ 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.
- 🔧 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.
- Cloud AI (Gemini): Fast generation with Google's Gemini 2.5 Flash
- 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
- 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
- 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.5 Flash |
| AI - Local | WebLLM (Phi-3-mini via WebGPU) |
| Documentation | react-markdown + remark-gfm |
| 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 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)
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
- Follow the existing code style (TypeScript + ESLint)
- Test your changes thoroughly
- Update documentation as needed
- 🆕 Add more AWS services (AppSync, EKS, ECS, etc.)
- 🎨 Improve UI/UX design
- 🌍 Add internationalization (i18n)
- 📱 Mobile device support
- 🧪 Add unit and integration tests
- 📚 Improve AI prompts for better diagrams
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
🐙 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
