---
title: "Cathryn Lavery"
description: "Designer, entrepreneur, and author of Diagram Design; pioneer of editorial visual design systems and semantic diagramming for AI coding agents."
section: "entities"
type: "entity"
created: "2026-08-23"
updated: "2026-08-23"
confidence: "high"
tags: ["person", "educator", "agents", "diagrams"]
canonical: "https://pyweb.dev/wiki/cathryn-lavery"
---
# Cathryn Lavery

Cathryn Lavery is a designer, entrepreneur (founder of BestSelf.co and writer at littlemight.com), and the creator of **Diagram Design**, an opinionated design system and agent skill for generating high-signal editorial diagrams.

## Core Contributions & Philosophy

1. **Deletion as Quality:** Pioneered the philosophy that visual artifacts for technical explanation should prioritize deletion over decoration ("The highest-quality move is usually deletion"). Every node must earn its place; visual density is targeted at 4/10.
2. **Editorial Accent & Signal Discipline:** Enforces the rule that accent colors must be reserved for 1–2 focal elements rather than decorative flair, ensuring visual hierarchy guides reader attention immediately to core takeaways.
3. **Semantic System Patterns Before Visual Layout:** Architected a diagramming methodology that routes behavioral dynamics (queues, bottlenecks, governance catalogs, policy divergence traces) to semantic primitives before picking a physical layout grammar (see [editorial diagrams and visual explanations](/wiki/editorial-diagrams-and-visual-explanations)).
4. **Accessible, Self-Contained Agent Artifacts:** Established standards for coding agents generating visual assets: zero external runtime dependencies, 4px grid alignment, accessible inline SVG structures (`role="img"`, namespaced `aria-labelledby`, structured descriptions), and deterministic redrawing over mechanical translation.

## Relationship to the Engineering Stack

Lavery's work operationalizes [cognitive debt and walkthroughs](/wiki/cognitive-debt-and-walkthroughs) at the visual communication layer. Where [richard feynman](/wiki/richard-feynman) emphasizes plain-spoken pedagogy, [andrej karpathy](/wiki/andrej-karpathy) enforces code simplicity, and [simon willison](/wiki/simon-willison) emphasizes interactive walkthroughs, Lavery provides the visual syntax for rendering complex multi-agent architectures, workflows, and state machines with maximum clarity and minimum visual slop.

## Related
- [editorial diagrams and visual explanations](/wiki/editorial-diagrams-and-visual-explanations)
- [cognitive debt and walkthroughs](/wiki/cognitive-debt-and-walkthroughs)
- [agentic engineering patterns](/wiki/agentic-engineering-patterns)
- [context engineering](/wiki/context-engineering)
- [progressive disclosure](/wiki/progressive-disclosure)

---

## Agent Navigation

cluster: person (170 pages) | betweenness: 15.1

### References (outbound)
- [Editorial Diagrams and Visual Explanations](https://pyweb.dev/wiki/editorial-diagrams-and-visual-explanations.md)
- [Cognitive Debt and Walkthroughs](https://pyweb.dev/wiki/cognitive-debt-and-walkthroughs.md)
- [Agentic Engineering Patterns](https://pyweb.dev/wiki/agentic-engineering-patterns.md)
- [Context Engineering](https://pyweb.dev/wiki/context-engineering.md)
- [Progressive Disclosure](https://pyweb.dev/wiki/progressive-disclosure.md)

### Referenced by (inbound)
- [Cognitive Debt and Walkthroughs](https://pyweb.dev/wiki/cognitive-debt-and-walkthroughs.md)
- [Editorial Diagrams and Visual Explanations](https://pyweb.dev/wiki/editorial-diagrams-and-visual-explanations.md)

### Evidence (verified primary sources)
- [cathryn-lavery-diagram-design-2026](https://pyweb.dev/wiki/raw/articles/cathryn-lavery-diagram-design-2026.md) | origin: https://github.com/cathrynlavery/diagram-design | ingested: 2026-08-23 | sha256: 7ecd8e28e94dfda598b75278df9bf12013a944718efb9f0d467c867f13a56113

### Machine endpoints
- Knowledge graph: https://pyweb.dev/api/graph.json
- Graph analysis: https://pyweb.dev/api/graph-analysis.json
- Context index: https://pyweb.dev/llms.txt