{"enrichment":{"faq":[{"a":"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.","q":"How do I create technical architecture diagram with diagram-design?"},{"a":"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.","q":"What diagram types does diagram-design support?"},{"a":"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.","q":"Can I customize diagram styles to match my brand?"},{"a":"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.","q":"How does diagram-design export diagrams?"},{"a":"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.","q":"What design principles does diagram-design apply?"},{"a":"Yes, diagram-design is released under the MIT license, making it free to use, modify, and distribute for both commercial and personal projects.","q":"Is diagram-design open source?"}],"shadow_tags":["svg-generation","diagramming-tool","visual-documentation","design-system-tokens","editorial-design","technical-visualization","chart-types","layout-primitives","brand-customization","html-export"],"summary_rewrite":"Generate 27 types of technical and product diagrams\u2014from architecture and flowcharts to data models and security matrices\u2014as 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."},"files":[{"bytes":28044,"path":"skills/diagram-design/SKILL.md","sha256":"46a18ae012ab85a068029a879469af0e6b25fc04b169a23384c31800339f9b35","url":"https://skillfed.io/files/cathrynlavery/diagram-design/diagram-design/a9046268/SKILL.md"}],"id":"cathrynlavery/diagram-design/diagram-design","links":{"html":"https://skillfed.io/cathrynlavery/diagram-design/diagram-design","md":"https://skillfed.io/cathrynlavery/diagram-design/diagram-design.md","repo":"https://github.com/cathrynlavery/diagram-design"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":214,"language":"HTML","last_updated":"2026-07-15","license":"MIT","name":"diagram-design","publisher":"cathrynlavery","stars":2892},"relations":{"similar":[{"id":"alfredolopez80/multi-agent-ralph-loop/diagram-design"},{"id":"guanyang/open-agent-hub/baoyu-diagram"},{"id":"JimLiu/baoyu-skills/baoyu-diagram"},{"id":"alfredolopez80/multi-agent-ralph-loop/architecture-diagram"},{"id":"pedronauck/skills/architecture-diagram"},{"id":"serejaris/personal-corp-skills/html-draft"},{"id":"Cocoon-AI/architecture-diagram-generator/architecture-diagram"},{"id":"glebis/claude-skills/brand-agency"},{"id":"yizhiyanhua-ai/fireworks-tech-graph/fireworks-tech-graph"},{"id":"NousResearch/hermes-agent/concept-diagrams"}]},"slug":{"owner":"cathrynlavery","repo":"diagram-design","skill":"diagram-design"},"version":"a9046268"}