#30 by GitHub stars

cathrynlavery/diagram-design

Create branded architecture, architecture delta, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, polar chart (polar/radial lollipop), loop/flywheel, nested, tree, org chart, layer stack, exploded axonometric, axonometric plan, Venn, py

Claude Code Codex Data Design Writing

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

`skills/diagram-design/SKILL.md`

Week of Nov 2, 2026 · +0 / −0 lines

Before Network or broad shell → After Network or broad shell

0cf73c3fcc56 → 45020ddada6b

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Network or broad shell

First observation → 0cf73c3fcc56

No earlier version was observed for comparison.

Compare on GitHub

View on GitHub Add to my skills

Verified commit 45020ddada6bcfb0fd7d52cd742a1ed20818f9f7

Version-pinned installation · Claude Code

git clone --filter=blob:none --no-checkout https://github.com/cathrynlavery/diagram-design.git .hotskills/cathrynlavery-diagram-design && git -C .hotskills/cathrynlavery-diagram-design checkout --detach 45020ddada6bcfb0fd7d52cd742a1ed20818f9f7
# Copy each selected skill directory from .hotskills/cathrynlavery-diagram-design into .claude/skills/<skill-name>/

Version-pinned installation · Codex

git clone --filter=blob:none --no-checkout https://github.com/cathrynlavery/diagram-design.git .hotskills/cathrynlavery-diagram-design && git -C .hotskills/cathrynlavery-diagram-design checkout --detach 45020ddada6bcfb0fd7d52cd742a1ed20818f9f7
# Copy each selected skill directory from .hotskills/cathrynlavery-diagram-design into .agents/skills/<skill-name>/

65.5kGitHub stars

2.1kstars in 7 days

1skill in this repository

156commits in 30 days

Heat

7.8

Star growth, last 7 daysAhead of 95% of tracked repositories
Star growth, last 24 hoursAhead of 91% of tracked repositories
Rank movement, last 7 daysAhead of 73% of tracked repositories
Commits, last 30 daysAhead of 96% of tracked repositories
Accounts asking about it through MCP, last 7 daysNot available
Hot votes this weekAhead of 0% of tracked repositories

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

Individual skills in this repository

diagram-design skills/diagram-design

How it works

diagram-design

When your agent uses it

Create branded architecture, architecture delta, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, polar chart (polar/radial lollipop), loop/flywheel, nested, tree, org chart, layer stack, exploded axonometric, axonometric plan, Venn, pyramid/funnel, treemap and marimekko, heatmap, bar and dumbbell, waterfall, line (slopegraph, ridgeline, streamgraph, bump), Gantt and scatter charts (bubble, beeswarm, box plot), high-level, process, medallion, data flow, DP integration, DP security matrix, Sankey, fishbone, Wardley map, kanban, user journey, service blueprint, deployment, dependency graph, UML class, story map, or database schema diagrams as HTML/SVG/PNG, with .drawio, Mermaid, and .excalidraw import, plus lifecycle phase maps, block decomposition trees, and onboarding guidance.

What it loads into context

Frontmatter

232 tokens

Always available to the agent

SKILL.md

7,402 tokens

When the skill is activated

Reference documents

229,891 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

0. First-time setup — style guide gate
1. Philosophy
2. When to Use
3. Selection: semantic pattern, then visual type
4. Universal Anti-patterns
5. Design System
6. Core SVG Primitives
7. Layout & Spacing
8. Summary Card Pattern
9. Pre-Output Checklist (Taste Gate)
10. Templates & Variants
11. Importing an Existing Diagram (draw.io), Mermaid, and Excalidraw
12. Output

Scripts executed separately

../../scripts/verify-geometry.py
../../scripts/verify-motion.py
scripts/drawio_extract.py
scripts/excalidraw_extract.py
scripts/export_png.py
scripts/export_svg.py
scripts/mermaid_extract.py
scripts/self_check.py

Files

../../.claude-plugin/marketplace.jsonasset705 bytes
../../.claude-plugin/plugin.jsonasset1,007 bytes
../../scripts/verify-geometry.pyruns28,114 bytes
../../scripts/verify-motion.pyruns22,248 bytes
SKILL.mdcore30,874 bytes
SKILL.mdcore30,874 bytes
SKILL.mdcore30,874 bytes
SKILL.mdcore30,874 bytes
SKILL.mdcore30,874 bytes
SKILL.mdcore30,874 bytes
SKILL.mdcore30,874 bytes
SKILL.mdcore30,874 bytes
SKILL.mdcore30,874 bytes
SKILL.mdcore30,874 bytes
SKILL.mdcore30,874 bytes
assets/example-architecture-containment-dark.htmlasset14,552 bytes
assets/example-architecture-containment-full.htmlasset17,524 bytes
assets/example-architecture-containment.htmlasset14,411 bytes
assets/example-architecture-dark.htmlasset12,036 bytes
assets/example-architecture-delta-dark.htmlasset20,558 bytes
assets/example-architecture-delta-full.htmlasset22,225 bytes
assets/example-architecture-delta.htmlasset20,459 bytes
assets/example-architecture-full.htmlasset14,981 bytes
assets/example-architecture.htmlasset12,099 bytes
assets/example-axonometric-plan-campus-animated.htmlasset47,875 bytes
assets/example-axonometric-plan-campus-dark.htmlasset31,662 bytes
assets/example-axonometric-plan-campus-full.htmlasset34,299 bytes
assets/example-axonometric-plan-campus.htmlasset31,659 bytes
assets/example-axonometric-plan-coffee-shop-animated.htmlasset55,593 bytes
assets/example-axonometric-plan-coffee-shop-dark.htmlasset39,572 bytes
assets/example-axonometric-plan-coffee-shop-full.htmlasset42,146 bytes
assets/example-axonometric-plan-coffee-shop.htmlasset39,381 bytes
assets/example-axonometric-plan-dark.htmlasset28,850 bytes
assets/example-axonometric-plan-full.htmlasset31,351 bytes
assets/example-axonometric-plan-warehouse-animated.htmlasset54,978 bytes
assets/example-axonometric-plan-warehouse-dark.htmlasset39,154 bytes
assets/example-axonometric-plan-warehouse-full.htmlasset41,540 bytes
assets/example-axonometric-plan-warehouse.htmlasset38,780 bytes
assets/example-axonometric-plan.htmlasset28,651 bytes
assets/example-bar-dark.htmlasset9,122 bytes
assets/example-bar-full.htmlasset11,252 bytes
assets/example-bar.htmlasset8,917 bytes
assets/example-beeswarm-dark.htmlasset32,654 bytes
assets/example-beeswarm-full.htmlasset36,450 bytes
assets/example-beeswarm.htmlasset32,180 bytes
assets/example-box-plot-dark.htmlasset11,533 bytes
assets/example-box-plot-full.htmlasset15,046 bytes
assets/example-box-plot.htmlasset11,399 bytes
assets/example-bubble-dark.htmlasset11,428 bytes
assets/example-bubble-full.htmlasset15,124 bytes
assets/example-bubble.htmlasset11,335 bytes
assets/example-bump-dark.htmlasset12,926 bytes
assets/example-bump-full.htmlasset16,635 bytes
assets/example-bump.htmlasset12,807 bytes
assets/example-data-flow-dark.htmlasset12,966 bytes
assets/example-data-flow-full.htmlasset15,830 bytes
assets/example-data-flow.htmlasset12,798 bytes
assets/example-datalake-dark.htmlasset25,092 bytes
assets/example-datalake-full.htmlasset28,598 bytes
assets/example-datalake.htmlasset26,674 bytes
assets/example-db-schema-dark.htmlasset24,740 bytes
assets/example-db-schema-full.htmlasset27,627 bytes
assets/example-db-schema.htmlasset24,523 bytes
assets/example-dependency-dark.htmlasset17,822 bytes
assets/example-dependency-full.htmlasset21,122 bytes
assets/example-dependency.htmlasset17,607 bytes
assets/example-deployment-dark.htmlasset13,554 bytes
assets/example-deployment-full.htmlasset16,827 bytes
assets/example-deployment.htmlasset13,448 bytes
assets/example-dp-integration-dark.htmlasset14,898 bytes
assets/example-dp-integration-full.htmlasset17,415 bytes
assets/example-dp-integration.htmlasset14,867 bytes
assets/example-dp-security-matrix-dark.htmlasset10,279 bytes
assets/example-dp-security-matrix-full.htmlasset12,601 bytes
assets/example-dp-security-matrix.htmlasset10,905 bytes
assets/example-er-dark.htmlasset14,198 bytes
assets/example-er-full.htmlasset17,123 bytes
assets/example-er.htmlasset14,134 bytes
assets/example-exploded-ai-stack-animated.htmlasset53,486 bytes
assets/example-exploded-ai-stack-dark.htmlasset36,043 bytes
assets/example-exploded-ai-stack-full.htmlasset38,911 bytes
assets/example-exploded-ai-stack.htmlasset36,058 bytes
assets/example-exploded-dark.htmlasset8,543 bytes
assets/example-exploded-full.htmlasset11,447 bytes
assets/example-exploded-keyboard-animated.htmlasset208,294 bytes
assets/example-exploded-keyboard-dark.htmlasset180,795 bytes
assets/example-exploded-keyboard-full.htmlasset193,684 bytes
assets/example-exploded-keyboard.htmlasset190,868 bytes
assets/example-exploded-phone-animated.htmlasset34,616 bytes
assets/example-exploded-phone-dark.htmlasset17,431 bytes
assets/example-exploded-phone-full.htmlasset20,048 bytes
assets/example-exploded-phone.htmlasset17,302 bytes
assets/example-exploded-unboxing-animated.htmlasset34,065 bytes
assets/example-exploded-unboxing-dark.htmlasset16,707 bytes
assets/example-exploded-unboxing-full.htmlasset19,391 bytes
assets/example-exploded-unboxing.htmlasset16,644 bytes
assets/example-exploded.htmlasset8,724 bytes
assets/example-fishbone-dark.htmlasset8,675 bytes
assets/example-fishbone-full.htmlasset11,407 bytes
assets/example-fishbone.htmlasset8,648 bytes
assets/example-flowchart-dark.htmlasset9,446 bytes
assets/example-flowchart-full.htmlasset12,295 bytes
assets/example-flowchart.htmlasset9,395 bytes
assets/example-gantt-dark.htmlasset10,331 bytes
assets/example-gantt-full.htmlasset11,895 bytes
assets/example-gantt.htmlasset10,072 bytes
assets/example-heatmap-dark.htmlasset18,248 bytes
assets/example-heatmap-full.htmlasset22,036 bytes
assets/example-heatmap.htmlasset18,108 bytes
assets/example-high-level-dark.htmlasset24,080 bytes
assets/example-high-level-full.htmlasset28,360 bytes
assets/example-high-level-vertical-dark.htmlasset24,854 bytes
assets/example-high-level-vertical-full.htmlasset28,619 bytes
assets/example-high-level-vertical.htmlasset30,380 bytes
assets/example-high-level.htmlasset26,902 bytes
assets/example-import-drawio.htmlasset12,079 bytes
assets/example-import-excalidraw.htmlasset7,689 bytes
assets/example-import-mermaid.htmlasset8,105 bytes
assets/example-it-state-dark.htmlasset11,992 bytes
assets/example-it-state-full.htmlasset14,223 bytes
assets/example-it-state.htmlasset12,498 bytes
assets/example-journey-dark.htmlasset9,153 bytes
assets/example-journey-full.htmlasset11,721 bytes
assets/example-journey.htmlasset9,109 bytes
assets/example-kanban-dark.htmlasset11,036 bytes
assets/example-kanban-full.htmlasset13,899 bytes
assets/example-kanban.htmlasset10,945 bytes
assets/example-layers-dark.htmlasset6,913 bytes
assets/example-layers-full.htmlasset10,023 bytes
assets/example-layers.htmlasset6,875 bytes
assets/example-line-dark.htmlasset7,608 bytes
assets/example-line-full.htmlasset10,051 bytes
assets/example-line.htmlasset7,440 bytes
assets/example-loop-dark.htmlasset6,821 bytes
assets/example-loop-full.htmlasset9,964 bytes
assets/example-loop-terminal.htmlasset9,993 bytes
assets/example-loop.htmlasset6,789 bytes
assets/example-marimekko-dark.htmlasset13,604 bytes
assets/example-marimekko-full.htmlasset17,040 bytes
assets/example-marimekko.htmlasset13,496 bytes
assets/example-medallion-dark.htmlasset13,052 bytes
assets/example-medallion-full.htmlasset15,894 bytes
assets/example-medallion.htmlasset12,861 bytes
assets/example-nested-dark.htmlasset6,735 bytes
assets/example-nested-full.htmlasset9,844 bytes
assets/example-nested.htmlasset6,854 bytes
assets/example-org-chart-dark.htmlasset11,599 bytes
assets/example-org-chart-full.htmlasset12,049 bytes
assets/example-org-chart.htmlasset11,527 bytes
assets/example-paved-road-animated.htmlasset28,321 bytes
assets/example-polar-dark.htmlasset10,447 bytes
assets/example-polar-full.htmlasset12,653 bytes
assets/example-polar.htmlasset10,385 bytes
assets/example-policy-trace-animated.htmlasset25,465 bytes
assets/example-process-dark.htmlasset15,033 bytes
assets/example-process-full.htmlasset17,467 bytes
assets/example-process.htmlasset14,997 bytes
assets/example-pyramid-dark.htmlasset6,682 bytes
assets/example-pyramid-full.htmlasset9,731 bytes
assets/example-pyramid.htmlasset6,576 bytes
assets/example-quadrant-consultant.htmlasset11,881 bytes
assets/example-quadrant-dark.htmlasset6,606 bytes
assets/example-quadrant-full.htmlasset9,620 bytes
assets/example-quadrant.htmlasset6,573 bytes
assets/example-queue-animated.htmlasset30,003 bytes
assets/example-radar-dark.htmlasset7,687 bytes
assets/example-radar-full.htmlasset10,429 bytes
assets/example-radar.htmlasset7,863 bytes
assets/example-ridgeline-dark.htmlasset10,354 bytes
assets/example-ridgeline-full.htmlasset14,273 bytes
assets/example-ridgeline.htmlasset10,281 bytes
assets/example-sankey-dark.htmlasset8,969 bytes
assets/example-sankey-full.htmlasset11,814 bytes
assets/example-sankey.htmlasset8,921 bytes
assets/example-scatter-dark.htmlasset9,666 bytes
assets/example-scatter-full.htmlasset11,577 bytes
assets/example-scatter.htmlasset9,423 bytes
assets/example-sequence-dark.htmlasset13,794 bytes
assets/example-sequence-full.htmlasset18,212 bytes
assets/example-sequence-oauth-dark.htmlasset12,113 bytes
assets/example-sequence-oauth-full.htmlasset16,581 bytes
assets/example-sequence-oauth.htmlasset14,362 bytes
assets/example-sequence.htmlasset13,723 bytes
assets/example-service-blueprint-dark.htmlasset14,978 bytes
assets/example-service-blueprint-full.htmlasset19,464 bytes
assets/example-service-blueprint.htmlasset15,842 bytes
assets/example-slopegraph-dark.htmlasset10,452 bytes
assets/example-slopegraph-full.htmlasset13,992 bytes
assets/example-slopegraph.htmlasset10,370 bytes
assets/example-state-dark.htmlasset8,698 bytes
assets/example-state-full.htmlasset11,623 bytes
assets/example-state-lifecycle-dark.htmlasset9,633 bytes
assets/example-state-lifecycle-full.htmlasset12,624 bytes
assets/example-state-lifecycle.htmlasset10,236 bytes
assets/example-state.htmlasset8,662 bytes
assets/example-story-map-dark.htmlasset12,247 bytes
assets/example-story-map-full.htmlasset15,483 bytes
assets/example-story-map.htmlasset12,186 bytes
assets/example-streamgraph-dark.htmlasset13,002 bytes
assets/example-streamgraph-full.htmlasset16,442 bytes
assets/example-streamgraph.htmlasset12,941 bytes
assets/example-swimlane-dark.htmlasset10,580 bytes
assets/example-swimlane-full.htmlasset13,524 bytes
assets/example-swimlane.htmlasset10,534 bytes
assets/example-timeline-dark.htmlasset7,390 bytes
assets/example-timeline-full.htmlasset10,391 bytes
assets/example-timeline.htmlasset7,338 bytes
assets/example-tree-block-decomposition-dark.htmlasset8,303 bytes
assets/example-tree-block-decomposition-full.htmlasset11,639 bytes
assets/example-tree-block-decomposition.htmlasset8,224 bytes
assets/example-tree-dark.htmlasset11,029 bytes
assets/example-tree-full.htmlasset13,990 bytes
assets/example-tree.htmlasset10,913 bytes
assets/example-treemap-dark.htmlasset7,651 bytes
assets/example-treemap-full.htmlasset10,737 bytes
assets/example-treemap.htmlasset7,579 bytes
assets/example-uml-class-dark.htmlasset12,400 bytes
assets/example-uml-class-full.htmlasset15,679 bytes
assets/example-uml-class.htmlasset12,355 bytes
assets/example-venn-dark.htmlasset6,699 bytes
assets/example-venn-full.htmlasset9,901 bytes
assets/example-venn.htmlasset5,079 bytes
assets/example-wardley-dark.htmlasset8,924 bytes
assets/example-wardley-full.htmlasset11,344 bytes
assets/example-wardley.htmlasset8,881 bytes
assets/example-waterfall-dark.htmlasset9,844 bytes
assets/example-waterfall-full.htmlasset11,594 bytes
assets/example-waterfall.htmlasset9,760 bytes
assets/icons.htmlasset108,545 bytes
assets/index.htmlasset27,285 bytes
assets/template-dark.htmlasset4,080 bytes
assets/template-full.htmlasset23,154 bytes
assets/template-motion.htmlasset20,935 bytes
assets/template-terminal.htmlasset5,481 bytes
assets/template.htmlasset4,202 bytes
references/animation.mddoc12,437 bytes
references/doctor.mddoc6,152 bytes
references/export-registry.mddoc6,319 bytes
references/export.mddoc31,609 bytes
references/import-drawio.mddoc14,476 bytes
references/import-excalidraw.mddoc11,490 bytes
references/import-mermaid.mddoc11,943 bytes
references/layout-budget.mddoc4,501 bytes
references/onboarding.mddoc16,931 bytes
references/output-spec.mddoc19,200 bytes
references/primitive-annotation.mddoc1,661 bytes
references/primitive-icons.mddoc105,941 bytes
references/primitive-sketchy.mddoc1,700 bytes
references/primitive-terminal.mddoc3,915 bytes
references/primitives-core.mddoc12,992 bytes
references/profiles.mddoc14,434 bytes
references/semantic-patterns.mddoc16,679 bytes
references/style-guide.mddoc20,692 bytes
references/type-architecture-delta.mddoc14,595 bytes
references/type-architecture.mddoc10,485 bytes
references/type-axonometric-plan.mddoc7,184 bytes
references/type-bar.mddoc14,056 bytes
references/type-data-flow.mddoc20,858 bytes
references/type-db-schema.mddoc4,954 bytes
references/type-dependency.mddoc4,309 bytes
references/type-deployment.mddoc4,295 bytes
references/type-dp-integration.mddoc22,215 bytes
references/type-dp-security-matrix.mddoc19,086 bytes
references/type-er.mddoc1,531 bytes
references/type-exploded.mddoc11,157 bytes
references/type-fishbone.mddoc5,796 bytes
references/type-flowchart.mddoc1,079 bytes
references/type-gantt.mddoc2,433 bytes
references/type-heatmap.mddoc7,696 bytes
references/type-high-level.mddoc28,325 bytes
references/type-it-state.mddoc29,677 bytes
references/type-journey.mddoc5,385 bytes
references/type-kanban.mddoc4,531 bytes
references/type-layers.mddoc1,570 bytes
references/type-line.mddoc43,216 bytes
references/type-loop.mddoc12,609 bytes
references/type-medallion.mddoc22,226 bytes
references/type-nested.mddoc1,363 bytes
references/type-org-chart.mddoc3,101 bytes
references/type-polar.mddoc7,998 bytes
references/type-process.mddoc28,224 bytes
references/type-pyramid.mddoc1,805 bytes
references/type-quadrant.mddoc6,256 bytes
references/type-radar.mddoc5,626 bytes
references/type-sankey.mddoc9,389 bytes
references/type-scatter.mddoc27,951 bytes
references/type-sequence.mddoc6,798 bytes
references/type-service-blueprint.mddoc7,700 bytes
references/type-state.mddoc1,958 bytes
references/type-story-map.mddoc4,882 bytes
references/type-swimlane.mddoc1,197 bytes
references/type-timeline.mddoc1,091 bytes
references/type-tree.mddoc1,517 bytes
references/type-treemap.mddoc18,520 bytes
references/type-uml-class.mddoc4,902 bytes
references/type-venn.mddoc1,659 bytes
references/type-wardley.mddoc5,778 bytes
references/type-waterfall.mddoc8,987 bytes
scripts/drawio_extract.pyruns35,563 bytes
scripts/excalidraw_extract.pyruns26,676 bytes
scripts/export_png.pyruns3,682 bytes
scripts/export_svg.pyruns68,399 bytes
scripts/mermaid_extract.pyruns60,895 bytes
scripts/self_check.pyruns34,000 bytes

