From 2e9cefb9f3866581cdfe1cd6bd4a2d6a3a3ec7f9 Mon Sep 17 00:00:00 2001
From: Cathryn Lavery
Date: Tue, 14 Jul 2026 17:09:25 -0700
Subject: [PATCH] Merge curated fork work: 12 new diagram types, icons, export,
onboarding v2
Imports the substantive work from the aristide/diagram-design fork (PR #9)
as a curated set:
- 12 new diagram types with reference docs: radar, bar, line, gantt,
scatter, it-state, high-level, process, medallion, data-flow,
dp-integration, dp-security-matrix (26 types total)
- 86-icon monochrome IT/cloud primitive, build script, and gallery
- /diagram-design:export command with PNG/SVG export reference
- Onboarding v2: URL, skill, and folder design-token sources
- Mandatory connector rules (orthogonal elbows, label gaps, fanned
attach points, bridge crossings) + architecture/ER connector upgrades
- Series palette tokens for multi-series chart types
- THIRD_PARTY_LICENSES.md covering Tabler, Simple Icons, log-z, Devicon
Not taken from the fork: plugin-manifest identity changes, the client-brand
takeover of style-guide.md, and client-branded example files. The six
affected type examples were regenerated in the neutral editorial skin with
generic content, and their README screenshots recaptured. Reference docs
for those types were rewritten to semantic tokens and typography roles.
Version: 1.0.0 -> 2.0.0.
Co-authored-by: Aristide
---
.claude-plugin/marketplace.json | 2 +-
.claude-plugin/plugin.json | 4 +-
.codex-plugin/plugin.json | 4 +-
.gitignore | 2 +
README.md | 72 +-
THIRD_PARTY_LICENSES.md | 43 +
commands/export-diagram.md | 36 +
docs/screenshots/bar.png | Bin 0 -> 18242 bytes
docs/screenshots/data-flow.png | Bin 0 -> 199622 bytes
docs/screenshots/dp-integration.png | Bin 0 -> 190650 bytes
docs/screenshots/dp-security-matrix.png | Bin 0 -> 152654 bytes
docs/screenshots/gantt.png | Bin 0 -> 29081 bytes
docs/screenshots/high-level.png | Bin 0 -> 89599 bytes
docs/screenshots/it-state.png | Bin 0 -> 192114 bytes
docs/screenshots/line.png | Bin 0 -> 29151 bytes
docs/screenshots/medallion.png | Bin 0 -> 224197 bytes
docs/screenshots/process.png | Bin 0 -> 181357 bytes
docs/screenshots/radar.png | Bin 0 -> 203600 bytes
docs/screenshots/scatter.png | Bin 0 -> 25231 bytes
scripts/build-icons.py | 588 +++++++++++++
scripts/fix-mojibake.py | 61 ++
.../vendor/icons/devicon/rstudio-plain.svg | 1 +
scripts/vendor/icons/devicon/spss-plain.svg | 1 +
scripts/vendor/icons/logz/mysql.svg | 25 +
scripts/vendor/icons/logz/redis.svg | 34 +
scripts/vendor/icons/logz/starrocks.svg | 23 +
scripts/vendor/icons/simple/apacheairflow.svg | 1 +
scripts/vendor/icons/simple/apachehive.svg | 1 +
scripts/vendor/icons/simple/apachenifi.svg | 1 +
.../vendor/icons/simple/apachesuperset.svg | 1 +
scripts/vendor/icons/simple/gitea.svg | 1 +
scripts/vendor/icons/simple/googlecloud.svg | 1 +
scripts/vendor/icons/simple/jupyter.svg | 1 +
scripts/vendor/icons/simple/keycloak.svg | 1 +
scripts/vendor/icons/simple/kubernetes.svg | 1 +
.../icons/simple/microsoftsqlserver.svg | 1 +
scripts/vendor/icons/simple/minio.svg | 1 +
scripts/vendor/icons/simple/nginx.svg | 1 +
scripts/vendor/icons/simple/oracle.svg | 1 +
scripts/vendor/icons/simple/postgresql.svg | 1 +
scripts/vendor/icons/simple/powerbi.svg | 1 +
scripts/vendor/icons/simple/python.svg | 1 +
scripts/vendor/icons/simple/qgis.svg | 1 +
scripts/vendor/icons/simple/r.svg | 1 +
scripts/vendor/icons/simple/redash.svg | 1 +
scripts/vendor/icons/simple/sqlite.svg | 1 +
scripts/vendor/icons/simple/tableau.svg | 1 +
scripts/vendor/icons/simple/trino.svg | 1 +
scripts/vendor/icons/tabler/address-book.svg | 24 +
.../vendor/icons/tabler/alert-triangle.svg | 21 +
scripts/vendor/icons/tabler/arrow-left.svg | 21 +
.../icons/tabler/arrow-right-rhombus.svg | 21 +
scripts/vendor/icons/tabler/arrow-right.svg | 21 +
scripts/vendor/icons/tabler/arrows-split.svg | 22 +
scripts/vendor/icons/tabler/bolt.svg | 19 +
scripts/vendor/icons/tabler/braces.svg | 20 +
scripts/vendor/icons/tabler/brand-aws.svg | 24 +
scripts/vendor/icons/tabler/brand-azure.svg | 20 +
scripts/vendor/icons/tabler/brand-docker.svg | 27 +
scripts/vendor/icons/tabler/brand-github.svg | 19 +
.../vendor/icons/tabler/brand-terraform.svg | 20 +
scripts/vendor/icons/tabler/bucket.svg | 20 +
scripts/vendor/icons/tabler/bug.svg | 27 +
scripts/vendor/icons/tabler/chart-line.svg | 20 +
scripts/vendor/icons/tabler/cloud.svg | 19 +
scripts/vendor/icons/tabler/cube.svg | 22 +
scripts/vendor/icons/tabler/database.svg | 21 +
.../vendor/icons/tabler/device-desktop.svg | 22 +
scripts/vendor/icons/tabler/device-floppy.svg | 21 +
scripts/vendor/icons/tabler/device-laptop.svg | 20 +
scripts/vendor/icons/tabler/device-mobile.svg | 21 +
.../vendor/icons/tabler/device-sd-card.svg | 22 +
scripts/vendor/icons/tabler/door-enter.svg | 22 +
scripts/vendor/icons/tabler/file-text.svg | 23 +
scripts/vendor/icons/tabler/file-type-csv.svg | 23 +
scripts/vendor/icons/tabler/file-type-txt.svg | 27 +
scripts/vendor/icons/tabler/file-type-xls.svg | 24 +
scripts/vendor/icons/tabler/file.svg | 20 +
scripts/vendor/icons/tabler/git-branch.svg | 24 +
scripts/vendor/icons/tabler/git-merge.svg | 23 +
scripts/vendor/icons/tabler/hexagon.svg | 19 +
scripts/vendor/icons/tabler/key.svg | 20 +
scripts/vendor/icons/tabler/lock.svg | 21 +
scripts/vendor/icons/tabler/package.svg | 23 +
scripts/vendor/icons/tabler/refresh.svg | 20 +
scripts/vendor/icons/tabler/robot.svg | 27 +
scripts/vendor/icons/tabler/rocket.svg | 21 +
scripts/vendor/icons/tabler/search.svg | 20 +
scripts/vendor/icons/tabler/server.svg | 22 +
scripts/vendor/icons/tabler/shield-lock.svg | 21 +
scripts/vendor/icons/tabler/sql.svg | 22 +
scripts/vendor/icons/tabler/stack-2.svg | 21 +
scripts/vendor/icons/tabler/tag.svg | 20 +
scripts/vendor/icons/tabler/terminal.svg | 20 +
scripts/vendor/icons/tabler/test-pipe.svg | 22 +
scripts/vendor/icons/tabler/topology-star.svg | 27 +
scripts/vendor/icons/tabler/user-shield.svg | 21 +
scripts/vendor/icons/tabler/user.svg | 20 +
scripts/vendor/icons/tabler/users.svg | 22 +
scripts/vendor/icons/tabler/wall.svg | 27 +
scripts/vendor/icons/tabler/world-cog.svg | 30 +
scripts/vendor/icons/tabler/world-www.svg | 27 +
scripts/vendor/icons/tabler/world.svg | 23 +
scripts/vendor/icons/url/dagster.svg | 11 +
scripts/vendor/icons/url/hop.svg | 53 ++
scripts/vendor/icons/url/pentaho.svg | 1 +
scripts/vendor/icons/url/stata.svg | 3 +
skills/diagram-design/SKILL.md | 104 ++-
.../assets/example-architecture-dark.html | 30 +-
.../assets/example-architecture-full.html | 30 +-
.../assets/example-architecture.html | 31 +-
.../assets/example-bar-dark.html | 127 +++
.../assets/example-bar-full.html | 103 +++
skills/diagram-design/assets/example-bar.html | 127 +++
.../assets/example-data-flow-dark.html | 143 +++
.../assets/example-data-flow-full.html | 185 ++++
.../assets/example-data-flow.html | 143 +++
.../assets/example-datalake-dark.html | 241 +++++
.../assets/example-datalake-full.html | 246 ++++++
.../assets/example-datalake.html | 267 ++++++
.../assets/example-dp-integration-dark.html | 78 ++
.../assets/example-dp-integration-full.html | 88 ++
.../assets/example-dp-integration.html | 78 ++
.../example-dp-security-matrix-dark.html | 31 +
.../example-dp-security-matrix-full.html | 32 +
.../assets/example-dp-security-matrix.html | 88 ++
.../assets/example-er-dark.html | 2 +-
.../assets/example-er-full.html | 2 +-
skills/diagram-design/assets/example-er.html | 2 +-
.../assets/example-gantt-dark.html | 135 +++
.../assets/example-gantt-full.html | 125 +++
.../diagram-design/assets/example-gantt.html | 135 +++
.../assets/example-high-level-dark.html | 249 ++++++
.../assets/example-high-level-full.html | 245 ++++++
.../example-high-level-vertical-dark.html | 272 ++++++
.../example-high-level-vertical-full.html | 250 ++++++
.../assets/example-high-level-vertical.html | 323 +++++++
.../assets/example-high-level.html | 299 +++++++
.../assets/example-it-state-dark.html | 90 ++
.../assets/example-it-state-full.html | 69 ++
.../assets/example-it-state.html | 128 +++
.../assets/example-line-dark.html | 109 +++
.../assets/example-line-full.html | 103 +++
.../diagram-design/assets/example-line.html | 109 +++
.../assets/example-medallion-dark.html | 159 ++++
.../assets/example-medallion-full.html | 201 +++++
.../assets/example-medallion.html | 159 ++++
.../assets/example-process-dark.html | 62 ++
.../assets/example-process-full.html | 72 ++
.../assets/example-process.html | 62 ++
.../assets/example-radar-dark.html | 137 +++
.../assets/example-radar-full.html | 133 +++
.../diagram-design/assets/example-radar.html | 137 +++
.../assets/example-scatter-dark.html | 139 +++
.../assets/example-scatter-full.html | 114 +++
.../assets/example-scatter.html | 139 +++
skills/diagram-design/assets/icons.html | 230 +++++
skills/diagram-design/assets/index.html | 513 ++++++-----
skills/diagram-design/references/export.md | 107 +++
.../diagram-design/references/onboarding.md | 153 +++-
.../references/primitive-icons.md | 821 ++++++++++++++++++
.../diagram-design/references/style-guide.md | 14 +
.../references/type-architecture.md | 58 ++
skills/diagram-design/references/type-bar.md | 48 +
.../references/type-data-flow.md | 374 ++++++++
.../references/type-dp-integration.md | 410 +++++++++
.../references/type-dp-security-matrix.md | 379 ++++++++
.../diagram-design/references/type-gantt.md | 45 +
.../references/type-high-level.md | 458 ++++++++++
.../references/type-it-state.md | 470 ++++++++++
skills/diagram-design/references/type-line.md | 44 +
.../references/type-medallion.md | 356 ++++++++
.../diagram-design/references/type-process.md | 495 +++++++++++
.../diagram-design/references/type-radar.md | 80 ++
.../diagram-design/references/type-scatter.md | 39 +
175 files changed, 13368 insertions(+), 261 deletions(-)
create mode 100644 .gitignore
create mode 100644 THIRD_PARTY_LICENSES.md
create mode 100644 commands/export-diagram.md
create mode 100644 docs/screenshots/bar.png
create mode 100644 docs/screenshots/data-flow.png
create mode 100644 docs/screenshots/dp-integration.png
create mode 100644 docs/screenshots/dp-security-matrix.png
create mode 100644 docs/screenshots/gantt.png
create mode 100644 docs/screenshots/high-level.png
create mode 100644 docs/screenshots/it-state.png
create mode 100644 docs/screenshots/line.png
create mode 100644 docs/screenshots/medallion.png
create mode 100644 docs/screenshots/process.png
create mode 100644 docs/screenshots/radar.png
create mode 100644 docs/screenshots/scatter.png
create mode 100644 scripts/build-icons.py
create mode 100644 scripts/fix-mojibake.py
create mode 100644 scripts/vendor/icons/devicon/rstudio-plain.svg
create mode 100644 scripts/vendor/icons/devicon/spss-plain.svg
create mode 100644 scripts/vendor/icons/logz/mysql.svg
create mode 100644 scripts/vendor/icons/logz/redis.svg
create mode 100644 scripts/vendor/icons/logz/starrocks.svg
create mode 100644 scripts/vendor/icons/simple/apacheairflow.svg
create mode 100644 scripts/vendor/icons/simple/apachehive.svg
create mode 100644 scripts/vendor/icons/simple/apachenifi.svg
create mode 100644 scripts/vendor/icons/simple/apachesuperset.svg
create mode 100644 scripts/vendor/icons/simple/gitea.svg
create mode 100644 scripts/vendor/icons/simple/googlecloud.svg
create mode 100644 scripts/vendor/icons/simple/jupyter.svg
create mode 100644 scripts/vendor/icons/simple/keycloak.svg
create mode 100644 scripts/vendor/icons/simple/kubernetes.svg
create mode 100644 scripts/vendor/icons/simple/microsoftsqlserver.svg
create mode 100644 scripts/vendor/icons/simple/minio.svg
create mode 100644 scripts/vendor/icons/simple/nginx.svg
create mode 100644 scripts/vendor/icons/simple/oracle.svg
create mode 100644 scripts/vendor/icons/simple/postgresql.svg
create mode 100644 scripts/vendor/icons/simple/powerbi.svg
create mode 100644 scripts/vendor/icons/simple/python.svg
create mode 100644 scripts/vendor/icons/simple/qgis.svg
create mode 100644 scripts/vendor/icons/simple/r.svg
create mode 100644 scripts/vendor/icons/simple/redash.svg
create mode 100644 scripts/vendor/icons/simple/sqlite.svg
create mode 100644 scripts/vendor/icons/simple/tableau.svg
create mode 100644 scripts/vendor/icons/simple/trino.svg
create mode 100644 scripts/vendor/icons/tabler/address-book.svg
create mode 100644 scripts/vendor/icons/tabler/alert-triangle.svg
create mode 100644 scripts/vendor/icons/tabler/arrow-left.svg
create mode 100644 scripts/vendor/icons/tabler/arrow-right-rhombus.svg
create mode 100644 scripts/vendor/icons/tabler/arrow-right.svg
create mode 100644 scripts/vendor/icons/tabler/arrows-split.svg
create mode 100644 scripts/vendor/icons/tabler/bolt.svg
create mode 100644 scripts/vendor/icons/tabler/braces.svg
create mode 100644 scripts/vendor/icons/tabler/brand-aws.svg
create mode 100644 scripts/vendor/icons/tabler/brand-azure.svg
create mode 100644 scripts/vendor/icons/tabler/brand-docker.svg
create mode 100644 scripts/vendor/icons/tabler/brand-github.svg
create mode 100644 scripts/vendor/icons/tabler/brand-terraform.svg
create mode 100644 scripts/vendor/icons/tabler/bucket.svg
create mode 100644 scripts/vendor/icons/tabler/bug.svg
create mode 100644 scripts/vendor/icons/tabler/chart-line.svg
create mode 100644 scripts/vendor/icons/tabler/cloud.svg
create mode 100644 scripts/vendor/icons/tabler/cube.svg
create mode 100644 scripts/vendor/icons/tabler/database.svg
create mode 100644 scripts/vendor/icons/tabler/device-desktop.svg
create mode 100644 scripts/vendor/icons/tabler/device-floppy.svg
create mode 100644 scripts/vendor/icons/tabler/device-laptop.svg
create mode 100644 scripts/vendor/icons/tabler/device-mobile.svg
create mode 100644 scripts/vendor/icons/tabler/device-sd-card.svg
create mode 100644 scripts/vendor/icons/tabler/door-enter.svg
create mode 100644 scripts/vendor/icons/tabler/file-text.svg
create mode 100644 scripts/vendor/icons/tabler/file-type-csv.svg
create mode 100644 scripts/vendor/icons/tabler/file-type-txt.svg
create mode 100644 scripts/vendor/icons/tabler/file-type-xls.svg
create mode 100644 scripts/vendor/icons/tabler/file.svg
create mode 100644 scripts/vendor/icons/tabler/git-branch.svg
create mode 100644 scripts/vendor/icons/tabler/git-merge.svg
create mode 100644 scripts/vendor/icons/tabler/hexagon.svg
create mode 100644 scripts/vendor/icons/tabler/key.svg
create mode 100644 scripts/vendor/icons/tabler/lock.svg
create mode 100644 scripts/vendor/icons/tabler/package.svg
create mode 100644 scripts/vendor/icons/tabler/refresh.svg
create mode 100644 scripts/vendor/icons/tabler/robot.svg
create mode 100644 scripts/vendor/icons/tabler/rocket.svg
create mode 100644 scripts/vendor/icons/tabler/search.svg
create mode 100644 scripts/vendor/icons/tabler/server.svg
create mode 100644 scripts/vendor/icons/tabler/shield-lock.svg
create mode 100644 scripts/vendor/icons/tabler/sql.svg
create mode 100644 scripts/vendor/icons/tabler/stack-2.svg
create mode 100644 scripts/vendor/icons/tabler/tag.svg
create mode 100644 scripts/vendor/icons/tabler/terminal.svg
create mode 100644 scripts/vendor/icons/tabler/test-pipe.svg
create mode 100644 scripts/vendor/icons/tabler/topology-star.svg
create mode 100644 scripts/vendor/icons/tabler/user-shield.svg
create mode 100644 scripts/vendor/icons/tabler/user.svg
create mode 100644 scripts/vendor/icons/tabler/users.svg
create mode 100644 scripts/vendor/icons/tabler/wall.svg
create mode 100644 scripts/vendor/icons/tabler/world-cog.svg
create mode 100644 scripts/vendor/icons/tabler/world-www.svg
create mode 100644 scripts/vendor/icons/tabler/world.svg
create mode 100644 scripts/vendor/icons/url/dagster.svg
create mode 100644 scripts/vendor/icons/url/hop.svg
create mode 100644 scripts/vendor/icons/url/pentaho.svg
create mode 100644 scripts/vendor/icons/url/stata.svg
create mode 100644 skills/diagram-design/assets/example-bar-dark.html
create mode 100644 skills/diagram-design/assets/example-bar-full.html
create mode 100644 skills/diagram-design/assets/example-bar.html
create mode 100644 skills/diagram-design/assets/example-data-flow-dark.html
create mode 100644 skills/diagram-design/assets/example-data-flow-full.html
create mode 100644 skills/diagram-design/assets/example-data-flow.html
create mode 100644 skills/diagram-design/assets/example-datalake-dark.html
create mode 100644 skills/diagram-design/assets/example-datalake-full.html
create mode 100644 skills/diagram-design/assets/example-datalake.html
create mode 100644 skills/diagram-design/assets/example-dp-integration-dark.html
create mode 100644 skills/diagram-design/assets/example-dp-integration-full.html
create mode 100644 skills/diagram-design/assets/example-dp-integration.html
create mode 100644 skills/diagram-design/assets/example-dp-security-matrix-dark.html
create mode 100644 skills/diagram-design/assets/example-dp-security-matrix-full.html
create mode 100644 skills/diagram-design/assets/example-dp-security-matrix.html
create mode 100644 skills/diagram-design/assets/example-gantt-dark.html
create mode 100644 skills/diagram-design/assets/example-gantt-full.html
create mode 100644 skills/diagram-design/assets/example-gantt.html
create mode 100644 skills/diagram-design/assets/example-high-level-dark.html
create mode 100644 skills/diagram-design/assets/example-high-level-full.html
create mode 100644 skills/diagram-design/assets/example-high-level-vertical-dark.html
create mode 100644 skills/diagram-design/assets/example-high-level-vertical-full.html
create mode 100644 skills/diagram-design/assets/example-high-level-vertical.html
create mode 100644 skills/diagram-design/assets/example-high-level.html
create mode 100644 skills/diagram-design/assets/example-it-state-dark.html
create mode 100644 skills/diagram-design/assets/example-it-state-full.html
create mode 100644 skills/diagram-design/assets/example-it-state.html
create mode 100644 skills/diagram-design/assets/example-line-dark.html
create mode 100644 skills/diagram-design/assets/example-line-full.html
create mode 100644 skills/diagram-design/assets/example-line.html
create mode 100644 skills/diagram-design/assets/example-medallion-dark.html
create mode 100644 skills/diagram-design/assets/example-medallion-full.html
create mode 100644 skills/diagram-design/assets/example-medallion.html
create mode 100644 skills/diagram-design/assets/example-process-dark.html
create mode 100644 skills/diagram-design/assets/example-process-full.html
create mode 100644 skills/diagram-design/assets/example-process.html
create mode 100644 skills/diagram-design/assets/example-radar-dark.html
create mode 100644 skills/diagram-design/assets/example-radar-full.html
create mode 100644 skills/diagram-design/assets/example-radar.html
create mode 100644 skills/diagram-design/assets/example-scatter-dark.html
create mode 100644 skills/diagram-design/assets/example-scatter-full.html
create mode 100644 skills/diagram-design/assets/example-scatter.html
create mode 100644 skills/diagram-design/assets/icons.html
create mode 100644 skills/diagram-design/references/export.md
create mode 100644 skills/diagram-design/references/primitive-icons.md
create mode 100644 skills/diagram-design/references/type-bar.md
create mode 100644 skills/diagram-design/references/type-data-flow.md
create mode 100644 skills/diagram-design/references/type-dp-integration.md
create mode 100644 skills/diagram-design/references/type-dp-security-matrix.md
create mode 100644 skills/diagram-design/references/type-gantt.md
create mode 100644 skills/diagram-design/references/type-high-level.md
create mode 100644 skills/diagram-design/references/type-it-state.md
create mode 100644 skills/diagram-design/references/type-line.md
create mode 100644 skills/diagram-design/references/type-medallion.md
create mode 100644 skills/diagram-design/references/type-process.md
create mode 100644 skills/diagram-design/references/type-radar.md
create mode 100644 skills/diagram-design/references/type-scatter.md
diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json
index ed0c44a..b2bd921 100644
--- a/.claude-plugin/marketplace.json
+++ b/.claude-plugin/marketplace.json
@@ -1,7 +1,7 @@
{
"name": "diagram-design",
"metadata": {
- "description": "Editorial-quality technical and product diagrams — 13 types rendered as standalone HTML with inline SVG, skinnable to match your brand"
+ "description": "Editorial-quality technical and product diagrams — 26 types rendered as standalone HTML with inline SVG, skinnable to match your brand"
},
"owner": {
"name": "Cathryn Lavery"
diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json
index 45c2308..71e67b2 100644
--- a/.claude-plugin/plugin.json
+++ b/.claude-plugin/plugin.json
@@ -1,7 +1,7 @@
{
"name": "diagram-design",
- "description": "Editorial-quality technical and product diagrams — 13 types rendered as standalone HTML with inline SVG, skinnable to match your brand",
- "version": "1.0.0",
+ "description": "Editorial-quality technical and product diagrams — 26 types rendered as standalone HTML with inline SVG, skinnable to match your brand",
+ "version": "2.0.0",
"homepage": "https://github.com/cathrynlavery/diagram-design",
"repository": "https://github.com/cathrynlavery/diagram-design",
"license": "MIT",
diff --git a/.codex-plugin/plugin.json b/.codex-plugin/plugin.json
index e52c881..74ca72f 100644
--- a/.codex-plugin/plugin.json
+++ b/.codex-plugin/plugin.json
@@ -1,7 +1,7 @@
{
"name": "diagram-design",
- "description": "Editorial-quality technical and product diagrams - 13 types rendered as standalone HTML with inline SVG, skinnable to match your brand",
- "version": "1.0.0",
+ "description": "Editorial-quality technical and product diagrams - 26 types rendered as standalone HTML with inline SVG, skinnable to match your brand",
+ "version": "2.0.0",
"author": {
"name": "Cathryn Lavery",
"url": "https://github.com/cathrynlavery"
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..4c4cc40
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+.claude/
+.mcp.json
diff --git a/README.md b/README.md
index 39b07fc..504114a 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@

-14 types. One Claude Code skill. Your brand in 60 seconds — the skill reads your website and maps colors + fonts to every diagram.
+26 types. One Claude Code skill. Your brand in 60 seconds — the skill reads your website and maps colors + fonts to every diagram.
No Figma. No generic rounded boxes. No 30-minute color-picking sessions.
@@ -14,7 +14,7 @@ No Figma. No generic rounded boxes. No 30-minute color-picking sessions.
I write at [littlemight.com](https://littlemight.com?utm_source=diagram-design&utm_medium=readme&utm_campaign=github&utm_content=intro) (and run [BestSelf.co](https://bestself.co?utm_source=diagram-design&utm_medium=readme&utm_campaign=github&utm_content=intro) on the side). Every time I needed a diagram — an architecture sketch, a flowchart, a pyramid of what matters most — I'd ask Claude and get back a generic rounded-box thing that looked nothing like the rest of the site. I'd either fight with Figma for 30 minutes or just skip the diagram.
-So I built a Claude Code skill for it. Fourteen types, editorial quality, matches your brand in 60 seconds by reading your website.
+So I built a Claude Code skill for it. Twenty-six types, editorial quality, matches your brand in 60 seconds by reading your website.
> *The highest-quality move is usually deletion.* Every node earns its place. The accent color is reserved for the 1–2 things the reader should look at first. Target density: 4/10.
@@ -22,7 +22,7 @@ So I built a Claude Code skill for it. Fourteen types, editorial quality, matche
## What it makes
-All 14 diagrams ship in three variants: minimal light, minimal dark, and full-editorial. Open any of them directly in a browser — no build step, no JS, no external images.
+All 26 diagrams ship in three variants: minimal light, minimal dark, and full-editorial. Open any of them directly in a browser — no build step, no JS, no external images.
@@ -32,7 +32,7 @@ All 14 diagrams ship in three variants: minimal light, minimal dark, and full-ed
State machine States + transitions
-
ER / data model Entities + fields
+
ER / data model Entities + fields
Timeline Events on an axis
@@ -48,16 +48,31 @@ All 14 diagrams ship in three variants: minimal light, minimal dark, and full-ed
Layer stack Stacked abstractions
Pyramid / funnel Ranked hierarchy or drop-off
-
+
Consultant 2×2 Scenario matrix · named cells
-
Consultant 2×2 Scenario matrix · named cells
-
-
+
Radar / Spider Multi-axis comparison
+
IT current-state Legacy landscape · modernization
+
High-Level End-to-end stack on a cluster
+
+
+
Bar chart Categorical comparison
+
Line chart Trends over time
+
Gantt Tasks and phases on a timeline
+
+
+
Scatter plot Distribution and correlation
+
Process Multi-actor sequential workflow
+
Medallion Multi-tier data storage
+
+
+
Data flow Role-scoped pipeline steps
+
DP integration Sources → core → consumers
+
DP security matrix Per-role access permissions
-**Browse the live gallery:** open [`skills/diagram-design/assets/index.html`](skills/diagram-design/assets/index.html) in your browser to flip through all 14 diagrams with light / dark / full-editorial tabs.
+**Browse the live gallery:** open [`skills/diagram-design/assets/index.html`](skills/diagram-design/assets/index.html) in your browser to flip through all 26 diagrams with light / dark / full-editorial tabs.
---
@@ -78,6 +93,7 @@ Restart Claude Code. The skill registers as `diagram-design` and activates whene
Quicker to install — but the skill lives in the plugin cache, so edits to `references/style-guide.md` don't survive plugin updates. Pick this if you just want to try it out; use the clone route above if you plan to customize the style guide by hand.
**Claude Code:**
+
```
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design
@@ -86,6 +102,7 @@ Quicker to install — but the skill lives in the plugin cache, so edits to `ref
**Claude Cowork:** Customize → Directory → Plugins → **+** → paste `cathrynlavery/diagram-design` → Sync, then install from the Personal list.
**Codex:**
+
```
npx skills add https://github.com/cathrynlavery/diagram-design --skill diagram-design
```
@@ -132,7 +149,7 @@ Before writing tokens, the skill verifies WCAG AA contrast on `ink` over `paper`
### Manual override
-Prefer to set tokens by hand? Open [`skills/diagram-design/references/style-guide.md`](skills/diagram-design/references/style-guide.md) and edit the table. Everything downstream reads from there — all 14 diagrams, the annotation primitive, and the gallery all inherit semantic role names (`accent`, not `#eb6c36`).
+Prefer to set tokens by hand? Open [`skills/diagram-design/references/style-guide.md`](skills/diagram-design/references/style-guide.md) and edit the table. Everything downstream reads from there — all 26 diagrams, the annotation primitive, and the gallery all inherit semantic role names (`accent`, not `#eb6c36`).
### First-run gate
@@ -147,7 +164,7 @@ See [`skills/diagram-design/references/onboarding.md`](skills/diagram-design/ref
## Quickstart
```bash
-# Open the gallery to see all 14 diagrams
+# Open the gallery to see all 26 diagrams
open ~/.claude/skills/diagram-design/assets/index.html
# In Claude Code, just ask:
@@ -165,6 +182,30 @@ cp assets/template-full.html my-diagram.html # editorial with summary cards
---
+## Export to PNG / SVG
+
+Diagrams ship as self-contained HTML, but you can export the diagram itself for Figma, slides, or social cards. Use the slash command:
+
+```
+/diagram-design:export path/to/diagram.html
+/diagram-design:export path/to/diagram.html --svg-only
+/diagram-design:export path/to/diagram.html --png-only --scale=3
+```
+
+Or just ask in natural language:
+
+```
+"Export this diagram as SVG and PNG."
+"Save my-diagram.html as PNG."
+```
+
+- **SVG** — extracts the `