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.1 KiB
1.1 KiB
ER / Data Model
Best for: database schemas, API resource relationships, domain models.
Layout conventions
- Each entity is a two-section box:
- Header: type tag (
ENTITY) + entity name in Geist. - Body: field list in Geist Mono, one per line. PK prefixed with
#, FK prefixed with→.
- Header: type tag (
- Relationships: lines between entities with cardinality at each end:
1,N,0..1,1..*in Geist Mono, 8px, placed 10–12px from the entity edge.- Optional relationship label ("has", "belongs to") centered on the line.
- Group related entities close; lay out so most relationships are straight lines, not tangles.
- Coral on the aggregate root or central entity of the model.
Anti-patterns
- Drawing an arrow for every FK on a model with dozens — lay out by cluster instead.
- Inconsistent cardinality notation between ends of the same relationship.
- Fields padded to equal-height boxes — natural height by content is fine.
Examples
assets/example-er.html— minimal lightassets/example-er-dark.html— minimal darkassets/example-er-full.html— full editorial