Read SKILL.md


# Diagram Design

Create diagrams as self-contained HTML files with inline SVG and an editorial design system.

Forty-five visual types. Semantic patterns describe behavior; type references describe layout.

---

## 0. First-time setup — style guide gate

**Before generating your first diagram in a new project, verify the style guide has been customized.**

Do not silently ship default-skinned diagrams into a branded project.

View the complete source on GitHub

Skills included

diagram-design

Repository facts

License: MIT
Created: Apr 16, 2026
Last pushed: Nov 6, 2026
Forks: 4,338
Open issues: 22
Project activity: Active

Rank over the last 12 weeks

Now #30 · best #29 · up 8 in 30 days

#31 from Oct 18 to Oct 19
#30 from Oct 20 to Oct 21
#29 from Oct 22 to Oct 24
#31 on Oct 25
#29 from Oct 28 to Nov 5
#30 since Nov 6

40 earlier periods

#275 on Aug 2
#243 on Aug 8
#231 on Aug 9
#201 on Aug 10
#153 on Aug 11
#109 on Aug 12
#95 on Aug 13
#90 on Aug 14
#86 on Aug 15
#83 on Aug 16
#80 on Aug 17
#76 on Aug 18
#72 on Aug 19
#70 on Aug 20
#66 on Aug 21
#64 on Aug 22
#63 from Aug 23 to Aug 24
#61 on Aug 25
#60 from Aug 26 to Aug 30
#59 from Aug 31 to Sep 1
#58 on Sep 2
#57 on Sep 3
#52 from Sep 4 to Sep 5
#50 on Sep 6
#49 on Sep 7
#47 on Sep 8
#45 from Sep 9 to Sep 12
#44 on Sep 13
#42 from Sep 14 to Sep 20
#41 from Sep 21 to Sep 29
#42 from Sep 30 to Oct 3
#43 from Oct 4 to Oct 5
#39 from Oct 6 to Oct 7
#38 on Oct 8
#37 on Oct 9
#36 on Oct 10
#35 on Oct 11
#34 on Oct 12
#33 on Oct 13
#32 from Oct 14 to Oct 17

Before you install

Network or broad shell

Automated signals, not a guarantee

Checked Nov 3, 2026

Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.

Show 166 notes

skills/diagram-design/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
skills/diagram-design/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
skills/diagram-design/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
skills/diagram-design/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
skills/diagram-design/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
skills/diagram-design/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
skills/diagram-design/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
skills/diagram-design/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
skills/diagram-design/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
skills/diagram-design/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
skills/diagram-design/assets/example-axonometric-plan-campus-animated.html:208 Analysis incomplete: physical or joined line exceeds character limit
skills/diagram-design/assets/example-axonometric-plan-campus-animated.html:209 Analysis incomplete: physical or joined line exceeds character limit
skills/diagram-design/assets/example-axonometric-plan-campus-animated.html:210 Analysis incomplete: physical or joined line exceeds character limit
skills/diagram-design/assets/example-axonometric-plan-campus-animated.html:211 Analysis incomplete: physical or joined line exceeds character limit
skills/diagram-design/assets/example-axonometric-plan-campus-animated.html:212 Analysis incomplete: physical or joined line exceeds character limit
skills/diagram-design/assets/example-axonometric-plan-campus-animated.html:213 Analysis incomplete: physical or joined line exceeds character limit
skills/diagram-design/assets/example-axonometric-plan-campus-animated.html:214 Analysis incomplete: physical or joined line exceeds character limit
skills/diagram-design/assets/example-axonometric-plan-campus-animated.html:215 Analysis incomplete: physical or joined line exceeds character limit
skills/diagram-design/assets/example-axonometric-plan-campus-animated.html:216 Analysis incomplete: physical or joined line exceeds character limit
skills/diagram-design/assets/example-axonometric-plan-campus-animated.html:217 Analysis incomplete: physical or joined line exceeds character limit

No broad tool permissions
No dangerous shell commands
1,206 network referencesin 228 files: diagram-design/assets/example-medallion-full.html:5 diagram-design/assets/example-medallion-dark.html:5 diagram-design/assets/example-medallion.html:5 and 225 more
1 obfuscation signalin 1 file: diagram-design/scripts/drawio_extract.py:99
No instruction overrides
8 executable scriptsin 8 files: scripts/verify-geometry.py:1 scripts/verify-motion.py:1 diagram-design/scripts/drawio_extract.py:1 and 5 more
No access to secrets
No requests to vote in Hot

Show all 1,215 signals by file

`.claude-plugin/plugin.json`

Network accessline 5

"author": {     "name": "Cathryn Lavery",     "url": "https://github.com/cathrynlavery"

Network accessline 6

"name": "Cathryn Lavery",     "url": "https://github.com/cathrynlavery"   },

Network accessline 7

"url": "https://github.com/cathrynlavery"

Network accessline 8

},   "homepage": "https://diagramdesign.dev",   "repository": "https://github.com/cathrynlavery/diagram-design",

Network accessline 9

"homepage": "https://diagramdesign.dev",

Network accessline 10

"repository": "https://github.com/cathrynlavery/diagram-design",

`scripts/verify-geometry.py`

Executable scriptline 1
```
#!/usr/bin/env python3
```

`scripts/verify-motion.py`

Executable scriptline 1
```
#!/usr/bin/env python3
```

`skills/diagram-design/assets/example-architecture-containment-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>The database is not in the subnet · Architecture</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;

Network accessline 6

<title>The database is not in the subnet · Architecture</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet"

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 59

<h1>The database is not in the subnet</h1>     <div class="diagram-container">       <svg viewBox="0 0 1000 704" xmlns="http://www.w3.org/2000/svg" role="img"

Network accessline 60

<div class="diagram-container">       <svg viewBox="0 0 1000 704" xmlns="http://www.w3.org/2000/svg" role="img"            aria-labelledby="architecture-containment-dark-title architecture-containment-dark-desc"

Network accessline 61

<svg viewBox="0 0 1000 704" xmlns="http://www.w3.org/2000/svg" role="img"

`skills/diagram-design/assets/example-architecture-containment-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>The database is not in the subnet · Architecture</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;

Network accessline 6

<title>The database is not in the subnet · Architecture</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet"

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 54

<div class="diagram-container">       <svg viewBox="0 0 1000 704" xmlns="http://www.w3.org/2000/svg" role="img"

Network accessline 55

<svg viewBox="0 0 1000 704" xmlns="http://www.w3.org/2000/svg" role="img"

`skills/diagram-design/assets/example-architecture-containment.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>The database is not in the subnet · Architecture</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;

Network accessline 6

<title>The database is not in the subnet · Architecture</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet"

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 59

<h1>The database is not in the subnet</h1>     <div class="diagram-container">       <svg viewBox="0 0 1000 704" xmlns="http://www.w3.org/2000/svg" role="img"

Network accessline 60

<div class="diagram-container">       <svg viewBox="0 0 1000 704" xmlns="http://www.w3.org/2000/svg" role="img"            aria-labelledby="architecture-containment-title architecture-containment-desc"

Network accessline 61

<svg viewBox="0 0 1000 704" xmlns="http://www.w3.org/2000/svg" role="img"

`skills/diagram-design/assets/example-architecture-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Content site · Architecture</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+

Network accessline 6

<title>Content site · Architecture</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 480" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="architecture-dark-title architecture-dark-desc">       <title id="architecture-dark-title">Content site in production</title>       <desc id="archite

`skills/diagram-design/assets/example-architecture-delta-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Order fulfilment · Architecture delta</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&fam

Network accessline 6

<title>Order fulfilment · Architecture delta</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 37

<div class="diagram-container" role="region" aria-label="Before, changes, and after architecture comparison; scroll horizontally on narrow screens" tabindex="0">       <svg viewBox="0 0 1200 680" xmlns="http://www.w3.org/2000/svg" data-diag

Network accessline 38

<svg viewBox="0 0 1200 680" xmlns="http://www.w3.org/2000/svg" data-diagram="architecture-delta" role="img" aria-labelledby="architecture-delta-dark-title architecture-delta-dark-desc">

`skills/diagram-design/assets/example-architecture-delta-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Order fulfilment · Architecture delta</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&fam

Network accessline 6

<title>Order fulfilment · Architecture delta</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 42

<p class="subtitle">A durable queue replaces direct dispatch. Stable identities reveal exactly what changes, what moves, and what stays the same.</p>     <div class="diagram-container" role="region" aria-label="Before, changes, and after ar

Network accessline 43

<div class="diagram-container" role="region" aria-label="Before, changes, and after architecture comparison; scroll horizontally on narrow screens" tabindex="0">       <svg viewBox="0 0 1200 680" xmlns="http://www.w3.org/2000/svg" data-diag

Network accessline 44

<svg viewBox="0 0 1200 680" xmlns="http://www.w3.org/2000/svg" data-diagram="architecture-delta" role="img" aria-labelledby="architecture-delta-full-title architecture-delta-full-desc">

`skills/diagram-design/assets/example-architecture-delta.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Order fulfilment · Architecture delta</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&fam

Network accessline 6

<title>Order fulfilment · Architecture delta</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 37

<div class="diagram-container" role="region" aria-label="Before, changes, and after architecture comparison; scroll horizontally on narrow screens" tabindex="0">       <svg viewBox="0 0 1200 680" xmlns="http://www.w3.org/2000/svg" data-diag

Network accessline 38

<svg viewBox="0 0 1200 680" xmlns="http://www.w3.org/2000/svg" data-diagram="architecture-delta" role="img" aria-labelledby="architecture-delta-title architecture-delta-desc">

`skills/diagram-design/assets/example-architecture-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Content site · Architecture</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+

Network accessline 6

<title>Content site · Architecture</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 50

<div class="diagram-container">       <svg viewBox="0 0 1000 480" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="architecture-full-title architecture-full-desc">

Network accessline 51

<svg viewBox="0 0 1000 480" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="architecture-full-title architecture-full-desc">         <title id="architecture-full-title">Content site in production</title>         <desc id="arc

`skills/diagram-design/assets/example-architecture.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Content site · Architecture</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+

Network accessline 6

<title>Content site · Architecture</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 480" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="architecture-title architecture-desc">       <title id="architecture-title">Content site in production</title>       <desc id="architecture-desc">Arc

`skills/diagram-design/assets/example-axonometric-plan-campus-animated.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>North campus · Three phases, six buildings</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;60

Network accessline 6

<title>North campus · Three phases, six buildings</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&family=Noto+Serif:ital@0;1&family=No

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&family=Noto+Serif:ital@0;1&family=Noto+Sans+KR:wght@400;500;600&family=Noto+Serif+KR:wght@400&fa

Network accessline 197

<div class="diagram-container">       <svg viewBox="0 0 1000 496" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="axonometric-plan-campus-animated-title axonometric-plan-campus-animated-desc">

Network accessline 198

<svg viewBox="0 0 1000 496" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="axonometric-plan-campus-animated-title axonometric-plan-campus-animated-desc">

`skills/diagram-design/assets/example-axonometric-plan-campus-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>North campus · Three phases, six buildings</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;60

Network accessline 6

<title>North campus · Three phases, six buildings</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <s

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 66

<div class="diagram-container">       <svg viewBox="0 0 1000 496" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="axonometric-plan-campus-dark-title axonometric-plan-campus-dark-desc">

Network accessline 67

<svg viewBox="0 0 1000 496" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="axonometric-plan-campus-dark-title axonometric-plan-campus-dark-desc">

`skills/diagram-design/assets/example-axonometric-plan-campus-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>North campus · Three phases, six buildings</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;60

Network accessline 6

<title>North campus · Three phases, six buildings</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <s

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 42

<div class="diagram-container">       <svg viewBox="0 0 1000 496" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="axonometric-plan-campus-full-title axonometric-plan-campus-full-desc">

Network accessline 43

<svg viewBox="0 0 1000 496" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="axonometric-plan-campus-full-title axonometric-plan-campus-full-desc">

`skills/diagram-design/assets/example-axonometric-plan-campus.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>North campus · Three phases, six buildings</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;60

Network accessline 6

<title>North campus · Three phases, six buildings</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <s

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 66

<div class="diagram-container">       <svg viewBox="0 0 1000 496" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="axonometric-plan-campus-title axonometric-plan-campus-desc">

Network accessline 67

<svg viewBox="0 0 1000 496" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="axonometric-plan-campus-title axonometric-plan-campus-desc">

`skills/diagram-design/assets/example-axonometric-plan-coffee-shop-animated.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Corner coffee shop · From the door to a seat</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;

Network accessline 6

<title>Corner coffee shop · From the door to a seat</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&family=Noto+Serif:ital@0;1&family=

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&family=Noto+Serif:ital@0;1&family=Noto+Sans+KR:wght@400;500;600&family=Noto+Serif+KR:wght@400&fa

Network accessline 197

<div class="diagram-container">       <svg viewBox="0 0 1000 460" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="axonometric-plan-coffee-shop-animated-title axonometric-plan-coffee-shop-animated-desc">

Network accessline 198

<svg viewBox="0 0 1000 460" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="axonometric-plan-coffee-shop-animated-title axonometric-plan-coffee-shop-animated-desc">

`skills/diagram-design/assets/example-axonometric-plan-coffee-shop-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Corner coffee shop · From the door to a seat</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;

Network accessline 6

<title>Corner coffee shop · From the door to a seat</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 66

<div class="diagram-container">       <svg viewBox="0 0 1000 460" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="axonometric-plan-coffee-shop-dark-title axonometric-plan-coffee-shop-dark-desc">

Network accessline 67

<svg viewBox="0 0 1000 460" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="axonometric-plan-coffee-shop-dark-title axonometric-plan-coffee-shop-dark-desc">

`skills/diagram-design/assets/example-axonometric-plan-coffee-shop-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Corner coffee shop · From the door to a seat</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;

Network accessline 6

<title>Corner coffee shop · From the door to a seat</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 42

<div class="diagram-container">       <svg viewBox="0 0 1000 460" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="axonometric-plan-coffee-shop-full-title axonometric-plan-coffee-shop-full-desc">

Network accessline 43

<svg viewBox="0 0 1000 460" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="axonometric-plan-coffee-shop-full-title axonometric-plan-coffee-shop-full-desc">

`skills/diagram-design/assets/example-axonometric-plan-coffee-shop.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Corner coffee shop · From the door to a seat</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;

Network accessline 6

<title>Corner coffee shop · From the door to a seat</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 66

<div class="diagram-container">       <svg viewBox="0 0 1000 460" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="axonometric-plan-coffee-shop-title axonometric-plan-coffee-shop-desc">

Network accessline 67

<svg viewBox="0 0 1000 460" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="axonometric-plan-coffee-shop-title axonometric-plan-coffee-shop-desc">

`skills/diagram-design/assets/example-axonometric-plan-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Level 3 office · Where the team actually sits</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500

Network accessline 6

<title>Level 3 office · Where the team actually sits</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 66

<div class="diagram-container">       <svg viewBox="0 0 1000 448" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="axonometric-plan-dark-title axonometric-plan-dark-desc">

Network accessline 67

<svg viewBox="0 0 1000 448" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="axonometric-plan-dark-title axonometric-plan-dark-desc">

`skills/diagram-design/assets/example-axonometric-plan-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Level 3 office · Where the team actually sits</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500

Network accessline 6

<title>Level 3 office · Where the team actually sits</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 42

<div class="diagram-container">       <svg viewBox="0 0 1000 448" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="axonometric-plan-full-title axonometric-plan-full-desc">

Network accessline 43

<svg viewBox="0 0 1000 448" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="axonometric-plan-full-title axonometric-plan-full-desc">

`skills/diagram-design/assets/example-axonometric-plan-warehouse-animated.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Fulfillment floor · Dock to dock</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=G

Network accessline 6

<title>Fulfillment floor · Dock to dock</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&family=Noto+Serif:ital@0;1&family=Noto+Sans+KR

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&family=Noto+Serif:ital@0;1&family=Noto+Sans+KR:wght@400;500;600&family=Noto+Serif+KR:wght@400&fa

Network accessline 197

<div class="diagram-container">       <svg viewBox="0 0 1000 528" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="axonometric-plan-warehouse-animated-title axonometric-plan-warehouse-animated-desc">

Network accessline 198

<svg viewBox="0 0 1000 528" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="axonometric-plan-warehouse-animated-title axonometric-plan-warehouse-animated-desc">

`skills/diagram-design/assets/example-axonometric-plan-warehouse-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Fulfillment floor · Dock to dock</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=G

Network accessline 6

<title>Fulfillment floor · Dock to dock</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 66

<div class="diagram-container">       <svg viewBox="0 0 1000 528" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="axonometric-plan-warehouse-dark-title axonometric-plan-warehouse-dark-desc">

Network accessline 67

<svg viewBox="0 0 1000 528" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="axonometric-plan-warehouse-dark-title axonometric-plan-warehouse-dark-desc">

`skills/diagram-design/assets/example-axonometric-plan-warehouse-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Fulfillment floor · Dock to dock</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=G

