27 Diagram Types Skill

A Single Claude Code Skill Just Hit #1 on GitHub — 27 Diagram Types

🎬 Signal Coders 📅 Aug 12, 2026 ⏱ 17:05
Claude Code diagrams skill craft GitHub trending accessibility

📦 What It Actually Is

The day after Signal Coders audited the official skills repository, GitHub's #1 trending repository — above every agent framework and model release — was a single skill written by one person. 1,600 stars in a day. It draws diagrams — 27 kinds of them. 0:00

The job: turn a request for a diagram into a standalone HTML file with inline vector graphics. Architecture diagrams, flowcharts, sequence diagrams, state machines, timelines, swim lanes, quadrants, org charts, funnels, gant charts, scatter plots — and about 15 more. It also imports existing diagram files from popular drawing tools and "diagram-as-text" sources, then redraws them at your chosen output format, canvas size, and level of detail. 1:54

A genuinely thoughtful detail: "level of detail" is described as either faithful reproduction or simplified for the audience's technical level — the same architecture drawn once for engineers and once for an executive. The README also claims one skill, three different agents — install paths for the coding agent this format came from, plus two others. "The format has escaped its origin. A skill is now a portable artifact, not a product feature." 2:41

The whole thing is MIT-licensed, and it ships with a security policy and a third-party license file — for a diagram skill. 2:58

✂️ The Rule It Breaks — and Why It's Right

The official guidance: name + description together should be around 100 words — the permanent tax. Signal Coders measured this one's description: 144 words. It doesn't just exceed the guidance; it exceeds it while listing all 27 type names, the import file extensions, output formats, canvas sizes, and more. 3:05

"My first reaction was that this is the classic amateur mistake, stuffing everything into the trigger. My second reaction, after thinking about the mechanics, is that it's correct and the guidance is the thing that's incomplete." 3:47

Why it's correct: remember the confession — the model undertriggers. This skill's trigger surface isn't one phrase, it's 27 of them. "Draw me a swim lane." "Make a radar chart." "I need an org chart." If those words aren't in the description, they aren't in the model's context, and the skill doesn't fire. A generic description would make 25 of its 27 types invisible. "So this isn't padding. It's surface area, deliberately purchased." 4:12
The refinement of the official rule: "The description budget isn't a word count. It's one entry per thing the skill can do. Narrow skill, short description. 27 capabilities, 27 triggers. The tax scales with the surface — and it should." 4:46

📐 The Rule It Nails — Three Numbers

The deepest principle from the official spec — three levels with "scripts can execute without loading" — is the one almost no community skill respects. Signal Coders measured this one's three levels: 4:59

LevelSizeWhen it loads
Instruction file32 KBWhen the skill fires
Reference library484 KB (37 documents)On demand — only when you pick a diagram type
Examples1.5 MB (finished HTML, 3 variants each)Never — a human-browsable gallery

The file states the rule in plain language: "Type-specific conventions live in the references folder and are loaded only when you pick a type." And in the drawing flow: "always load the relevant type file before drawing." The examples exist so a human can browse and the model has something to point at. 5:26

The ratio is roughly 1 : 15 : 45 — one part loaded, 15 parts on demand, 45 parts never. "Ask for a flowchart and you pay for the instruction file plus one type document. The other 26 types cost you nothing. That is textbook progressive disclosure." The file is 538 lines — bigger than the official median of 129 — "and yet architecturally more disciplined, because the size is in the layer that only loads when relevant." 6:14
The lesson: "A big skill isn't a long file. It's a small file with a big library behind it." 6:38

🚧 The Gate That Refuses to Draw

The thing nobody else is doing: Section zero of the file, before any diagram instructions, is a gate. Verbatim: "Before generating your first diagram in a new project, verify the style guide has been customized." The model checks colors against the shipped defaults — a paper tone, an ink tone, a rust accent — and if unchanged, stops and asks the user. 6:44

The prompt offers five options: pull the palette from your website, extract it from another installed skill, extract from a local design-system folder, paste tokens by hand, or explicitly proceed with the default. Two details elevate this from nice to genuinely well-engineered: 7:08

  • One-line heuristic, no state. "If the accent color differs from the shipped rust value, assume the user already customized and skip the gate forever after. No state file, no database, no configuration. The artifact remembers by being different from the default."
  • It explains itself. The file states the failure mode: "Don't silently ship default-skin diagrams into a branded project." "That sentence is the whole professional posture of this repository. The author isn't worried the diagrams will be ugly. They're worried about the specific, real, embarrassing outcome where you paste a diagram into a company deck and it's wearing somebody else's colors." 7:43
"The whole industry's instinct is to remove friction. This adds friction once, at exactly the right moment, and then never again." 8:15

👁️ The Taste Gate — A Checklist That Tells the Model Not to Work

Section 9, "the pre-output checklist," runs before producing any diagram. Three items stand out — read verbatim: 8:26

First: "Would a table or paragraph do the same job? If yes, don't draw." An instruction file for a diagram generator telling the model its own product is often the wrong answer — not a hedge, a numbered gate before output. "How many of your tools tell you when not to use them?" 8:35

Second, the "remove test": Can I remove any node? Can I merge any two nodes — "do they always travel together?" Can I remove any arrow — is the relationship obvious from layout? Can I remove any label — does color or shape already signal it? "That is a professional designer's actual editing process written down as machine-executable instructions. Four specific subtractive questions, each with its own test. This is what taste looks like when you decompose it far enough for a model to run it." 8:48

