drawcms

Drawcms — AI skill for Claude Code

AI community

The animated diagram editor AI agents can draw on.

How to install Drawcms

This entry records only its repository, not the path inside it, so there is no exact command to give. Open drawcms/drawcms and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Drawcms does

The animated diagram editor AI agents can draw on. Animated technical diagrams (architecture, sequence, BPMN, cloud icons) built by you and your agent together on the same live canvas, via WebMCP. Open-source, local-first.

Alternatives in AI

Business Model — Generate Business Model Canvas with all 9 building blocks 7.8k ★
Architecture Diagram Generator — Generate beautiful dark-themed system architecture diagrams as standalone HTML/SVG files 7k ★
Pixel Agents — Compressed Reference — VS Code extension with embedded React webview: pixel art office where AI agents (Claude Code terminals) are an 6.5k ★

README

Diagrams that explain how a system moves, not just how it is wired.

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