# How to Vibe Code Your Own Eraser (and Stop Paying for It) > AI-powered technical design and documentation workspace - Site: https://eraser.io - Category: Developer Tools - Platforms: Web app, VS Code extension - Verdict: **Serious undertaking** (42/100 vibecodeable) - Estimated effort: 4-6 weeks of focused evening development ## Verdict You can build a personal single-user clone of Eraser's markdown editor and diagram-as-code parser, but the multiplayer canvas engine and deterministic layout code are a serious undertaking. While knocking together a Next.js app with a Tailwind UI and an OpenAI prompt wrapper for Mermaid or custom nodes takes a weekend, replicating Eraser's core magic—a zero-flicker vector infinite canvas synced inline with a markdown editor—requires building complex layout parsing and state synchronization algorithms from scratch. A solo developer can easily ship a single-user note editor with text-to-diagram rendering, but true real-time multiplayer coordination and repository parsing will eat weeks of edge-case debugging. ### What you can't replicate - Proprietary vector layout rendering performance - Production-grade multiplayer CRDT conflict resolution at scale - Enterprise security posture and audited compliance infrastructure ## What it does A technical workspace merging collaborative markdown documents, diagram-as-code engines, and generative AI diagramming. ### Core features - Infinite canvas with panning, zooming, and vector node rendering - Diagram-as-code text parser supporting flowchart and sequence syntax - Markdown document editor with inline figure snapshot embeddings - AI diagram generator converting prompts to layout structures via LLMs - Multiplayer real-time collaboration with cursor presence and sync - GitHub repository parser for codebase architecture visualization - VS Code extension for viewing and editing diagram source files - Version history snapshots and file export to PNG, SVG, and Markdown ## The business ### Pricing - Free: $0 - Starter: $15/mo - Business: $45/mo ### Funding $4M raised. - Seed Investors: Caffeinated Capital Founded 2020. Team size: 11 to 30. ## The hard parts - Building a deterministic layout engine that parses text syntax into clean, non-overlapping visual nodes and routing vectors - Implementing real-time multiplayer co-editing across both the text editor and canvas with conflict resolution - Optimizing infinite canvas rendering for smooth performance during heavy zoom and pan operations - Structuring prompt-to-code pipelines that reliably output valid graph schemas from arbitrary user prompts ## How to vibe code Eraser ### Prerequisites - Node.js (free): Required for running the Next.js runtime and package ecosystem. - GitHub (free): Hosts the source control repository and enables OAuth integration. ### Recommended AI tools - Claude Code: Handles complex multi-file scaffolding and debugging loops across the full stack. - Cursor: Ideal for iterative UI component styling and precise frontend refactoring. ### Stack - Frontend: Next.js with Tailwind CSS, Lucide icons, and a custom canvas or React Flow setup - Backend: Next.js App Router API endpoints with better-auth - Database: Turso (SQLite at the edge) via Drizzle ORM - Auth: better-auth - Payments: none - Other: OpenAI API for DiagramGPT generation, Liveblocks for multiplayer state and presence synchronization ### Hosting - Vercel (Hosting the Next.js frontend and serverless API functions): $0/mo - Turso (Serverless SQLite database for storing documents and diagrams): $0/mo ### Build guide 1. **Project Scaffolding and Database Schema** — Initialize the Next.js 16 project with Tailwind CSS, configure Drizzle ORM with Turso SQLite, and set up better-auth for secure user accounts. ``` Create a new Next.js project using the App Router, Tailwind CSS, and TypeScript. Set up Drizzle ORM configured for Turso SQLite. Define a database schema with tables for users, workspaces, documents (storing markdown content), and diagrams (storing diagram-as-code text and node coordinates). Integrate better-auth with email/password and session management. Implement a clean dashboard layout listing user files with creation and deletion actions. ``` 2. **Markdown Note Editor Integration** — Build a split-pane or unified markdown document editor with real-time saving and support for embedding inline figure snapshots. ``` Build a markdown document editor view in Next.js using a robust textarea or rich text interface with live markdown preview. Implement automatic debounced saving to the documents table via server actions. Add a custom syntax extension or block type that allows users to reference and embed live-updating diagram figures inside their markdown documents, pulling the snapshot directly from associated diagram records. ``` 3. **Infinite Canvas and Diagram-as-Code Parser** — Implement a high-performance infinite canvas component with zoom, pan, and a text parser that translates diagram-as-code syntax into visual nodes and edges. ``` Create an infinite canvas component supporting smooth mouse panning and zooming using HTML5 Canvas or SVG transformations. Build a diagram-as-code text parser that reads custom text syntax (nodes, arrows, groupings) and computes layout positioning for boxes and connectors. Render the parsed nodes interactively on the canvas with selection, dragging, and styling capabilities, while keeping a synchronized text editor pane for raw source editing. ``` 4. **AI Diagram Generation (DiagramGPT)** — Integrate the OpenAI API to translate natural language prompts into structured diagram-as-code definitions and auto-render them on the canvas. ``` Implement an AI generation endpoint using the OpenAI API that accepts a natural language prompt describing a system architecture, data flow, or ERD. Prompt the model to return structured diagram-as-code syntax conforming to our parser schema. Build a user interface modal with a prompt input box that streams the AI response, parses the resulting code, and auto-renders the generated nodes onto the active canvas workspace. ``` 5. **Real-time Multiplayer Collaboration** — Integrate Liveblocks to enable real-time cursor presence, live document co-editing, and synchronized canvas state across active users. ``` Integrate Liveblocks into the application to power real-time multiplayer collaboration. Configure room presence to display active collaborators' cursors with names and colors on both the document editor and infinite canvas. Set up Yjs shared data structures so that diagram-as-code text edits and canvas node movements synchronize instantly across all connected clients in the same file room without flickering. ``` 6. **Export Utilities and Polish** — Add file export options for PNG, SVG, and Markdown, alongside version history snapshots and final UI polish. ``` Implement export utilities allowing users to download their canvas diagrams as PNG, SVG, or plain image files, and export markdown notes with embedded figures. Build a lightweight version history mechanism that captures hourly snapshots of document and diagram states in the database, allowing users to view and restore past revisions. Polish the UI with dark mode support, keyboard shortcuts (like ⌘K command palette), and loading state indicators. ``` ### Cost vs paying **Starting costs (one-time):** - AI Coding Assistant subscription: $20 - Total: ~$20 one-time **Ongoing costs (monthly):** - Vercel & Turso Hobby tiers: $0/mo - OpenAI API usage: ~$5/mo - Total: ~$5/mo - Paying for the SaaS instead: $15/mo (Starter plan) - Build time: 40-60 hours - AI tool credits: $20 (Claude Pro / Cursor) - Break-even: 1 month of paid SaaS vs AI credits ## Sources - [Eraser Official Website](https://www.eraser.io) - [Eraser DiagramGPT Docs](https://www.eraser.io/diagramgpt) - [GetLatka SaaS Metrics - Eraser.io](https://getlatka.com)