Architecture
Components + connections |
+ 
IT current-state
Legacy landscape + modernization |
Flowchart
Decision logic |
- 
Sequence
Messages over time |
+
Sequence
Messages over time |
State machine
States + transitions |
ER / data model
Entities + fields |
- 
Timeline
Events on an axis |
+
Timeline
Events on an axis |
Swimlane
Cross-functional flow |
Quadrant
Two-axis positioning |
+
+
+ 
Radar / spider
Multi-axis comparison |
+ 
Loop / flywheel
Reinforcing cycle + shared hub |
Nested
Hierarchy by containment |
Tree
Parent → children |
Org chart
Ownership + routing |
+ 
Layer stack
Stacked abstractions |
+
+
Venn
Set overlap |
-
-
-
Layer stack
Stacked abstractions |
Pyramid / funnel
Ranked hierarchy or drop-off |
- 
Consultant 2×2
Scenario matrix · named cells |
-
-
-
Radar / Spider
Multi-axis comparison |
-
Loop
Flywheel · stations around a hub |
-
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 |
+ 
Treemap
Part-of-whole by area |
+
Line chart
Trends over time |
+
Gantt
Tasks + phases on a timeline |
+
+
+
Scatter plot
Distribution + correlation |
+
High-Level
End-to-end stack on a cluster |
Process
Multi-actor sequential workflow |
@@ -82,25 +82,27 @@ All 38 visual types ship in three static variants: minimal light, minimal dark,
DP security matrix
Per-role access permissions |
-
Treemap
Part-of-whole by area |
+ 
Sankey
Quantities that split + merge |
+ 
Fishbone
Grouped causes → one effect |
+
+
+ 
Wardley map
Value chain × evolution |
+ 
Kanban
Work in progress by state |
+ 
User journey
Stages, actions + sentiment |
+
+
+ 
Deployment
Zones, hosts + artifacts |
+ 
Dependency graph
Fan-in, ranks + cycles |
+ 
UML class
Classes, operations + typed relations |
+
+
+ 
Story map
Backbone × release slices |
+ 
Database schema
Physical tables + column FKs |
|
-**New in 2.5.10 — ten layout grammars nothing else covered.** Open the examples directly or compare every light, dark, and full-editorial render in the [30-variant contact sheet](.github/pr-previews/editorial-diagrams-2.5.10.jpg).
-
-| Type | Shows | Example |
-|---|---|---|
-| **Sankey** | A quantity splitting and merging across stages — band width is the amount | [`example-sankey.html`](skills/diagram-design/assets/example-sankey.html) |
-| **Fishbone** | Causes of one observed effect, grouped by category — root-cause analysis | [`example-fishbone.html`](skills/diagram-design/assets/example-fishbone.html) |
-| **Wardley map** | Value chain against evolution — what to build, what to buy, what is moving | [`example-wardley.html`](skills/diagram-design/assets/example-wardley.html) |
-| **Kanban** | Work-in-progress by state, with WIP limits and blocked items | [`example-kanban.html`](skills/diagram-design/assets/example-kanban.html) |
-| **User journey** | What a person does across stages of an experience, and how it feels | [`example-journey.html`](skills/diagram-design/assets/example-journey.html) |
-| **Deployment** | Where software runs — zones, hosts, artifacts, replicas, ports | [`example-deployment.html`](skills/diagram-design/assets/example-deployment.html) |
-| **Dependency graph** | What depends on what — fan-in and cycles a tree cannot express | [`example-dependency.html`](skills/diagram-design/assets/example-dependency.html) |
-| **UML class** | Classes with operations, inheritance and composition (other UML routes to existing types) | [`example-uml-class.html`](skills/diagram-design/assets/example-uml-class.html) |
-| **Story map** | Narrative backbone sliced into releases, with the release cut line | [`example-story-map.html`](skills/diagram-design/assets/example-story-map.html) |
-| **Database schema** | Physical tables: SQL types, constraints, indexes, column-level foreign keys | [`example-db-schema.html`](skills/diagram-design/assets/example-db-schema.html) |
+The v2.5.10 release added the final ten types above. Compare their light, dark, and full-editorial variants in the [30-variant contact sheet](.github/pr-previews/editorial-diagrams-2.5.10.jpg).
**Browse the live gallery:** [cathrynlavery.github.io/diagram-design](https://cathrynlavery.github.io/diagram-design/) — or open [`skills/diagram-design/assets/index.html`](skills/diagram-design/assets/index.html) locally to flip through all 38 diagrams with light / dark / full-editorial tabs.
@@ -406,6 +408,8 @@ diagram-design/
│ └── example-sequence-oauth*.html
├── scripts/
│ ├── bump-plugin-version.py — synchronized Claude/Codex version bump
+│ ├── render-canonical-screenshots.py — deterministic 38-type PNG catalog renderer
+│ ├── verify-screenshot-freshness.py — source + screenshot digest gate
│ ├── verify-plugin-package.py — version + marketplace package gate
│ ├── test-plugin-package.py — adversarial package-gate tests
│ ├── test-verify-docs-sync.py — docs/profile-surface gate tests
@@ -414,7 +418,7 @@ diagram-design/
│ ├── sample-readme-with-mermaid.md
│ └── sample-adversarial.mmd
├── docs/adr/ — short records of settled design decisions
-└── docs/screenshots/ — images used in this README
+└── docs/screenshots/ — README images + source-digest manifest.json
```
This keeps the agent's working context tight: routine diagrams load one type reference; behavior-rich diagrams add the routed semantic reference; animation adds its contract only when selected.
diff --git a/commands/import-drawio.md b/commands/import-drawio.md
index 2725bd7..2416a6b 100644
--- a/commands/import-drawio.md
+++ b/commands/import-drawio.md
@@ -22,7 +22,7 @@ Accepts `.drawio`, `.drawio.xml`, `.xml`, `.drawio.png`, and `.drawio.svg`.
- `--detail=balanced` · `--audience=mixed`.
- `--variant=light` — the minimal light template.
- A single-page file selects its only page; a multi-page file lists pages and asks which to use.
-- Type is chosen from the extracted structure; `--type` forces one of the 37.
+- Type is chosen from the extracted structure; `--type` forces one of the 38.
## Flags
diff --git a/commands/import-mermaid.md b/commands/import-mermaid.md
index fef80ab..7a7891e 100644
--- a/commands/import-mermaid.md
+++ b/commands/import-mermaid.md
@@ -22,7 +22,7 @@ Accepts `.mmd`, `.mermaid`, and Markdown files containing fenced `mermaid` block
- `--detail=balanced` · `--audience=mixed`.
- `--variant=light` — the minimal light template.
- A single diagram selects diagram 0; a multi-block Markdown file lists blocks and asks which to use.
-- Type is chosen from the extracted grammar and structure; `--type` forces one of the 37.
+- Type is chosen from the extracted grammar and structure; `--type` forces one of the 38.
## Flags
diff --git a/docs/screenshots/architecture.png b/docs/screenshots/architecture.png
index 2d3d59b13bbcc5e32890aeebf22a648ff4d5ef40..028cec761c57169366e44028fc5be036c1ea2aae 100644
GIT binary patch
literal 102708
zcmeFZcUV(dyEhzl1eK