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
Decision gist · record as of 2026-07-15
Diagram Design creates technical diagrams as self-contained HTML files with inline SVG, supporting 27 diagram types. 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.
Use it when
- diagram-design generates 27 types of diagrams including flowcharts, data models, ER diagrams, swimlane process diagrams, org charts.
- Yes.
Verify before relying
Read SKILL.md below before installing (60 files). Open directory: indexed for reading, not audited.
Install
cathrynlavery/diagram-design/diagram-design · repository language: HTML
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Create technical diagrams as self-contained HTML files with inline SVG”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Diagram Design generates architecture, flowchart, sequence, state machine, ER, timeline, swimlane, quadrant, nested, tree, layer stack, Venn, and pyramid diagrams as standalone HTML with embedded SVG. A first-run style guide gate prompts you to align colors and fonts with your brand before generating, then enforces an opinionated design system centered on restraint—one accent color, minimal nodes, and deletion over addition.
Flow Diagram generates a single self-contained HTML file that visualizes system architectures and request/response flows with a 2-pane layout: an interactive diagram on the left with zoom, pan, and fit-to-view controls, and an explainer sidebar on the right. Click any flow to highlight it with traveling dots along arrows, dim everything else, and reveal its details. Two-way arrows (solid outbound, dashed return) carry numbered step badges colored by semantic meaning—red for auth, purple for scheduled tasks, amber for data pipelines.
Build charts and process diagrams that match OpenAI's design system, complete with their typeface and color palette. The skill provides a zero-dependency renderer for bar charts and hand-assembled flow diagram primitives, both emitted as standalone HTML/SVG suitable for blogs, research pages, and decks.
Transform workflow steps into professional PNG diagrams with connected nodes and directional arrows. Describe your process in plain text, choose a layout direction and visual style, and get a ready-to-share diagram in landscape, square, or social card formats.
Dashmotion generates professional animated technical diagrams as single self-contained HTML+SVG files. Use it for flowcharts, workflows, architecture diagrams, and system topologies—especially when you want connectors that visibly flow and requests that travel as light dots through the system. Output is lightweight, loops forever, and opens in any browser without dependencies.
Anthropic Style Diagram generates semantic SVGs following Anthropic's visual language and design system, then renders them to PNG. The skill handles architecture, flow, and structural diagrams—automatically managing colors, themes, viewBox cropping, and style baking. Author the geometry and meaning; the rendering pipeline owns the design.
More skills design-minimal (MIT) · baoyu-diagram (MIT) · Architecture Diagram (unlicensed) · html-draft (MIT) · architecture-diagram (MIT) · fireworks-tech-graph (MIT) · concept-diagrams (MIT)