What Makes This Different
Most diagramming tools produce uniform card grids and boxes-and-arrows. This skill takes a fundamentally different approach:Diagrams that Argue, Not Display
Every shape or group of shapes mirrors the concept it represents:- Fan-outs for one-to-many relationships
- Timelines for sequences
- Convergence for aggregation
- No uniform card grids — each concept gets a unique visual pattern
The Isomorphism Test: If you removed all text, would the structure alone communicate the concept? If not, it’s not a good diagram.
Evidence Artifacts
Technical diagrams include real, concrete examples:- Real code snippets with syntax highlighting
- Actual JSON payloads from specifications
- Specific event names instead of generic placeholders
- UI mockups showing actual output
Built-in Visual Validation
The skill includes a Playwright-based render pipeline that:- Renders diagrams to PNG
- Lets the agent see its own output
- Catches layout issues (overlapping text, misaligned arrows, unbalanced spacing)
- Fixes problems in a loop before delivering
Brand-Customizable
All colors and brand styles live in a single file (references/color-palette.md). Swap it out and every diagram follows your palette — no need to modify the core methodology.
Core Philosophy
Diagrams should ARGUE, not DISPLAY. A diagram isn’t just formatted text. It’s a visual argument that shows relationships, causality, and flow that words alone can’t express. The shape should BE the meaning. The Education Test: Could someone learn something concrete from this diagram, or does it just label boxes? A good diagram teaches — it shows actual formats, real event names, concrete examples.Who Should Use This
This skill is ideal for:- Technical architects documenting complex systems
- Educators creating visual explanations
- Documentation teams that need diagrams with real code examples
- Anyone working with coding agents who want diagrams that go beyond simple flowcharts
Compatibility
Compatible with any coding agent that supports skills. For agents that read from.claude/skills/ (like Claude Code and OpenCode), just drop it in and go.
What You’ll Create
With this skill, you can generate:- Architecture diagrams with actual API payloads
- Protocol flows showing real event sequences
- Data transformation pipelines with sample input/output
- System integrations with concrete code examples
- Multi-zoom diagrams operating at summary, section, and detail levels simultaneously