memobrain

Draw Diagrams — Development skill for Claude Code

Development community

Agent skill: turn any outline into a real, editable mind map - SVG + .xdt + one-click web link.

How to install Draw Diagrams

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

What Draw Diagrams does

Agent skill: turn any outline into a real, editable mind map - SVG + .xdt + one-click web link. 25 layouts, 9 themes, CJK-aware. Works with Claude Code, Codex, Cursor, DeepSeek Harness and any SKILL.md-compatible agent.

Alternatives in Development

HTML Ppt Skill — HTML PPT Studio — AgentSkill with 24 themes, 31 layouts, 20+ animations for building professional HTML present 8.1k ★
Ars Outline — ARS academic-paper outline-only mode — detailed outline + evidence map 4.5k ★
Beautiful Feishu Whiteboard — 35 curated colour palette styles for building beautiful, editable Feishu / Lark (飞书) whiteboards 687 ★

README

draw-diagrams — an agent skill for mind maps

A [Agent Skills](https://www.anthropic.com/research/equipping-agents-for-the-real-world-with-agent-skills) package (SKILL.md + one zero-dependency Python script) that teaches any SKILL.md-compatible coding agent (Claude Code, Codex, Gemini CLI, Cursor, Copilot, and 20+ others) to turn text into a real, editable mind map:

.svg — a clean static image for docs / PRs / chat.
.xdt — the editable source file (MemoBrain format).
A one-click link — https://app.memobrain.net/?import=… opens the diagram in the browser, already laid out, fully editable. Free to edit, free account to save, membership for watermark-free export and more.
25 layouts (--layout fishbone, h-timeline, tree-table, matrix-h…) and 9 color themes (--theme forest, blackboard…) — carried by the link, baked into the .xdt (app's colorizeForTheme semantics: node/edge colors + straight/curve branch lines + canvas), and rendered in the .svg preview.

The generated `.xdt` stores the tree plus (for non-default themes) baked theme colors — no coordinates ever. Layout and 30 layout modes happen inside [MemoBrain](https://memobrain.net) when opened — the skill never guesses geometry. CJK-aware text measuring keeps Chinese/Japanese/Korean labels inside their node boxes.

Install

One command (works with Claude Code, Codex, Cursor, Gemini CLI and other agents the CLI detects):

npx skills add memobrain/draw-diagrams

Or copy this folder into your agent's skills directory:

Agent	Location
Claude Code (personal)	`~/.claude/skills/draw-diagrams/`
Claude Code (project)	`.claude/skills/draw-diagrams/`
Tool-agnostic (many agents)	`~/.agents/skills/draw-diagrams/`
DeepSeek Harness	nothing to configure — it auto-discovers `~/.agents/skills/`
Others	any folder your agent discovers SKILL.md from