DrawCMS

DrawCMS draws technical diagrams that move. Motion presets show which way a request travels, and presentation steps walk a viewer through the system in an order you choose. You can draw by hand or let an AI agent build the diagram on the same canvas. The self-hosted editor keeps everything in the browser, needs no account, and exports PNG or animated GIF.

The palette has 75 elements across 17 diagram types, including system architecture, sequence, ER, BPMN, network and CI/CD pipeline diagrams. Picking a type narrows the palette to that notation, and AWS, GCP, Azure and infrastructure icons sit next to it. Eighteen templates open with motion and presentation steps already set. Motion and narration are kept apart from the layout. A preset attaches to a single node or connector, so retiming an animation never moves anything. Each presentation step highlights its own nodes and connectors, with wording you write. A diagram is one .drawcms file that carries its motion and steps with it. AI agents work through the editor's own tools. In a browser that supports WebMCP, an agent can read, build, edit and validate the diagram on the live canvas, and a single undo reverses a whole batch of its edits. A separate agent skill for Claude Code, Codex CLI, Cursor and OpenCode generates a diagram from a description or a repository and writes a file the self-hosted editor opens. On Cloudflare, the Next.js app builds with OpenNext into one Worker with static assets and no storage bindings. Autosave goes to the browser's local storage, and Save downloads a .drawcms file. The hosted DrawCMS Cloud runs the same editor and adds accounts, share links, embeds and SVG and MP4 export for a subscription.

Built for: Engineers and technical writers who explain systems in docs, design reviews or talks and want diagrams that show how requests move

An alternative to: Eraser, Lucidchart

What you can use it for

• Animate the request path through an architecture diagram for a design review
• Turn a sequence diagram into a narrated walkthrough for onboarding docs
• Have a coding agent draft a diagram from a repository, then refine it by hand
• Export an animated GIF of a deployment pipeline for a README or a slide

Deploy

• CLI

  No D1, KV or R2 to create and no environment variables; the Worker comes up on workers.dev. The README also shows a Deploy to Cloudflare button, but it runs the plain Next.js build script, which skips the OpenNext step these commands run.

  npx wrangler login
  git clone https://github.com/drawcms/drawcms.git
  cd drawcms
  npm install
  npm run build:cloudflare
  npm run deploy:cloudflare

  Copy
  Docs

Needs Node.js and a Cloudflare login on a local machine. The OpenNext build takes a few minutes, and nothing has to be created in the dashboard.

Good to know

Diagrams stay in the browser that made them; moving work between devices means saving and opening .drawcms files. There is no sign-in, so each visitor works in their own browser storage. Share links, embeds, account storage and SVG or MP4 export are only in the paid DrawCMS Cloud. Agent editing on the live canvas needs a browser that supports WebMCP; other browsers show the plain editor. Young project: the repository was created in September 2026.

Cost on Cloudflare

Where this comes from

• Repositoryhttps://github.com/drawcms/drawcms
• App websitehttps://drawcms.com
• Documentationhttps://drawcms.com/docs