The index

44 specimens, grouped by the job the diagram does. 39 answer to a diagram-design type by name or meaning, consultant 2×2 is a named-cell variant of the quadrant, and 4 have no upstream equivalent: vendor-survives, tile-grid, tile-list, and state-flow, grown from diagrams already shipping across tutti, bairn, and patinate. Shipped types have canonical examples in the estate, and estate-original types are patterns that emerged from the estate's own artifacts with no direct equivalent in the general typology. A type carrying no badge is available: it follows the same editorial rules and is ready to use. A new type is earned only by a layout grammar no existing type provides; a use case, a subject, or a behaviour is a pattern over a type already here. Every specimen is a single figure by design, and names the simpler type to fall back to when its own differentiator is absent. Architecture, flowchart, quadrant, and vendor-survives are drawn on the diagrams page beside the rule each one illustrates; their names below link there instead of down this page.

The specimens

High-level stack

CLIENT EDGE AUTH APP DATA RUNTIME BACKUP PUBLIC INTERNET LODESTONE · SINGLE HOST podman quadlets generated systemd units EXT browser phone / laptop TUNNEL cloudflared no open ports FORWARD AUTH dag dag.dunn.dev SERVICE larder :8080 STORE postgres larder db Backblaze B2 restic · nightly · pg dump + volumes

A whole deployment in one frame: named phases across the top, a boundary around what one host runs, and the concerns spanning it. Use when the reader needs the shape before the parts.

Fall back: Without named phases across the top and a concern spanning every box, the stack inside its boundary is a deployment.

Deployment

EDGE LODESTONE HOST DATA NETWORK tls:443 http:3000 http:8080 tls:5432 s3:9000 TUNNEL cloudflared no open ports QUADLET auth othala v0.4.2 QUADLET dag portal dag-portal v0.5.0 QUADLET larder larder v0.3.1 QUADLET postgres postgres 17.2 QUADLET minio minio 2025-07

Nodes placed inside network or environment boundaries, each carrying the version it runs. Use when placement is the question: which zone, which host, which version.

Fall back: Without a boundary or a version to place, the nodes are an architecture.

Dependency graph

npm ci include CYCLE own site imports 0 IN SITE cycle.dunn.dev astro 5 0 IN SITE tutti.dunn.dev astro 5 0 IN SITES +2 sites works, andrew 0 IN TOOLS +3 tools kit, patinate, bairn 5 IN NPM PACKAGE @dunn.dev/reference tokens, chrome 4 IN CI CATALOG dunn.dev/pipeline component templates

What depends on what across packages, and where those dependencies concentrate. Use when one package carries several dependents, or when an edge points backward into a cycle.

Fall back: Without a shared dependency or a back-edge, the packages are a tree.

Nested

SYSTEM SERVICE COMPONENT router matches the route COMPONENT handler runs the request COMPONENT store holds the rows

Hierarchy expressed by containment. Use when the relationship is "lives inside", not "reports to".

Fall back: Without genuine containment, the hierarchy is a tree.

Layer stack

DEPENDS ON APP your code main.go RUNTIME go gc · scheduler OS linux kernel · libc HARDWARE bare metal cpu · disk · nic

Stacked abstractions where each layer depends on the one below. Use when the vertical ordering carries the meaning.

Fall back: Without each layer depending on the one below, the rows are a tile-list.

Tree

Root 3 children Alpha no children Beta 2 children Gamma no children beta-1 beta-2

Parent-to-children branching. Use when every node has exactly one parent and the depth is the story.

Fall back: Without depth past one level of children, the nodes are a tile-grid.

Org chart

CEO a.dunn 3 direct reports ENGINEERING m.chen ships the product DESIGN s.park shapes the surface OPERATIONS r.osei keeps it running

Ownership and routing across people or systems. Use when accountability, not data flow, is what the reader needs to trace.

Fall back: Without a named owner on each box, the reporting lines are a tree.

IT current-state

