How to vibe codeCloudcraft
Automatically create AWS and Azure architecture diagrams in seconds
cloudcraft.co ↗Cloud Architecture & DevOps
The verdict: can you vibe code Cloudcraft?
Build a personal read-only canvas subset, but keep paying if you need reliable multi-region live cloud scanning and accurate enterprise FinOps pricing catalogs.
Replicating Cloudcraft is a serious undertaking primarily because of the isometric 3D canvas math and the immense friction of writing robust, rate-limit-safe parsers for recursive multi-region AWS and Azure graph topologies. While an AI coding agent can scaffold a basic Next.js drag-and-drop dashboard and a simple database schema in a few days, handling custom isometric projection angles, arrow routing between components, and secure AWS cross-account IAM role callbacks will stall out solo developers in debugging hell.
Estimated effort: 6-8 weeks of intensive engineering
What you can't replicate
- The massive proprietary database mapping thousands of frequently changing AWS/Azure SKU prices
- Active SOC 2 Type II enterprise compliance certification
- Direct integration into Datadog's production observability pipelines
Founded
2015
Raised
—
Team
~10
Cheapest paid tier
$0/mo
What Cloudcraft does
Cloud architecture visualization and design platform that allows cloud professionals to manually draw or automatically generate 2D and 3D interactive infrastructure diagrams.
Core features
- Isometric 2D/3D canvas rendering engine with custom component icons
- Drag-and-drop component placement and snapping grid
- Cloud provider API graph parsers for AWS and Azure
- Secure cross-account IAM role assumption flow with External IDs
- Real-time cost estimation and budgeting calculations
- Version history and snapshot retention
- PDF/PNG/SVG diagram export capabilities
The business
Pricing
- Free$0/mo
- Pro$40.83/mo
- Enterprise$100/mo
Funding
Unknown / bootstrapped
Pay vs build, cumulative
Break-even at month 1 — after that, every month is money kept.
The hard parts of vibe coding Cloudcraft
- Building a buttery-smooth custom isometric 3D projection canvas supporting hundreds of components without layout lag
- Writing recursive graph parsers for complex multi-region cloud provider outputs (VPCs, subnets, security groups)
- Maintaining an up-to-date pricing database of thousands of granular AWS and Azure regional SKUs
- Implementing strict cross-account IAM role assumption security without persisting sensitive telemetry data on disk
How to vibecode Cloudcraft
Prerequisites
Node.jsfree
Required runtime for building the Next.js full-stack application and running AI coding tools.
GitHubfree
Source control and deployment pipeline connection for Vercel hosting.
AWS Accountpay-as-you-go
Required for testing cross-account IAM role assumptions and live resource scanning parsers.
AI coding tools
Recommended stack
| Frontend | Next.js with Tailwind CSS, HTML5 Canvas / Konva.js for isometric rendering, and Lucide icons |
|---|---|
| Backend | Next.js Server Actions and API Routes |
| Database | Turso (SQLite at the edge for storing user diagrams and component metadata) |
| Auth | better-auth |
| Payments | Stripe |
| Other | AWS SDK for JavaScript (v3) for live cloud scanning, Zod for runtime validation, Resend for transactional auth emails |
Build guide
01Project Scaffolding and Database Schema
Initialize the Next.js project with TypeScript, Tailwind CSS, and better-auth. Set up Turso database connectivity using Drizzle ORM to define schemas for users, projects, diagrams, and component nodes.
Initialize a new Next.js 16 full-stack web application with TypeScript and Tailwind CSS v4. Configure better-auth for local email/password authentication with a Turso SQLite database backend using Drizzle ORM. Create database tables for users, projects, and diagrams, where each diagram stores its node and edge state as a JSON blob. Ensure all environment variables are properly typed and validated using Zod on startup.02Interactive 2D/3D Canvas Rendering Engine
Build the core design canvas supporting panning, zooming, grid snapping, and isometric visual projection layers for architectural components.
Build a high-performance interactive canvas component using Konva.js or HTML5 Canvas inside Next.js. Implement infinite pan and zoom capabilities, a configurable background grid with snap-to-grid alignment, and an isometric view toggle that shifts the transformation matrix. Support selecting, dragging, and dropping custom AWS and Azure service icons onto the canvas coordinates with real-time bounding box updates.03Component Library and Custom Properties Inspector
Create a searchable sidebar component palette loaded with standardized cloud service icons and a sidebar inspector to edit node metadata and tags.
Create a collapsible sidebar component library containing categorized icons for AWS (EC2, S3, Lambda, RDS, VPC) and Azure (Virtual Machines, Blob Storage, Functions). Implement a search filter over the catalog. When a node on the canvas is clicked, open a right-hand properties inspector panel allowing users to edit the node's label, region, instance size, and custom metadata tags, persisting state back to the active diagram model.04AWS Cross-Account Live Scan Integration
Implement the backend logic and secure form inputs for accepting customer AWS cross-account IAM role ARNs and External IDs to fetch cloud resource topologies.
Implement an API route in Next.js that accepts an AWS IAM role ARN and External ID. Use the AWS SDK (v3) to assume the cross-account role securely using the STS Client. Write resource parsers that call DescribeVpcs, DescribeSubnets, DescribeInstances, and DescribeSecurityGroups across designated regions. Map the returned JSON resource trees into normalized graph nodes and edges suitable for rendering directly onto the diagram canvas.05Real-time Cost Calculation Engine
Build a FinOps calculation engine that estimates monthly cloud spend based on component instance types selected within the diagram canvas.
Build a client-side cost calculation engine that evaluates all active compute and storage nodes present on the diagram canvas. Create a mock pricing lookup table mapping common AWS and Azure SKU types (e.g., t3.medium, db.m5.large) to baseline monthly rates. Display a live summary toolbar breaking down estimated monthly costs by service category, and provide a button to export the breakdown to CSV.06Collaboration, Version History, and Exporting
Add diagram snapshot versioning, public sharing links, and PNG/SVG export capabilities for exporting architectural designs.
Implement diagram version history by saving timestamped JSON snapshots of the canvas state to the database whenever a user clicks 'Save Version' (retaining up to 30 recent snapshots). Add export options that serialize the canvas drawing context into high-resolution PNG and SVG formats for download. Build a public/private sharing toggle that generates secure read-only URL tokens for external stakeholders.
Cost vs paying for Cloudcraft
What will you build it with?
Starting total with Claude Code$0 one-time
Starting costs (one-time)
- Custom domain (optional)$12/yr
- AI coding tool subscription$20 one-time
Total~$32 one-time
Ongoing costs (monthly)
- Vercel Hobby / Turso Database$0/mo
Total$0/mo
Paying for Cloudcraft
$40.83/mo
Your time to build
45-60 hours
AI tool credits
$20 (Claude Pro / Cursor)
Break-even
0 months (purely for personal architectural drafting)
Vibe code Cloudcraft: FAQ
- Can you vibe code Cloudcraft yourself?
- Serious undertaking — 38/100 vibecodeable. Build a personal read-only canvas subset, but keep paying if you need reliable multi-region live cloud scanning and accurate enterprise FinOps pricing catalogs.
- How long does it take to vibe code Cloudcraft?
- 6-8 weeks of intensive engineering — roughly 45-60 hours of hands-on time with an AI coding agent.
- How do you build your own Cloudcraft?
- Scoped to personal use: Next.js with Tailwind CSS, HTML5 Canvas / Konva.js for isometric rendering, and Lucide icons on the front, Next.js Server Actions and API Routes behind it, Turso (SQLite at the edge for storing user diagrams and component metadata) for data. Follow the 6-step build guide on this page — each step has a paste-ready prompt for an AI coding agent.
- How do you code your own Cloudcraft without being an expert?
- Use an AI coding tool (Claude Code or Cursor) and work in small steps: scaffold, data model, core screens, then deploy. Realistic effort: 6-8 weeks of intensive engineering. The prompts on this page are written so the AI does the heavy lifting.
- How much does it cost to vibe code Cloudcraft instead of paying?
- About ~$32 one-time to start and $0/mo to run, versus $40.83/mo for Cloudcraft. Break-even: 0 months (purely for personal architectural drafting).
- What stack should you use to vibe code Cloudcraft?
- Next.js with Tailwind CSS, HTML5 Canvas / Konva.js for isometric rendering, and Lucide icons; Next.js Server Actions and API Routes; Turso (SQLite at the edge for storing user diagrams and component metadata); plus AWS SDK for JavaScript (v3) for live cloud scanning, Zod for runtime validation, Resend for transactional auth emails.