Network accessline 6

<title>Fulfillment floor · Dock to dock</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 42

<div class="diagram-container">       <svg viewBox="0 0 1000 528" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="axonometric-plan-warehouse-full-title axonometric-plan-warehouse-full-desc">

Network accessline 43

<svg viewBox="0 0 1000 528" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="axonometric-plan-warehouse-full-title axonometric-plan-warehouse-full-desc">

`skills/diagram-design/assets/example-axonometric-plan-warehouse.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Fulfillment floor · Dock to dock</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=G

Network accessline 6

<title>Fulfillment floor · Dock to dock</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 66

<div class="diagram-container">       <svg viewBox="0 0 1000 528" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="axonometric-plan-warehouse-title axonometric-plan-warehouse-desc">

Network accessline 67

<svg viewBox="0 0 1000 528" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="axonometric-plan-warehouse-title axonometric-plan-warehouse-desc">

`skills/diagram-design/assets/example-axonometric-plan.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Level 3 office · Where the team actually sits</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500

Network accessline 6

<title>Level 3 office · Where the team actually sits</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 66

<div class="diagram-container">       <svg viewBox="0 0 1000 448" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="axonometric-plan-title axonometric-plan-desc">

Network accessline 67

<svg viewBox="0 0 1000 448" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="axonometric-plan-title axonometric-plan-desc">

`skills/diagram-design/assets/example-bar-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Sprint velocity · Bar chart · dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family

Network accessline 6

<title>Sprint velocity · Bar chart · dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 31

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="bar-dark-title bar-dark-desc">

`skills/diagram-design/assets/example-bar-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Sprint velocity · Bar chart</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+

Network accessline 6

<title>Sprint velocity · Bar chart</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 37

</div>     <div class="diagram-container">       <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="bar-full-title bar-full-desc">

Network accessline 38

<div class="diagram-container">       <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="bar-full-title bar-full-desc">         <title id="bar-full-title">Sprint velocity · 8-sprint view</title>

Network accessline 39

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="bar-full-title bar-full-desc">

`skills/diagram-design/assets/example-bar.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Sprint velocity · Bar chart</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+

Network accessline 6

<title>Sprint velocity · Bar chart</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 31

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="bar-title bar-desc">

`skills/diagram-design/assets/example-beeswarm-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Per-request latency, one dot per request · Beeswarm · dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist

Network accessline 6

<title>Per-request latency, one dot per request · Beeswarm · dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="s

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 37

disagrees with its peers, any overlapping pair, and any second dot          radius or non-focal fill. -->     <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="beeswarm-dark-title beeswarm-dark-desc"

Network accessline 38

radius or non-focal fill. -->     <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="beeswarm-dark-title beeswarm-dark-desc">       <title id="beeswarm-dark-title">The median hides the tail</title>

Network accessline 39

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="beeswarm-dark-title beeswarm-dark-desc">       <title id="beeswarm-dark-title">The median hides the tail</title>       <desc id="beeswarm-dark-desc">

`skills/diagram-design/assets/example-beeswarm-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Per-request latency, one dot per request · Beeswarm</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@4

Network accessline 6

<title>Per-request latency, one dot per request · Beeswarm</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="styleshe

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 47

disagrees with its peers, any overlapping pair, and any second dot            radius or non-focal fill. -->       <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="beeswarm-full-title beeswarm-full-d

Network accessline 48

radius or non-focal fill. -->       <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="beeswarm-full-title beeswarm-full-desc">         <title id="beeswarm-full-title">The median hides the tail</title

Network accessline 49

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="beeswarm-full-title beeswarm-full-desc">         <title id="beeswarm-full-title">The median hides the tail</title>         <desc id="beeswarm-full-de

`skills/diagram-design/assets/example-beeswarm.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Per-request latency, one dot per request · Beeswarm</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@4

Network accessline 6

<title>Per-request latency, one dot per request · Beeswarm</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="styleshe

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 37

disagrees with its peers, any overlapping pair, and any second dot          radius or non-focal fill. -->     <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="beeswarm-title beeswarm-desc">

Network accessline 38

radius or non-focal fill. -->     <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="beeswarm-title beeswarm-desc">       <title id="beeswarm-title">The median hides the tail</title>

Network accessline 39

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="beeswarm-title beeswarm-desc">       <title id="beeswarm-title">The median hides the tail</title>       <desc id="beeswarm-desc">Beeswarm of 138 per-

`skills/diagram-design/assets/example-box-plot-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Checkout's box is the incident · Box plot · dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;

Network accessline 6

<title>Checkout's box is the incident · Box plot · dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet"

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 34

derives the scale from the declared quartiles and flags any mark          that disagrees with its peers. -->     <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="box-plot-dark-title box-plot-dark-de

Network accessline 35

that disagrees with its peers. -->     <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="box-plot-dark-title box-plot-dark-desc">       <title id="box-plot-dark-title">Checkout's box is the incident<

Network accessline 36

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="box-plot-dark-title box-plot-dark-desc">

`skills/diagram-design/assets/example-box-plot-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Checkout's box is the incident · Box plot</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600

Network accessline 6

<title>Checkout's box is the incident · Box plot</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <st

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 44

derives the scale from the declared quartiles and flags any mark            that disagrees with its peers. -->       <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="box-plot-full-title box-plot-ful

Network accessline 45

that disagrees with its peers. -->       <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="box-plot-full-title box-plot-full-desc">         <title id="box-plot-full-title">Checkout's box is the incid

Network accessline 46

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="box-plot-full-title box-plot-full-desc">

`skills/diagram-design/assets/example-box-plot.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Checkout's box is the incident · Box plot</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600

Network accessline 6

<title>Checkout's box is the incident · Box plot</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <st

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 34

derives the scale from the declared quartiles and flags any mark          that disagrees with its peers. -->     <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="box-plot-title box-plot-desc">

Network accessline 35

that disagrees with its peers. -->     <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="box-plot-title box-plot-desc">       <title id="box-plot-title">Checkout's box is the incident</title>

Network accessline 36

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="box-plot-title box-plot-desc">

`skills/diagram-design/assets/example-bubble-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>p95 vs error rate, sized by traffic · Bubble · dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@4

Network accessline 6

<title>p95 vs error rate, sized by traffic · Bubble · dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="styleshe

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 34

derives all three maps from the values each bubble declares and flags          any bubble that disagrees with its peers. -->     <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="bubble-dark-title bu

Network accessline 35

any bubble that disagrees with its peers. -->     <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="bubble-dark-title bubble-dark-desc">       <title id="bubble-dark-title">The biggest risk is not th

Network accessline 36

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="bubble-dark-title bubble-dark-desc">       <title id="bubble-dark-title">The biggest risk is not the slowest service</title>       <desc id="bubble-d

`skills/diagram-design/assets/example-bubble-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>p95 vs error rate, sized by traffic · Bubble</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;

Network accessline 6

<title>p95 vs error rate, sized by traffic · Bubble</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 44

derives all three maps from the values each bubble declares and flags            any bubble that disagrees with its peers. -->       <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="bubble-full-titl

Network accessline 45

any bubble that disagrees with its peers. -->       <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="bubble-full-title bubble-full-desc">         <title id="bubble-full-title">The biggest risk is no

Network accessline 46

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="bubble-full-title bubble-full-desc">         <title id="bubble-full-title">The biggest risk is not the slowest service</title>         <desc id="bubb

`skills/diagram-design/assets/example-bubble.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>p95 vs error rate, sized by traffic · Bubble</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;

Network accessline 6

<title>p95 vs error rate, sized by traffic · Bubble</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 34

derives all three maps from the values each bubble declares and flags          any bubble that disagrees with its peers. -->     <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="bubble-title bubble-

Network accessline 35

any bubble that disagrees with its peers. -->     <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="bubble-title bubble-desc">       <title id="bubble-title">The biggest risk is not the slowest servi

Network accessline 36

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="bubble-title bubble-desc">       <title id="bubble-title">The biggest risk is not the slowest service</title>       <desc id="bubble-desc">Bubble cha

`skills/diagram-design/assets/example-bump-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Package rank by quarter · Bump chart</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&fami

Network accessline 6

<title>Package rank by quarter · Bump chart</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 31

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="bump-dark-title bump-dark-desc">       <title id="bump-dark-title">The default everyone stopped choosing</title>       <desc id="bump-dark-desc">Bump

`skills/diagram-design/assets/example-bump-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Package rank by quarter · Bump chart</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&fami

Network accessline 6

<title>Package rank by quarter · Bump chart</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 39

</div>     <div class="diagram-container">     <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="bump-full-title bump-full-desc">

Network accessline 40

<div class="diagram-container">     <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="bump-full-title bump-full-desc">         <title id="bump-full-title">The default everyone stopped choosing</title

Network accessline 41

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="bump-full-title bump-full-desc">         <title id="bump-full-title">The default everyone stopped choosing</title>         <desc id="bump-full-desc">

`skills/diagram-design/assets/example-bump.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Package rank by quarter · Bump chart</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&fami

Network accessline 6

<title>Package rank by quarter · Bump chart</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 31

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="bump-title bump-desc">       <title id="bump-title">The default everyone stopped choosing</title>       <desc id="bump-desc">Bump chart ranking six i

`skills/diagram-design/assets/example-data-flow-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Analytics pipeline · Data flow · Dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600

Network accessline 6

<title>Analytics pipeline · Data flow · Dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet">

Network accessline 41

<svg viewBox="0 0 728 356" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="data-flow-dark-title data-flow-dark-desc">

`skills/diagram-design/assets/example-data-flow-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Analytics pipeline · Data flow · Full</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600

Network accessline 6

<title>Analytics pipeline · Data flow · Full</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet">

Network accessline 60

<div class="diagram-container">     <svg viewBox="0 0 728 356" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="data-flow-full-title data-flow-full-desc">

Network accessline 61

<svg viewBox="0 0 728 356" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="data-flow-full-title data-flow-full-desc">

`skills/diagram-design/assets/example-data-flow.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Analytics pipeline · Data flow</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;fa

Network accessline 6

<title>Analytics pipeline · Data flow</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet">   <s

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet">

Network accessline 41

<svg viewBox="0 0 728 356" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="data-flow-title data-flow-desc">

`skills/diagram-design/assets/example-datalake-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Open data lake · Architecture</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geis

Network accessline 6

<title>Open data lake · Architecture</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 55

<svg viewBox="0 0 1000 488" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="datalake-dark-title datalake-dark-desc">

`skills/diagram-design/assets/example-datalake-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Open data lake · Architecture</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geis

Network accessline 6

<title>Open data lake · Architecture</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 45

<div class="diagram-container">       <svg viewBox="0 0 1000 488" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="datalake-full-title datalake-full-desc">

Network accessline 46

<svg viewBox="0 0 1000 488" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="datalake-full-title datalake-full-desc">

`skills/diagram-design/assets/example-datalake.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Open data lake · Architecture</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geis

Network accessline 6

<title>Open data lake · Architecture</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 55

<svg viewBox="0 0 1000 488" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="datalake-title datalake-desc">

`skills/diagram-design/assets/example-db-schema-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Commerce schema · database schema</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=

Network accessline 6

<title>Commerce schema · database schema</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1080 560" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="db-schema-dark-title db-schema-dark-desc">

`skills/diagram-design/assets/example-db-schema-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Commerce schema · database schema</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=

Network accessline 6

<title>Commerce schema · database schema</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 41

<div class="diagram-container">       <svg viewBox="0 0 1080 560" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="db-schema-full-title db-schema-full-desc">

Network accessline 42

<svg viewBox="0 0 1080 560" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="db-schema-full-title db-schema-full-desc">

`skills/diagram-design/assets/example-db-schema.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Commerce schema · database schema</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=

Network accessline 6

<title>Commerce schema · database schema</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1080 560" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="db-schema-title db-schema-desc">

`skills/diagram-design/assets/example-dependency-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>TypeScript monorepo dependency graph · Dependency</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400

Network accessline 6

<title>TypeScript monorepo dependency graph · Dependency</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="dependency-dark-title dependency-dark-desc">

`skills/diagram-design/assets/example-dependency-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>TypeScript monorepo dependency graph · Dependency</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400

Network accessline 6

<title>TypeScript monorepo dependency graph · Dependency</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 41

<div class="diagram-container">       <svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="dependency-full-title dependency-full-desc">

Network accessline 42

<svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="dependency-full-title dependency-full-desc">

`skills/diagram-design/assets/example-dependency.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>TypeScript monorepo dependency graph · Dependency</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400

Network accessline 6

<title>TypeScript monorepo dependency graph · Dependency</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="dependency-title dependency-desc">

`skills/diagram-design/assets/example-deployment-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Checkout service · Deployment</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geis

Network accessline 6

<title>Checkout service · Deployment</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1040 416" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="deployment-dark-title deployment-dark-desc">

`skills/diagram-design/assets/example-deployment-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Checkout service · Deployment</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geis

Network accessline 6

<title>Checkout service · Deployment</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 50

<div class="diagram-container">       <svg viewBox="0 0 1040 416" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="deployment-full-title deployment-full-desc">

Network accessline 51

<svg viewBox="0 0 1040 416" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="deployment-full-title deployment-full-desc">

`skills/diagram-design/assets/example-deployment.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Checkout service · Deployment</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geis

Network accessline 6

<title>Checkout service · Deployment</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1040 416" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="deployment-title deployment-desc">

`skills/diagram-design/assets/example-dp-integration-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Generic data platform · Integration topology (dark)</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wg

Network accessline 6

<title>Generic data platform · Integration topology (dark)</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" r

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet">

Network accessline 16

<p class="eyebrow">DP Integration · Diagram Design</p>     <h1>Generic data platform integration topology</h1>     <svg viewBox="0 0 1200 664" xmlns="http://www.w3.org/2000/svg" aria-label="Sources connect to a core data platform and three

Network accessline 17

<h1>Generic data platform integration topology</h1>     <svg viewBox="0 0 1200 664" xmlns="http://www.w3.org/2000/svg" aria-label="Sources connect to a core data platform and three consumer surfaces" role="img" aria-labelledby="dp-integrati

Network accessline 18

<svg viewBox="0 0 1200 664" xmlns="http://www.w3.org/2000/svg" aria-label="Sources connect to a core data platform and three consumer surfaces" role="img" aria-labelledby="dp-integration-dark-title dp-integration-dark-desc">

`skills/diagram-design/assets/example-dp-integration-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Generic data platform · Integration overview</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;

Network accessline 6

<title>Generic data platform · Integration overview</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="sty

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet">

Network accessline 19

<p class="subtitle">Three source patterns land in shared object storage, a query surface serves three consumer modes, and platform-wide services remain visibly cross-cutting.</p>     <div class="diagram-container">     <svg viewBox="0 0 120

Network accessline 20

<div class="diagram-container">     <svg viewBox="0 0 1200 664" xmlns="http://www.w3.org/2000/svg" aria-label="Sources connect to a core data platform and three consumer surfaces" role="img" aria-labelledby="dp-integration-full-title dp-int

Network accessline 21

<svg viewBox="0 0 1200 664" xmlns="http://www.w3.org/2000/svg" aria-label="Sources connect to a core data platform and three consumer surfaces" role="img" aria-labelledby="dp-integration-full-title dp-integration-full-desc">

`skills/diagram-design/assets/example-dp-integration.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Generic data platform · Integration topology</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;

Network accessline 6

<title>Generic data platform · Integration topology</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="sty

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet">

Network accessline 16

<p class="eyebrow">DP Integration · Diagram Design</p>     <h1>Generic data platform integration topology</h1>     <svg viewBox="0 0 1200 664" xmlns="http://www.w3.org/2000/svg" aria-label="Sources connect to a core data platform and three

Network accessline 17

<h1>Generic data platform integration topology</h1>     <svg viewBox="0 0 1200 664" xmlns="http://www.w3.org/2000/svg" aria-label="Sources connect to a core data platform and three consumer surfaces" role="img" aria-labelledby="dp-integrati

Network accessline 18

<svg viewBox="0 0 1200 664" xmlns="http://www.w3.org/2000/svg" aria-label="Sources connect to a core data platform and three consumer surfaces" role="img" aria-labelledby="dp-integration-title dp-integration-desc">

`skills/diagram-design/assets/example-dp-security-matrix-dark.html`

Network accessline 4

<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Data Platform · Access Matrix · Dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=G

Network accessline 5

<title>Data Platform · Access Matrix · Dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet"

Network accessline 6

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet">

Network accessline 17

</head> <body><main class="frame"><p class="eyebrow">DP security matrix · Diagram Design</p><h1>Data platform access matrix</h1><p class="subtitle">Five operating roles × five platform components, expressed as admin, write, read, or none.</

Network accessline 18

<body><main class="frame"><p class="eyebrow">DP security matrix · Diagram Design</p><h1>Data platform access matrix</h1><p class="subtitle">Five operating roles × five platform components, expressed as admin, write, read, or none.</p><div c

Network accessline 19

<svg viewBox="0 0 1084 400" role="img" aria-labelledby="dp-security-matrix-dark-title dp-security-matrix-dark-desc" xmlns="http://www.w3.org/2000/svg">

`skills/diagram-design/assets/example-dp-security-matrix-full.html`

Network accessline 4

<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Data Platform · Access Matrix · Editorial</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;fam

Network accessline 5

<title>Data Platform · Access Matrix · Editorial</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="styles

Network accessline 6

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet">

Network accessline 15

</head> <body><main class="container"><header class="header"><p class="header-eyebrow">DP security matrix · Diagram Design</p><h1>Data platform access matrix</h1><p class="subtitle">A compact policy view for five human roles across storage,

Network accessline 16

<body><main class="container"><header class="header"><p class="header-eyebrow">DP security matrix · Diagram Design</p><h1>Data platform access matrix</h1><p class="subtitle">A compact policy view for five human roles across storage, query,

Network accessline 17

<svg viewBox="0 0 1084 400" role="img" aria-labelledby="dp-security-matrix-full-title dp-security-matrix-full-desc" xmlns="http://www.w3.org/2000/svg">

`skills/diagram-design/assets/example-dp-security-matrix.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Data Platform · Access Matrix</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;fam

Network accessline 6

<title>Data Platform · Access Matrix</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet">   <st

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet">

Network accessline 27

<p class="eyebrow">DP security matrix · Diagram Design</p><h1>Data platform access matrix</h1><p class="subtitle">Five operating roles × five platform components, expressed as admin, write, read, or none.</p>     <div class="diagram">

Network accessline 28

<div class="diagram">       <svg viewBox="0 0 1084 400" role="img" aria-labelledby="dp-security-matrix-title dp-security-matrix-desc" xmlns="http://www.w3.org/2000/svg">         <title id="dp-security-matrix-title">Data platform access matr

Network accessline 29

<svg viewBox="0 0 1084 400" role="img" aria-labelledby="dp-security-matrix-title dp-security-matrix-desc" xmlns="http://www.w3.org/2000/svg">

