DevWhiteboard

Overview

DevWhiteboard is a collaborative diagramming tool built specifically for software architecture, the kind of diagram you’d draw in a system-design interview or a design doc. It ships with a curated palette of real infrastructure parts, services, queues, caches, load balancers, LLM/model nodes, and pre-wired patterns, so you’re dragging and labeling instead of drawing boxes from scratch. Multiple people can edit the same diagram live. The standout part: AI agents can draw on it too. Point an agent like Claude Code at a codebase and it’ll analyze the architecture, draw it on a fresh canvas, and hand back a shareable URL, with edits streaming live onto anyone who has that canvas open.

Technical Challenges

• Real-time multi-user editing means every diagram operation, adding a node, drawing a wire, moving a box, has to sync correctly across clients without stomping on concurrent edits.
• The same editing surface has to be addressable by both a mouse-driven human and an AI agent issuing structured commands, which means the diagram model needs a clean API underneath the canvas, not just canvas-drawing code.
• Multi-tenant workspaces need to stay private by default while still letting an agent authenticate against a specific workspace and nothing else.
• Turning “describe a system in plain English” into a laid-out diagram means mapping loose language onto the same palette and layout rules a human uses by hand.

Solution

• A Node/Express server paired with a Vite client, with Yjs handling CRDT-based sync so concurrent edits from multiple humans, or a human and an agent, converge without conflicts.
• An authenticated MCP endpoint at /mcp, gated by a per-workspace bearer token, exposes tools like get_palette, create_diagram, and update_diagram, giving an agent the same diagram primitives a person uses by dragging and wiring nodes.
• Diagrams and workspaces are multi-tenant and private, Stripe billing gates the account tier: Free is capped at 3 diagrams, Pro is unlimited.
• An admin console handles account and billing oversight, with scrypt-hashed auth for user accounts.
• PNG and SVG export lets a finished diagram leave the canvas for a doc or a slide.

Key Features

• AI agents draw on the canvas: authenticated MCP endpoint (get_palette, create_diagram, update_diagram) with per-workspace bearer tokens
• Agent edits stream live onto anyone’s open canvas
• Describe a system in plain English and watch it get drawn
• Curated palette of real software parts: services, queues, caches, load balancers, LLM/model nodes
• Pre-wired patterns for common architectures
• Live multi-user editing via Yjs
• PNG/SVG export
• Multi-tenant private workspaces
• Stripe billing: Free capped at 3 diagrams, Pro unlimited