Engineering Blog · 13 chapters
ArchDraw Engineering
Deep breakdowns of how we built an interactive diagramming canvas, AI layout compilation, and database sync — the same papers that power the editor you use.
How we made live projects fast
A live project shows each coding-agent session on an architecture diagram. Our first build froze the editor, signed users out and showed agents late. This post shows each cause, the code we changed and the numbers. Each section has a demo that you can change.
Give your coding agent an architecture workspace with ArchDraw
Connect ArchDraw to Codex, Claude Code, or OpenCode so an agent can turn repository context into an editable, shared architecture view while implementation work is happening.
How we built an interactive, state-driven diagramming canvas
A deep conceptual guide on how to design a fluid interactive canvas editor that coordinates nodes, edges, keyboard interactions, and grid alignment under a clean state architecture.
This is why our diagram connections float dynamically instead of breaking
How to design a geometry-driven connection engine that calculates attachment points on the fly and shifts overlapping parallel paths.
How we engineered an 8-stage compiler to generate clean system diagrams
Designing an AI diagram generation pipeline that processes raw prompts, sanitizes graph relations, layouts nodes, and self-heals layouts.
How our local MCP server hooks AI engines directly into the visual workspace
Understanding the Model Context Protocol stdio transport layer and connecting external AI assistants to manipulate canvas files.
How to set up the ArchDraw MCP server in Claude Desktop
A step-by-step guide to connecting the ArchDraw MCP server to Claude Desktop so Claude can generate, edit, validate, and export architecture diagrams directly from the chat window.
How we preserved authored coordinates and achieved high-fidelity template previews
Balancing automated layouts with custom human compositions, and scaling complex vector previews inside tiny dashboard cards.
How one store coordinates active canvas state, multi-canvas tabs, and persistence
Designing a centralized state store that manages tab transitions, historical undo/redo stacks, and debounces database writes.
This is why shared embeds load instantly and securely
Building a lightweight read-only rendering engine for shared links and serializing canvas DOM states into clean SVG vectors.
How we validate architectural topologies dynamically
Designing a flexible graph validation engine that checks semantic relationships and topological paths instead of static node IDs.
That's how our unified component registry powers search and drag-and-drop
Consolidating 150+ cloud resources into a single metadata schema that powers both visual sidebars and keyboard command palettes.
How we achieved pixel-perfect thumbnail parity on the dashboard
Designing static vector previews that share coordinate mathematics with the main canvas to ensure exact visual parity.