Describe a flow to your AI agent, or draw it yourself. DrawCMS turns it into an animated technical diagram you can narrate step by step, export as a GIF, and keep as a portable file. Local-first, no account required.

Documentation · Get started · Agent tools · Blog · License

The agent drives the editor. No API keys, no screenshots, no simulated clicks — it calls the editor's own tools.

The result. A sequence diagram with connector motion and a narrated step order

Works with Claude Code, Codex CLI, Cursor, and OpenCode.

npx skills add drawcms/drawcms-skill -gSend this to your agent:

Use DrawCMS to diagram a checkout request: the browser hits the API gateway,

the gateway publishes to a queue, a worker writes to Postgres, and the

response flows back. Animate the request path and narrate it in three steps.

Then keep going — “add a Redis cache”, “highlight the failure path”, or “make the queue pulse slower”.

No repository required. Start from a description, or point the agent at a repository for a source-backed architecture diagram.

Every diagram is one portable .drawcms file. Export it as PNG or an animated GIF, or hand the file to someone else and they get the motion and the narration with it.

The editor engine and the web application are a single Next.js project. Clone it, install it, run it — that is the entire setup.

git clone https://github.com/drawcms/drawcms.git drawcms

cd drawcms

npm install

npm run devOpen http://localhost:3002. The app is the editor and redirects there from every route.

17 diagram types, their element sets, and the templates that ship with them

Picking a diagram type in the elements panel narrows the palette to the elements that notation actually uses, so a sequence diagram offers lifelines and activations rather than BPMN gateways.

Eighteen templates open with motion presets and presentation steps already applied, so a new document is animated before you touch it:

Architecture request flow · Deployment pipeline · Incident timeline · Secure sign-in sequence · Flowchart · Mind map · Org chart · Entity relationship diagram · Data flow diagram · Timeline · Class diagram · State diagram · Deployment diagram · Component diagram · Use case diagram · Network diagram · Activity diagram · User flow diagram

Alongside the notation sets, the palette carries AWS, GCP, Azure, and infrastructure icons (Docker, Kubernetes, Redis, PostgreSQL, and more), plus container elements — groups, regions, security and trust boundaries, processing stages, sequence frames, swimlanes, and BPMN pools — that accept dragged-in children.

The engineering behind it

- One app, no package dance — the engine and the host live in the same Next.js project. There is no build-then-link step between them.

- A documented boundary — both layers talk through the editor's public API (src/editor/index.ts) and a persistence boundary, so storage backends swap without touching canvas code.

- A visual grammar, not a shape list — elements carry semantic purpose, suitable and unsuitable uses, compatible diagram types, and motion guidance. Agents query it before they draw, and drawcms_validate_diagramchecks the result against it.

- Undoable agent edits — drawcms_edit_diagramapplies a batch as a single history entry, reversible with one Mod+Z. Agent work and manual work share one undo stack.

- Motion separate from structure — retiming a diagram never rewrites its nodes, and rewriting narration never touches motion.

- Accessibility as a constraint — keyboard-complete chrome, named controls, and prefers-reduced-motionrespected by every preset.

- Deliberately webpack — dev and build use webpack rather than Turbopack, on purpose.

DrawCMS is not a general-purpose drawing tool and not a Mermaid renderer. It exists to turn a system you understand into something someone else can follow.

From description to exported artifact

The editor registers a WebMCP toolset with the browser's native navigator.modelContext API. In an agent-capable browser — ChatGPT's agentic browsing, or any WebMCP-compatible host — the agent creates animated diagrams directly on the live canvas. No API keys, no servers, no simulated pointer input. Browsers without WebMCP render the ordinary editor.

Because the agent edits the same canvas you do, working together is co-editing rather than file handoff. Agent authoring details live in docs/webmcp.md; the CLI skill is documented in docs/agent-skill.md.

Mod is Cmd on Apple platforms and Ctrl elsewhere. Menus format their hints from the same table that binds the keys, so a label and its binding cannot drift.

src/

app/ Next.js application shell — layout, editor route, theme

toggle, local persistence wiring (the "host" layer)

editor/ The editor engine — canvas, element catalog, document

format, motion, presentation, persistence boundary, WebMCP

tools, templates, and the test suite

public/ Static assets (cloud provider icons, GIF worker)

docs/ Documentation content, rendered by site/

blog/ Blog posts, rendered by site-blog/

src/app wires the engine into a full product: autosave with a save-status pill, theming, and the “Made with DrawCMS” badge.

React 19 · React Flow v12 · GSAP · Next.js 16 · Tailwind CSS v4 · Vitest

npm run dev # editor on :3002 with hot reload

npm run ci # lint → format:check → typecheck → test → build → site builds

npm run docs:dev # documentation site on :4321

npm run blog:dev # blog on :4322CI runs exactly npm ci && npm run ci on Node 24. The suite is 512 tests.

Guides and release notes live at drawcms.com/docs, the blog at drawcms.com/blog.

GitHub is the CMS — how docs and the blog are published

The docs and blog are part of this repository. Pages live in docs/, posts in blog/. Two Astro sites render them: site/ (docs, served at drawcms.com/docs) and site-blog/ (blog, served at drawcms.com/blog), both deployed as static assets on Cloudflare Workers next to the app worker and routed by path.

A merged pull request touching the sites or their content publishes. Blog posts support draft: true for merge-before-publish workflows. Deploys run through GitHub Actions — set the CLOUDFLARE_API_TOKEN and CLOUDFLARE_ACCOUNT_ID repository secrets — or manually with npm run docs:deploy and npm run blog:deploy. The main app deploys separately and never rebuilds for docs-only changes.

- Quick start · Core concepts · Document format

- Agent skill · WebMCP · Plugin and host API · API versioning

- Self-hosting · Cloud · Upgrading

- Accessibility · Browser support · Performance · Design system

- Importer limitations — .drawioand.excalidrawimports produce a non-blocking report of what could not be carried across

Real-time multiplayer editing, hosted sharing, and automatic Mermaid parsing are intentionally outside the current scope of this repository. Hosted collaboration lives in DrawCMS Cloud.

Contributions are welcome after accepting the Contributor License Agreement, which enables the project's dual AGPL and commercial licensing. Read CONTRIBUTING.md before opening a pull request.

The official repository is drawcms/drawcms — please open issues and pull requests here. (dimasna/drawcms-app is a hackathon-purpose repo only.)

Please report security issues privately using the process in SECURITY.md.

DrawCMS is open-source software licensed under GNU AGPL v3.0 only. If you modify it and make that version available to users over a network, the AGPL generally requires you to offer those users the corresponding source code under the AGPL.

The AGPL does not prohibit a compliant competing hosted service. The DrawCMS name and branding are covered separately by TRADEMARKS.md. Organizations that cannot use the AGPL may request a separate commercial license; see COMMERCIAL-LICENSE.md. No commercial rights are granted unless a separate agreement is signed.