diagram-design
Generate 27 types of technical and product diagrams—from architecture and flowcharts to data models and security matrices—as self-contained HTML files with embedded SVG. The skill enforces a shared design system with a first-run customization gate that extracts your brand colors and fonts from your website, ensuring diagrams match your visual identity without manual setup.
Diagram Design creates technical diagrams as self-contained HTML files with inline SVG, supporting 27 diagram types.
AI-generated summary based on this skill's SKILL.md
Install
cathrynlavery/diagram-design/diagram-design · repository language: HTML
git clone https://github.com/cathrynlavery/diagram-design
cp -r diagram-design/skills/diagram-design ~/.claude/skills/diagram-designFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I create technical architecture diagram with diagram-design?
diagram-design generates technical architecture diagrams as self-contained HTML files with embedded SVG. You define your system components, connections, and layers, and the skill renders them with your brand colors and typography automatically applied from your design system. No external tools or manual styling required.
What diagram types does diagram-design support?
diagram-design generates 27 types of diagrams including flowcharts, data models, ER diagrams, swimlane process diagrams, org charts, sequence diagrams, state machines, timelines, quadrant matrices, Gantt charts, data flow diagrams, pyramid funnels, Venn diagrams, scatter plots, infrastructure diagrams, bar charts, line charts, radar charts, and more.
Can I customize diagram styles to match my brand?
Yes. diagram-design enforces a shared design system with a first-run customization gate that extracts your brand colors and fonts directly from your website. Once configured, all diagrams automatically match your visual identity without manual setup or per-diagram styling.
How does diagram-design export diagrams?
diagram-design exports diagrams as self-contained HTML files with inline SVG, making them portable and ready to embed anywhere. The skill supports multiple variants and formats, allowing you to generate different versions of the same diagram for different contexts or use cases.
What design principles does diagram-design apply?
diagram-design applies design system principles with complexity budgets, ensuring diagrams remain readable and maintainable. It enforces visual consistency across all 27 diagram types while respecting your brand identity and keeping cognitive load within acceptable limits.
Is diagram-design open source?
Yes, diagram-design is released under the MIT license, making it free to use, modify, and distribute for both commercial and personal projects.
SKILL.md
rendered from the published skill — quoted content, verbatim
Diagram Design
Create visual diagrams as self-contained HTML files with inline SVG and CSS, following an opinionated editorial design system.
Twenty-seven diagram types. One shared design system, complexity budget, and taste gate. Type-specific conventions live in references/ and are loaded only when you pick a type.
0. First-time setup — style guide gate
**Before generating your first diagram in a new project, verify the style guide has been
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 15 files
skills/diagram-design/SKILL.md
skills/diagram-design/assets/example-architecture-dark.html
skills/diagram-design/assets/example-architecture-full.html
skills/diagram-design/assets/example-architecture.html
skills/diagram-design/assets/example-bar-dark.html
skills/diagram-design/assets/example-bar-full.html
skills/diagram-design/assets/example-bar.html
skills/diagram-design/assets/example-data-flow-dark.html
skills/diagram-design/assets/example-data-flow-full.html
skills/diagram-design/assets/example-data-flow.html
skills/diagram-design/assets/example-datalake-dark.html
skills/diagram-design/assets/example-datalake-full.html
skills/diagram-design/assets/example-datalake.html
skills/diagram-design/assets/example-dp-integration-dark.html
skills/diagram-design/assets/example-dp-integration-full.html