feat: add org chart diagram type
This commit is contained in:
Cathryn Lavery
@@ -42,13 +42,18 @@ All 14 diagrams ship in three variants: minimal light, minimal dark, and full-ed
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center"><img src="docs/screenshots/tree.png" alt="Tree"><br><b>Tree</b><br><sub>Parent → children</sub></td>
|
||||
<td align="center"><img src="docs/screenshots/layers.png" alt="Layers"><br><b>Layer stack</b><br><sub>Stacked abstractions</sub></td>
|
||||
<td align="center"><img src="docs/screenshots/org-chart.png" alt="Org chart"><br><b>Org chart</b><br><sub>Ownership + routing</sub></td>
|
||||
<td align="center"><img src="docs/screenshots/venn.png" alt="Venn"><br><b>Venn</b><br><sub>Set overlap</sub></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center"><img src="docs/screenshots/layers.png" alt="Layers"><br><b>Layer stack</b><br><sub>Stacked abstractions</sub></td>
|
||||
<td align="center"><img src="docs/screenshots/pyramid.png" alt="Pyramid"><br><b>Pyramid / funnel</b><br><sub>Ranked hierarchy or drop-off</sub></td>
|
||||
<td align="center"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center"><img src="docs/screenshots/quadrant-consultant.png" alt="Consultant 2×2"><br><b>Consultant 2×2</b><br><sub>Scenario matrix · named cells</sub></td>
|
||||
<td align="center"> </td>
|
||||
<td align="center"> </td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
@@ -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-<type>.html — 3 variants × 13 types
|
||||
│ ├── example-<type>.html — 3 variants × 14 types
|
||||
│ └── example-quadrant-consultant.html — consultant-special 2×2 scenario matrix
|
||||
└── docs/screenshots/ — the images in this README
|
||||
```
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
@@ -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 |
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
<!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+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
:root{--paper:#2d3142;--paper-2:#393e53;--ink:#f5f5f5;--muted:#bfc0c0;--soft:#8e98ac;--rule:rgba(245,245,245,.12);--accent:#f08a59;--accent-tint:rgba(240,138,89,.10);--link:#6a95d8;--sans:'Geist',system-ui,sans-serif;--serif:'Instrument Serif',serif;--mono:'Geist Mono',ui-monospace,monospace}
|
||||
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:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}h1{font-family:var(--serif);font-size:32px;font-weight:400;line-height:1.08;letter-spacing:-.02em;margin-bottom:20px}.subtitle{color:var(--muted);font-size:14px;line-height:1.5;max-width:720px;margin-bottom:24px}svg{width:100%;min-width:980px;display:block}.cards{display:grid;grid-template-columns:1.1fr 1fr .9fr;gap:16px;margin-top:20px}.card{background:var(--paper-2);border:1px solid var(--rule);border-radius:6px;padding:16px}.card h2{font-size:14px;margin-bottom:8px}.card p{font-size:12px;line-height:1.45;color:var(--muted)}@media(max-width:860px){body{display:block;padding:32px 20px}.cards{grid-template-columns:1fr;overflow:visible}.frame{overflow-x:auto}}
|
||||
</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 the front door, owners, invocation paths, and setup gaps visible.</p><svg viewBox="0 0 1040 620" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc">
|
||||
<title id="title">Agent team org chart</title><desc id="desc">Org chart showing a command center routing work to specialist agents and escalation owners.</desc>
|
||||
<rect width="1040" height="620" fill="#2d3142"/>
|
||||
<defs><marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0,8 3,0 6" fill="#bfc0c0"/></marker></defs>
|
||||
<text x="40" y="64" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" letter-spacing=".16em">COMMAND CENTER</text>
|
||||
<text x="40" y="196" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" letter-spacing=".16em">WORKSTREAMS</text>
|
||||
<text x="40" y="348" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" letter-spacing=".16em">SPECIALISTS</text>
|
||||
<line x1="36" y1="148" x2="1004" y2="148" stroke="rgba(245,245,245,.14)"/><line x1="36" y1="300" x2="1004" y2="300" stroke="rgba(245,245,245,.14)"/>
|
||||
<!-- connectors -->
|
||||
<path d="M 520 120 L 520 172 L 200 172 L 200 220" fill="none" stroke="#bfc0c0" stroke-width="1"/>
|
||||
<path d="M 520 172 L 412 172 L 412 220" fill="none" stroke="#bfc0c0" stroke-width="1"/>
|
||||
<path d="M 520 172 L 628 172 L 628 220" fill="none" stroke="#bfc0c0" stroke-width="1"/>
|
||||
<path d="M 520 172 L 840 172 L 840 220" fill="none" stroke="#bfc0c0" stroke-width="1"/>
|
||||
<path d="M 200 268 L 200 324 L 120 324 L 120 372" fill="none" stroke="#bfc0c0" stroke-width="1"/>
|
||||
<path d="M 200 324 L 280 324 L 280 372" fill="none" stroke="#bfc0c0" stroke-width="1"/>
|
||||
<path d="M 412 268 L 412 324 L 440 324 L 440 372" fill="none" stroke="#bfc0c0" stroke-width="1"/>
|
||||
<path d="M 628 268 L 628 324 L 600 324 L 600 372" fill="none" stroke="#bfc0c0" stroke-width="1"/>
|
||||
<path d="M 628 324 L 760 324 L 760 372" fill="none" stroke="#bfc0c0" stroke-width="1"/>
|
||||
<path d="M 840 268 L 840 324 L 920 324 L 920 372" fill="none" stroke="#bfc0c0" stroke-width="1"/>
|
||||
<!-- root -->
|
||||
<rect x="420" y="72" width="200" height="48" rx="6" fill="#2d3142"/><rect x="420" y="72" width="200" height="48" rx="6" fill="rgba(240,138,89,.10)" stroke="#f08a59"/>
|
||||
<rect x="428" y="80" width="48" height="12" rx="2" fill="transparent" stroke="#f08a59" opacity=".55"/><text x="452" y="89" fill="#f08a59" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">FRONT</text>
|
||||
<text x="520" y="104" fill="#f5f5f5" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Athena</text><text x="520" y="116" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">@athena · route ambiguous work</text>
|
||||
<!-- tier1 nodes -->
|
||||
<rect x="120" y="220" width="160" height="48" rx="6" fill="#f5f5f5"/><rect x="120" y="220" width="160" height="48" rx="6" fill="#393e53" stroke="#f5f5f5"/><rect x="128" y="228" width="32" height="12" rx="2" fill="transparent" stroke="#bfc0c0" opacity=".45"/><text x="144" y="237" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">POD</text><text x="200" y="252" fill="#f5f5f5" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Growth</text><text x="200" y="264" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">ads · analytics</text>
|
||||
<rect x="332" y="220" width="160" height="48" rx="6" fill="#f5f5f5"/><rect x="332" y="220" width="160" height="48" rx="6" fill="#393e53" stroke="#f5f5f5"/><rect x="340" y="228" width="32" height="12" rx="2" fill="transparent" stroke="#bfc0c0" opacity=".45"/><text x="356" y="237" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">POD</text><text x="412" y="252" fill="#f5f5f5" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Content</text><text x="412" y="264" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">email · blog · SEO</text>
|
||||
<rect x="548" y="220" width="160" height="48" rx="6" fill="#f5f5f5"/><rect x="548" y="220" width="160" height="48" rx="6" fill="#393e53" stroke="#f5f5f5"/><rect x="556" y="228" width="32" height="12" rx="2" fill="transparent" stroke="#bfc0c0" opacity=".45"/><text x="572" y="237" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">POD</text><text x="628" y="252" fill="#f5f5f5" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Commerce</text><text x="628" y="264" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">shopify · CRO</text>
|
||||
<rect x="760" y="220" width="160" height="48" rx="6" fill="#f5f5f5"/><rect x="760" y="220" width="160" height="48" rx="6" fill="#393e53" stroke="#f5f5f5"/><rect x="768" y="228" width="32" height="12" rx="2" fill="transparent" stroke="#bfc0c0" opacity=".45"/><text x="784" y="237" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">POD</text><text x="840" y="252" fill="#f5f5f5" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Systems</text><text x="840" y="264" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">agents · runtime</text>
|
||||
<!-- specialists -->
|
||||
<rect x="40" y="372" width="136" height="56" rx="6" fill="#2d3142"/><rect x="40" y="372" width="136" height="56" rx="6" fill="rgba(245,245,245,.05)" stroke="#bfc0c0" stroke-width=".8"/><text x="108" y="400" fill="#f5f5f5" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Media Buyer</text><text x="108" y="416" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">Google · Meta</text>
|
||||
<rect x="200" y="372" width="136" height="56" rx="6" fill="#2d3142"/><rect x="200" y="372" width="136" height="56" rx="6" fill="rgba(245,245,245,.05)" stroke="#bfc0c0" stroke-width=".8"/><text x="268" y="400" fill="#f5f5f5" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Maximo</text><text x="268" y="416" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">offers · strategy</text>
|
||||
<rect x="360" y="372" width="136" height="56" rx="6" fill="#2d3142"/><rect x="360" y="372" width="136" height="56" rx="6" fill="rgba(245,245,245,.05)" stroke="#bfc0c0" stroke-width=".8"/><text x="428" y="400" fill="#f5f5f5" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Rory</text><text x="428" y="416" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">copy · newsletter</text>
|
||||
<rect x="520" y="372" width="136" height="56" rx="6" fill="#2d3142"/><rect x="520" y="372" width="136" height="56" rx="6" fill="rgba(245,245,245,.05)" stroke="#bfc0c0" stroke-width=".8"/><text x="588" y="400" fill="#f5f5f5" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Porter</text><text x="588" y="416" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">Shopify admin</text>
|
||||
<rect x="680" y="372" width="136" height="56" rx="6" fill="#2d3142"/><rect x="680" y="372" width="136" height="56" rx="6" fill="rgba(245,245,245,.05)" stroke="#bfc0c0" stroke-width=".8"/><text x="748" y="400" fill="#f5f5f5" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Atlas</text><text x="748" y="416" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">theme · APIs</text>
|
||||
<rect x="840" y="372" width="136" height="56" rx="6" fill="#2d3142"/><rect x="840" y="372" width="136" height="56" rx="6" fill="rgba(245,245,245,.05)" stroke="#bfc0c0" stroke-width=".8"/><text x="908" y="400" fill="#f5f5f5" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Hermes</text><text x="908" y="416" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">Paperclip health</text>
|
||||
<!-- optional gaps -->
|
||||
<rect x="72" y="480" width="896" height="48" rx="6" fill="#2d3142"/><rect x="72" y="480" width="896" height="48" rx="6" fill="rgba(245,245,245,.04)" stroke="#8e98ac" stroke-dasharray="4,4"/>
|
||||
<text x="96" y="508" fill="#f5f5f5" font-family="'Geist',sans-serif" font-size="12" font-weight="600">Setup gaps stay visible:</text><text x="244" y="508" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9">specialists without Slack bots · approval gates · backend name mismatches</text>
|
||||
<line x1="40" y1="560" x2="1000" y2="560" stroke="rgba(245,245,245,.14)"/><text x="40" y="584" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9" letter-spacing=".14em">LEGEND</text><rect x="132" y="572" width="16" height="12" rx="2" fill="rgba(240,138,89,.10)" stroke="#f08a59"/><text x="156" y="582" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9">front door</text><rect x="288" y="572" width="16" height="12" rx="2" fill="#393e53" stroke="#f5f5f5"/><text x="312" y="582" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9">pod / owner</text><rect x="452" y="572" width="16" height="12" rx="2" fill="rgba(245,245,245,.04)" stroke="#8e98ac" stroke-dasharray="4,4"/><text x="476" y="582" fill="#bfc0c0" font-family="'Geist Mono',monospace" font-size="9">needs setup / gap</text>
|
||||
</svg></div></body></html>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!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+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
:root{--paper:#f5f5f5;--paper-2:#fff;--ink:#2d3142;--muted:#4f5d75;--soft:#7a8399;--rule:rgba(45,49,66,.12);--accent:#eb6c36;--accent-tint:rgba(235,108,54,.08);--link:#2e5aa8;--sans:'Geist',system-ui,sans-serif;--serif:'Instrument Serif',serif;--mono:'Geist Mono',ui-monospace,monospace}
|
||||
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:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}h1{font-family:var(--serif);font-size:32px;font-weight:400;line-height:1.08;letter-spacing:-.02em;margin-bottom:20px}.subtitle{color:var(--muted);font-size:14px;line-height:1.5;max-width:720px;margin-bottom:24px}svg{width:100%;min-width:980px;display:block}.cards{display:grid;grid-template-columns:1.1fr 1fr .9fr;gap:16px;margin-top:20px}.card{background:#fff;border:1px solid var(--rule);border-radius:6px;padding:16px}.card h2{font-size:14px;margin-bottom:8px}.card p{font-size:12px;line-height:1.45;color:var(--muted)}@media(max-width:860px){body{display:block;padding:32px 20px}.cards{grid-template-columns:1fr;overflow:visible}.frame{overflow-x:auto}}
|
||||
</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 the front door, owners, invocation paths, and setup gaps visible.</p><svg viewBox="0 0 1040 620" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc">
|
||||
<title id="title">Agent team org chart</title><desc id="desc">Org chart showing a command center routing work to specialist agents and escalation owners.</desc>
|
||||
<rect width="1040" height="620" fill="#f5f5f5"/>
|
||||
<defs><marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0,8 3,0 6" fill="#4f5d75"/></marker></defs>
|
||||
<text x="40" y="64" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" letter-spacing=".16em">COMMAND CENTER</text>
|
||||
<text x="40" y="196" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" letter-spacing=".16em">WORKSTREAMS</text>
|
||||
<text x="40" y="348" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" letter-spacing=".16em">SPECIALISTS</text>
|
||||
<line x1="36" y1="148" x2="1004" y2="148" stroke="rgba(45,49,66,.12)"/><line x1="36" y1="300" x2="1004" y2="300" stroke="rgba(45,49,66,.12)"/>
|
||||
<!-- connectors -->
|
||||
<path d="M 520 120 L 520 172 L 200 172 L 200 220" fill="none" stroke="#4f5d75" stroke-width="1"/>
|
||||
<path d="M 520 172 L 412 172 L 412 220" fill="none" stroke="#4f5d75" stroke-width="1"/>
|
||||
<path d="M 520 172 L 628 172 L 628 220" fill="none" stroke="#4f5d75" stroke-width="1"/>
|
||||
<path d="M 520 172 L 840 172 L 840 220" fill="none" stroke="#4f5d75" stroke-width="1"/>
|
||||
<path d="M 200 268 L 200 324 L 120 324 L 120 372" fill="none" stroke="#4f5d75" stroke-width="1"/>
|
||||
<path d="M 200 324 L 280 324 L 280 372" fill="none" stroke="#4f5d75" stroke-width="1"/>
|
||||
<path d="M 412 268 L 412 324 L 440 324 L 440 372" fill="none" stroke="#4f5d75" stroke-width="1"/>
|
||||
<path d="M 628 268 L 628 324 L 600 324 L 600 372" fill="none" stroke="#4f5d75" stroke-width="1"/>
|
||||
<path d="M 628 324 L 760 324 L 760 372" fill="none" stroke="#4f5d75" stroke-width="1"/>
|
||||
<path d="M 840 268 L 840 324 L 920 324 L 920 372" fill="none" stroke="#4f5d75" stroke-width="1"/>
|
||||
<!-- root -->
|
||||
<rect x="420" y="72" width="200" height="48" rx="6" fill="#f5f5f5"/><rect x="420" y="72" width="200" height="48" rx="6" fill="rgba(235,108,54,.08)" stroke="#eb6c36"/>
|
||||
<rect x="428" y="80" width="48" height="12" rx="2" fill="transparent" stroke="#eb6c36" opacity=".55"/><text x="452" y="89" fill="#eb6c36" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">FRONT</text>
|
||||
<text x="520" y="104" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Athena</text><text x="520" y="116" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">@athena · route ambiguous work</text>
|
||||
<!-- tier1 nodes -->
|
||||
<rect x="120" y="220" width="160" height="48" rx="6" fill="#f5f5f5"/><rect x="120" y="220" width="160" height="48" rx="6" fill="#ffffff" stroke="#2d3142"/><rect x="128" y="228" width="32" height="12" rx="2" fill="transparent" stroke="#4f5d75" opacity=".45"/><text x="144" y="237" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">POD</text><text x="200" y="252" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Growth</text><text x="200" y="264" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">ads · analytics</text>
|
||||
<rect x="332" y="220" width="160" height="48" rx="6" fill="#f5f5f5"/><rect x="332" y="220" width="160" height="48" rx="6" fill="#ffffff" stroke="#2d3142"/><rect x="340" y="228" width="32" height="12" rx="2" fill="transparent" stroke="#4f5d75" opacity=".45"/><text x="356" y="237" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">POD</text><text x="412" y="252" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Content</text><text x="412" y="264" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">email · blog · SEO</text>
|
||||
<rect x="548" y="220" width="160" height="48" rx="6" fill="#f5f5f5"/><rect x="548" y="220" width="160" height="48" rx="6" fill="#ffffff" stroke="#2d3142"/><rect x="556" y="228" width="32" height="12" rx="2" fill="transparent" stroke="#4f5d75" opacity=".45"/><text x="572" y="237" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">POD</text><text x="628" y="252" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Commerce</text><text x="628" y="264" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">shopify · CRO</text>
|
||||
<rect x="760" y="220" width="160" height="48" rx="6" fill="#f5f5f5"/><rect x="760" y="220" width="160" height="48" rx="6" fill="#ffffff" stroke="#2d3142"/><rect x="768" y="228" width="32" height="12" rx="2" fill="transparent" stroke="#4f5d75" opacity=".45"/><text x="784" y="237" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">POD</text><text x="840" y="252" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Systems</text><text x="840" y="264" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">agents · runtime</text>
|
||||
<!-- specialists -->
|
||||
<rect x="40" y="372" width="136" height="56" rx="6" fill="#f5f5f5"/><rect x="40" y="372" width="136" height="56" rx="6" fill="rgba(45,49,66,.05)" stroke="#4f5d75" stroke-width=".8"/><text x="108" y="400" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Media Buyer</text><text x="108" y="416" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">Google · Meta</text>
|
||||
<rect x="200" y="372" width="136" height="56" rx="6" fill="#f5f5f5"/><rect x="200" y="372" width="136" height="56" rx="6" fill="rgba(45,49,66,.05)" stroke="#4f5d75" stroke-width=".8"/><text x="268" y="400" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Maximo</text><text x="268" y="416" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">offers · strategy</text>
|
||||
<rect x="360" y="372" width="136" height="56" rx="6" fill="#f5f5f5"/><rect x="360" y="372" width="136" height="56" rx="6" fill="rgba(45,49,66,.05)" stroke="#4f5d75" stroke-width=".8"/><text x="428" y="400" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Rory</text><text x="428" y="416" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">copy · newsletter</text>
|
||||
<rect x="520" y="372" width="136" height="56" rx="6" fill="#f5f5f5"/><rect x="520" y="372" width="136" height="56" rx="6" fill="rgba(45,49,66,.05)" stroke="#4f5d75" stroke-width=".8"/><text x="588" y="400" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Porter</text><text x="588" y="416" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">Shopify admin</text>
|
||||
<rect x="680" y="372" width="136" height="56" rx="6" fill="#f5f5f5"/><rect x="680" y="372" width="136" height="56" rx="6" fill="rgba(45,49,66,.05)" stroke="#4f5d75" stroke-width=".8"/><text x="748" y="400" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Atlas</text><text x="748" y="416" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">theme · APIs</text>
|
||||
<rect x="840" y="372" width="136" height="56" rx="6" fill="#f5f5f5"/><rect x="840" y="372" width="136" height="56" rx="6" fill="rgba(45,49,66,.05)" stroke="#4f5d75" stroke-width=".8"/><text x="908" y="400" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Hermes</text><text x="908" y="416" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">Paperclip health</text>
|
||||
<!-- optional gaps -->
|
||||
<rect x="72" y="480" width="896" height="48" rx="6" fill="#f5f5f5"/><rect x="72" y="480" width="896" height="48" rx="6" fill="rgba(45,49,66,.02)" stroke="#7a8399" stroke-dasharray="4,4"/>
|
||||
<text x="96" y="508" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600">Setup gaps stay visible:</text><text x="244" y="508" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9">specialists without Slack bots · approval gates · backend name mismatches</text>
|
||||
<line x1="40" y1="560" x2="1000" y2="560" stroke="rgba(45,49,66,.12)"/><text x="40" y="584" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" letter-spacing=".14em">LEGEND</text><rect x="132" y="572" width="16" height="12" rx="2" fill="rgba(235,108,54,.08)" stroke="#eb6c36"/><text x="156" y="582" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9">front door</text><rect x="288" y="572" width="16" height="12" rx="2" fill="#ffffff" stroke="#2d3142"/><text x="312" y="582" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9">pod / owner</text><rect x="452" y="572" width="16" height="12" rx="2" fill="rgba(45,49,66,.02)" stroke="#7a8399" stroke-dasharray="4,4"/><text x="476" y="582" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9">needs setup / gap</text>
|
||||
</svg><div class="cards"><article class="card"><h2>Use when</h2><p>The reader needs to know who owns what, where to route work, and which roles are active vs. still being wired.</p></article><article class="card"><h2>Keep nodes short</h2><p>Name, invocation path, and 2–4 scope words. Put detailed operating rules below the figure.</p></article><article class="card"><h2>Show gaps</h2><p>Unavailable owners and missing routes should be dashed, not hidden. They are operationally useful.</p></article></div></div></body></html>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!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+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
:root{--paper:#f5f5f5;--paper-2:#fff;--ink:#2d3142;--muted:#4f5d75;--soft:#7a8399;--rule:rgba(45,49,66,.12);--accent:#eb6c36;--accent-tint:rgba(235,108,54,.08);--link:#2e5aa8;--sans:'Geist',system-ui,sans-serif;--serif:'Instrument Serif',serif;--mono:'Geist Mono',ui-monospace,monospace}
|
||||
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:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}h1{font-family:var(--serif);font-size:32px;font-weight:400;line-height:1.08;letter-spacing:-.02em;margin-bottom:20px}.subtitle{color:var(--muted);font-size:14px;line-height:1.5;max-width:720px;margin-bottom:24px}svg{width:100%;min-width:980px;display:block}.cards{display:grid;grid-template-columns:1.1fr 1fr .9fr;gap:16px;margin-top:20px}.card{background:#fff;border:1px solid var(--rule);border-radius:6px;padding:16px}.card h2{font-size:14px;margin-bottom:8px}.card p{font-size:12px;line-height:1.45;color:var(--muted)}@media(max-width:860px){body{display:block;padding:32px 20px}.cards{grid-template-columns:1fr;overflow:visible}.frame{overflow-x:auto}}
|
||||
</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 the front door, owners, invocation paths, and setup gaps visible.</p><svg viewBox="0 0 1040 620" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc">
|
||||
<title id="title">Agent team org chart</title><desc id="desc">Org chart showing a command center routing work to specialist agents and escalation owners.</desc>
|
||||
<rect width="1040" height="620" fill="#f5f5f5"/>
|
||||
<defs><marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0,8 3,0 6" fill="#4f5d75"/></marker></defs>
|
||||
<text x="40" y="64" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" letter-spacing=".16em">COMMAND CENTER</text>
|
||||
<text x="40" y="196" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" letter-spacing=".16em">WORKSTREAMS</text>
|
||||
<text x="40" y="348" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" letter-spacing=".16em">SPECIALISTS</text>
|
||||
<line x1="36" y1="148" x2="1004" y2="148" stroke="rgba(45,49,66,.12)"/><line x1="36" y1="300" x2="1004" y2="300" stroke="rgba(45,49,66,.12)"/>
|
||||
<!-- connectors -->
|
||||
<path d="M 520 120 L 520 172 L 200 172 L 200 220" fill="none" stroke="#4f5d75" stroke-width="1"/>
|
||||
<path d="M 520 172 L 412 172 L 412 220" fill="none" stroke="#4f5d75" stroke-width="1"/>
|
||||
<path d="M 520 172 L 628 172 L 628 220" fill="none" stroke="#4f5d75" stroke-width="1"/>
|
||||
<path d="M 520 172 L 840 172 L 840 220" fill="none" stroke="#4f5d75" stroke-width="1"/>
|
||||
<path d="M 200 268 L 200 324 L 120 324 L 120 372" fill="none" stroke="#4f5d75" stroke-width="1"/>
|
||||
<path d="M 200 324 L 280 324 L 280 372" fill="none" stroke="#4f5d75" stroke-width="1"/>
|
||||
<path d="M 412 268 L 412 324 L 440 324 L 440 372" fill="none" stroke="#4f5d75" stroke-width="1"/>
|
||||
<path d="M 628 268 L 628 324 L 600 324 L 600 372" fill="none" stroke="#4f5d75" stroke-width="1"/>
|
||||
<path d="M 628 324 L 760 324 L 760 372" fill="none" stroke="#4f5d75" stroke-width="1"/>
|
||||
<path d="M 840 268 L 840 324 L 920 324 L 920 372" fill="none" stroke="#4f5d75" stroke-width="1"/>
|
||||
<!-- root -->
|
||||
<rect x="420" y="72" width="200" height="48" rx="6" fill="#f5f5f5"/><rect x="420" y="72" width="200" height="48" rx="6" fill="rgba(235,108,54,.08)" stroke="#eb6c36"/>
|
||||
<rect x="428" y="80" width="48" height="12" rx="2" fill="transparent" stroke="#eb6c36" opacity=".55"/><text x="452" y="89" fill="#eb6c36" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">FRONT</text>
|
||||
<text x="520" y="104" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Athena</text><text x="520" y="116" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">@athena · route ambiguous work</text>
|
||||
<!-- tier1 nodes -->
|
||||
<rect x="120" y="220" width="160" height="48" rx="6" fill="#f5f5f5"/><rect x="120" y="220" width="160" height="48" rx="6" fill="#ffffff" stroke="#2d3142"/><rect x="128" y="228" width="32" height="12" rx="2" fill="transparent" stroke="#4f5d75" opacity=".45"/><text x="144" y="237" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">POD</text><text x="200" y="252" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Growth</text><text x="200" y="264" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">ads · analytics</text>
|
||||
<rect x="332" y="220" width="160" height="48" rx="6" fill="#f5f5f5"/><rect x="332" y="220" width="160" height="48" rx="6" fill="#ffffff" stroke="#2d3142"/><rect x="340" y="228" width="32" height="12" rx="2" fill="transparent" stroke="#4f5d75" opacity=".45"/><text x="356" y="237" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">POD</text><text x="412" y="252" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Content</text><text x="412" y="264" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">email · blog · SEO</text>
|
||||
<rect x="548" y="220" width="160" height="48" rx="6" fill="#f5f5f5"/><rect x="548" y="220" width="160" height="48" rx="6" fill="#ffffff" stroke="#2d3142"/><rect x="556" y="228" width="32" height="12" rx="2" fill="transparent" stroke="#4f5d75" opacity=".45"/><text x="572" y="237" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">POD</text><text x="628" y="252" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Commerce</text><text x="628" y="264" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">shopify · CRO</text>
|
||||
<rect x="760" y="220" width="160" height="48" rx="6" fill="#f5f5f5"/><rect x="760" y="220" width="160" height="48" rx="6" fill="#ffffff" stroke="#2d3142"/><rect x="768" y="228" width="32" height="12" rx="2" fill="transparent" stroke="#4f5d75" opacity=".45"/><text x="784" y="237" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle" letter-spacing=".08em">POD</text><text x="840" y="252" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Systems</text><text x="840" y="264" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">agents · runtime</text>
|
||||
<!-- specialists -->
|
||||
<rect x="40" y="372" width="136" height="56" rx="6" fill="#f5f5f5"/><rect x="40" y="372" width="136" height="56" rx="6" fill="rgba(45,49,66,.05)" stroke="#4f5d75" stroke-width=".8"/><text x="108" y="400" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Media Buyer</text><text x="108" y="416" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">Google · Meta</text>
|
||||
<rect x="200" y="372" width="136" height="56" rx="6" fill="#f5f5f5"/><rect x="200" y="372" width="136" height="56" rx="6" fill="rgba(45,49,66,.05)" stroke="#4f5d75" stroke-width=".8"/><text x="268" y="400" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Maximo</text><text x="268" y="416" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">offers · strategy</text>
|
||||
<rect x="360" y="372" width="136" height="56" rx="6" fill="#f5f5f5"/><rect x="360" y="372" width="136" height="56" rx="6" fill="rgba(45,49,66,.05)" stroke="#4f5d75" stroke-width=".8"/><text x="428" y="400" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Rory</text><text x="428" y="416" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">copy · newsletter</text>
|
||||
<rect x="520" y="372" width="136" height="56" rx="6" fill="#f5f5f5"/><rect x="520" y="372" width="136" height="56" rx="6" fill="rgba(45,49,66,.05)" stroke="#4f5d75" stroke-width=".8"/><text x="588" y="400" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Porter</text><text x="588" y="416" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">Shopify admin</text>
|
||||
<rect x="680" y="372" width="136" height="56" rx="6" fill="#f5f5f5"/><rect x="680" y="372" width="136" height="56" rx="6" fill="rgba(45,49,66,.05)" stroke="#4f5d75" stroke-width=".8"/><text x="748" y="400" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Atlas</text><text x="748" y="416" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">theme · APIs</text>
|
||||
<rect x="840" y="372" width="136" height="56" rx="6" fill="#f5f5f5"/><rect x="840" y="372" width="136" height="56" rx="6" fill="rgba(45,49,66,.05)" stroke="#4f5d75" stroke-width=".8"/><text x="908" y="400" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600" text-anchor="middle">Hermes</text><text x="908" y="416" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" text-anchor="middle">Paperclip health</text>
|
||||
<!-- optional gaps -->
|
||||
<rect x="72" y="480" width="896" height="48" rx="6" fill="#f5f5f5"/><rect x="72" y="480" width="896" height="48" rx="6" fill="rgba(45,49,66,.02)" stroke="#7a8399" stroke-dasharray="4,4"/>
|
||||
<text x="96" y="508" fill="#2d3142" font-family="'Geist',sans-serif" font-size="12" font-weight="600">Setup gaps stay visible:</text><text x="244" y="508" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9">specialists without Slack bots · approval gates · backend name mismatches</text>
|
||||
<line x1="40" y1="560" x2="1000" y2="560" stroke="rgba(45,49,66,.12)"/><text x="40" y="584" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9" letter-spacing=".14em">LEGEND</text><rect x="132" y="572" width="16" height="12" rx="2" fill="rgba(235,108,54,.08)" stroke="#eb6c36"/><text x="156" y="582" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9">front door</text><rect x="288" y="572" width="16" height="12" rx="2" fill="#ffffff" stroke="#2d3142"/><text x="312" y="582" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9">pod / owner</text><rect x="452" y="572" width="16" height="12" rx="2" fill="rgba(45,49,66,.02)" stroke="#7a8399" stroke-dasharray="4,4"/><text x="476" y="582" fill="#4f5d75" font-family="'Geist Mono',monospace" font-size="9">needs setup / gap</text>
|
||||
</svg></div></body></html>
|
||||
@@ -159,9 +159,10 @@
|
||||
<button class="tab" data-type="quadrant"><span class="eyebrow">08</span>Quadrant</button>
|
||||
<button class="tab new" data-type="nested"><span class="eyebrow">09</span>Nested</button>
|
||||
<button class="tab new" data-type="tree"><span class="eyebrow">10</span>Tree</button>
|
||||
<button class="tab new" data-type="layers"><span class="eyebrow">11</span>Layers</button>
|
||||
<button class="tab new" data-type="venn"><span class="eyebrow">12</span>Venn</button>
|
||||
<button class="tab new" data-type="pyramid"><span class="eyebrow">13</span>Pyramid</button>
|
||||
<button class="tab new" data-type="org-chart"><span class="eyebrow">11</span>Org chart</button>
|
||||
<button class="tab new" data-type="layers"><span class="eyebrow">12</span>Layers</button>
|
||||
<button class="tab new" data-type="venn"><span class="eyebrow">13</span>Venn</button>
|
||||
<button class="tab new" data-type="pyramid"><span class="eyebrow">14</span>Pyramid</button>
|
||||
</div>
|
||||
|
||||
<div class="tabs variants" id="variant-tabs" role="tablist" aria-label="Variant">
|
||||
|
||||
@@ -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`).
|
||||
|
||||
---
|
||||
|
||||
@@ -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
|
||||
Reference in New Issue
Block a user