Third, a signal rule: "The accent color may be used on two elements at most. If you've used more, which ones actually deserve focal status?" Plus a complexity budget — if past it, split into an overview + detail diagram rather than cramming. 9:25

The grep result that should sting: across 538 lines — zero "never," zero "always," zero "must," zero "do not." Not one raised voice in the entire file. Every constraint is a checklist item, a table, a numbered gate, or a question the model has to answer. "This independent developer is, by that measure, more disciplined than the official set. Whispering isn't a style. It's what instructions look like once the structure is actually doing the work." 9:41

🔧 Scripts & The Accessibility Surprise

The official doctrine: put precision in code, not prose. Nine Python scripts here — and the biggest one's subject is the surprise. A 514-line checker on the generated output, and what it enforces most is accessibility. Its error strings, verbatim: 10:16

"Every diagram's vector graphic must contain a title. The title must be the first child element. It must not be empty. There must be a description element. And the labeling attribute must name the title and description IDs." Accessibility terms appear roughly 28 times across the skill and its scripts — plus a separate 229-line test file for the accessibility linter. Tests for the checker, not just the checker. 10:40

"A diagram is a picture. To a screen reader, it's a blank rectangle — unless someone did this work. And the thing enforcing it isn't a policy or a code review. It's a script that runs on the output. So a model that gets sloppy simply fails the check." Other scripts: a 588-line icon builder, and a 61-line utility that repairs mangled text encoding — "that last one exists because somebody hit that bug at 3 in the morning and decided never again. Foot guns documented as tools." 11:09

📥 The Import Path & The Fidelity Ledger

The import feature points at existing diagram files from popular drawing tools or diagram-as-text sources, and redraws them — not as a conversion, but a re-render at your chosen settings. "Every company has a folder of diagrams somebody made in a drawing tool four years ago. Accurate, ugly, and unusable in a deck. This turns that folder into an input. The migration story is the adoption story." 11:41

The word that caught him — "ledger." The import flow requires the model to produce a fidelity ledger: a report of what survived the redraw and what didn't. "A faithful reproduction and a simplified-for-audience version are different documents. If a machine silently drops three boxes while making your architecture diagram prettier, you now have a diagram that lies. The skill's answer: redraw freely, but hand back an account of the changes." 12:10

"Three times now this file has stopped to consider the specific way its own output could quietly embarrass the person using it. That's not a feature list. That's a temperament. And it's rarer in software than talent." 12:42

💸 Who Pays?

Standing rule: when something this good is free, find the invoice. Signal Coders read the whole repository looking for it — "and as far as I can see, there isn't one." MIT license, no hosted service, no paid tier, no sponsor links, no affiliate codes, no telemetry. 13:03

"It's a portfolio piece and a professional gift. Someone with real design skill wrote down their process precisely enough for a machine to follow it, and published the whole thing. That's the rarest flavor of free at the top of a trending page. The realistic returns are reputation and the pull requests of strangers." 13:40

The second-order answer — the strategic story of the day: "When one person's single skill can outrank every framework on GitHub, the value in this ecosystem has moved. Not to the model — that's swappable. Not to the framework. This beat all of them without being one. To codified expertise — someone's actual taste decomposed into checklists a model can run. That's a new category of artifact, and today it's the most valuable thing on the page." 14:00

✅ Key Takeaways

  1. The craft is now legible enough for an individual to execute it at a professional standard — and be rewarded within a day. One person, one folder, #1 on GitHub above every framework and model release. No framework, no company, no model of their own.
  2. The description budget is one entry per capability, not a word count. This skill breaks the 100-word guidance with 144 words — and it's right, because 27 capabilities need 27 triggers. A generic description would make 25 of 27 types invisible.
  3. A big skill is a small file with a big library behind it. The ratio: 32 KB loaded, 484 KB on demand, 1.5 MB never — 1:15:45. Size in the layer that only loads when relevant.
  4. Structure beats capitals — zero raised voices in 538 lines. Every constraint is a checklist item, a table, a gate, or a question. This independent developer is more disciplined than the official set.
  5. The two gates worth copying: the style gate and the taste gate. Refuse to ship default-skin diagrams into a branded project. Ask "would a table do the same job? If yes, don't draw." Add friction once, at the right moment, then never again.
  6. The fidelity ledger: when you redraw, account for the changes. If a machine silently drops boxes while prettifying, you now have a diagram that lies. Redraw freely, but hand back a report of what survived.

🔗 Resources & Links

📍 Timestamp Index

0:00 The #1 repo on GitHub is one person's single skill
1:54 What it is: 27 diagram types, inline SVG, imports + redraw
3:05 The rule it breaks: 144-word description
4:12 Why it's right — 27 capabilities need 27 triggers
4:59 The rule it nails: 32 KB / 484 KB / 1.5 MB — 1:15:45
6:44 The gate that refuses to draw — check the style guide first
8:26 The taste gate: "If yes, don't draw" + the remove test
9:41 Zero raised voices in 538 lines
10:16 The 514-line accessibility linter + its 229-line test file
11:41 The import path and the fidelity ledger
13:03 Who pays? — no invoice, a portfolio piece and gift
14:00 The value has moved to codified expertise
☰ View all