# How to Vibe Code Your Own Cloudcraft (and Stop Paying for It)

> Automatically create AWS and Azure architecture diagrams in seconds

- Site: https://cloudcraft.co
- Category: Cloud Architecture & DevOps
- Verdict: **Serious undertaking** (38/100 vibecodeable)
- Estimated effort: 6-8 weeks of intensive engineering

## Verdict

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.

### 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

## What it 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

Founded 2015.
Team size: ~10.

## The hard parts

- 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 vibe code Cloudcraft

### Prerequisites

- Node.js (free): Required runtime for building the Next.js full-stack application and running AI coding tools.
- GitHub (free): Source control and deployment pipeline connection for Vercel hosting.
- AWS Account (pay-as-you-go): Required for testing cross-account IAM role assumptions and live resource scanning parsers.

### Recommended AI tools

- Claude Code: Essential for scaffolding complex full-stack Next.js features, handling multi-file architecture, and writing intricate AWS API graph-parsing logic.
- Cursor: Ideal for fine-tuning the interactive React canvas components, handling canvas pointer events, and tweaking Tailwind CSS styling.

### 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

### Hosting

- Vercel (Hosting the Next.js frontend, serverless API endpoints, and handling edge routing.): $0-20/mo
- Turso (Serverless SQLite database storage for user profiles, diagrams, and JSON topology blobs.): $0/mo

### Build guide

1. **Project 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.
```

2. **Interactive 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.
```

3. **Component 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.
```

4. **AWS 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.
```

5. **Real-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.
```

6. **Collaboration, 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

**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 the SaaS instead: $40.83/mo
- Build time: 45-60 hours
- AI tool credits: $20 (Claude Pro / Cursor)
- Break-even: 0 months (purely for personal architectural drafting)

## Sources

- [Datadog Acquires Cloudcraft Press Release](https://www.prnewswire.com/news-releases/datadog-acquires-cloudcraft-to-create-live-cloud-architecture-diagrams-301668100.html)
- [Cloudcraft Official Pricing Page](https://cloudcraft.co/pricing)
- [Cloudcraft Official Security Page](https://cloudcraft.co/security)