THEGREDC.ORG · BLUEHOST THEGREDC.COM · CLOUDFLARE content ported OAuth hd cutover pending LEGACY SITE thegredc.org WordPress · shared host IDENTITY Google Workspace MX · OAuth hd · stays LEGACY DNS Bluehost DNS transfer in flight PUBLIC SITE www.thegredc.com Astro · Cloudflare AUTH PROXY vouch.thegredc.com Sveltia CMS · live DNS ZONE *.thegredc.com new services day one

Zoned inventory of where each system lives, with the hand-offs across the boundary named. Use when the reader needs the legacy estate and its replacement side by side.

Fall back: Without zones grouping the boxes by where they live, the systems are an architecture.

Integration topology

REFERENCE CORE CSS SVG MD SH css docs NPM RUN READ PALETTE tokens index.css BRAND mark mark.svg PROSE journal entries.md STANDARD contracts check.sh VISUAL brand kit site.css WRITTEN standards CONTRACT.md PACKAGE reference @dunn.dev ASTRO sites global.css PIPELINE CI conformance HARNESS agents skills

Which sources plug into a platform and which surfaces consume it, every wire naming what it speaks. Use when the number of integration points is itself the claim.

Fall back: Without a protocol on every wire crossing the boundary, the platform and its neighbours are an architecture.

Sequence

shipped
GET /item select rows 1 row 200 OK ACTOR browser SERVICE api STORE postgres

Who talks to whom, in what order. Canonical estate example: tutti's UPnP SSDP → descriptor → SetAVTransportURI exchange.

Fall back: Without a second actor exchanging messages, the run is a state-flow.

State machine

RUN LIFECYCLE start finish reset idle awaiting start active work in flight done no transitions out

States and the transitions between them. Use when the set of possible system conditions is finite and the triggers matter.

Fall back: Without a transition that loops back, the states are a state-flow.

State-flow

shipped
ONE CLI RUN STAGE 1 auth read token STAGE 2 fetch pull remote STAGE 3 sync reconcile STAGE 4 render write output

End-to-end CLI pipeline sequence. Distinct from sequence (which is RPC-style); state-flow is pipeline-of-stages. Canonical example: patinate's auth → fetch → sync → render.

Fall back: Without each stage feeding the next, the commands are a tile-list.

Swimlane

DESIGN 5d total ENGINEERING 6d total handoff Spec 2 days Mockup 3 days Build 5 days Ship 1 day

A flow that crosses functional boundaries. Use when ownership and handoff points are as important as the steps.

Fall back: Without a handoff crossing a lane, the flow is a flowchart.

Process

ACTOR 1 OPEN 2 CHECK 3 REVIEW 4 MERGE 5 PROPAGATE RENOVATE renovate.json PIPELINE gitlab-ci.yml OPERATOR glab mr diff MAIN protected raises the MR scan → MR runs check.sh MR → pass reads the diff pass → approval merges to main approval → main cuts the tag main → catalog

Sequential steps across actor lanes, each carrying its payload and tool. Use when who does the step, what enters and leaves it, and which tool runs it all have to be legible at once.

Fall back: Without the payload and tool on every step, the lanes are a swimlane.

Data flow

01 INPUTS 02 BUILD 03 SIGN 04 SBOM 05 ATTEST CALLER CI RUNNER REGISTRY dsse verify include ref · image build image buildah sign digest cosign scan layers syft attest build cosign tarball oci .tar.zst bundle cosign .sig sbom cyclonedx provenance in-toto slsa

Typed payloads moving through ordered pipeline stages, each stage scoped to a role. Use when the reader needs to see what shape the data takes at every handoff, not just who owns which step.

Fall back: Without a typed payload changing shape as it crosses lanes, the handoffs are a swimlane.

Journey map

STAGE 1 Brand init STAGE 2 just check STAGE 3 First pipeline STAGE 4 First publish HIGH NEUTRAL LOW ACTIONS Scaffold the repo Read the FAIL line Push to main Tag v0.1.0 NO TOKENS IMPORT TOUCHPOINTS kit new check.sh gitlab.com CI npm registry

