Back to timeline

Fri, October 1622:45MCP & SkillsAI codingAgentsMCP & Skills guide

diagram-design: editorial-style diagram skill for coding agents

Decision Brief

What changedcathrynlavery/diagram-design releases an Agent Skill that lets Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid, Pi and other coding agents generate single-file HTML+SVG diagrams from natural language.
Why it mattersIt codifies diagram aesthetics into a strict style guide (4px grid, 1px hairlines, no shadows), saving hours of Figma fiddling for blogs and docs, but the output isn't diffable or draggable, so Mermaid still fits Git-tracked docs better.
Who should careAI coding tool users
Affected stackClaude CodeOpenAICursorCopilot
Builder actionUpdate Claude Code to the latest version
Source confidenceHigh · Official release / blog / repo

The skill supports 45 diagram types, each in minimal light, minimal dark, and full-editorial static variants, output as a self-contained HTML file with inline SVG that opens by double-click, with no build step, JavaScript, or external images. Install via npx skills add cathrynlavery/diagram-design or the plugin-marketplace commands for Claude Code, Codex, GitHub Copilot, and Factory Droid; the cross-agent skills CLI installs the whole skill (references/, assets/, scripts/) into the chosen host directory, symlinking when multiple directories are used so one update syncs all roots. For developers writing blogs or technical docs with Claude Code, Cursor, GitHub Copilot, and similar agents, this means skipping half an hour in Figma for one architecture diagram: describe it in a sentence and the agent picks the type, explains the layout, and writes the HTML file, while an onboard step can pull site colors and fonts for brand consistency. Limits are clear: output quality depends on the model, two runs of the same prompt may lay out differently; the result is a non-editable source format with nothing to diff in a PR and no boxes to drag on a canvas. The docs themselves say Mermaid remains the better choice for Git docs that change every iteration; Diagram Design targets the diagram you're ready to ship.

Summary basis: full article readCompiled from the source scope noted above; the original remains authoritative.

Sources

Related intel

留言

登入后即可留言,和其他 builder 交换实测心得。

还没有留言,抢头香。