excalidraw-skill-pack vs diagram-design

diagram-design is a strong Claude Code skill for editorial HTML+SVG schematics — typed layouts, brand scrape, taste gate, complexity budget. excalidraw-skill-pack shares that ambition for restraint and type-aware layout, then ships a different artifact: editable Excalidraw, theme packages, MCP, and a render→inspect→fix loop that doesn't end at export.

Side-by-side: static HTML+SVG export vs Excalidraw skill pack render-inspect loop
Visual argument generated by this pack: static snapshot vs living editable loop.

The one-line difference

diagram-design ships a self-contained HTML page with inline SVG. excalidraw-skill-pack ships .excalidraw (plus PNG) you can open, theme, audit, and iterate — the loop is the product.

diagram-designexcalidraw-skill-pack
ArtifactStandalone HTML + inline SVGEditable .excalidraw + PNG (+ hydrate to full file)
Open inBrowserExcalidraw, Obsidian, VS Code, browser PNG
Typed layouts~27 editorial types29 progressive type refs (incl. evidence + comparison moats)
Brand skinstyle-guide.md onboarding (URL / skill / folder)Theme packages + project/global config + URL/folder onboarding
TasteDeletion philosophy, complexity budget, pre-output checklistTaste gate + anti-patterns + MCP audit_diagram heuristics
EvidenceEditorial callouts / iconsConcrete code/JSON evidence artifacts + multi-zoom
Render loopExport optional; quality ends at HTMLMandatory render → inspect → fix until the PNG looks right
RuntimeClaude Code skill (HTML authoring)Skill + MCP across Claude Code, Cursor, Codex, Gemini, Copilot
RendererNode + Python pixel-parity Playwright PNG
Best forBlog/essay schematics that must match a site's editorial skinLiving diagrams you keep editing, theming, and proving

What we learned from them

Where we go further

When to choose diagram-design

You want a drop-in HTML schematic for a long-form post, the site already has an editorial SVG grammar, and you don't need the file to open in Excalidraw or Obsidian.

When to choose excalidraw-skill-pack

You want the agent to produce a diagram you'll keep editing; you need brand themes as packages; you want MCP tools and a render-inspect loop; or the diagram must teach with evidence, not just look editorial.

View on GitHub → Also: vs official Excalidraw MCP

MIT licensed. Works in Claude Code, Cursor, Codex, Gemini CLI, and Copilot. Competitor link for context only — we respect their craft.