Initializing portfolio

000

Aravind.
All articles
General3 min read

The Top Trending Repo Today Is a Design Opinion Wearing a Plugin

29 editorial diagram types for Claude Code, built on a 4px grid and a one-accent-colour rule. Constraint as prompt engineering.

AravindChief Technology Officer & Advisor · AI, Cloud & Cybersecurity
The Top Trending Repo Today Is a Design Opinion Wearing a Plugin

The Top Trending Repo Today Is a Design Opinion Wearing a Plugin

cathrynlavery/diagram-design took the number one slot on GitHub's daily trending list with 3,646 stars in a day, on its way past 17,000 in total.

It is a Claude agent skill that produces 29 types of editorial-quality diagrams as self-contained HTML and SVG. The repo description tells you what it is reacting against: no shadows, no Mermaid-slop.

What it contains

Twenty-nine diagram types, covering most of what a technical or strategy document needs — architecture, flowchart, sequence, state machine, entity-relationship, timeline, swimlane, quadrant, nested hierarchy, tree, org chart, Venn, layer stack, pyramid and funnel, radar, flywheel loops, IT current-state, high-level stack, bar, line, Gantt, scatter, process, medallion, data flow, plus integration and security matrix formats.

Install is a one-liner into Claude Code, Codex or Pi:

/plugin marketplace add cathrynlavery/diagram-design

Output is a self-contained HTML file with no build step and no external dependencies, exportable to PNG or SVG. It can import and redraw from draw.io and Mermaid sources, and there is a brand onboarding step that pulls colours and fonts off your website. MIT licensed.

The constraints are the product

Most diagram tooling gives you freedom. This gives you rules:

  • Every coordinate divisible by 4px
  • One accent colour, maximum
  • 1px hairlines, border-radius capped at 10px
  • Three fonts only — Instrument Serif, Geist sans, Geist Mono
  • WCAG AA contrast and ARIA labels by default
  • Static by default, motion optional

The stated philosophy is that the highest-quality move is usually deletion, and that every node earns its place.

Why I think it trended

Anyone who has asked a model for a diagram knows the failure mode. You get a Mermaid blob — rounded boxes, drop shadows, arbitrary colours, twenty nodes where six would do, and a layout that reads as machine-generated from across the room.

The problem was never that models cannot draw. It is that "draw me a diagram" is an underspecified request, and underspecified requests return the average of everything in the training data.

This repo's answer is to remove the freedom. A fixed grid, a capped palette, three fonts and a bias toward deletion are not artistic preferences; they are a specification that makes output predictable. Constraint as prompt engineering, packaged so you do not have to write the constraints yourself.

That lesson generalises well beyond diagrams, which is why the repo is worth reading even if you never install it. When model output looks generic, the fix is usually a narrower spec rather than a better model.

Source: cathrynlavery/diagram-design — GitHub

#Claude#Developer Tools#Open Source#GitHub#Design Systems

Comments

Checking you're human…

Keep reading

Get the next essay first

Checking you're human…

By subscribing you agree to our Privacy Policy. Unsubscribe anytime.