An AI agent that can diagram a system architecture is one thing. An agent that draws on the same canvas you are looking at, with motion, narration, and the ability to iterate in real time, is something else entirely. DrawCMS is an open-source editor built around that distinction, and it arrived this week as a fully functional project on GitHub.

The Problem: Static Diagrams and Disconnected Agents

Technical diagrams are a persistent friction point in software teams. Architecture drawings, sequence flows, and deployment maps matter enormously for communication, yet most of them are static artifacts produced by hand or generated through text-to-diagram pipelines that produce lifeless output. Mermaid renders a chart but cannot animate it. Excalidraw and draw.io offer freehand sketching but have no concept of motion semantics or agent co-editing. The gap between a developer who understands a system and a diagram that explains that system to someone else has remained wide.

Meanwhile, AI coding agents have gotten remarkably good at reasoning about codebases and system structures. But when a developer asks an agent to "diagram the checkout flow," the agent typically responds with text, code, or a static image. There is no shared canvas where human intent and agent output coexist and evolve.

What DrawCMS Actually Is

DrawCMS is an animated diagram editor where the AI agent is a first-class participant. It ships as a single Next.js project, meaning the editing engine and the web application live in one codebase with no build-then-link step between them. Clone the repository, run npm install and npm run dev, and the editor opens at localhost:3002. No account, no server, no configuration. Everything saves to browser storage by default.

The editor supports 17 diagram types, ranging from system architecture and sequence diagrams to BPMN, ERD, state machines, and deployment diagrams. Each type narrows its palette to the notation elements that actually apply. A sequence diagram offers lifelines and activations; a BPMN diagram surfaces gateways and pools. The palette includes 75 elements in total, alongside infrastructure icons for AWS, GCP, Azure, Docker, Kubernetes, Redis, and PostgreSQL.

Motion Is the Point

What separates DrawCMS from a conventional diagram tool is that every element carries motion presets independent of its structural role. A node can pulse, a connector can animate along its path, and a container can expand or contract, all without altering the underlying diagram graph. Retiming a sequence never rewrites the nodes, and rewriting the narration never touches the motion layer.

This matters because a static diagram shows topology; animation shows behaviour. Which direction does a request travel? What component waits? Where does a retry happen? The editor ships with 18 templates that come pre-loaded with motion presets and presentation steps, so a new document is animated before the user writes a single instruction.

How the Agent Actually Works

The agent does not screenshot the canvas or simulate mouse clicks. DrawCMS registers a WebMCP toolset through the browser's native navigator.modelContext API. In an agent-capable browser, such as ChatGPT's agentic browsing mode or any WebMCP-compatible host, the agent calls editor tools directly on the live canvas. Nine tools are available: reading the diagram, exploring the visual grammar, recommending elements and motion from a description, building a complete diagram, editing elements and connections, tidying layout, retiming animation, writing narration steps, and validating the result against the visual grammar.

The project works with Claude Code, Codex CLI, Cursor, and OpenCode. Installation is a single command: npx skills add drawcms/drawcms-skill -g. A developer can then describe a checkout flow and the agent will lay out the architecture, animate the request path, and narrate each step.

From Description to Exported Artifact

The workflow is linear and well-defined. A user describes the system or places elements manually. The recommendation engine maps entity roles onto appropriate elements, connector types, and motion presets. The layout engine builds the full diagram in one call, with lifeline columns for sequences and ranked layers for architecture. The user refines incrementally, each edit as a single undoable batch. Narration steps are authored explicitly, never inferred from the graph. Finally, the diagram exports as PNG or an animated GIF, or persists as a self-contained .drawcms file that carries both the structure and the motion.

The validation layer checks for unregistered elements, shape-purpose mismatches, unsuitable motion assignments, and choreography problems before anything is committed. The entire test suite runs 512 tests against Node 24, and the CI pipeline covers linting, formatting, type checking, testing, building, and site generation.

The Engineering Decisions

The project deliberately uses webpack rather than Turbopack for its dev and build pipeline. Both the engine and the host communicate through a documented public API at src/editor/index.ts, with a persistence boundary that lets storage backends swap without touching canvas code. The visual grammar is not a shape list but a semantic dictionary where elements define suitable and unsuitable uses, compatible diagram types, and motion guidance. Agents query this grammar before drawing.

Accessibility is treated as a constraint, not a checkbox. The chrome is keyboard-complete, controls are named, and every motion preset respects prefers-reduced-motion. Keyboard shortcuts are bound through the same table that renders menu hints, so labels and bindings cannot drift apart.

What This Means for Development Teams

DrawCMS reframes the relationship between a developer's mental model and a diagram. Instead of producing a static artifact after the architecture is settled, the diagram becomes a living conversation between human and agent. An agent co-edits the same canvas, proposes motion, and accepts feedback without the friction of file handoffs. The portability of the .drawcms format means a diagram with animation and narration can be shared as a single file.

The project is intentionally scoped. Real-time multiplayer editing, hosted sharing, and automatic Mermaid parsing are out of scope for the open-source repository, though hosted collaboration exists through DrawCMS Cloud. The project is licensed under GNU AGPL v3.0, with a dual-licensing model that allows organizations to request a separate commercial license.

The documentation and blog live inside the same repository, rendered as static sites on Cloudflare Workers. Two Astro sites serve the docs and the blog, deployed as part of the same pipeline. For a project that positions itself as a tool for making systems understandable, the approach to its own documentation is a fitting reflection of the principle.