What a person does across the stages of an experience and how each stage feels. Use when the sentiment curve is the finding, not the sequence of steps.

Fall back: Without a feeling you can name at every stage, the stages are a timeline.

Loop / flywheel

NEXT SHIP IS EASIER DEVIATION NEW RULE repo ships MR merges to main check fails check.sh goes red fix or deviate patch, or waive it contract sharpens check.sh gains a rule catalog lifts all every repo re-checks SHARED STATE reference.dunn.dev one standard, every repo

A cycle whose every pass writes back into one shared center. Use when the reinforcement is the point: work advances around the ring, and the hub it feeds makes the next lap cheaper.

Fall back: Without dashed write-backs into a shared hub, the ring is a state-machine.

Sankey / flow-quantity

RENOVATE QUEUE DISPOSITION OUTCOME opened 36 MRs merged 28 MRs not merged 8 MRs automerged 21 MRs merged by hand 7 MRs superseded 5 MRs still open 3 MRs

Where a quantity goes as it splits across stages, with band thickness carrying the volume. Use when the reader needs to compare magnitudes, not just trace a path.

Fall back: Without a split or merge in the quantity, the stages are a pyramid.

Medallion tiers

TUTTI CORPUS strip room tags astro build RAW device captures corpus/raw/ HOLDS wav + room tags ACCESS operator only CLEANED redacted evidence corpus/evidence/ HOLDS slug-matched files ACCESS repo readers PUBLISHED learn pages tutti.dunn.dev/learn/ HOLDS prose + figures ACCESS anyone

One dataset held at rising quality and access levels, with the transform that promotes it between tiers. Use when what each tier contains and who may read it is the question.

Fall back: Without each tier changing the data's quality or who may read it, the stages are a state-flow.

ER / data model

1 N has User # id uuid name text email text Order # id uuid → user_id uuid total numeric

Entities, their fields, and the relationships between them. Use when schema is the question the reader is asking.

Fall back: Without fields and cardinality on the relationship, the entities are an architecture.

Database schema

ON DELETE RESTRICT ON DELETE RESTRICT ON DELETE CASCADE auth.users TABLE id PK uuid email UQ citext + 5 more columns auth.group_bindings TABLE user_id FK uuid group_id FK uuid granted_at timestamptz auth.sessions TABLE id PK uuid user_id FK uuid expires_at timestamptz auth.groups TABLE id PK uuid slug UQ text source text

Physical tables with SQL types, constraint chips, and foreign keys that anchor to a specific column. Use when the migration or the ON DELETE behavior is what the reader is reviewing.

Fall back: Without a foreign key that lands on a named column, the tables are an ER model.

UML class

JOURNALRAIL TYPES works.dunn.dev, cycle.dunn.dev sectionSlug chapters 1 0..* reads ActivityEntry + date: string + section: string + sectionSlug: string + text: string … href Section + slug: string + title: string + tagline: string + status: SectionStatus + chapterLabel: string … detail, cover, coverAlt, meta Chapter + slug: string + name: string + status: ChapterStatus … n, date, hasPage, anchor «module» journal/types.ts + chapterStats(Section): Stats Stats counts each ChapterStatus RELATIONS composition, section owns chapters dependency, reads and never owns

Classes with their fields, their operations, and typed relationship arrowheads. Use when ownership, inheritance, or the behavior a type carries is the substance.

Fall back: Without operations or an arrowhead vocabulary carrying meaning, the boxes and their fields are an ER.

Security matrix

surface vs. actor operator human renovate bot @renovate-bot CI job token $CI_JOB_TOKEN anonymous public web repo write main branch push to main branch, MR checkout clone CI variables masked set, rotate sole writer no access masked read no access package registry npm publish resolve publish fetch site deploy pages trigger no access deploy view LEGEND may change it may read it no access scope: dunn.dev repos

Who may do what, cell by cell. Use when the reader is auditing permissions across every actor and every protected surface at once, and one intersection carries the posture.

Fall back: Without a second actor to compare against, one surface's permissions are a tile-list.