`skills/diagram-design/assets/example-er-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Content platform · ER model</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+

Network accessline 6

<title>Content platform · ER model</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 480" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="er-dark-title er-dark-desc">

`skills/diagram-design/assets/example-er-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Content platform · ER model</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+

Network accessline 6

<title>Content platform · ER model</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 41

<div class="diagram-container">       <svg viewBox="0 0 1000 480" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="er-full-title er-full-desc">

Network accessline 42

<svg viewBox="0 0 1000 480" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="er-full-title er-full-desc">

`skills/diagram-design/assets/example-er.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Content platform · ER model</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+

Network accessline 6

<title>Content platform · ER model</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 480" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="er-title er-desc">

`skills/diagram-design/assets/example-exploded-ai-stack-animated.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>AI agent stack · What sits under the prompt</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;6

Network accessline 6

<title>AI agent stack · What sits under the prompt</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&family=Noto+Serif:ital@0;1&family=N

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&family=Noto+Serif:ital@0;1&family=Noto+Sans+KR:wght@400;500;600&family=Noto+Serif+KR:wght@400&fa

Network accessline 210

<div class="diagram-container">       <svg viewBox="0 0 1000 808" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-ai-stack-animated-title exploded-ai-stack-animated-desc">

Network accessline 211

<svg viewBox="0 0 1000 808" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-ai-stack-animated-title exploded-ai-stack-animated-desc">

`skills/diagram-design/assets/example-exploded-ai-stack-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>AI agent stack · What sits under the prompt</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;6

Network accessline 6

<title>AI agent stack · What sits under the prompt</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 66

<div class="diagram-container">       <svg viewBox="0 0 1000 808" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-ai-stack-dark-title exploded-ai-stack-dark-desc">

Network accessline 67

<svg viewBox="0 0 1000 808" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-ai-stack-dark-title exploded-ai-stack-dark-desc">

`skills/diagram-design/assets/example-exploded-ai-stack-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>AI agent stack · What sits under the prompt</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;6

Network accessline 6

<title>AI agent stack · What sits under the prompt</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 42

<div class="diagram-container">       <svg viewBox="0 0 1000 808" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-ai-stack-full-title exploded-ai-stack-full-desc">

Network accessline 43

<svg viewBox="0 0 1000 808" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-ai-stack-full-title exploded-ai-stack-full-desc">

`skills/diagram-design/assets/example-exploded-ai-stack.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>AI agent stack · What sits under the prompt</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;6

Network accessline 6

<title>AI agent stack · What sits under the prompt</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 66

<div class="diagram-container">       <svg viewBox="0 0 1000 808" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-ai-stack-title exploded-ai-stack-desc">

Network accessline 67

<svg viewBox="0 0 1000 808" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-ai-stack-title exploded-ai-stack-desc">

`skills/diagram-design/assets/example-exploded-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>App stack · Three layers, one product</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&fam

Network accessline 6

<title>App stack · Three layers, one product</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 66

<div class="diagram-container">       <svg viewBox="0 0 1000 556" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-dark-title exploded-dark-desc">

Network accessline 67

<svg viewBox="0 0 1000 556" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-dark-title exploded-dark-desc">

`skills/diagram-design/assets/example-exploded-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>App stack · Three layers, one product</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&fam

Network accessline 6

<title>App stack · Three layers, one product</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 42

<div class="diagram-container">       <svg viewBox="0 0 1000 556" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-full-title exploded-full-desc">

Network accessline 43

<svg viewBox="0 0 1000 556" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-full-title exploded-full-desc">

`skills/diagram-design/assets/example-exploded-keyboard-animated.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Mechanical keyboard · Five layers under your fingers</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@

Network accessline 6

<title>Mechanical keyboard · Five layers under your fingers</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&family=Noto+Serif:ital@0;1

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&family=Noto+Serif:ital@0;1&family=Noto+Sans+KR:wght@400;500;600&family=Noto+Serif+KR:wght@400&fa

Network accessline 210

<div class="diagram-container">       <svg viewBox="0 0 1000 736" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-keyboard-animated-title exploded-keyboard-animated-desc">

Network accessline 211

<svg viewBox="0 0 1000 736" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-keyboard-animated-title exploded-keyboard-animated-desc">

`skills/diagram-design/assets/example-exploded-keyboard-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Mechanical keyboard · Five layers under your fingers</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@

Network accessline 6

<title>Mechanical keyboard · Five layers under your fingers</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesh

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 66

<div class="diagram-container">       <svg viewBox="0 0 1000 736" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-keyboard-dark-title exploded-keyboard-dark-desc">

Network accessline 67

<svg viewBox="0 0 1000 736" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-keyboard-dark-title exploded-keyboard-dark-desc">

`skills/diagram-design/assets/example-exploded-keyboard-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Mechanical keyboard · Five layers under your fingers</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@

Network accessline 6

<title>Mechanical keyboard · Five layers under your fingers</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesh

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 42

<div class="diagram-container">       <svg viewBox="0 0 1000 736" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-keyboard-full-title exploded-keyboard-full-desc">

Network accessline 43

<svg viewBox="0 0 1000 736" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-keyboard-full-title exploded-keyboard-full-desc">

`skills/diagram-design/assets/example-exploded-keyboard.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Mechanical keyboard · Five layers under your fingers</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@

Network accessline 6

<title>Mechanical keyboard · Five layers under your fingers</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesh

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 66

<div class="diagram-container">       <svg viewBox="0 0 1000 736" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-keyboard-title exploded-keyboard-desc">

Network accessline 67

<svg viewBox="0 0 1000 736" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-keyboard-title exploded-keyboard-desc">

`skills/diagram-design/assets/example-exploded-phone-animated.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Phone teardown · What sits under the glass</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;60

Network accessline 6

<title>Phone teardown · What sits under the glass</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&family=Noto+Serif:ital@0;1&family=No

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&family=Noto+Serif:ital@0;1&family=Noto+Sans+KR:wght@400;500;600&family=Noto+Serif+KR:wght@400&fa

Network accessline 210

<div class="diagram-container">       <svg viewBox="0 0 1000 624" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-phone-animated-title exploded-phone-animated-desc">

Network accessline 211

<svg viewBox="0 0 1000 624" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-phone-animated-title exploded-phone-animated-desc">

`skills/diagram-design/assets/example-exploded-phone-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Phone teardown · What sits under the glass</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;60

Network accessline 6

<title>Phone teardown · What sits under the glass</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <s

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 66

<div class="diagram-container">       <svg viewBox="0 0 1000 624" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-phone-dark-title exploded-phone-dark-desc">

Network accessline 67

<svg viewBox="0 0 1000 624" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-phone-dark-title exploded-phone-dark-desc">

`skills/diagram-design/assets/example-exploded-phone-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Phone teardown · What sits under the glass</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;60

Network accessline 6

<title>Phone teardown · What sits under the glass</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <s

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 42

<div class="diagram-container">       <svg viewBox="0 0 1000 624" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-phone-full-title exploded-phone-full-desc">

Network accessline 43

<svg viewBox="0 0 1000 624" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-phone-full-title exploded-phone-full-desc">

`skills/diagram-design/assets/example-exploded-phone.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Phone teardown · What sits under the glass</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;60

Network accessline 6

<title>Phone teardown · What sits under the glass</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <s

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 66

<div class="diagram-container">       <svg viewBox="0 0 1000 624" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-phone-title exploded-phone-desc">

Network accessline 67

<svg viewBox="0 0 1000 624" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-phone-title exploded-phone-desc">

`skills/diagram-design/assets/example-exploded-unboxing-animated.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Unboxing · What you see, in the order you see it</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;

Network accessline 6

<title>Unboxing · What you see, in the order you see it</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&family=Noto+Serif:ital@0;1&fam

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&family=Noto+Serif:ital@0;1&family=Noto+Sans+KR:wght@400;500;600&family=Noto+Serif+KR:wght@400&fa

Network accessline 210

<div class="diagram-container">       <svg viewBox="0 0 1000 964" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-unboxing-animated-title exploded-unboxing-animated-desc">

Network accessline 211

<svg viewBox="0 0 1000 964" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-unboxing-animated-title exploded-unboxing-animated-desc">

`skills/diagram-design/assets/example-exploded-unboxing-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Unboxing · What you see, in the order you see it</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;

Network accessline 6

<title>Unboxing · What you see, in the order you see it</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet"

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 66

<div class="diagram-container">       <svg viewBox="0 0 1000 964" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-unboxing-dark-title exploded-unboxing-dark-desc">

Network accessline 67

<svg viewBox="0 0 1000 964" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-unboxing-dark-title exploded-unboxing-dark-desc">

`skills/diagram-design/assets/example-exploded-unboxing-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Unboxing · What you see, in the order you see it</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;

Network accessline 6

<title>Unboxing · What you see, in the order you see it</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet"

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 42

<div class="diagram-container">       <svg viewBox="0 0 1000 964" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-unboxing-full-title exploded-unboxing-full-desc">

Network accessline 43

<svg viewBox="0 0 1000 964" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-unboxing-full-title exploded-unboxing-full-desc">

`skills/diagram-design/assets/example-exploded-unboxing.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Unboxing · What you see, in the order you see it</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;

Network accessline 6

<title>Unboxing · What you see, in the order you see it</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet"

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 66

<div class="diagram-container">       <svg viewBox="0 0 1000 964" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-unboxing-title exploded-unboxing-desc">

Network accessline 67

<svg viewBox="0 0 1000 964" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-unboxing-title exploded-unboxing-desc">

`skills/diagram-design/assets/example-exploded.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>App stack · Three layers, one product</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&fam

Network accessline 6

<title>App stack · Three layers, one product</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 66

<div class="diagram-container">       <svg viewBox="0 0 1000 556" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-title exploded-desc">

Network accessline 67

<svg viewBox="0 0 1000 556" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-title exploded-desc">

`skills/diagram-design/assets/example-fishbone-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Checkout p99 latency · Root-cause fishbone</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;60

Network accessline 6

<title>Checkout p99 latency · Root-cause fishbone</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <s

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="-40 0 1480 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="fishbone-dark-title fishbone-dark-desc">

`skills/diagram-design/assets/example-fishbone-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Checkout p99 latency · Root-cause fishbone</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;60

Network accessline 6

<title>Checkout p99 latency · Root-cause fishbone</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <s

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 42

<div class="diagram-container">       <svg viewBox="-40 0 1480 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="fishbone-full-title fishbone-full-desc">

Network accessline 43

<svg viewBox="-40 0 1480 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="fishbone-full-title fishbone-full-desc">

`skills/diagram-design/assets/example-fishbone.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Checkout p99 latency · Root-cause fishbone</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;60

Network accessline 6

<title>Checkout p99 latency · Root-cause fishbone</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <s

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="-40 0 1480 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="fishbone-title fishbone-desc">

`skills/diagram-design/assets/example-flowchart-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Should you write this as a skill?</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=

Network accessline 6

<title>Should you write this as a skill?</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 66

<div class="diagram-container">       <svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="flowchart-dark-title flowchart-dark-desc">

Network accessline 67

<svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="flowchart-dark-title flowchart-dark-desc">

`skills/diagram-design/assets/example-flowchart-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Should you write this as a skill?</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=

Network accessline 6

<title>Should you write this as a skill?</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 42

<div class="diagram-container">       <svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="flowchart-full-title flowchart-full-desc">

Network accessline 43

<svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="flowchart-full-title flowchart-full-desc">

`skills/diagram-design/assets/example-flowchart.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Should you write this as a skill?</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=

Network accessline 6

<title>Should you write this as a skill?</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 66

<div class="diagram-container">       <svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="flowchart-title flowchart-desc">

Network accessline 67

<svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="flowchart-title flowchart-desc">

`skills/diagram-design/assets/example-gantt-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Q2 product launch · Gantt · dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=G

Network accessline 6

<title>Q2 product launch · Gantt · dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 25

<!-- Row height=40, bar h=24, bar top pad=8 -->     <!-- Week x = 200 + i*63, i=0..12 -->     <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="gantt-dark-title gantt-dark-desc">

Network accessline 26

<!-- Week x = 200 + i*63, i=0..12 -->     <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="gantt-dark-title gantt-dark-desc">       <title id="gantt-dark-title">Q2 product launch · 12-week plan</tit

Network accessline 27

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="gantt-dark-title gantt-dark-desc">

`skills/diagram-design/assets/example-gantt-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Q2 product launch · Gantt</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mo

Network accessline 6

<title>Q2 product launch · Gantt</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 37

</div>     <div class="diagram-container">       <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="gantt-full-title gantt-full-desc">

Network accessline 38

<div class="diagram-container">       <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="gantt-full-title gantt-full-desc">         <title id="gantt-full-title">Q2 product launch · 12-week plan</title

Network accessline 39

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="gantt-full-title gantt-full-desc">

`skills/diagram-design/assets/example-gantt.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Q2 product launch · Gantt</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mo

Network accessline 6

<title>Q2 product launch · Gantt</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 25

<!-- Row height=40, bar h=24, bar top pad=8 -->     <!-- Week x = 200 + i*63, i=0..12 -->     <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="gantt-title gantt-desc">

Network accessline 26

<!-- Week x = 200 + i*63, i=0..12 -->     <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="gantt-title gantt-desc">       <title id="gantt-title">Q2 product launch · 12-week plan</title>

Network accessline 27

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="gantt-title gantt-desc">

`skills/diagram-design/assets/example-heatmap-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>CI failure rate by service and sprint · Heatmap</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;5

Network accessline 6

<title>CI failure rate by service and sprint · Heatmap</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 31

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="heatmap-dark-title heatmap-dark-desc">

`skills/diagram-design/assets/example-heatmap-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>CI failure rate by service and sprint · Heatmap</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;5

Network accessline 6

<title>CI failure rate by service and sprint · Heatmap</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 41

<div class="diagram-container">       <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="heatmap-full-title heatmap-full-desc">

Network accessline 42

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="heatmap-full-title heatmap-full-desc">

`skills/diagram-design/assets/example-heatmap.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>CI failure rate by service and sprint · Heatmap</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;5

Network accessline 6

<title>CI failure rate by service and sprint · Heatmap</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 31

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="heatmap-title heatmap-desc">

`skills/diagram-design/assets/example-high-level-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>High-level architecture · End-to-end stack</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;60

Network accessline 6

<title>High-level architecture · End-to-end stack</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <s

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 55

<svg viewBox="0 0 1000 540" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="high-level-dark-title high-level-dark-desc">

`skills/diagram-design/assets/example-high-level-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>High-level architecture · End-to-end stack</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;60

Network accessline 6

<title>High-level architecture · End-to-end stack</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <s

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 43

<div class="diagram-container">       <svg viewBox="0 0 1000 540" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="high-level-full-title high-level-full-desc">

Network accessline 44

<svg viewBox="0 0 1000 540" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="high-level-full-title high-level-full-desc">

`skills/diagram-design/assets/example-high-level-vertical-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>High-level architecture · Vertical chevrons (dark)</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@40

Network accessline 6

<title>High-level architecture · Vertical chevrons (dark)</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="styleshee

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 55

<svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="high-level-vertical-dark-title high-level-vertical-dark-desc">

`skills/diagram-design/assets/example-high-level-vertical-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>High-level architecture · Vertical chevrons (editorial)</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wg

Network accessline 6

<title>High-level architecture · Vertical chevrons (editorial)</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="styl

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 43

<div class="diagram-container">       <svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="high-level-vertical-full-title high-level-vertical-full-desc">

Network accessline 44

<svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="high-level-vertical-full-title high-level-vertical-full-desc">

`skills/diagram-design/assets/example-high-level-vertical.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>High-level architecture · Vertical chevrons (Orchestration + Security)</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&

Network accessline 6

<title>High-level architecture · Vertical chevrons (Orchestration + Security)</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 55

<svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="high-level-vertical-title high-level-vertical-desc">

`skills/diagram-design/assets/example-high-level.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>High-level architecture · End-to-end stack</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;60

Network accessline 6

<title>High-level architecture · End-to-end stack</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <s

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 55

<svg viewBox="0 0 1000 540" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="high-level-title high-level-desc">

`skills/diagram-design/assets/example-import-drawio.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Imported from draw.io — Order platform</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&fa

Network accessline 6

<title>Imported from draw.io — Order platform</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 960 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="import-drawio-title import-drawio-desc">

`skills/diagram-design/assets/example-import-excalidraw.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Imported from Excalidraw — Lead intake</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Geist:wght@400;500;600&family=Geis

Network accessline 6

<title>Imported from Excalidraw — Lead intake</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">

Network accessline 22

<h1>Lead capture and CRM intake</h1>     <div class="diagram-container">     <svg viewBox="0 0 960 600" role="img" aria-labelledby="import-excalidraw-title import-excalidraw-desc" xmlns="http://www.w3.org/2000/svg">

Network accessline 23

<div class="diagram-container">     <svg viewBox="0 0 960 600" role="img" aria-labelledby="import-excalidraw-title import-excalidraw-desc" xmlns="http://www.w3.org/2000/svg">       <title id="import-excalidraw-title">Lead intake flow</title

Network accessline 24

<svg viewBox="0 0 960 600" role="img" aria-labelledby="import-excalidraw-title import-excalidraw-desc" xmlns="http://www.w3.org/2000/svg">

`skills/diagram-design/assets/example-import-mermaid.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Imported from Mermaid — Request validation</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Geist:wght@400;500;600&family=

Network accessline 6

<title>Imported from Mermaid — Request validation</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">

Network accessline 20

<p class="eyebrow">Flowchart · Imported from Mermaid · doc-inline · balanced</p>     <h1>Request validation and order storage</h1>     <svg viewBox="0 0 960 600" role="img" aria-labelledby="import-mermaid-title import-mermaid-desc" xmlns="h

Network accessline 21

<h1>Request validation and order storage</h1>     <svg viewBox="0 0 960 600" role="img" aria-labelledby="import-mermaid-title import-mermaid-desc" xmlns="http://www.w3.org/2000/svg">       <title id="import-mermaid-title">Request validation

Network accessline 22

<svg viewBox="0 0 960 600" role="img" aria-labelledby="import-mermaid-title import-mermaid-desc" xmlns="http://www.w3.org/2000/svg">       <title id="import-mermaid-title">Request validation flow</title>       <desc id="import-mermaid-desc"

`skills/diagram-design/assets/example-it-state-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Northwind Retail · Current IT Landscape · Dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@40

Network accessline 6

<title>Northwind Retail · Current IT Landscape · Dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="s

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet">

Network accessline 35

<p class="subtitle">File exports, desktop spreadsheets, and manual publication before a shared data platform.</p>     <div class="diagram">       <svg viewBox="0 0 960 500" role="img" aria-labelledby="it-state-dark-title it-state-dark-desc"

Network accessline 36

<div class="diagram">       <svg viewBox="0 0 960 500" role="img" aria-labelledby="it-state-dark-title it-state-dark-desc" xmlns="http://www.w3.org/2000/svg">         <title id="it-state-dark-title">Northwind Retail current IT landscape</ti

Network accessline 37

<svg viewBox="0 0 960 500" role="img" aria-labelledby="it-state-dark-title it-state-dark-desc" xmlns="http://www.w3.org/2000/svg">

