diagram-design
Create branded architecture, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, loop/flywheel, nested, tree, org chart, layer stack, Venn, pyramid/funnel, bar, line, Gantt and scatter charts, high-level, process, medallion, data flow, DP integration, or DP security matrix diagrams as standalone Material Design 3 HTML/SVG/PNG with subtle Google colors. Redraw .drawio/.drawio.png/.drawio.svg or Mermaid .mmd sources at a chosen size/detail; onboard brand tokens from a website; add semantic patterns, callouts, accessible motion, or sketchy/hand-drawn styling.
- Version
- 3.0
- License
- MIT
Pinned to revision 99be7873d243, so it is the text this page describes rather than whatever the author pushed since.
Files
- skills/diagram-design/SKILL.md
- skills/diagram-design/GEMINI.md
- skills/diagram-design/README.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
- skills/diagram-design/assets/example-dp-integration.html
- skills/diagram-design/assets/example-dp-security-matrix-dark.html
- skills/diagram-design/assets/example-dp-security-matrix-full.html
- skills/diagram-design/assets/example-dp-security-matrix.html
- skills/diagram-design/assets/example-er-dark.html
- skills/diagram-design/assets/example-er-full.html
- skills/diagram-design/assets/example-er.html
- skills/diagram-design/assets/example-flowchart-dark.html
- skills/diagram-design/assets/example-flowchart-full.html
- skills/diagram-design/assets/example-flowchart.html
- skills/diagram-design/assets/example-gantt-dark.html
- skills/diagram-design/assets/example-gantt-full.html
- skills/diagram-design/assets/example-gantt.html
- skills/diagram-design/assets/example-high-level-dark.html
- skills/diagram-design/assets/example-high-level-full.html
- skills/diagram-design/assets/example-high-level-vertical-dark.html
- skills/diagram-design/assets/example-high-level-vertical-full.html
- skills/diagram-design/assets/example-high-level-vertical.html
- skills/diagram-design/assets/example-high-level.html
- skills/diagram-design/assets/example-import-drawio.html
- skills/diagram-design/assets/example-import-mermaid.html
- skills/diagram-design/assets/example-it-state-dark.html
- skills/diagram-design/assets/example-it-state-full.html
- skills/diagram-design/assets/example-it-state.html
- skills/diagram-design/assets/example-layers-dark.html
- skills/diagram-design/assets/example-layers-full.html
- skills/diagram-design/assets/example-layers.html
- skills/diagram-design/assets/example-line-dark.html
- skills/diagram-design/assets/example-line-full.html
- skills/diagram-design/assets/example-line.html
- skills/diagram-design/assets/example-loop-dark.html
- skills/diagram-design/assets/example-loop-full.html
- skills/diagram-design/assets/example-loop-terminal.html
- skills/diagram-design/assets/example-loop.html
- skills/diagram-design/assets/example-medallion-dark.html
- skills/diagram-design/assets/example-medallion-full.html
- skills/diagram-design/assets/example-medallion.html
- skills/diagram-design/assets/example-nested-dark.html
- skills/diagram-design/assets/example-nested-full.html
- skills/diagram-design/assets/example-nested.html
- skills/diagram-design/assets/example-org-chart-dark.html
- skills/diagram-design/assets/example-org-chart-full.html
- skills/diagram-design/assets/example-org-chart.html
- skills/diagram-design/assets/example-paved-road-animated.html
- skills/diagram-design/assets/example-policy-trace-animated.html
- skills/diagram-design/assets/example-process-dark.html
- skills/diagram-design/assets/example-process-full.html
- skills/diagram-design/assets/example-process.html
- skills/diagram-design/assets/example-pyramid-dark.html
- skills/diagram-design/assets/example-pyramid-full.html
- skills/diagram-design/assets/example-pyramid.html
- skills/diagram-design/assets/example-quadrant-consultant.html
- skills/diagram-design/assets/example-quadrant-dark.html
- skills/diagram-design/assets/example-quadrant-full.html
- skills/diagram-design/assets/example-quadrant.html
- skills/diagram-design/assets/example-queue-animated.html
- skills/diagram-design/assets/example-radar-dark.html
- skills/diagram-design/assets/example-radar-full.html
- skills/diagram-design/assets/example-radar.html
- skills/diagram-design/assets/example-scatter-dark.html
- skills/diagram-design/assets/example-scatter-full.html
- skills/diagram-design/assets/example-scatter.html
- skills/diagram-design/assets/example-sequence-dark.html
- skills/diagram-design/assets/example-sequence-full.html
- skills/diagram-design/assets/example-sequence-oauth-dark.html
- skills/diagram-design/assets/example-sequence-oauth-full.html
- skills/diagram-design/assets/example-sequence-oauth.html
- skills/diagram-design/assets/example-sequence.html
- skills/diagram-design/assets/example-state-dark.html
- skills/diagram-design/assets/example-state-full.html
- skills/diagram-design/assets/example-state.html
- skills/diagram-design/assets/example-swimlane-dark.html
- skills/diagram-design/assets/example-swimlane-full.html
- skills/diagram-design/assets/example-swimlane.html
- skills/diagram-design/assets/example-timeline-dark.html
- skills/diagram-design/assets/example-timeline-full.html
- skills/diagram-design/assets/example-timeline.html
- skills/diagram-design/assets/example-tree-dark.html
- skills/diagram-design/assets/example-tree-full.html
- skills/diagram-design/assets/example-tree.html
- skills/diagram-design/assets/example-venn-dark.html
- skills/diagram-design/assets/example-venn-full.html
- skills/diagram-design/assets/example-venn.html
- skills/diagram-design/assets/icons.html
- skills/diagram-design/assets/index.html
- skills/diagram-design/assets/template-dark.html
- skills/diagram-design/assets/template-full.html
- skills/diagram-design/assets/template-motion.html
- skills/diagram-design/assets/template-terminal.html
- skills/diagram-design/assets/template.html
- skills/diagram-design/gemini-extension.json
- skills/diagram-design/references/animation.md
- skills/diagram-design/references/export.md
- skills/diagram-design/references/import-drawio.md
- skills/diagram-design/references/import-mermaid.md
- skills/diagram-design/references/onboarding.md
- skills/diagram-design/references/output-spec.md
- skills/diagram-design/references/primitive-annotation.md
- skills/diagram-design/references/primitive-icons.md
- skills/diagram-design/references/primitive-sketchy.md
- skills/diagram-design/references/primitive-terminal.md
- skills/diagram-design/references/profiles.md
- skills/diagram-design/references/semantic-patterns.md
- skills/diagram-design/references/style-guide.md
- skills/diagram-design/references/type-architecture.md
- skills/diagram-design/references/type-bar.md
- skills/diagram-design/references/type-data-flow.md
- skills/diagram-design/references/type-dp-integration.md
- skills/diagram-design/references/type-dp-security-matrix.md
- skills/diagram-design/references/type-er.md
- skills/diagram-design/references/type-flowchart.md
- skills/diagram-design/references/type-gantt.md
- skills/diagram-design/references/type-high-level.md
- skills/diagram-design/references/type-it-state.md
- skills/diagram-design/references/type-layers.md
- skills/diagram-design/references/type-line.md
- skills/diagram-design/references/type-loop.md
- skills/diagram-design/references/type-medallion.md
- skills/diagram-design/references/type-nested.md
- skills/diagram-design/references/type-org-chart.md
- skills/diagram-design/references/type-process.md
- skills/diagram-design/references/type-pyramid.md
- skills/diagram-design/references/type-quadrant.md
- skills/diagram-design/references/type-radar.md
- skills/diagram-design/references/type-scatter.md
- skills/diagram-design/references/type-sequence.md
- skills/diagram-design/references/type-state.md
- skills/diagram-design/references/type-swimlane.md
- skills/diagram-design/references/type-timeline.md
- skills/diagram-design/references/type-tree.md
- skills/diagram-design/references/type-venn.md
- skills/diagram-design/scripts/drawio_extract.py
- skills/diagram-design/scripts/mermaid_extract.py
- skills/diagram-design/scripts/self_check.py
Every link opens the file at its source, pinned to the revision this page describes.