A visual architecture design environment that combines an interactive node-based canvas with intelligent analysis to help you make better infrastructure decisions.
Every non-trivial project starts with architecture decisions: database choice, auth strategy, caching layers, API design, deployment topology. These decisions are consequential, hard to reverse, and almost never properly documented.
Right now, most teams make these decisions in Slack threads, whiteboard sessions, or mental models that live in one person's head. The artifacts — if they exist at all — are static diagrams that drift from reality within weeks.
There is no dedicated tool for system architecture the way Figma serves design or VS Code serves development. Archway is that tool.
Archway gives you a canvas where you compose system architecture from smart components — not dumb boxes. Each component carries metadata about protocols, connection patterns, scaling characteristics, and security considerations. When you connect components and build out your system, Archway analyzes the design and surfaces actionable feedback directly on the canvas.
This is not a diagramming tool with a chatbot bolted on. The analysis is contextual, structured, and integrated into your design workflow.
-
Smart Component Library — Drag pre-defined infrastructure components onto the canvas: databases, APIs, caches, auth providers, storage services, message queues, CDNs. Each component knows what it connects to, what protocols it speaks, and where it typically breaks.
-
Intelligent Connections — When you draw a connection between two components, the system understands the relationship. Frontend to API? It considers REST vs. GraphQL. API to database? It thinks about ORMs and connection pooling.
-
Real-Time Architecture Analysis — Archway evaluates your design and provides structured feedback: missing rate limiters, unused components, scaling bottlenecks, security gaps, and concrete suggestions. This feedback renders inline on the canvas as you work.
-
AI-Powered Design Feedback — Beyond the rule engine, Archway integrates with OpenRouter to provide deeper, contextual analysis using language models. Feedback streams in real-time directly into the canvas panel.
-
Code Generation — Export your architecture as project scaffolding: folder structure, Docker Compose files, database schemas, API route stubs, environment variable templates, and deployment configurations.
-
Design-Code Sync — Archway watches your codebase and keeps the architecture diagram in sync with reality. New routes, schema changes, and configuration drift are surfaced automatically.
┌─────────────────────────────────────────────────────────┐
│ Client (Browser) │
│ │
│ ┌─────────────┐ ┌──────────────┐ ┌───────────────┐ │
│ │ React Flow │ │ Component │ │ Analysis │ │
│ │ Canvas │ │ Library │ │ Panel │ │
│ └──────┬──────┘ └──────┬───────┘ └───────┬───────┘ │
└─────────┼────────────────┼──────────────────┼───────────┘
│ │ │
▼ ▼ ▼
┌─────────────────────────────────────────────────────────┐
│ Next.js Backend │
│ │
│ ┌─────────────┐ ┌──────────────┐ ┌───────────────┐ │
│ │ Canvas │ │ Rule │ │ AI Analysis │ │
│ │ State Mgmt │ │ Engine │ │ (OpenRouter) │ │
│ └─────────────┘ └──────────────┘ └───────────────┘ │
│ │
│ ┌─────────────┐ ┌──────────────┐ ┌───────────────┐ │
│ │ Prisma ORM │ │ Better Auth │ │ Zustand │ │
│ │ (Postgres) │ │ │ │ (State) │ │
│ └─────────────┘ └──────────────┘ └───────────────┘ │
└─────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────┐
│ PostgreSQL │
└─────────────────────┘
| Layer | Technology |
|---|---|
| Framework | Next.js 15 (App Router) |
| Language | TypeScript 5 |
| React | React 19 |
| Canvas | @xyflow/react (React Flow v12) |
| AI SDK | Vercel AI SDK |
| AI Provider | OpenRouter |
| Database | PostgreSQL |
| ORM | Prisma |
| Authentication | Better Auth |
| State Management | Zustand |
| Data Fetching | TanStack React Query |
| Styling | Tailwind CSS 4 |
| UI Components | Radix UI, shadcn/ui |
| Animations | Framer Motion |
| Schema Validation | Zod |
| Icons | Lucide |
- Node.js 18+
- pnpm (recommended) or npm
- PostgreSQL instance
- OpenRouter API key (for AI features)
git clone https://github.com/devsethi/archway.git
cd archway
pnpm installcp .env.example .env.local# Database
DATABASE_URL=postgresql://user:password@localhost:5432/archway
# Authentication
BETTER_AUTH_SECRET=your_secret_here
BETTER_AUTH_URL=http://localhost:3000
# AI
OPENROUTER_API_KEY=your_key_here
# Application
NEXT_PUBLIC_APP_URL=http://localhost:3000pnpm db:push
pnpm db:seed # Optionalpnpm devContributions are welcome! Please open an issue before starting work on large features.
- Component library — Adding new smart components with accurate metadata
- Rule engine — Writing new analysis rules for architecture patterns
- Code generation — Supporting more frameworks and deployment targets
- Documentation — Improving docs and adding examples
- Fork the repository
- Create a feature branch (
git checkout -b feature/your-feature) - Make your changes
- Run linting (
pnpm lint) - Submit a pull request
- Expand smart component library
- Improve code generation quality
- Add project templates (SaaS, API-only, microservices)
- Collaborative editing (multiplayer canvas)
- Version history and architecture diffing
- CLI tool for headless operations
- Plugin system for custom components
- Import from Terraform/Docker Compose
MIT License. See LICENSE for details.