`skills/diagram-design/assets/example-it-state-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Northwind Retail · Current IT Landscape · Editorial</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wg

Network accessline 6

<title>Northwind Retail · Current IT Landscape · Editorial</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" r

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet">

Network accessline 35

<header class="header"><p class="header-eyebrow">IT current-state · Northwind Retail</p><h1>Legacy retail reporting landscape</h1><p class="subtitle">Sales and supplier files converge on a shared drive, move through desktop workbooks, and r

Network accessline 36

<div class="diagram-container">       <svg viewBox="0 0 960 500" role="img" aria-labelledby="it-state-full-title it-state-full-desc" xmlns="http://www.w3.org/2000/svg">         <title id="it-state-full-title">Northwind Retail current IT lan

Network accessline 37

<svg viewBox="0 0 960 500" role="img" aria-labelledby="it-state-full-title it-state-full-desc" xmlns="http://www.w3.org/2000/svg">

`skills/diagram-design/assets/example-it-state.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Northwind Retail · Current IT Landscape</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;6

Network accessline 6

<title>Northwind Retail · Current IT Landscape</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="styleshe

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet">

Network accessline 45

<p class="subtitle">File exports, desktop spreadsheets, and manual publication before a shared data platform.</p>     <div class="diagram">       <svg viewBox="0 0 960 500" role="img" aria-labelledby="it-state-title it-state-desc" xmlns="ht

Network accessline 46

<div class="diagram">       <svg viewBox="0 0 960 500" role="img" aria-labelledby="it-state-title it-state-desc" xmlns="http://www.w3.org/2000/svg">         <title id="it-state-title">Northwind Retail current IT landscape</title>

Network accessline 47

<svg viewBox="0 0 960 500" role="img" aria-labelledby="it-state-title it-state-desc" xmlns="http://www.w3.org/2000/svg">

`skills/diagram-design/assets/example-journey-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Trial to paid: the first week · User journey map</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;

Network accessline 6

<title>Trial to paid: the first week · User journey map</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet"

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1200 520" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="journey-dark-title journey-dark-desc">

`skills/diagram-design/assets/example-journey-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Trial to paid: the first week · User journey map</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;

Network accessline 6

<title>Trial to paid: the first week · User journey map</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet"

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 41

<div class="diagram-container">       <svg viewBox="0 0 1200 520" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="journey-full-title journey-full-desc">

Network accessline 42

<svg viewBox="0 0 1200 520" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="journey-full-title journey-full-desc">

`skills/diagram-design/assets/example-journey.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Trial to paid: the first week · User journey map</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;

Network accessline 6

<title>Trial to paid: the first week · User journey map</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet"

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1200 520" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="journey-title journey-desc">

`skills/diagram-design/assets/example-kanban-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Platform team board · Kanban</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist

Network accessline 6

<title>Platform team board · Kanban</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1120 440" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="kanban-dark-title kanban-dark-desc">

`skills/diagram-design/assets/example-kanban-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Platform team board · Kanban</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist

Network accessline 6

<title>Platform team board · Kanban</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 42

<div class="diagram-container">       <svg viewBox="0 0 1120 440" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="kanban-full-title kanban-full-desc">

Network accessline 43

<svg viewBox="0 0 1120 440" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="kanban-full-title kanban-full-desc">

`skills/diagram-design/assets/example-kanban.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Platform team board · Kanban</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist

Network accessline 6

<title>Platform team board · Kanban</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1120 440" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="kanban-title kanban-desc">

`skills/diagram-design/assets/example-layers-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>AI app stack · Layer hierarchy</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Gei

Network accessline 6

<title>AI app stack · Layer hierarchy</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="layers-dark-title layers-dark-desc">

`skills/diagram-design/assets/example-layers-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>AI app stack · Layer hierarchy</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Gei

Network accessline 6

<title>AI app stack · Layer hierarchy</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 41

<div class="diagram-container">       <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="layers-full-title layers-full-desc">

Network accessline 42

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="layers-full-title layers-full-desc">

`skills/diagram-design/assets/example-layers.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>AI app stack · Layer hierarchy</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Gei

Network accessline 6

<title>AI app stack · Layer hierarchy</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="layers-title layers-desc">

`skills/diagram-design/assets/example-line-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Weekly signups · Line chart · dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family

Network accessline 6

<title>Weekly signups · Line chart · dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 23

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="line-dark-title line-dark-desc">

`skills/diagram-design/assets/example-line-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Weekly signups · Line chart</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+

Network accessline 6

<title>Weekly signups · Line chart</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 37

</div>     <div class="diagram-container">       <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="line-full-title line-full-desc">

Network accessline 38

<div class="diagram-container">       <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="line-full-title line-full-desc">         <title id="line-full-title">Weekly signups · Organic leads the growth<

Network accessline 39

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="line-full-title line-full-desc">

`skills/diagram-design/assets/example-line.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Weekly signups · Line chart</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+

Network accessline 6

<title>Weekly signups · Line chart</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 23

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="line-title line-desc">

`skills/diagram-design/assets/example-loop-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>   <title>The self-improving loop · Dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;f

Network accessline 6

<title>The self-improving loop · Dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet"/>   <

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet"/>

Network accessline 39

<svg viewBox="0 0 1040 680" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="loop-dark-title loop-dark-desc">

`skills/diagram-design/assets/example-loop-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>   <title>The self-improving loop · Full</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;f

Network accessline 6

<title>The self-improving loop · Full</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet"/>   <

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet"/>

Network accessline 58

<div class="diagram-container">       <svg viewBox="0 0 1040 680" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="loop-full-title loop-full-desc">

Network accessline 59

<svg viewBox="0 0 1040 680" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="loop-full-title loop-full-desc">

`skills/diagram-design/assets/example-loop-terminal.html`

Network accessline 6

<title>The self-improving loop · Terminal</title>     <link       href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&amp;display=swap"

Network accessline 7

<link       href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&amp;display=swap"       rel="stylesheet"

Network accessline 8

href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&amp;display=swap"

Network accessline 172

<svg           viewBox="0 0 1040 680"           xmlns="http://www.w3.org/2000/svg"

Network accessline 173

viewBox="0 0 1040 680"           xmlns="http://www.w3.org/2000/svg"           role="img"

Network accessline 174
```
xmlns="http://www.w3.org/2000/svg"
```

`skills/diagram-design/assets/example-loop.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>   <title>The self-improving loop</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=G

Network accessline 6

<title>The self-improving loop</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet"/>   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet"/>

Network accessline 39

<svg viewBox="0 0 1040 680" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="loop-title loop-desc">

`skills/diagram-design/assets/example-marimekko-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>CI minutes by pipeline and runner · Marimekko · dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@

Network accessline 6

<title>CI minutes by pipeline and runner · Marimekko · dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesh

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 32

<div class="diagram-container">     <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="marimekko-dark-title marimekko-dark-desc">

Network accessline 33

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="marimekko-dark-title marimekko-dark-desc">

`skills/diagram-design/assets/example-marimekko-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>CI minutes by pipeline and runner · Marimekko</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500

Network accessline 6

<title>CI minutes by pipeline and runner · Marimekko</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 37

</div>     <div class="diagram-container">         <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="marimekko-full-title marimekko-full-desc">

Network accessline 38

<div class="diagram-container">         <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="marimekko-full-title marimekko-full-desc">           <title id="marimekko-full-title">One pipeline on one run

Network accessline 39

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="marimekko-full-title marimekko-full-desc">

`skills/diagram-design/assets/example-marimekko.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>CI minutes by pipeline and runner · Marimekko</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500

Network accessline 6

<title>CI minutes by pipeline and runner · Marimekko</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 32

<div class="diagram-container">     <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="marimekko-title marimekko-desc">

Network accessline 33

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="marimekko-title marimekko-desc">

`skills/diagram-design/assets/example-medallion-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>E-commerce analytics · Medallion · Dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;6

Network accessline 6

<title>E-commerce analytics · Medallion · Dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="styleshe

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet">

Network accessline 40

<svg viewBox="0 0 1040 548" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="medallion-dark-title medallion-dark-desc">

Network accessline 70

<text x="102" y="144" class="bucket">raw-commerce</text>       <text x="32" y="180" class="field-label">Tool</text>       <foreignObject x="32" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" st

Network accessline 71

<text x="32" y="180" class="field-label">Tool</text>       <foreignObject x="32" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">NiFi ingest</div></foreignObject>

Network accessline 72

<foreignObject x="32" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">NiFi ingest</div></foreignObject>

Network accessline 73

<text x="32" y="220" class="field-label">Format</text>       <foreignObject x="32" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">JSON · Parquet</div></foreignObject>

Network accessline 74

<foreignObject x="32" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">JSON · Parquet</div></foreignObject>

Network accessline 75

<text x="32" y="260" class="field-label">Writer</text>       <foreignObject x="32" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Engineer</div></foreignObject>

Network accessline 76

<foreignObject x="32" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Engineer</div></foreignObject>

Network accessline 86

<text x="290" y="144" class="bucket">anon-commerce</text>       <text x="220" y="180" class="field-label">Tool</text>       <foreignObject x="220" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value"

Network accessline 87

<text x="220" y="180" class="field-label">Tool</text>       <foreignObject x="220" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Trino SQL</div></foreignObject>

Network accessline 88

<foreignObject x="220" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Trino SQL</div></foreignObject>

Network accessline 89

<text x="220" y="220" class="field-label">Format</text>       <foreignObject x="220" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Iceberg · partitioned</div></foreign

Network accessline 90

<foreignObject x="220" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Iceberg · partitioned</div></foreignObject>

Network accessline 91

<text x="220" y="260" class="field-label">Writer</text>       <foreignObject x="220" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Engineer</div></foreignObject>

Network accessline 92

<foreignObject x="220" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Engineer</div></foreignObject>

Network accessline 102

<text x="478" y="144" class="bucket">staging-commerce</text>       <text x="408" y="180" class="field-label">Tool</text>       <foreignObject x="408" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-val

Network accessline 103

<text x="408" y="180" class="field-label">Tool</text>       <foreignObject x="408" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Trino · notebooks</div></foreignObject

Network accessline 104

<foreignObject x="408" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Trino · notebooks</div></foreignObject>

Network accessline 105

<text x="408" y="220" class="field-label">Format</text>       <foreignObject x="408" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Iceberg · cleaned</div></foreignObje

Network accessline 106

<foreignObject x="408" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Iceberg · cleaned</div></foreignObject>

Network accessline 107

<text x="408" y="260" class="field-label">Writer</text>       <foreignObject x="408" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Scientist</div></foreignObject>

Network accessline 108

<foreignObject x="408" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Scientist</div></foreignObject>

Network accessline 118

<text x="666" y="144" class="bucket focal-text">analytics-marts</text>       <text x="596" y="180" class="field-label">Tool</text>       <foreignObject x="596" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class=

Network accessline 119

<text x="596" y="180" class="field-label">Tool</text>       <foreignObject x="596" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Trino INSERT</div></foreignObject>

Network accessline 120

<foreignObject x="596" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Trino INSERT</div></foreignObject>

Network accessline 121

<text x="596" y="220" class="field-label">Format</text>       <foreignObject x="596" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Iceberg · metrics</div></foreignObje

Network accessline 122

<foreignObject x="596" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Iceberg · metrics</div></foreignObject>

Network accessline 123

<text x="596" y="260" class="field-label">Writer</text>       <foreignObject x="596" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Scientist</div></foreignObject>

Network accessline 124

<foreignObject x="596" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Scientist</div></foreignObject>

Network accessline 134

<text x="854" y="144" class="bucket">archive-commerce</text>       <text x="784" y="180" class="field-label">Tool</text>       <foreignObject x="784" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-val

Network accessline 135

<text x="784" y="180" class="field-label">Tool</text>       <foreignObject x="784" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Object storage lifecycle</div></foreig

Network accessline 136

<foreignObject x="784" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Object storage lifecycle</div></foreignObject>

Network accessline 137

<text x="784" y="220" class="field-label">Format</text>       <foreignObject x="784" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Cold tier · immutable</div></foreign

Network accessline 138

<foreignObject x="784" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Cold tier · immutable</div></foreignObject>

Network accessline 139

<text x="784" y="260" class="field-label">Writer</text>       <foreignObject x="784" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Engineer</div></foreignObject>

Network accessline 140

<foreignObject x="784" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Engineer</div></foreignObject>

`skills/diagram-design/assets/example-medallion-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>E-commerce analytics · Medallion · Full</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;6

Network accessline 6

<title>E-commerce analytics · Medallion · Full</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="styleshe

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet">

Network accessline 59

<div class="diagram-container">     <svg viewBox="0 0 1040 548" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="medallion-full-title medallion-full-desc">

Network accessline 60

<svg viewBox="0 0 1040 548" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="medallion-full-title medallion-full-desc">

Network accessline 90

<text x="102" y="144" class="bucket">raw-commerce</text>       <text x="32" y="180" class="field-label">Tool</text>       <foreignObject x="32" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" st

Network accessline 91

<text x="32" y="180" class="field-label">Tool</text>       <foreignObject x="32" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">NiFi ingest</div></foreignObject>

Network accessline 92

<foreignObject x="32" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">NiFi ingest</div></foreignObject>

Network accessline 93

<text x="32" y="220" class="field-label">Format</text>       <foreignObject x="32" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">JSON · Parquet</div></foreignObject>

Network accessline 94

<foreignObject x="32" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">JSON · Parquet</div></foreignObject>

Network accessline 95

<text x="32" y="260" class="field-label">Writer</text>       <foreignObject x="32" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Engineer</div></foreignObject>

Network accessline 96

<foreignObject x="32" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Engineer</div></foreignObject>

Network accessline 106

<text x="290" y="144" class="bucket">anon-commerce</text>       <text x="220" y="180" class="field-label">Tool</text>       <foreignObject x="220" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value"

Network accessline 107

<text x="220" y="180" class="field-label">Tool</text>       <foreignObject x="220" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Trino SQL</div></foreignObject>

Network accessline 108

<foreignObject x="220" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Trino SQL</div></foreignObject>

Network accessline 109

<text x="220" y="220" class="field-label">Format</text>       <foreignObject x="220" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Iceberg · partitioned</div></foreign

Network accessline 110

<foreignObject x="220" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Iceberg · partitioned</div></foreignObject>

Network accessline 111

<text x="220" y="260" class="field-label">Writer</text>       <foreignObject x="220" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Engineer</div></foreignObject>

Network accessline 112

<foreignObject x="220" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Engineer</div></foreignObject>

Network accessline 122

<text x="478" y="144" class="bucket">staging-commerce</text>       <text x="408" y="180" class="field-label">Tool</text>       <foreignObject x="408" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-val

Network accessline 123

<text x="408" y="180" class="field-label">Tool</text>       <foreignObject x="408" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Trino · notebooks</div></foreignObject

Network accessline 124

<foreignObject x="408" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Trino · notebooks</div></foreignObject>

Network accessline 125

<text x="408" y="220" class="field-label">Format</text>       <foreignObject x="408" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Iceberg · cleaned</div></foreignObje

Network accessline 126

<foreignObject x="408" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Iceberg · cleaned</div></foreignObject>

Network accessline 127

<text x="408" y="260" class="field-label">Writer</text>       <foreignObject x="408" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Scientist</div></foreignObject>

Network accessline 128

<foreignObject x="408" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Scientist</div></foreignObject>

Network accessline 138

<text x="666" y="144" class="bucket focal-text">analytics-marts</text>       <text x="596" y="180" class="field-label">Tool</text>       <foreignObject x="596" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class=

Network accessline 139

<text x="596" y="180" class="field-label">Tool</text>       <foreignObject x="596" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Trino INSERT</div></foreignObject>

Network accessline 140

<foreignObject x="596" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Trino INSERT</div></foreignObject>

Network accessline 141

<text x="596" y="220" class="field-label">Format</text>       <foreignObject x="596" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Iceberg · metrics</div></foreignObje

Network accessline 142

<foreignObject x="596" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Iceberg · metrics</div></foreignObject>

Network accessline 143

<text x="596" y="260" class="field-label">Writer</text>       <foreignObject x="596" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Scientist</div></foreignObject>

Network accessline 144

<foreignObject x="596" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Scientist</div></foreignObject>

Network accessline 154

<text x="854" y="144" class="bucket">archive-commerce</text>       <text x="784" y="180" class="field-label">Tool</text>       <foreignObject x="784" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-val

Network accessline 155

<text x="784" y="180" class="field-label">Tool</text>       <foreignObject x="784" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Object storage lifecycle</div></foreig

Network accessline 156

<foreignObject x="784" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Object storage lifecycle</div></foreignObject>

Network accessline 157

<text x="784" y="220" class="field-label">Format</text>       <foreignObject x="784" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Cold tier · immutable</div></foreign

Network accessline 158

<foreignObject x="784" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Cold tier · immutable</div></foreignObject>

Network accessline 159

<text x="784" y="260" class="field-label">Writer</text>       <foreignObject x="784" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Engineer</div></foreignObject>

Network accessline 160

<foreignObject x="784" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Engineer</div></foreignObject>