Kanban board

Awaiting 9 schedule Open 4/3 ready to merge Rebasing 2/2 branch stale Blocked 1/2 red main Merged 6 this week astro 5.14.1 cycle · !212 vite 7.1.5 tutti · !88 +7 more opens Mon 03:00 renovate 41 pipeline · !64 vitest 3.2.4 reference · !93 zod 4.1.5 kit · !119 alpine 3.22 iac · !301 pnpm 10.15 cycle · !209 podman 5.6 iac · !298 wrangler 4.3 tutti · !90 eslint 9.36 kit · !117 +5 merged archived Sun

A census of work in progress by state: what is queued, moving, stuck and done, with a WIP limit stated on every in-process column. A board shows state, not flow, so it carries no connectors.

Fall back: Without a stated WIP limit and a state on each card, the columns of cards are a tile-grid.

Story map

FIRST NEXT LATER ACTIVITY 1 Conform ACTIVITY 2 Design ACTIVITY 3 Learn why Add dep and .npmrc Import global.css Read the rule Install from registry CI_JOB_TOKEN RISK Header, footer, hero site.css Pick a diagram type /design/diagrams check.sh in pipelines design-system Brand a new repo repository/templates Figures that go dark prefers-color-scheme Why light is pinned /learn/light-pinning RELEASE CUT

Narrative order left to right, release slices top to bottom. Use when the question is where the first release cuts, not what the backlog holds.

Fall back: Without a release cut slicing the columns, the cards are a kanban.

Gantt

KIT 0.4.0 T+0 T+15 T+30 T+45 T+60 AUTHOR CI PROPAGATE tag push version bump changelog entry annotated tag publish and sign consumer bumps 3 repos verify installed kit --version

Tasks with a start, an end, and overlap on a shared time axis. Use when how long each stretch runs, and what runs alongside it, is the substance of the explanation.

Fall back: Without duration and overlap carrying meaning, the dated steps are a timeline.

Timeline

Init wk 01 wk 03 Build CHECKPOINT Review wk 05 wk 07 Ship

Events placed on a shared axis. Use when sequence and relative timing are both load-bearing.

Fall back: Without relative timing carrying meaning, the events are a tile-list.

Consultant 2×2

BUILD BUY CORE CONTEXT CORE / BUILD Invest own the edge CORE / BUY Integrate best-in-class CONTEXT / BUILD Build Fast good enough CONTEXT / BUY Outsource not your fight

A scenario matrix with four named cells. Use when two binary dimensions define a decision space and you want each cell to carry a name.

Fall back: Without a name in each cell, the placement is a quadrant.

Wardley map

VISIBLE TO THE OPERATOR INVISIBLE GENESIS CUSTOM-BUILT PRODUCT COMMODITY one login operator dag portal othala auth postgres object storage

A value chain plotted against how evolved each component is. Use when the point is what is worth building and what should be bought, not how the pieces connect at runtime.

Fall back: Without the evolution axis carrying meaning, the value chain is a layer-stack.

Venn

Fast low latency Correct verified BOTH Shipped the goal

Set overlap. Use only when the intersection is the point; a two-column table often says the same thing without the geometry.

Fall back: Without an intersection carrying meaning, the sets are a tile-grid.

Pyramid / funnel

Vision WHY the outcome we aim at Strategy WHAT the few paths we commit to Tactics HOW the plays each path needs Execution NOW the work in hand today

Ranked hierarchy or drop-off across stages. Use when volume, priority, or survival rate changes as you move through levels.

Fall back: Without volume or drop-off changing across levels, the bands are a layer-stack.

Fishbone / root cause

protocolInfo mismatch flac not advertised relative controlURL URLBase ignored Play never issued instanceID mismatch media port blocked ipv6 only url codec descriptor transport network EFFECT nothing plays SetAVTransportURI 200

One observed effect, its candidate causes grouped by category, and the one confirmed root cause. Use when the reader needs to see what was investigated, not only the conclusion.

