DiagramsCAN I VIBECODE
Eraser?
BUILD FIRST
- One specific customer type and one primary use case
- A vertical slice that completes the main job without manual workarounds
- Visible limits, review steps, and a fallback when an external dependency fails
LEAVE FOR LATER
- Broad third-party integrations
- High-scale collaboration, syncing, and permissions
- Automation that can cause harm without human review
RESEARCH NOTES
What this tool actually does.
Eraser (eraser.io) is an AI-powered diagramming and technical documentation tool aimed at software engineers. It generates editable diagrams — architecture, sequence, flow, ERD, and BPMN — from natural-language prompts, pasted code, uploaded images, or files such as Terraform configs and database schemas, then auto-arranges layout. Its differentiator is diagram-as-code: every diagram is stored as human-readable, markdown-style text that can be read, diffed, reviewed, and edited via a visual editor or a VS Code extension. AI output is fully editable and refinable by chat. Templates, style rules, and references keep diagrams consistent and on-brand. It integrates with GitHub (Eraserbot monitors a connected repository and updates diagrams/docs as code changes), Notion, Confluence, Slack, and exposes an MCP server for coding agents. Design docs get a markdown editor and can sync to Confluenc
RESEARCHED BUILD PROMPT
Give this to your coding agent.
Build 'DiagramScribe', an open-source web app replacing Eraser's core diagram-as-code workflow: engineers author technical diagrams as text in a split-pane editor and see a clean, auto-laid-out diagram (architecture, sequence, flow, ERD) rendered on an infinite canvas. Requirements: (1) a small documented custom syntax for entities, relations, sequence actors/messages, and style hints, with auto-layout and SVG/PNG/Mermaid export; (2) a local-first file-based store where each diagram/doc is a Markdown file, so teams can version and diff diagrams in Git with a tiny CLI (e.g., `diagramscribe render`, `diagramscribe watch`) — a watcher mode regenerates diagrams when source files change; (3) optional AI generation via any OpenAI-compatible API: pasting a code snippet or describing a system yields diagram code that stays fully editable; LLM features must be off by default with no vendor lock-in; (4) a minimal Markdown editor for design docs that embeds diagrams; (5) rendering in the browser, not server-side images. Use TypeScript + React, an SVG/canvas renderer, and a declarative layout engine (Dagre or ELK); persist as Markdown + a lockfile. Do NOT copy Eraser's brand, logo, UI styling, or proprietary syntax; invent your own syntax and visual design. Out of scope: real-time multiplayer collaboration, hosted SaaS, native GitHub/Notion/Confluence integrations, or any SOC 2/compliance claims. Deliver a README covering setup, full syntax reference, and known limitations (layout edge cases, LLM output quality, degraded performance on very large diagrams).