`skills/diagram-design/assets/example-medallion.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>E-commerce analytics · Medallion</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;

Network accessline 6

<title>E-commerce analytics · Medallion</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet">

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet">

Network accessline 40

<svg viewBox="0 0 1040 548" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="medallion-title medallion-desc">

Network accessline 70

<text x="102" y="144" class="bucket">raw-commerce</text>       <text x="32" y="180" class="field-label">Tool</text>       <foreignObject x="32" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" st

Network accessline 71

<text x="32" y="180" class="field-label">Tool</text>       <foreignObject x="32" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">NiFi ingest</div></foreignObject>

Network accessline 72

<foreignObject x="32" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">NiFi ingest</div></foreignObject>

Network accessline 73

<text x="32" y="220" class="field-label">Format</text>       <foreignObject x="32" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">JSON · Parquet</div></foreignObject>

Network accessline 74

<foreignObject x="32" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">JSON · Parquet</div></foreignObject>

Network accessline 75

<text x="32" y="260" class="field-label">Writer</text>       <foreignObject x="32" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Engineer</div></foreignObject>

Network accessline 76

<foreignObject x="32" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Engineer</div></foreignObject>

Network accessline 86

<text x="290" y="144" class="bucket">anon-commerce</text>       <text x="220" y="180" class="field-label">Tool</text>       <foreignObject x="220" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value"

Network accessline 87

<text x="220" y="180" class="field-label">Tool</text>       <foreignObject x="220" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Trino SQL</div></foreignObject>

Network accessline 88

<foreignObject x="220" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Trino SQL</div></foreignObject>

Network accessline 89

<text x="220" y="220" class="field-label">Format</text>       <foreignObject x="220" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Iceberg · partitioned</div></foreign

Network accessline 90

<foreignObject x="220" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Iceberg · partitioned</div></foreignObject>

Network accessline 91

<text x="220" y="260" class="field-label">Writer</text>       <foreignObject x="220" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Engineer</div></foreignObject>

Network accessline 92

<foreignObject x="220" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Engineer</div></foreignObject>

Network accessline 102

<text x="478" y="144" class="bucket">staging-commerce</text>       <text x="408" y="180" class="field-label">Tool</text>       <foreignObject x="408" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-val

Network accessline 103

<text x="408" y="180" class="field-label">Tool</text>       <foreignObject x="408" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Trino · notebooks</div></foreignObject

Network accessline 104

<foreignObject x="408" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Trino · notebooks</div></foreignObject>

Network accessline 105

<text x="408" y="220" class="field-label">Format</text>       <foreignObject x="408" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Iceberg · cleaned</div></foreignObje

Network accessline 106

<foreignObject x="408" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Iceberg · cleaned</div></foreignObject>

Network accessline 107

<text x="408" y="260" class="field-label">Writer</text>       <foreignObject x="408" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Scientist</div></foreignObject>

Network accessline 108

<foreignObject x="408" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Scientist</div></foreignObject>

Network accessline 118

<text x="666" y="144" class="bucket focal-text">analytics-marts</text>       <text x="596" y="180" class="field-label">Tool</text>       <foreignObject x="596" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class=

Network accessline 119

<text x="596" y="180" class="field-label">Tool</text>       <foreignObject x="596" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Trino INSERT</div></foreignObject>

Network accessline 120

<foreignObject x="596" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Trino INSERT</div></foreignObject>

Network accessline 121

<text x="596" y="220" class="field-label">Format</text>       <foreignObject x="596" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Iceberg · metrics</div></foreignObje

Network accessline 122

<foreignObject x="596" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Iceberg · metrics</div></foreignObject>

Network accessline 123

<text x="596" y="260" class="field-label">Writer</text>       <foreignObject x="596" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Scientist</div></foreignObject>

Network accessline 124

<foreignObject x="596" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Scientist</div></foreignObject>

Network accessline 134

<text x="854" y="144" class="bucket">archive-commerce</text>       <text x="784" y="180" class="field-label">Tool</text>       <foreignObject x="784" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-val

Network accessline 135

<text x="784" y="180" class="field-label">Tool</text>       <foreignObject x="784" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Object storage lifecycle</div></foreig

Network accessline 136

<foreignObject x="784" y="186" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Object storage lifecycle</div></foreignObject>

Network accessline 137

<text x="784" y="220" class="field-label">Format</text>       <foreignObject x="784" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Cold tier · immutable</div></foreign

Network accessline 138

<foreignObject x="784" y="226" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Cold tier · immutable</div></foreignObject>

Network accessline 139

<text x="784" y="260" class="field-label">Writer</text>       <foreignObject x="784" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Engineer</div></foreignObject>

Network accessline 140

<foreignObject x="784" y="266" width="140" height="24"><div xmlns="http://www.w3.org/1999/xhtml" class="field-value" style="line-height:1.25">Data Engineer</div></foreignObject>

`skills/diagram-design/assets/example-nested-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>The Project Guidance Hierarchy</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Gei

Network accessline 6

<title>The Project Guidance Hierarchy</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="nested-dark-title nested-dark-desc">

`skills/diagram-design/assets/example-nested-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>The Project Guidance Hierarchy</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Gei

Network accessline 6

<title>The Project Guidance Hierarchy</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 41

<div class="diagram-container">       <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="nested-full-title nested-full-desc">

Network accessline 42

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="nested-full-title nested-full-desc">

`skills/diagram-design/assets/example-nested.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>The Project Guidance Hierarchy</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Gei

Network accessline 6

<title>The Project Guidance Hierarchy</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="nested-title nested-desc">

`skills/diagram-design/assets/example-org-chart-dark.html`

Network accessline 1

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Agent team responsibility map</title><link href="https://fonts.googleapis.com/css2?family=Instrument+Ser

Network accessline 4