Fall back: Without competing categories to rule out, one cause and its effect are a state-flow.

Bar / column

CONTRACTS PASSING PERCENT OF SUITE 100 75 50 25 0 blocks release 100 99 97 96 94 93 62 floor 85% iac kit patinate tutti cycle bairn othala

One numeric value per category, compared side by side on a zero-based axis. Use when the gap between categories, or against a threshold line, is the message.

Fall back: Without a numeric scale making the bar lengths comparable, the categories are a tile-list.

Line chart

KILOBYTES PER RELEASE 100 75 50 25 0 llms-full.txt 96 KB, retired at 0.5.0 llms.txt 12 KB, flat 0.1.0 0.2.0 0.3.0 0.4.0 0.5.0

A measured quantity across three or more ordered points. Use when direction and rate of change are the argument, not the value at any single point.

Fall back: Without a measured quantity moving across the points, the marks are a timeline.

Scatter plot

12 DIAGRAMS QUEUED DRAW FIRST 0 2 4 6 8 0 2 4 6 8 HOURS TO DRAW PAGES UNBLOCKED othala auth campaign map renovate loop lodestone DAG

Items placed on two measured axes, where clusters and outliers are the message. Use when the reader should take away the shape of the whole set, not read off one item's rank.

Fall back: Without measured axes carrying a scale, the placement is a quadrant.

Radar / spider

waived in .deviations.yaml pass waived repository pipeline package-publishing container-publishing image-cleanup design-system voice CONFORMANCE patinate 5 pass, 2 waived

One subject scored across four or more criteria on a single shared scale. Use when the shape of the profile, where it maxes out and where it dents, is what the reader takes away.

Fall back: Without every axis sharing one normalized scale, the scores are a tile-list.

Polar chart

RENOVATE MERGE REQUESTS MERGED BY WEEKDAY, 13 WEEKS 8 16 24 32 40 0 Sun Mon Tue Wed Thu Fri Sat 10 38 30 22 17 20 12 RADIAL SCALE 0 to 40 merged linear, zero at the hub SCHEDULE DAY Monday 04:00 UTC renovate scan, four estates merges across dunn.dev, nomograph, yotoshelf and thegredc

One measure across a repeating cycle, each category a ray whose length is the value. Use when the wrap from the last bucket back to the first is part of what the reader has to see.

Fall back: Without the categories wrapping into a cycle, the values rank as a bar chart.

Treemap

LLMS-FULL.TXT, RETIRED AREA = BYTES, 119 KB TOTAL seven contract dumps 61 KB, 52% site pages 57 KB, 48% repository 23.1 KB, 19% design-system 16.0 KB, 13% pipeline 7.9 KB, 7% image-cleanup 5.9 KB, 5% container-publishing, package-publishing, voice 8.4 KB, 7% design pages 25.1 KB, 21% principle pages 24.5 KB, 21% standards pages 6.0 KB, 5% overview 1.4 KB, 1% raw CONTRACT.md, copied byte for byte already served as per-page index.md

Parts of one total, sized by area. Use when a single figure decomposes into sections and the reader's question is what dominates and by how much, not what each exact value is.

Fall back: Without relative size carrying the story, the parts rank as a bar.

Tile-grid

estate-original
FLOW left to right no return legs DISCIPLINE trim first four nodes max TOOLING inline SVG no build step OUTPUT one accent not a palette

N parallel facets of one thing, each carrying equal weight. Canonical example: every estate hero's FLOW/DISCIPLINE cluster.

Fall back: Without equal weight across the facets, the tiles are a tile-list.

Tile-list

estate-original
CHECK IN ORDER THE TELL 1 silent descriptor fetch the descriptor request answers with nothing 2 transport URI not set the renderer was never handed a URI to play 3 200 OK, nothing plays the URI was accepted, playback never began 4 renderer stalls, no codec the sink cannot decode what it was sent

N entries in an ordered sequence, where position matters. Canonical example: tutti's "where it goes wrong" failure modes.

Fall back: Without position carrying meaning, the entries are a tile-grid.