Infrastructure
simplified
Design cloud architecture collaboratively, export Terraform instantly, and ship faster with confidence.
Overview
From cloud diagram to production-ready Infrastructure-as-Code.
Clutter is a diagram-first Infrastructure-as-Code editor. Draw AWS architectures, connect services with validated rules, and let Clutter generate Terraform and Ansible for you. Under the hood, everything is modeled around tenants, projects, canvases, nodes, edges, workspaces, and runs — so your diagrams are never just pictures, they're deployable artifacts.
Diagram → Terraform
Drag AWS resources onto a canvas and connect them with typed rules. Clutter turns the resulting graph into Terraform modules, aligned with your approved ModuleSets and VarSets.
- • React Flow powered canvas with snap grid
- • Deterministic connection rules & cycle prevention
- • Export Terraform bundles via a single click
Workspaces & Runs
Bind diagrams to execution contexts. Workspaces point to AWS accounts and module catalogs, while Runs orchestrate plan/apply lifecycles with live logs and status.
- • Workspace-aware editing and environment VarSets
- • Plan / apply flows with run status and log streaming
- • Run history linked back to each project
Single-table core
A DynamoDB single-table design powers everything: tenants, projects, canvases, nodes, edges, workspaces, module sets, var sets, and runs — optimized for real-world access patterns.
- • Tenant-scoped multi-tenancy
- • Membership roles: owner, editor, viewer
- • GSIs tuned for common queries & dashboards
Flow
A focused, opinionated workflow.
Clutter's front-end mirrors the backend's entities and access patterns. From loading a diagram to streaming deployment logs, each step is designed to feel fast, predictable, and safe.
- 1
Load a project & canvas
Select a project, then open a diagram. The client fetches a CanvasBundle — canvas + nodes + edges — in one request, backed by GSI2. React Flow hydrates the graph in milliseconds.
- 2
Edit with autosave & validation
Drag nodes, create edges, and tweak specs. Changes go through a local history stack (undo/redo) and optimistic PATCH calls with ETag-based conflict handling. Connection rules and zod schemas prevent broken graphs.
- 3
Plan & apply safely
Bind the diagram to a Workspace, then trigger a Run. The backend composes Terraform from the graph, assumes an AWS role through AccountLinks, and streams plan/apply logs back to the UI with clear status chips and summaries.
Front-end stack
- • Next.js + React + TypeScript
- • React Flow for diagramming
- • Zustand for canvas state + history
- • React Query for data fetching & caching
- • Yjs + y-websocket for collaboration & presence
- • Tailwind + shadcn/ui + Lucide Icons
Every UI concept — from Canvas to Workspace to Run — maps directly to a backend entity, keeping the client thin and predictable.
Teams
Built for real teams, not just solo diagrams.
Clutter ships with opinionated collaboration and safety features so your diagrams stay consistent and your deployments stay boring (in a good way).
See who's viewing a canvas in real time. A Git-style single-editor lock ensures only one editor can modify a diagram while others stay safely in read-only mode.
Connection rules, schema validation, and conflict dialogs keep your architecture clean. Secrets are never stored client-side and logs are redacted by design.
Sign in, create a project, and draw your first AWS architecture. Clutter will handle the Terraform and deployments for you.