:root{--paper:#2d3142;--paper-2:#393e53;--ink:#f5f5f5;--muted:#bfc0c0;--soft:#949eb2;--rule:rgba(245,245,245,.12);--accent:#f08a59;--accent-tint:rgba(240,138,89,.10);--link:#739fdf;--sans:'Geist',system-ui,sans-serif;--serif:'Instrument Ser

Network accessline 5

body{font-family:var(--sans);background:var(--paper);color:var(--ink);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px 32px}.frame{max-width:1180px;width:100%}.eyebrow{font-family:var(--mono);font-size:9p

Network accessline 6

</style></head><body><div class="frame"><p class="eyebrow">Org chart · Diagram Design</p><h1>Agent team responsibility map</h1><p class="subtitle">A responsibility map for teams, agents, and escalation paths. Unlike a generic tree, it makes

`skills/diagram-design/assets/example-org-chart-full.html`

Network accessline 1

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Agent team responsibility map</title><link href="https://fonts.googleapis.com/css2?family=Instrument+Ser

Network accessline 4

:root{--paper:#f5f5f5;--paper-2:#fff;--ink:#2d3142;--muted:#4f5d75;--soft:#5a6580;--rule:rgba(45,49,66,.12);--accent:#bf4520;--accent-tint:rgba(191,69,32,.08);--link:#2e5aa8;--sans:'Geist',system-ui,sans-serif;--serif:'Instrument Serif',ser

Network accessline 5

body{font-family:var(--sans);background:var(--paper);color:var(--ink);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px 32px}.frame{max-width:1180px;width:100%}.eyebrow{font-family:var(--mono);font-size:9p

Network accessline 6

</style></head><body><div class="frame"><p class="eyebrow">Org chart · Diagram Design</p><h1>Agent team responsibility map</h1><p class="subtitle">A responsibility map for teams, agents, and escalation paths. Unlike a generic tree, it makes

`skills/diagram-design/assets/example-org-chart.html`

Network accessline 1

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Agent team responsibility map</title><link href="https://fonts.googleapis.com/css2?family=Instrument+Ser

Network accessline 4

:root{--paper:#f5f5f5;--paper-2:#fff;--ink:#2d3142;--muted:#4f5d75;--soft:#5a6580;--rule:rgba(45,49,66,.12);--accent:#bf4520;--accent-tint:rgba(191,69,32,.08);--link:#2e5aa8;--sans:'Geist',system-ui,sans-serif;--serif:'Instrument Serif',ser

Network accessline 5

body{font-family:var(--sans);background:var(--paper);color:var(--ink);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px 32px}.frame{max-width:1180px;width:100%}.eyebrow{font-family:var(--mono);font-size:9p

Network accessline 6

</style></head><body><div class="frame"><p class="eyebrow">Org chart · Diagram Design</p><h1>Agent team responsibility map</h1><p class="subtitle">A responsibility map for teams, agents, and escalation paths. Unlike a generic tree, it makes

`skills/diagram-design/assets/example-paved-road-animated.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Secure Paved Road Architecture</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Gei

Network accessline 6

<title>Secure Paved Road Architecture</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 191

<div class="diagram-wrap">       <svg role="img" aria-labelledby="paved-road-animated-title paved-road-animated-desc" viewBox="0 0 1160 620" xmlns="http://www.w3.org/2000/svg" data-motion-primitive="secure-paved-road">

Network accessline 192

<svg role="img" aria-labelledby="paved-road-animated-title paved-road-animated-desc" viewBox="0 0 1160 620" xmlns="http://www.w3.org/2000/svg" data-motion-primitive="secure-paved-road">

`skills/diagram-design/assets/example-polar-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Request demand by UTC window · Polar chart</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;60

Network accessline 6

<title>Request demand by UTC window · Polar chart</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <s

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 29

<svg viewBox="0 0 1000 520" xmlns="http://www.w3.org/2000/svg"

`skills/diagram-design/assets/example-polar-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Request demand by UTC window · Polar chart</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;60

Network accessline 6

<title>Request demand by UTC window · Polar chart</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <s

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 38

<div class="diagram-container">       <svg viewBox="0 0 1000 520" xmlns="http://www.w3.org/2000/svg"

Network accessline 39

<svg viewBox="0 0 1000 520" xmlns="http://www.w3.org/2000/svg"

`skills/diagram-design/assets/example-polar.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Request demand by UTC window · Polar chart</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;60

Network accessline 6

<title>Request demand by UTC window · Polar chart</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <s

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 29

<svg viewBox="0 0 1000 520" xmlns="http://www.w3.org/2000/svg"

`skills/diagram-design/assets/example-policy-trace-animated.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Where policy traces diverge</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+

Network accessline 6

<title>Where policy traces diverge</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 191

<div class="diagram-wrap">       <svg viewBox="0 0 1200 660" xmlns="http://www.w3.org/2000/svg" role="img"

Network accessline 192

<svg viewBox="0 0 1200 660" xmlns="http://www.w3.org/2000/svg" role="img"

`skills/diagram-design/assets/example-process-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Order fulfillment · Process (dark)</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&am

Network accessline 6

<title>Order fulfillment · Process (dark)</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet">

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet">

Network accessline 18

<p class="eyebrow">Process · Diagram Design</p>     <h1>Order fulfillment across four teams</h1>     <svg viewBox="0 0 1064 436" xmlns="http://www.w3.org/2000/svg" aria-label="Order fulfillment process from customer order to support closure

Network accessline 19

<h1>Order fulfillment across four teams</h1>     <svg viewBox="0 0 1064 436" xmlns="http://www.w3.org/2000/svg" aria-label="Order fulfillment process from customer order to support closure" role="img" aria-labelledby="process-dark-title pro

Network accessline 20

<svg viewBox="0 0 1064 436" xmlns="http://www.w3.org/2000/svg" aria-label="Order fulfillment process from customer order to support closure" role="img" aria-labelledby="process-dark-title process-dark-desc">

`skills/diagram-design/assets/example-process-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Order fulfillment · Process overview</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&

Network accessline 6

<title>Order fulfillment · Process overview</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet"

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet">

Network accessline 21

<p class="subtitle">One order moves through customer, support, warehouse, and finance ownership, while the payload chips show what each handoff carries.</p>     <div class="diagram-container">     <svg viewBox="0 0 1064 436" xmlns="http://w

Network accessline 22

<div class="diagram-container">     <svg viewBox="0 0 1064 436" xmlns="http://www.w3.org/2000/svg" aria-label="Order fulfillment process from customer order to support closure" role="img" aria-labelledby="process-full-title process-full-des

Network accessline 23

<svg viewBox="0 0 1064 436" xmlns="http://www.w3.org/2000/svg" aria-label="Order fulfillment process from customer order to support closure" role="img" aria-labelledby="process-full-title process-full-desc">

`skills/diagram-design/assets/example-process.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Order fulfillment · Process</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;famil

Network accessline 6

<title>Order fulfillment · Process</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet">   <styl

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;display=swap" rel="stylesheet">

Network accessline 18

<p class="eyebrow">Process · Diagram Design</p>     <h1>Order fulfillment across four teams</h1>     <svg viewBox="0 0 1064 436" xmlns="http://www.w3.org/2000/svg" aria-label="Order fulfillment process from customer order to support closure

Network accessline 19

<h1>Order fulfillment across four teams</h1>     <svg viewBox="0 0 1064 436" xmlns="http://www.w3.org/2000/svg" aria-label="Order fulfillment process from customer order to support closure" role="img" aria-labelledby="process-title process-

Network accessline 20

<svg viewBox="0 0 1064 436" xmlns="http://www.w3.org/2000/svg" aria-label="Order fulfillment process from customer order to support closure" role="img" aria-labelledby="process-title process-desc">

`skills/diagram-design/assets/example-pyramid-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Content pyramid · what compounds</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=G

Network accessline 6

<title>Content pyramid · what compounds</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="pyramid-dark-title pyramid-dark-desc">

`skills/diagram-design/assets/example-pyramid-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Content pyramid · what compounds</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=G

Network accessline 6

<title>Content pyramid · what compounds</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 41

<div class="diagram-container">       <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="pyramid-full-title pyramid-full-desc">

Network accessline 42

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="pyramid-full-title pyramid-full-desc">

`skills/diagram-design/assets/example-pyramid.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Content pyramid · what compounds</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=G

Network accessline 6

<title>Content pyramid · what compounds</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="pyramid-title pyramid-desc">

`skills/diagram-design/assets/example-quadrant-consultant.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Workplace 2030 · Remote work × AI automation</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;

Network accessline 6

<title>Workplace 2030 · Remote work × AI automation</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 59

<div class="diagram-container">       <svg viewBox="0 0 1000 660" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="quadrant-consultant-title quadrant-consultant-desc">

Network accessline 60

<svg viewBox="0 0 1000 660" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="quadrant-consultant-title quadrant-consultant-desc">

`skills/diagram-design/assets/example-quadrant-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Content ideas · Impact × Effort</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Ge

Network accessline 6

<title>Content ideas · Impact × Effort</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="quadrant-dark-title quadrant-dark-desc">

`skills/diagram-design/assets/example-quadrant-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Content ideas · Impact × Effort</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Ge

Network accessline 6

<title>Content ideas · Impact × Effort</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 41

<div class="diagram-container">       <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="quadrant-full-title quadrant-full-desc">

Network accessline 42

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="quadrant-full-title quadrant-full-desc">

`skills/diagram-design/assets/example-quadrant.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Content ideas · Impact × Effort</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Ge

Network accessline 6

<title>Content ideas · Impact × Effort</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="quadrant-title quadrant-desc">

`skills/diagram-design/assets/example-queue-animated.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Fan-in Queue & Ingress Bottleneck Analysis</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;60

Network accessline 6

<title>Fan-in Queue & Ingress Bottleneck Analysis</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <s

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 201

<div class="diagram-wrap">       <svg role="img" aria-labelledby="queue-animated-title queue-animated-desc" viewBox="0 0 1160 620" xmlns="http://www.w3.org/2000/svg" data-motion-primitive="fan-in-queue">

Network accessline 202

<svg role="img" aria-labelledby="queue-animated-title queue-animated-desc" viewBox="0 0 1160 620" xmlns="http://www.w3.org/2000/svg" data-motion-primitive="fan-in-queue">

`skills/diagram-design/assets/example-radar-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Storage backends · Capability radar</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&famil

Network accessline 6

<title>Storage backends · Capability radar</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="radar-dark-title radar-dark-desc">

`skills/diagram-design/assets/example-radar-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Storage backends · Capability radar</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&famil

Network accessline 6

<title>Storage backends · Capability radar</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 43

<div class="diagram-container">       <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="radar-full-title radar-full-desc">

Network accessline 44

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="radar-full-title radar-full-desc">

`skills/diagram-design/assets/example-radar.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Storage backends · Capability radar</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&famil

Network accessline 6

<title>Storage backends · Capability radar</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="radar-title radar-desc">

`skills/diagram-design/assets/example-ridgeline-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Request latency by service · Ridgeline</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&fa

Network accessline 6

<title>Request latency by service · Ridgeline</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 31

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="ridgeline-dark-title ridgeline-dark-desc">       <title id="ridgeline-dark-title">Checkout is slow in two different ways</title>       <desc id="ridg

`skills/diagram-design/assets/example-ridgeline-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Request latency by service · Ridgeline</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&fa

Network accessline 6

<title>Request latency by service · Ridgeline</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 39

</div>     <div class="diagram-container">       <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="ridgeline-full-title ridgeline-full-desc">

Network accessline 40

<div class="diagram-container">       <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="ridgeline-full-title ridgeline-full-desc">         <title id="ridgeline-full-title">Checkout is slow in two dif

Network accessline 41

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="ridgeline-full-title ridgeline-full-desc">         <title id="ridgeline-full-title">Checkout is slow in two different ways</title>         <desc id="

`skills/diagram-design/assets/example-ridgeline.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Request latency by service · Ridgeline</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&fa

Network accessline 6

<title>Request latency by service · Ridgeline</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 31

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="ridgeline-title ridgeline-desc">       <title id="ridgeline-title">Checkout is slow in two different ways</title>       <desc id="ridgeline-desc">Rid

`skills/diagram-design/assets/example-sankey-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>CI compute budget · Sankey</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+M

Network accessline 6

<title>CI compute budget · Sankey</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 560" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="sankey-dark-title sankey-dark-desc">

`skills/diagram-design/assets/example-sankey-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>CI compute budget · Sankey</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+M

Network accessline 6

<title>CI compute budget · Sankey</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 41

<div class="diagram-container">       <svg viewBox="0 0 1000 560" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="sankey-full-title sankey-full-desc">

Network accessline 42

<svg viewBox="0 0 1000 560" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="sankey-full-title sankey-full-desc">

`skills/diagram-design/assets/example-sankey.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>CI compute budget · Sankey</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+M

Network accessline 6

<title>CI compute budget · Sankey</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 560" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="sankey-title sankey-desc">

`skills/diagram-design/assets/example-scatter-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Deploy frequency vs lead time · Scatter · dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;50

Network accessline 6

<title>Deploy frequency vs lead time · Scatter · dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 23

<!-- X: 0-20 deploys/week → 880px. x = 80 + f/20*880 = 80+44*f -->     <!-- Y: 0-24 days lead time → 380px. y = 420 - lt/24*380. High lt = high y (worse) -->     <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria

Network accessline 24

<!-- Y: 0-24 days lead time → 380px. y = 420 - lt/24*380. High lt = high y (worse) -->     <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="scatter-dark-title scatter-dark-desc">       <title id="sc

Network accessline 25

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="scatter-dark-title scatter-dark-desc">

`skills/diagram-design/assets/example-scatter-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Deploy frequency vs lead time · Scatter</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&f

Network accessline 6

<title>Deploy frequency vs lead time · Scatter</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <styl

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 37

</div>     <div class="diagram-container">       <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="scatter-full-title scatter-full-desc">

Network accessline 38

<div class="diagram-container">       <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="scatter-full-title scatter-full-desc">         <title id="scatter-full-title">Deploy frequency vs. lead time ·

Network accessline 39

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="scatter-full-title scatter-full-desc">

`skills/diagram-design/assets/example-scatter.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Deploy frequency vs lead time · Scatter</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&f

Network accessline 6

<title>Deploy frequency vs lead time · Scatter</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <styl

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 23

<!-- X: 0-20 deploys/week → 880px. x = 80 + f/20*880 = 80+44*f -->     <!-- Y: 0-24 days lead time → 380px. y = 420 - lt/24*380. High lt = high y (worse) -->     <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria

Network accessline 24

<!-- Y: 0-24 days lead time → 380px. y = 420 - lt/24*380. High lt = high y (worse) -->     <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="scatter-title scatter-desc">       <title id="scatter-titl

Network accessline 25

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="scatter-title scatter-desc">

`skills/diagram-design/assets/example-sequence-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Article request · Sequence</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+M

Network accessline 6

<title>Article request · Sequence</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 584" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="sequence-dark-title sequence-dark-desc">

`skills/diagram-design/assets/example-sequence-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Article Request · Sequence</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+M

Network accessline 6

<title>Article Request · Sequence</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 184

<!-- Sequence Diagram -->     <div class="diagram-container">       <svg viewBox="0 0 1000 584" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="sequence-full-title sequence-full-desc">

Network accessline 185

<div class="diagram-container">       <svg viewBox="0 0 1000 584" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="sequence-full-title sequence-full-desc">         <title id="sequence-full-title">Article request, cold cache</t

Network accessline 186

<svg viewBox="0 0 1000 584" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="sequence-full-title sequence-full-desc">

`skills/diagram-design/assets/example-sequence-oauth-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Bearer call with refresh · Sequence</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&famil

Network accessline 6

<title>Bearer call with refresh · Sequence</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 960 720" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="sequence-oauth-dark-title sequence-oauth-dark-desc">

`skills/diagram-design/assets/example-sequence-oauth-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Bearer Call with Refresh · Sequence</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&famil

Network accessline 6

<title>Bearer Call with Refresh · Sequence</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 183

<div class="diagram-container">       <svg viewBox="0 0 960 720" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="sequence-oauth-full-title sequence-oauth-full-desc">

Network accessline 184

<svg viewBox="0 0 960 720" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="sequence-oauth-full-title sequence-oauth-full-desc">

`skills/diagram-design/assets/example-sequence-oauth.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Bearer call with refresh · Sequence</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&famil

Network accessline 6

<title>Bearer call with refresh · Sequence</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 960 720" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="sequence-oauth-title sequence-oauth-desc">

`skills/diagram-design/assets/example-sequence.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Article request · Sequence</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+M

Network accessline 6

<title>Article request · Sequence</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 584" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="sequence-title sequence-desc">

`skills/diagram-design/assets/example-service-blueprint-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Trial to paid — what the customer never sees · Service blueprint</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family

Network accessline 6

<title>Trial to paid — what the customer never sees · Service blueprint</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap"

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<div class="diagram-container">     <svg viewBox="0 0 1280 720" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="service-blueprint-dark-title service-blueprint-dark-desc">

Network accessline 62

<svg viewBox="0 0 1280 720" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="service-blueprint-dark-title service-blueprint-dark-desc">

`skills/diagram-design/assets/example-service-blueprint-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Trial to paid — what the customer never sees · Service blueprint</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family

Network accessline 6

<title>Trial to paid — what the customer never sees · Service blueprint</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap"

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 119

</div>     <div class="diagram-container">       <svg viewBox="0 0 1280 720" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="service-blueprint-full-title service-blueprint-full-desc">

Network accessline 120

<div class="diagram-container">       <svg viewBox="0 0 1280 720" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="service-blueprint-full-title service-blueprint-full-desc">         <title id="service-blueprint-full-title">Tri

Network accessline 121

<svg viewBox="0 0 1280 720" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="service-blueprint-full-title service-blueprint-full-desc">

`skills/diagram-design/assets/example-service-blueprint.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Trial to paid — what the customer never sees · Service blueprint</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family

Network accessline 6

<title>Trial to paid — what the customer never sees · Service blueprint</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap"

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<div class="diagram-container">     <svg viewBox="0 0 1280 720" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="service-blueprint-title service-blueprint-desc">

Network accessline 62

<svg viewBox="0 0 1280 720" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="service-blueprint-title service-blueprint-desc">

`skills/diagram-design/assets/example-slopegraph-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>p95 by service, before and after · Slopegraph · dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@

Network accessline 6

<title>p95 by service, before and after · Slopegraph · dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesh

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 31

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="slopegraph-dark-title slopegraph-dark-desc">

`skills/diagram-design/assets/example-slopegraph-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>p95 by service, before and after · Slopegraph</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500

Network accessline 6

<title>p95 by service, before and after · Slopegraph</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 39

</div>     <div class="diagram-container">       <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="slopegraph-full-title slopegraph-full-desc">

Network accessline 40

<div class="diagram-container">       <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="slopegraph-full-title slopegraph-full-desc">         <title id="slopegraph-full-title">One service went the oth

Network accessline 41

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="slopegraph-full-title slopegraph-full-desc">

`skills/diagram-design/assets/example-slopegraph.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>p95 by service, before and after · Slopegraph</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500

Network accessline 6

<title>p95 by service, before and after · Slopegraph</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 31

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="slopegraph-title slopegraph-desc">

`skills/diagram-design/assets/example-state-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Article lifecycle · State machine</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=

Network accessline 6

<title>Article lifecycle · State machine</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 460" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="state-dark-title state-dark-desc">

`skills/diagram-design/assets/example-state-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Article lifecycle · state machine</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=

Network accessline 6

<title>Article lifecycle · state machine</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 41

<div class="diagram-container">       <svg viewBox="0 0 1000 460" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="state-full-title state-full-desc">

Network accessline 42

<svg viewBox="0 0 1000 460" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="state-full-title state-full-desc">

`skills/diagram-design/assets/example-state-lifecycle-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Newsletter publication lifecycle · State machine</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;

Network accessline 6

<title>Newsletter publication lifecycle · State machine</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet"

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 30

<p class="eyebrow">State · Lifecycle phase map</p>     <h1>Newsletter publication lifecycle</h1>     <svg viewBox="0 0 1000 520" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="state-lifecycle-dark-title state-lifecycle-dark-

Network accessline 31

<h1>Newsletter publication lifecycle</h1>     <svg viewBox="0 0 1000 520" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="state-lifecycle-dark-title state-lifecycle-dark-desc">       <title id="state-lifecycle-dark-title">New

Network accessline 32

<svg viewBox="0 0 1000 520" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="state-lifecycle-dark-title state-lifecycle-dark-desc">

`skills/diagram-design/assets/example-state-lifecycle-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Newsletter publication lifecycle · State machine</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;

Network accessline 6

<title>Newsletter publication lifecycle · State machine</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet"

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 49

</div>     <div class="diagram-container">       <svg viewBox="0 0 1000 520" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="state-lifecycle-full-title state-lifecycle-full-desc">

Network accessline 50

<div class="diagram-container">       <svg viewBox="0 0 1000 520" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="state-lifecycle-full-title state-lifecycle-full-desc">         <title id="state-lifecycle-full-title">Newslette

Network accessline 51

<svg viewBox="0 0 1000 520" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="state-lifecycle-full-title state-lifecycle-full-desc">

`skills/diagram-design/assets/example-state-lifecycle.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Newsletter publication lifecycle · State machine</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;

Network accessline 6

<title>Newsletter publication lifecycle · State machine</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet"

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 24

<svg viewBox="0 0 1000 520" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="state-lifecycle-title state-lifecycle-desc">

`skills/diagram-design/assets/example-state.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Article lifecycle · State machine</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=

Network accessline 6

<title>Article lifecycle · State machine</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 460" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="state-title state-desc">

`skills/diagram-design/assets/example-story-map-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Reporting, first release · User story map</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600

Network accessline 6

<title>Reporting, first release · User story map</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <st

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1032 540" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="story-map-dark-title story-map-dark-desc">

`skills/diagram-design/assets/example-story-map-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Reporting, first release · User story map</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600

Network accessline 6

<title>Reporting, first release · User story map</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <st

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 42

<div class="diagram-container">       <svg viewBox="0 0 1032 540" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="story-map-full-title story-map-full-desc">

Network accessline 43

<svg viewBox="0 0 1032 540" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="story-map-full-title story-map-full-desc">

`skills/diagram-design/assets/example-story-map.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Reporting, first release · User story map</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600

Network accessline 6

<title>Reporting, first release · User story map</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <st

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1032 540" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="story-map-title story-map-desc">

`skills/diagram-design/assets/example-streamgraph-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Build minutes by pipeline, twelve weeks · Streamgraph · dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Gei

Network accessline 6

<title>Build minutes by pipeline, twelve weeks · Streamgraph · dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel=

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 31

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="streamgraph-dark-title streamgraph-dark-desc">

`skills/diagram-design/assets/example-streamgraph-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Build minutes by pipeline, twelve weeks · Streamgraph</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght

Network accessline 6

<title>Build minutes by pipeline, twelve weeks · Streamgraph</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="styles

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 39

</div>     <div class="diagram-container">       <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="streamgraph-full-title streamgraph-full-desc">

Network accessline 40

<div class="diagram-container">       <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="streamgraph-full-title streamgraph-full-desc">         <title id="streamgraph-full-title">Where the extra build

Network accessline 41

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="streamgraph-full-title streamgraph-full-desc">

`skills/diagram-design/assets/example-streamgraph.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Build minutes by pipeline, twelve weeks · Streamgraph</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght

Network accessline 6

<title>Build minutes by pipeline, twelve weeks · Streamgraph</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="styles

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 31

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="streamgraph-title streamgraph-desc">

`skills/diagram-design/assets/example-swimlane-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Publishing an article · Swimlane</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=G

Network accessline 6

<title>Publishing an article · Swimlane</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 480" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="swimlane-dark-title swimlane-dark-desc">

`skills/diagram-design/assets/example-swimlane-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Publishing an article · Swimlane</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=G

Network accessline 6

<title>Publishing an article · Swimlane</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 41

<div class="diagram-container">       <svg viewBox="0 0 1000 480" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="swimlane-full-title swimlane-full-desc">

Network accessline 42

<svg viewBox="0 0 1000 480" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="swimlane-full-title swimlane-full-desc">

`skills/diagram-design/assets/example-swimlane.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Publishing an article · Swimlane</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=G

Network accessline 6

<title>Publishing an article · Swimlane</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 480" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="swimlane-title swimlane-desc">

`skills/diagram-design/assets/example-timeline-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Product milestones · Timeline</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geis

Network accessline 6

<title>Product milestones · Timeline</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 420" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="timeline-dark-title timeline-dark-desc">

`skills/diagram-design/assets/example-timeline-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Product milestones · Timeline</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geis

Network accessline 6

<title>Product milestones · Timeline</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 41

<div class="diagram-container">       <svg viewBox="0 0 1000 420" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="timeline-full-title timeline-full-desc">

Network accessline 42

<svg viewBox="0 0 1000 420" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="timeline-full-title timeline-full-desc">

`skills/diagram-design/assets/example-timeline.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Product milestones · Timeline</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geis

Network accessline 6

<title>Product milestones · Timeline</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 420" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="timeline-title timeline-desc">

`skills/diagram-design/assets/example-tree-block-decomposition-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Payment gateway block decomposition · Tree</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;60

Network accessline 6

<title>Payment gateway block decomposition · Tree</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <s

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 320" xmlns="http://www.w3.org/2000/svg" role="img"

`skills/diagram-design/assets/example-tree-block-decomposition-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Payment gateway block decomposition · Tree</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;60

Network accessline 6

<title>Payment gateway block decomposition · Tree</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <s

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 41

<div class="diagram-container">       <svg viewBox="0 0 1000 320" xmlns="http://www.w3.org/2000/svg" role="img"

Network accessline 42

<svg viewBox="0 0 1000 320" xmlns="http://www.w3.org/2000/svg" role="img"

`skills/diagram-design/assets/example-tree-block-decomposition.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Payment gateway block decomposition · Tree</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;60

Network accessline 6

<title>Payment gateway block decomposition · Tree</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <s

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 320" xmlns="http://www.w3.org/2000/svg" role="img"

`skills/diagram-design/assets/example-tree-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Claude Code skill taxonomy · Tree</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=

Network accessline 6

<title>Claude Code skill taxonomy · Tree</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 480" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="tree-dark-title tree-dark-desc">

`skills/diagram-design/assets/example-tree-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Claude Code skill taxonomy · Tree</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=

Network accessline 6

<title>Claude Code skill taxonomy · Tree</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 41

<div class="diagram-container">       <svg viewBox="0 0 1000 480" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="tree-full-title tree-full-desc">

Network accessline 42

<svg viewBox="0 0 1000 480" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="tree-full-title tree-full-desc">

`skills/diagram-design/assets/example-tree.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Claude Code skill taxonomy · Tree</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=

Network accessline 6

<title>Claude Code skill taxonomy · Tree</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 480" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="tree-title tree-desc">

`skills/diagram-design/assets/example-treemap-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>World population · Treemap · dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=

Network accessline 6

<title>World population · Treemap · dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 31

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="treemap-dark-title treemap-dark-desc">

`skills/diagram-design/assets/example-treemap-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>World population · Treemap</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+M

Network accessline 6

<title>World population · Treemap</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 37

</div>     <div class="diagram-container">         <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="treemap-full-title treemap-full-desc">

Network accessline 38

<div class="diagram-container">         <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="treemap-full-title treemap-full-desc">           <title id="treemap-full-title">World population · six contin

Network accessline 39

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="treemap-full-title treemap-full-desc">

`skills/diagram-design/assets/example-treemap.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>World population · Treemap</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+M

Network accessline 6

<title>World population · Treemap</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 31

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="treemap-title treemap-desc">

`skills/diagram-design/assets/example-uml-class-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Payments domain · UML class diagram</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&famil

Network accessline 6

<title>Payments domain · UML class diagram</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 980 664" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="uml-class-dark-title uml-class-dark-desc">

`skills/diagram-design/assets/example-uml-class-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Payments domain · UML class diagram</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&famil

Network accessline 6

<title>Payments domain · UML class diagram</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 41

<div class="diagram-container">       <svg viewBox="0 0 980 664" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="uml-class-full-title uml-class-full-desc">

Network accessline 42

<svg viewBox="0 0 980 664" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="uml-class-full-title uml-class-full-desc">

`skills/diagram-design/assets/example-uml-class.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Payments domain · UML class diagram</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&famil

Network accessline 6

<title>Payments domain · UML class diagram</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 980 664" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="uml-class-title uml-class-desc">

`skills/diagram-design/assets/example-venn-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Good design · Desirable × Feasible × Viable</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;6

Network accessline 6

<title>Good design · Desirable × Feasible × Viable</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="venn-dark-title venn-dark-desc">

`skills/diagram-design/assets/example-venn-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Good design · Desirable × Feasible × Viable</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;6

Network accessline 6

<title>Good design · Desirable × Feasible × Viable</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 41

<div class="diagram-container">       <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="venn-full-title venn-full-desc">

Network accessline 42

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="venn-full-title venn-full-desc">

`skills/diagram-design/assets/example-venn.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Good design · Desirable × Feasible × Viable</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;6

Network accessline 6

<title>Good design · Desirable × Feasible × Viable</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 480" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="venn-title venn-desc">

`skills/diagram-design/assets/example-wardley-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>AI assistant product · Wardley map</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family

Network accessline 6

<title>AI assistant product · Wardley map</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 460" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="wardley-dark-title wardley-dark-desc">

`skills/diagram-design/assets/example-wardley-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>AI assistant product · Wardley map</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family

Network accessline 6

<title>AI assistant product · Wardley map</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 42

<div class="diagram-container">       <svg viewBox="0 0 1000 460" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="wardley-full-title wardley-full-desc">

Network accessline 43

<svg viewBox="0 0 1000 460" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="wardley-full-title wardley-full-desc">

`skills/diagram-design/assets/example-wardley.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>AI assistant product · Wardley map</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family

Network accessline 6

<title>AI assistant product · Wardley map</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 61

<svg viewBox="0 0 1000 460" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="wardley-title wardley-desc">

`skills/diagram-design/assets/example-waterfall-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Cloud budget bridge · Waterfall chart · dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;

Network accessline 6

<title>Cloud budget bridge · Waterfall chart · dark</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 32

<div class="diagram-container">     <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="waterfall-dark-title waterfall-dark-desc">

Network accessline 33

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="waterfall-dark-title waterfall-dark-desc">

`skills/diagram-design/assets/example-waterfall-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Cloud budget bridge · Waterfall chart</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&fam

Network accessline 6

<title>Cloud budget bridge · Waterfall chart</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 37

</div>     <div class="diagram-container">       <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="waterfall-full-title waterfall-full-desc">

Network accessline 38

<div class="diagram-container">       <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="waterfall-full-title waterfall-full-desc">         <title id="waterfall-full-title">Cloud budget bridge · FY25

Network accessline 39

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="waterfall-full-title waterfall-full-desc">

`skills/diagram-design/assets/example-waterfall.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Cloud budget bridge · Waterfall chart</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&fam

Network accessline 6

<title>Cloud budget bridge · Waterfall chart</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 32

<div class="diagram-container">     <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="waterfall-title waterfall-desc">

Network accessline 33

<svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="waterfall-title waterfall-desc">

`skills/diagram-design/assets/icons.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Icon library · Diagram Design</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geis

Network accessline 6

<title>Icon library · Diagram Design</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">   <style>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">

Network accessline 110

<p class="eyebrow">Icons · Diagram Design</p>       <h1>Icon library</h1>       <p class="subtitle">A small, monochrome library for IT/cloud illustrations. Stroked icons from <a href="https://tabler.io/icons" style="color:inherit">Tabler Ic

Network accessline 111

<h1>Icon library</h1>       <p class="subtitle">A small, monochrome library for IT/cloud illustrations. Stroked icons from <a href="https://tabler.io/icons" style="color:inherit">Tabler Icons</a> (MIT); brand silhouettes from <a href="https

Network accessline 112

<p class="subtitle">A small, monochrome library for IT/cloud illustrations. Stroked icons from <a href="https://tabler.io/icons" style="color:inherit">Tabler Icons</a> (MIT); brand silhouettes from <a href="https://simpleicons.org" style="c

Network accessline 196

<div class="cell"><div class="icon"><svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><title>Apache NiFi</title><path d="M11.648 0a.093.093 0 0 0-.084.053A30.71 30.71 0 0 1 8.592 4.73c-2.09 2.728-5.145 6

Network accessline 197

<div class="cell"><div class="icon"><svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><title>Apache Airflow</title><path d="M17.195 16.822l4.002-4.102C23.55 10.308 23.934 5.154 24 .43a.396.396 0 0 0-.246

Network accessline 198

<div class="cell"><div class="icon"><svg aria-hidden="true" width="24" height="24" viewBox="0 0 440.00003 506.47376" fill="currentColor"><metadata id="metadata9"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rd

`skills/diagram-design/assets/index.html`

Network accessline 6

<title>Diagram Design · Gallery</title>     <link       href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap"

Network accessline 7

<link       href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap"       rel="stylesheet"

Network accessline 8

href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap"

`skills/diagram-design/assets/template-dark.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Diagram</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;60

Network accessline 6

<title>Diagram</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&family=Noto+Serif:ital@0;1&family=Noto+Sans+KR:wght@400;500;600&family=

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&family=Noto+Serif:ital@0;1&family=Noto+Sans+KR:wght@400;500;600&family=Noto+Serif+KR:wght@400&fa

Network accessline 73

<!-- Replace [diagram-slug] with a unique slug for this diagram before export. -->     <div class="diagram-container">       <svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="[diagram-slug]-title [di

Network accessline 74

<div class="diagram-container">       <svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="[diagram-slug]-title [diagram-slug]-desc">         <title id="[diagram-slug]-title">[Diagram title]</title>

Network accessline 75

<svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="[diagram-slug]-title [diagram-slug]-desc">

`skills/diagram-design/assets/template-full.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>[PROJECT NAME] Architecture</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+

Network accessline 6

<title>[PROJECT NAME] Architecture</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&family=Noto+Serif:ital@0;1&family=Noto+Sans+KR:wght

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&family=Noto+Serif:ital@0;1&family=Noto+Sans+KR:wght@400;500;600&family=Noto+Serif+KR:wght@400&fa

Network accessline 185

<div class="diagram-container">       <!-- Replace [diagram-slug] with a unique slug for this diagram before export. -->       <svg viewBox="0 0 1000 720" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="[diagram-slug]-title [

Network accessline 186

<!-- Replace [diagram-slug] with a unique slug for this diagram before export. -->       <svg viewBox="0 0 1000 720" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="[diagram-slug]-title [diagram-slug]-desc">         <title id

Network accessline 187

<svg viewBox="0 0 1000 720" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="[diagram-slug]-title [diagram-slug]-desc">

`skills/diagram-design/assets/template-motion.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Motion diagram template</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono

Network accessline 6

<title>Motion diagram template</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&family=Noto+Serif:ital@0;1&family=Noto+Sans+KR:wght@400

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&family=Noto+Serif:ital@0;1&family=Noto+Sans+KR:wght@400;500;600&family=Noto+Serif+KR:wght@400&fa

Network accessline 191

<div class="diagram-container">       <svg viewBox="0 0 960 480" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="template-motion-title template-motion-desc">

Network accessline 192

<svg viewBox="0 0 960 480" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="template-motion-title template-motion-desc">

`skills/diagram-design/assets/template-terminal.html`

Network accessline 6

<title>Diagram</title>     <link       href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&display=swap"

Network accessline 7

<link       href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&display=swap"       rel="stylesheet"

Network accessline 8

href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&display=swap"

Network accessline 144

<!-- Replace [diagram-slug] with a unique slug for this diagram before export. -->         <div class="diagram-container">           <svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="[diagram-slug]-t

Network accessline 145

<div class="diagram-container">           <svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="[diagram-slug]-title [diagram-slug]-desc">             <title id="[diagram-slug]-title">[Diagram title]</ti

Network accessline 146

<svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="[diagram-slug]-title [diagram-slug]-desc">

`skills/diagram-design/assets/template.html`

Network accessline 5

<meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Diagram</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;60

Network accessline 6

<title>Diagram</title>   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&family=Noto+Serif:ital@0;1&family=Noto+Sans+KR:wght@400;500;600&family=

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&family=Noto+Serif:ital@0;1&family=Noto+Sans+KR:wght@400;500;600&family=Noto+Serif+KR:wght@400&fa

Network accessline 73

<!-- Replace [diagram-slug] with a unique slug for this diagram before export. -->     <div class="diagram-container">       <svg viewBox="0 0 960 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="[diagram-slug]-title [dia

Network accessline 74

<div class="diagram-container">       <svg viewBox="0 0 960 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="[diagram-slug]-title [diagram-slug]-desc">         <title id="[diagram-slug]-title">[Diagram title]</title>

Network accessline 75

<svg viewBox="0 0 960 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="[diagram-slug]-title [diagram-slug]-desc">

`skills/diagram-design/references/export.md`

Network accessline 44

2. Extract the **first** top-level `<svg ...>...</svg>` element. Skip HTML comments, `<script>` and `<style>` content, then count `<svg` openings and `</svg>` closings (a self-closing `<svg .../>` does not open one) and stop when the count

Network accessline 45

3. Make it standalone:    - Ensure the opening tag has `xmlns="http://www.w3.org/2000/svg"`. Add it if missing. The SVG namespace must belong to the root SVG element; a namespace on a descendant does not satisfy it. An explicit incompatible

Network accessline 46

- Ensure the opening tag has `xmlns="http://www.w3.org/2000/svg"`. Add it if missing. The SVG namespace must belong to the root SVG element; a namespace on a descendant does not satisfy it. An explicit incompatible root namespace is refused

Network accessline 63

```svg      <defs>        <style>@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;family=Noto+Serif:ital@0;1&amp;family=Noto+Sans+KR

Network accessline 64

<defs>        <style>@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;family=Noto+Serif:ital@0;1&amp;family=Noto+Sans+KR:wght@400;50

Network accessline 65

<style>@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&amp;family=Geist:wght@400;500;600&amp;family=Geist+Mono:wght@400;500;600&amp;family=Noto+Serif:ital@0;1&amp;family=Noto+Sans+KR:wght@400;500;600&amp;fami

`skills/diagram-design/references/onboarding.md`

Network accessline 50

> *"Onboard diagram-design to my site — `https://example.com`"*

Network accessline 56

Before making any network request for an `http://` or `https://` source, pause and ask:

Network accessline 73

agent-browser navigate https://example.com --screenshot out.png --html out.html

`skills/diagram-design/references/primitive-icons.md`

Network accessline 636

<svg aria-hidden="true" width="24" height="24" viewBox="0 0 440.00003 506.47376" fill="currentColor"><metadata id="metadata9"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmit

Network accessline 822

- **Tabler Icons** — MIT — https://github.com/tabler/tabler-icons

Network accessline 823

- **Simple Icons** — CC0 — https://github.com/simple-icons/simple-icons

Network accessline 824

- **Devicon** — MIT — https://github.com/devicons/devicon

Network accessline 825

- **log-z/logos** — MIT — https://github.com/log-z/logos

`skills/diagram-design/references/profiles.md`

Network accessline 31

name: Acme Corporation slug: acme source-url: https://example.com

Network accessline 32

slug: acme source-url: https://example.com created: 2026-08-14

Network accessline 33
```
source-url: https://example.com
```

`skills/diagram-design/references/style-guide.md`

Network accessline 101

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&family=Noto+Serif:ital@0;1&family=Noto+Sans+KR:wght@400;500;600&family=Noto+Serif+KR:wght@400&fa

`skills/diagram-design/references/type-medallion.md`

Network accessline 130

<foreignObject x="{field_x}" y="{value_top}" width="140" height="24">   <div xmlns="http://www.w3.org/1999/xhtml"

Network accessline 131

<div xmlns="http://www.w3.org/1999/xhtml"

`skills/diagram-design/scripts/drawio_extract.py`

Executable scriptline 1
```
#!/usr/bin/env python3
```

Possible obfuscationline 99

raw = base64.b64decode(payload, validate=False)

`skills/diagram-design/scripts/excalidraw_extract.py`

Executable scriptline 1
```
#!/usr/bin/env python3
```

`skills/diagram-design/scripts/export_png.py`

Executable scriptline 1
```
#!/usr/bin/env python3
```

`skills/diagram-design/scripts/export_svg.py`

Executable scriptline 1
```
#!/usr/bin/env python3
```

Network accessline 34

GOOGLE_FONTS_IMPORT = (     "@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1"

Network accessline 35

"@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1"

Network accessline 396

if attribute.group(2) == "xmlns":             value = attribute.group(4)             if value is not None and decode_xml_references(value[1:-1]) == "http://www.w3.org/2000/svg":

Network accessline 397

value = attribute.group(4)             if value is not None and decode_xml_references(value[1:-1]) == "http://www.w3.org/2000/svg":                 return svg

Network accessline 398

if value is not None and decode_xml_references(value[1:-1]) == "http://www.w3.org/2000/svg":

Network accessline 399

return svg             raise ValueError("SVG root namespace must be http://www.w3.org/2000/svg")     return re.sub(r"<svg\b", '<svg xmlns="http://www.w3.org/2000/svg"', svg, count=1)

Network accessline 400

raise ValueError("SVG root namespace must be http://www.w3.org/2000/svg")

Network accessline 401

return re.sub(r"<svg\b", '<svg xmlns="http://www.w3.org/2000/svg"', svg, count=1)

`skills/diagram-design/scripts/mermaid_extract.py`

Executable scriptline 1
```
#!/usr/bin/env python3
```

`skills/diagram-design/scripts/self_check.py`

Executable scriptline 1
```
#!/usr/bin/env python3
```

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

Some files could not be read; the facts below still hold.

Declared and executed: 2 facts

Contacts fonts.googleapis.com, which SKILL.md, the README and the plugin manifest do not mentiondiagram-design/scripts/export_svg.py:35High confidence
Contacts www.w3.org, which SKILL.md, the README and the plugin manifest do not mentiondiagram-design/scripts/export_svg.py:398High confidence

Signal confidence: 37 facts

Executable script in code of a file that runsscripts/verify-geometry.py:1High confidence
Executable script in code of a file that runsscripts/verify-motion.py:1High confidence
Network access in prose of documentationdiagram-design/references/export.md:44Low confidence
Network access in prose of documentationdiagram-design/references/export.md:45Low confidence
Network access in prose of documentationdiagram-design/references/export.md:46Low confidence
Network access in prose of documentationdiagram-design/references/export.md:63Low confidence
Network access in prose of documentationdiagram-design/references/export.md:64Low confidence
Network access in prose of documentationdiagram-design/references/export.md:65Low confidence
Network access in prose of documentationdiagram-design/references/onboarding.md:50Low confidence
Network access in prose of documentationdiagram-design/references/onboarding.md:56Low confidence
Network access in code of documentationdiagram-design/references/onboarding.md:73Low confidence
Network access in code of documentationdiagram-design/references/primitive-icons.md:636Low confidence
Network access in prose of documentationdiagram-design/references/primitive-icons.md:822Low confidence
Network access in prose of documentationdiagram-design/references/primitive-icons.md:823Low confidence
Network access in prose of documentationdiagram-design/references/primitive-icons.md:824Low confidence
Network access in prose of documentationdiagram-design/references/primitive-icons.md:825Low confidence
Network access in code of documentationdiagram-design/references/profiles.md:31Low confidence
Network access in code of documentationdiagram-design/references/profiles.md:32Low confidence
Network access in code of documentationdiagram-design/references/profiles.md:33Low confidence
Network access in code of documentationdiagram-design/references/style-guide.md:101Low confidence
Network access in code of documentationdiagram-design/references/type-medallion.md:130Low confidence
Network access in code of documentationdiagram-design/references/type-medallion.md:131Low confidence
Executable script in code of a file that runsdiagram-design/scripts/drawio_extract.py:1High confidence
Possible obfuscation in code of a file that runsdiagram-design/scripts/drawio_extract.py:99High confidence
Executable script in code of a file that runsdiagram-design/scripts/excalidraw_extract.py:1High confidence
Executable script in code of a file that runsdiagram-design/scripts/export_png.py:1High confidence
Executable script in code of a file that runsdiagram-design/scripts/export_svg.py:1High confidence
Network access in code of a file that runsdiagram-design/scripts/export_svg.py:34High confidence
Network access in code of a file that runsdiagram-design/scripts/export_svg.py:35High confidence
Network access in code of a file that runsdiagram-design/scripts/export_svg.py:396High confidence
Network access in code of a file that runsdiagram-design/scripts/export_svg.py:397High confidence
Network access in code of a file that runsdiagram-design/scripts/export_svg.py:398High confidence
Network access in code of a file that runsdiagram-design/scripts/export_svg.py:399High confidence
Network access in code of a file that runsdiagram-design/scripts/export_svg.py:400High confidence
Network access in code of a file that runsdiagram-design/scripts/export_svg.py:401High confidence
Executable script in code of a file that runsdiagram-design/scripts/mermaid_extract.py:1High confidence
Executable script in code of a file that runsdiagram-design/scripts/self_check.py:1High confidence

Works with

Agent compatibility, from the files in this repository
Agent	Status	Evidence	Install to
Claude Code	Native	Manifest .claude-plugin/marketplace.json	`.claude/skills/<skill-name>/`
Codex	Native	Manifest AGENTS.md	`.agents/skills/<skill-name>/`
Cursor	Compatible	Standard SKILL.md skills/diagram-design/SKILL.md	`.cursor/skills/<skill-name>/`
Gemini CLI	Compatible	Standard SKILL.md skills/diagram-design/SKILL.md	`.gemini/skills/<skill-name>/`
GitHub Copilot	Compatible	Standard SKILL.md skills/diagram-design/SKILL.md	`.github/skills/<skill-name>/`
OpenCode	Compatible	Standard SKILL.md skills/diagram-design/SKILL.md	`.opencode/skills/<skill-name>/`

Native The repository ships a manifest, folder or frontmatter field for this agent.
Compatible A standard SKILL.md that this agent can read.
Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

Explore alternatives and comparisons

Add this badge to your README

It updates every night and links to this page.

[![cathrynlavery/diagram-design on hotskills](https://hotskills.dev/badge/cathrynlavery-diagram-design.svg)](https://hotskills.dev/skill/cathrynlavery-diagram-design/)

cathrynlavery/diagram-design

History

skills/diagram-design/SKILL.md

Share this page

Heat

Stars over time

Individual skills in this repository

How it works

diagram-design

Frontmatter

SKILL.md

Reference documents

The playbook

Scripts executed separately

Files

Skills included

Repository facts

Rank over the last 12 weeks

Before you install

.claude-plugin/plugin.json

scripts/verify-geometry.py

scripts/verify-motion.py

skills/diagram-design/assets/example-architecture-containment-dark.html

skills/diagram-design/assets/example-architecture-containment-full.html

skills/diagram-design/assets/example-architecture-containment.html

skills/diagram-design/assets/example-architecture-dark.html

skills/diagram-design/assets/example-architecture-delta-dark.html

skills/diagram-design/assets/example-architecture-delta-full.html

skills/diagram-design/assets/example-architecture-delta.html

skills/diagram-design/assets/example-architecture-full.html

skills/diagram-design/assets/example-architecture.html

skills/diagram-design/assets/example-axonometric-plan-campus-animated.html

skills/diagram-design/assets/example-axonometric-plan-campus-dark.html

skills/diagram-design/assets/example-axonometric-plan-campus-full.html

skills/diagram-design/assets/example-axonometric-plan-campus.html

skills/diagram-design/assets/example-axonometric-plan-coffee-shop-animated.html

skills/diagram-design/assets/example-axonometric-plan-coffee-shop-dark.html

skills/diagram-design/assets/example-axonometric-plan-coffee-shop-full.html

skills/diagram-design/assets/example-axonometric-plan-coffee-shop.html

skills/diagram-design/assets/example-axonometric-plan-dark.html

skills/diagram-design/assets/example-axonometric-plan-full.html

skills/diagram-design/assets/example-axonometric-plan-warehouse-animated.html

skills/diagram-design/assets/example-axonometric-plan-warehouse-dark.html

skills/diagram-design/assets/example-axonometric-plan-warehouse-full.html

skills/diagram-design/assets/example-axonometric-plan-warehouse.html

skills/diagram-design/assets/example-axonometric-plan.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-beeswarm-dark.html

skills/diagram-design/assets/example-beeswarm-full.html

skills/diagram-design/assets/example-beeswarm.html

skills/diagram-design/assets/example-box-plot-dark.html

skills/diagram-design/assets/example-box-plot-full.html

skills/diagram-design/assets/example-box-plot.html

skills/diagram-design/assets/example-bubble-dark.html

skills/diagram-design/assets/example-bubble-full.html

skills/diagram-design/assets/example-bubble.html

skills/diagram-design/assets/example-bump-dark.html

skills/diagram-design/assets/example-bump-full.html

skills/diagram-design/assets/example-bump.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-db-schema-dark.html

skills/diagram-design/assets/example-db-schema-full.html

skills/diagram-design/assets/example-db-schema.html

skills/diagram-design/assets/example-dependency-dark.html

skills/diagram-design/assets/example-dependency-full.html

skills/diagram-design/assets/example-dependency.html

skills/diagram-design/assets/example-deployment-dark.html

skills/diagram-design/assets/example-deployment-full.html

skills/diagram-design/assets/example-deployment.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/SKILL.md`

`.claude-plugin/plugin.json`

`scripts/verify-geometry.py`

`scripts/verify-motion.py`

`skills/diagram-design/assets/example-architecture-containment-dark.html`

`skills/diagram-design/assets/example-architecture-containment-full.html`

`skills/diagram-design/assets/example-architecture-containment.html`

`skills/diagram-design/assets/example-architecture-dark.html`

`skills/diagram-design/assets/example-architecture-delta-dark.html`

`skills/diagram-design/assets/example-architecture-delta-full.html`

`skills/diagram-design/assets/example-architecture-delta.html`

`skills/diagram-design/assets/example-architecture-full.html`

`skills/diagram-design/assets/example-architecture.html`

`skills/diagram-design/assets/example-axonometric-plan-campus-animated.html`

`skills/diagram-design/assets/example-axonometric-plan-campus-dark.html`

`skills/diagram-design/assets/example-axonometric-plan-campus-full.html`

`skills/diagram-design/assets/example-axonometric-plan-campus.html`

`skills/diagram-design/assets/example-axonometric-plan-coffee-shop-animated.html`

`skills/diagram-design/assets/example-axonometric-plan-coffee-shop-dark.html`

`skills/diagram-design/assets/example-axonometric-plan-coffee-shop-full.html`

`skills/diagram-design/assets/example-axonometric-plan-coffee-shop.html`

`skills/diagram-design/assets/example-axonometric-plan-dark.html`

`skills/diagram-design/assets/example-axonometric-plan-full.html`

`skills/diagram-design/assets/example-axonometric-plan-warehouse-animated.html`

`skills/diagram-design/assets/example-axonometric-plan-warehouse-dark.html`

`skills/diagram-design/assets/example-axonometric-plan-warehouse-full.html`

`skills/diagram-design/assets/example-axonometric-plan-warehouse.html`

`skills/diagram-design/assets/example-axonometric-plan.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-beeswarm-dark.html`

`skills/diagram-design/assets/example-beeswarm-full.html`

`skills/diagram-design/assets/example-beeswarm.html`

`skills/diagram-design/assets/example-box-plot-dark.html`

`skills/diagram-design/assets/example-box-plot-full.html`

`skills/diagram-design/assets/example-box-plot.html`

`skills/diagram-design/assets/example-bubble-dark.html`

`skills/diagram-design/assets/example-bubble-full.html`

`skills/diagram-design/assets/example-bubble.html`

`skills/diagram-design/assets/example-bump-dark.html`

`skills/diagram-design/assets/example-bump-full.html`

`skills/diagram-design/assets/example-bump.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-db-schema-dark.html`

`skills/diagram-design/assets/example-db-schema-full.html`

`skills/diagram-design/assets/example-db-schema.html`

`skills/diagram-design/assets/example-dependency-dark.html`

`skills/diagram-design/assets/example-dependency-full.html`

`skills/diagram-design/assets/example-dependency.html`

`skills/diagram-design/assets/example-deployment-dark.html`

`skills/diagram-design/assets/example-deployment-full.html`

`skills/diagram-design/assets/example-deployment.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-exploded-ai-stack-animated.html`

`skills/diagram-design/assets/example-exploded-ai-stack-dark.html`

`skills/diagram-design/assets/example-exploded-ai-stack-full.html`

`skills/diagram-design/assets/example-exploded-ai-stack.html`

`skills/diagram-design/assets/example-exploded-dark.html`

`skills/diagram-design/assets/example-exploded-full.html`

`skills/diagram-design/assets/example-exploded-keyboard-animated.html`

`skills/diagram-design/assets/example-exploded-keyboard-dark.html`

`skills/diagram-design/assets/example-exploded-keyboard-full.html`

`skills/diagram-design/assets/example-exploded-keyboard.html`

`skills/diagram-design/assets/example-exploded-phone-animated.html`

`skills/diagram-design/assets/example-exploded-phone-dark.html`

`skills/diagram-design/assets/example-exploded-phone-full.html`