diff --git a/README.md b/README.md
index bdca464..39b07fc 100644
--- a/README.md
+++ b/README.md
@@ -42,13 +42,18 @@ All 14 diagrams ship in three variants: minimal light, minimal dark, and full-ed
Tree Parent → children
-
Layer stack Stacked abstractions
+
Org chart Ownership + routing
Venn Set overlap
+
Layer stack Stacked abstractions
Pyramid / funnel Ranked hierarchy or drop-off
+
+
+
Consultant 2×2 Scenario matrix · named cells
+
@@ -180,6 +185,7 @@ diagram-design/
│ ├── type-quadrant.md
│ ├── type-nested.md
│ ├── type-tree.md
+│ ├── type-org-chart.md
│ ├── type-layers.md
│ ├── type-venn.md
│ ├── type-pyramid.md
@@ -188,7 +194,7 @@ diagram-design/
├── assets/
│ ├── index.html — live gallery, tabbed
│ ├── template*.html — scaffolds for new diagrams
-│ ├── example-.html — 3 variants × 13 types
+│ ├── example-.html — 3 variants × 14 types
│ └── example-quadrant-consultant.html — consultant-special 2×2 scenario matrix
└── docs/screenshots/ — the images in this README
```
diff --git a/docs/screenshots/org-chart.png b/docs/screenshots/org-chart.png
new file mode 100644
index 0000000..c36116d
Binary files /dev/null and b/docs/screenshots/org-chart.png differ
diff --git a/skills/diagram-design/SKILL.md b/skills/diagram-design/SKILL.md
index 9586bbb..1104423 100644
--- a/skills/diagram-design/SKILL.md
+++ b/skills/diagram-design/SKILL.md
@@ -1,6 +1,6 @@
---
name: diagram-design
-description: Create technical and product diagrams — architecture, flowchart, sequence, state machine, ER / data model, timeline, swimlane, quadrant, nested, tree, layer stack, venn, pyramid — as standalone HTML files with inline SVG. Ships with a neutral editorial skin and a first-run gate that prompts users to customize the style guide (colors, fonts) from their own website before generating. Includes annotation-callout primitive and optional sketchy variant.
+description: Create technical and product diagrams — architecture, flowchart, sequence, state machine, ER / data model, timeline, swimlane, quadrant, nested, tree, org chart, layer stack, venn, pyramid — as standalone HTML files with inline SVG. Ships with a neutral editorial skin and a first-run gate that prompts users to customize the style guide (colors, fonts) from their own website before generating. Includes annotation-callout primitive and optional sketchy variant.
license: MIT
metadata:
version: "1.0"
@@ -10,7 +10,7 @@ metadata:
Create visual diagrams as self-contained HTML files with inline SVG and CSS, following an opinionated editorial design system.
-Thirteen diagram types. One shared design system, complexity budget, and taste gate. Type-specific conventions live in `references/` and are loaded only when you pick a type.
+Fourteen diagram types. One shared design system, complexity budget, and taste gate. Type-specific conventions live in `references/` and are loaded only when you pick a type.
---
@@ -51,7 +51,7 @@ Applied to schematics:
## 2. When to Use
-Use for any of the 13 diagram types (§3) when a reader will learn more from a visual than from prose, a table, or a bulleted list.
+Use for any of the 14 diagram types (§3) when a reader will learn more from a visual than from prose, a table, or a bulleted list.
**Don't use for:**
- Quick unicode diagrams → use **wiretext**.
@@ -79,6 +79,7 @@ Before drawing, ask: *Would the reader learn more from this than from a well-wri
| Two-axis positioning / prioritization | **Quadrant** | [type-quadrant.md](references/type-quadrant.md) |
| Hierarchy through containment / scope | **Nested** | [type-nested.md](references/type-nested.md) |
| Parent → children relationships | **Tree** | [type-tree.md](references/type-tree.md) |
+| Human/agent/team ownership, reporting, routing, escalation | **Org chart** | [type-org-chart.md](references/type-org-chart.md) |
| Stacked abstraction levels | **Layer stack** | [type-layers.md](references/type-layers.md) |
| Overlap between sets | **Venn** | [type-venn.md](references/type-venn.md) |
| Ranked hierarchy or conversion drop-off | **Pyramid / funnel** | [type-pyramid.md](references/type-pyramid.md) |
@@ -291,6 +292,8 @@ Quick check: if a coordinate ends in 1, 2, 3, 5, 6, 7, 9 — fix it.
| Max entities (ER) | 8 |
| Max nesting levels (nested) | 6 |
| Max tree depth | 4 |
+| Max org chart depth | 4 |
+| Max org chart nodes | 12 |
| Max layers (layer stack) | 6 |
| Max circles (venn) | 3 |
| Max layers (pyramid) | 6 |
diff --git a/skills/diagram-design/assets/example-org-chart-dark.html b/skills/diagram-design/assets/example-org-chart-dark.html
new file mode 100644
index 0000000..6fa2cde
--- /dev/null
+++ b/skills/diagram-design/assets/example-org-chart-dark.html
@@ -0,0 +1,45 @@
+Agent team responsibility map
+
Org chart · Diagram Design
Agent team responsibility map
A responsibility map for teams, agents, and escalation paths. Unlike a generic tree, it makes the front door, owners, invocation paths, and setup gaps visible.
\ No newline at end of file
diff --git a/skills/diagram-design/assets/example-org-chart-full.html b/skills/diagram-design/assets/example-org-chart-full.html
new file mode 100644
index 0000000..6c75250
--- /dev/null
+++ b/skills/diagram-design/assets/example-org-chart-full.html
@@ -0,0 +1,45 @@
+Agent team responsibility map
+
Org chart · Diagram Design
Agent team responsibility map
A responsibility map for teams, agents, and escalation paths. Unlike a generic tree, it makes the front door, owners, invocation paths, and setup gaps visible.
Use when
The reader needs to know who owns what, where to route work, and which roles are active vs. still being wired.
Keep nodes short
Name, invocation path, and 2–4 scope words. Put detailed operating rules below the figure.
Show gaps
Unavailable owners and missing routes should be dashed, not hidden. They are operationally useful.
\ No newline at end of file
diff --git a/skills/diagram-design/assets/example-org-chart.html b/skills/diagram-design/assets/example-org-chart.html
new file mode 100644
index 0000000..9230e35
--- /dev/null
+++ b/skills/diagram-design/assets/example-org-chart.html
@@ -0,0 +1,45 @@
+Agent team responsibility map
+
Org chart · Diagram Design
Agent team responsibility map
A responsibility map for teams, agents, and escalation paths. Unlike a generic tree, it makes the front door, owners, invocation paths, and setup gaps visible.
\ No newline at end of file
diff --git a/skills/diagram-design/assets/index.html b/skills/diagram-design/assets/index.html
index b8336b0..17d51bf 100644
--- a/skills/diagram-design/assets/index.html
+++ b/skills/diagram-design/assets/index.html
@@ -159,9 +159,10 @@
-
-
-
+
+
+
+
diff --git a/skills/diagram-design/references/onboarding.md b/skills/diagram-design/references/onboarding.md
index ff1cc1f..3fff311 100644
--- a/skills/diagram-design/references/onboarding.md
+++ b/skills/diagram-design/references/onboarding.md
@@ -120,7 +120,7 @@ Also regenerate the dark variant via the inversion rule (`rgba(11,13,11, X)` →
Write the new tokens to `style-guide.md`. Suggest running the `/regenerate-examples` flow (if it exists) or rebuilding one example to verify the new skin reads cleanly.
After onboarding, the user should:
-1. Open `assets/index.html` (gallery) and confirm the new palette feels coherent across all 13 types.
+1. Open `assets/index.html` (gallery) and confirm the new palette feels coherent across all 14 types.
2. If any type looks off, they usually need to tune `muted` (often too dark or too light against the new `paper`).
---
diff --git a/skills/diagram-design/references/type-org-chart.md b/skills/diagram-design/references/type-org-chart.md
new file mode 100644
index 0000000..03b0d18
--- /dev/null
+++ b/skills/diagram-design/references/type-org-chart.md
@@ -0,0 +1,44 @@
+# Org Chart / Responsibility Map
+
+**Best for:** human teams, agent teams, support escalation maps, role ownership, routing maps, and any hierarchy where the reader needs to know *who owns what* rather than just parent → child structure.
+
+Use **Org Chart** instead of **Tree** when the nodes are people, agents, teams, roles, or accountable owners. A tree shows generic hierarchy. An org chart shows responsibility, invocation paths, and coverage gaps.
+
+## Layout conventions
+- Root owner or front door at top center. Use one coral focal node for the person/team/agent that receives ambiguous work.
+- Tier 1 nodes are departments, pods, queues, or primary routing buckets. Keep them horizontally aligned.
+- Tier 2 nodes are responsible owners or specialists. If there are more than 8 specialists, group them under pod nodes instead of making one giant row.
+- Use orthogonal connectors: vertical drop from parent → horizontal bus → vertical drops to children. No diagonal lines.
+- Each node should answer three questions when space allows:
+ 1. **Name** — human-readable role/person/agent in Geist sans.
+ 2. **How to invoke** — Slack handle, queue, issue prefix, or trigger in Geist Mono.
+ 3. **Scope** — 2–4 terse ownership words, not a paragraph.
+- Show non-Slack / not-yet-live owners with dashed optional styling rather than hiding them. Missing routes are operationally important.
+- Put escalation / approval rules in a small side callout or footer strip, not as extra org nodes.
+
+## Node treatments
+- **Front door / command center:** focal treatment (`accent-tint` + `accent`).
+- **Team / pod / department:** backend treatment (white + `ink`).
+- **Individual agent / owner:** store or external treatment depending on whether it is active in the system.
+- **Gap / needs setup:** optional dashed treatment.
+- **Approval gate:** security treatment, separate from reporting hierarchy.
+
+## Complexity budget
+- Max visible org nodes: 12. If more, create an overview org chart plus separate detail charts per pod.
+- Max depth: 4 tiers.
+- Max direct reports under one parent: 5. If there are more, introduce grouping nodes.
+- Max coral nodes: 1. The org chart's job is clarity, not highlighting everything.
+- Max side callouts: 2.
+
+## Anti-patterns
+- Using a swimlane when the user's real question is "who does what?" Swimlanes explain process; org charts explain ownership.
+- Drawing every person/agent as an identical box. It hides the front door, specialists, gaps, and escalation paths.
+- Cramming full job descriptions into nodes. Keep scope phrases short and move detail to summary cards below.
+- Showing unavailable / not-yet-wired agents as normal active owners. Use dashed optional styling so gaps are visible.
+- Repeating Slack handles in body paragraphs when a node sublabel can carry the invocation path.
+- Floating legends in the org area. Use the standard bottom legend strip.
+
+## Examples
+- `assets/example-org-chart.html` — minimal light
+- `assets/example-org-chart-dark.html` — minimal dark
+- `assets/example-org-chart-full.html` — full editorial
