diagram-design

diagram-design's known boundaries: a first run under the default style guide pauses to ask for brand information; fonts come from Google by default, and the --offline flag will reject files that load them; PNG export requires Playwright and Chromium.

diagram-design can draw 44 chart types, outputs an HTML file with a single inline SVG, supports redrawing Mermaid, draw.io, and Excalidraw source files, and includes a guided step to extract colors and fonts from the user's website.

diagram-design's SKILL.md is 30.5 KB in size, and CI limits it to within 40000 bytes because it is fully loaded into the context window on every call.

diagram-design's references/ directory contains 62 Markdown files, totaling about 710 KB; assets/ contains 204 example diagrams and templates; scripts/ has five Python files that use only the standard library.

diagram-design's style rules include: split once there are more than nine nodes; use the accent color on only one or two elements; no shadows; all connectors are right-angle polylines, no diagonals; structural geometry aligns to a 4px grid; do not copy Mermaid's automatic layout.

Scanning all 204 examples in diagram-design with a short Node script revealed: the only external host is fonts.googleapis.com; ten files contain script, all animation variants; the median file size is 12.6 KB, and the largest is a 208 KB animated exploding keyboard diagram.

diagram-design's built-in export_svg.py can convert the 208 KB example into an 8703-byte standalone SVG with ids prefixed, making it easy to coexist with other diagrams on one page.

diagram-design's import script only parses text and never renders or fetches; the importer only reads flowcharts, sequence diagrams, state diagrams and ER diagrams, and rejects Gantt charts, timelines, journey maps, Sankey diagrams and quadrant charts.

diagram-design's adversarial examples hide 'IGNORE ALL PREVIOUS INSTRUCTIONS' inside node labels, and the extractor keeps it as escaped text and discards four style directives and a click handler.

After a tester deliberately broke three header rules of a flowchart (emphasis color on all seven nodes, drop shadows on six, and one diagonal arrow), diagram-design's own self_check.py let it pass outright; the geometry validator caught the diagonal line, but it sits outside the skill folder installed by npx skills add; the palette lint said nothing; no script checks shadows.

diagram-design's self_check.py is a safety and accessibility gate, not a taste gate; after the tester added a remote image and deleted the <title>, it reported five issues.

The diagram-design project on GitHub is authored by Cathryn Lavery, is made into an agent skill, and uses the MIT license.

diagram-design is a structured skill written for Claude Code, used to produce editorial-style diagrams.

diagram-design packages 27 visual types.

Each visual type in diagram-design provides three sets of static examples: light, dark, and full editorial.

The static examples in diagram-design require no build steps, have no JavaScript dependencies, and have no external image dependencies.

diagram-design introduces 7 categories of behavioral patterns, which first classify abstract behavioral concepts and then map them to the closest available visual types.

diagram-design supports directly reusing raw files made with draw.io (.io) or Mermaid, redrawing them using the same design system at specified target dimensions and detail levels.

diagram-design offers two installation paths—hosted installation and local path installation—which differ in their update mechanisms.

When updating the hosted installation of diagram-design, styleguide.md is overwritten, erasing the user's custom style configuration.