Cathryn Lavery
53bd8dde0f
Thirteen editorial diagram types (architecture, flowchart, sequence, state, ER, timeline, swimlane, quadrant, nested, tree, layers, venn, pyramid) as self-contained HTML files with inline SVG. Progressive disclosure: lean SKILL.md points to per-type references. Neutral stone+rust default skin, first-run gate that prompts users to customize the style guide from their own website, URL-based onboarding, annotation-callout primitive, sketchy filter variant, live gallery at assets/index.html.
1.2 KiB
1.2 KiB
Tree / Hierarchy
Best for: org charts, dependency trees, taxonomy, file trees, decision breakdowns, skill trees.
Layout conventions
- Root at top, children fan out below (or root at left, children to right).
- Nodes are small labeled rectangles (
rx=6), Geist 12px 600 name + optional Geist Mono 9px sublabel. Width 120–180px, height 40–52px. - Connectors are orthogonal (elbow-style), never diagonal. Parent drops a short vertical line, then a horizontal bus connects siblings, then each child has a short vertical drop into its top edge. 1px muted stroke.
- Leaf indicator: thinner stroke (0.8) or different fill — OR let terminal position do the work.
- Max depth: 4 (root + 3 tiers). Max breadth per level: 5.
- Coral on one node: root OR critical leaf. Not both.
- Draw connectors before nodes.
Anti-patterns
- Tree 5+ levels deep on a single page (illegible — split).
- Nodes of wildly varying widths — pick 2 widths max.
- Diagonal connector lines.
- Skipped levels (parent connected to grandchild with no middle).
- Coral on root AND a leaf.
Examples
assets/example-tree.html— minimal lightassets/example-tree-dark.html— minimal darkassets/example-tree-full.html— full editorial