I Made 30+ Diagrams With One Claude Code Skill — No Figma

Author: Prompt Engineer · Watch on YouTube

Video authored by the channel shown, not by IANIA; all rights belong to the creator. Transcript and summary generated automatically; the original-language content is preserved.

Original language: English

Original video: I Made 30+ Diagrams With One Claude Code Skill — No Figma · Channel: Prompt Engineer · 10:23 · Watch on YouTube

Topics: AI agents, Claude Code, AI content generation, Open source and software ecosystems

Summary

The video reviews Diagram Design, an open-source Claude Code skill that creates consistent, editorial-style diagrams without Figma. It explains the skill’s design rules, brand-matching options, diagram formats, and single-file HTML/SVG output. Live demonstrations and a batch of 12 diagrams show its range, while the creator also notes limitations such as strict styling, a nine-node target, geometry issues, and higher token use. The verdict is that it can turn diagram creation into a one-prompt task for people who make documentation, blog posts, or videos.

Key points

Diagram Design is an open-source skill that can be installed in Claude Code and several other AI coding agents.
It supports 39 diagram types, including architecture, flowcharts, Sankey diagrams, fishbone diagrams, and database schemas.
Diagrams are delivered as a single HTML file with inline SVG, requiring no build step, JavaScript, or external images.
The design rules emphasize deletion, a target density of four out of 10, and a maximum of nine nodes before splitting a diagram.
The visual system uses one accent color sparingly, a four-pixel grid, fixed typography roles, and no shadows or large rounded corners.
Six connector rules require right-angle arrows, prevent overlapping arrows and labels, and are supported by repository checker scripts.
The skill can derive colors and fonts from a website and update a shared style guide to match the brand.
The creator demonstrates individual Kanban and pyramid prompts, then presents 12 diagrams about an AI video-production pipeline.
Limitations include strict styling, difficulty with dense systems, occasional geometry fixes, checker scripts not included in a plain plugin install, and greater token use.
The skill is MIT licensed and can also import Mermaid, draw.io, and Excalidraw diagrams.

Chapters

Start	Chapter	Summary
00:00	What Diagram Design is	The creator introduces the skill, its purpose, installation, supported diagram types, and standalone HTML/SVG output.
02:03	Design rules and brand system	The video explains the skill’s constraints for density, color, typography, layout, connectors, and brand matching.
03:37	Live diagram demonstrations	Claude Code creates a Kanban board and a pyramid from plain-language prompts, with the results and run details shown.
05:11	Twelve diagrams from one pipeline	The creator walks through 12 diagram types describing different parts of an AI video-production pipeline.
09:19	Pros, limitations, and verdict	The video weighs the skill’s range and consistency against its strict rules, geometry challenges, and token costs.

Quotes

editorial diagrams your designer won’t hate. — 00:30

The highest quality move is usually deletion. — 02:03

I didn’t touch a single pixel. — 04:40

The rules are strict, so if you want a colorful dense busy diagram, this will fight you. — 09:51

It turns make me a diagram from a 30-minute Figma job into one prompt — 10:23

Concepts and entities

Diagram Design, Katherine Lavery, Claude Code, Figma, Mermaid, Excalidraw, SVG, MIT License

Full transcript (original language)

00:00 Every diagram you see on screen right now was made by one Claude code skill, 12 of them. Architecture, sequence, Sankey, fishbone, a database schema. No Figma, no dragging boxes around, and none of them look like the usual AI slop with rounded boxes and purple glow. Today, I’ll show you what this skill is, how it actually works under the hood, where it falls short, and I’ll build diagrams live in front of you. The project is called Diagram Design by Katherine Lavery, and it’s open-source on GitHub. The tagline is simple:

00:30 editorial diagrams your designer won’t hate. It’s not an app, and it’s not a website you log into. It’s a skill, a folder of instructions and templates that you install into Claude code, Dex, GitHub Copilot, Factory Droid, or Pi. When you ask your agent for a diagram, the skill takes over and tells the model exactly how to draw it. Why does this exist? The author writes a blog, and every time she asked an AI for a diagram, she got back the same generic thing: rounded boxes, random colors, a layout that looked nothing like the rest

01:02 of her site. So, the choice was fight with Figma for 30 minutes or skip the diagram completely. This skill is her answer to that problem. Installing it in Claude code takes two commands. First, add the marketplace with {slash} plugin marketplace add Katherine Lavery {slash} diagram design, then {slash} plugin install. That’s it. If you want to hack on the style yourself, you can also clone the repo and drop the skill folder into your project’s {dot} Claude {slash} skills directory. That’s exactly what I did for this video. Out of the box, you

01:33 get 39 diagram types. The classics are there: architecture, flowchart, sequence, state machine, ER diagrams, timelines, and swim lanes. But, it goes much further. Sankey flows, fishbone root cause, Wardley maps, Kanban boards, user journeys, deployment maps, UML classes, and physical database schemas. Here is the live gallery where you can flip through every single one in light, dark, and a full editorial layout. And here’s the part I really like. The

02:03 output is one single HTML file with an inline SVG inside it. No build step. No JavaScript. No external images. You double-click it and it opens in any browser. You can drop it into a blog post, export it to PNG for slides, or to SVG for Figma. So, how does it make the model draw well? With rules, a lot of very opinionated rules. The first one is my favorite. The highest quality move is usually deletion. Every node has to earn its place. The target density is four out of 10. There is a maximum of nine

02:35 nodes per diagram. And if you go over that, the skill tells the model to split it into two diagrams instead of cramming. Color works the same way. There is exactly one accent color and it goes on one or two things only. The thing the reader should look at first. Everything else stays in ink and gray. No shadows. No big rounded corners. Every coordinate, every font size, every gap sits on a four-pixel grid. And typography is fixed. A serif for titles, a sans for names, and mono only for technical labels like ports and file

03:06 names. Then there are six connector rules and the skill calls them non-negotiable. Arrows must be right angles with rounded corners. No diagonal lines. A label can never sit on top of its own arrow. Two arrows can never overlap and an arrow cannot sneak behind a box it doesn’t connect to. The repo even ships Python scripts that check your file for these mistakes. And I ran them on every diagram in this video. There’s also a brand system. All colors live in one style guide file as named roles like paper, ink, muted, and

03:37 accent. Point the skill at your website and it pulls your colors and fonts, checks the contrast, and rewrites that file. So, every future diagram matches your brand. On first use in a new project, it actually stops and asks you whether you want to set up your brand or go with the default. I kept the default look for this video. Enough theory, let’s make diagrams live. I opened a fresh folder, put the skill inside dot cloud {slash} skills, and gave Claude Code a plain English prompt in headless

04:07 mode with no hand-holding. This is the real session output, not a mock-up. First prompt, make a Kanban board of my YouTube video backlog with columns for ideas, scripting, recording, editing, and published. A work in progress limit on editing and one blocked card. Claude Code loaded the skill, read the Kanban rules and the template, stated a plan, wrote the file, and then ran the skill’s own self-check, which passed. The whole run took about 1 minute, 45.9 turns, and

04:40 around $1.45 in tokens. And here is the result. Five columns and its spend is only two accents on exactly the right things. Editing is over its limit, three of two, and the blocked voice re-render card. I didn’t touch a single pixel. Second prompt, a pyramid of what makes a tech video get watched. Clear audio at the base, then a real demo, an honest verdict, a strong hook, and title and thumbnail at the top. Again, one prompt, one file, about 80 seconds and eight

05:11 turns. The model’s plan was short. Pyramid pointing up, five layers, orange on the apex only. And that’s exactly what it drew. Title and thumbnail at the top in orange with a little note, decides to click. It even added an axis on the left, foundation at the bottom, higher leverage at the top. The geometry checker found zero problems. Now, the big test. I wanted to see if it holds up across many types at once. So, I picked a one theme, my own AI video pipeline, and built 12 diagrams of it,

05:41 each from a different angle. To be transparent, I generated these 12 with one Python script that follows the skills rules and templates rather than 12 separate chats. Let’s walk through them. Number one, architecture. The script goes into the orchestrator, which is the one orange node, because that’s where everything is decided. It fans out to the clone voice, the renderer, and the B-roll. Then the final MP4 goes up to YouTube. Look at the arrows. Every bend is a clean rounded right angle, and every label has its own little gap. Two,

06:13 a flowchart for the question, ship it or fix it first? Captions in sync, loudness at minus 14. The happy path to publish is in orange, and the fixes loop back with a dashed line. Diamonds for decisions, pills for start and end. The shape carries the meaning, not random color. Three, a sequence diagram of one narration line. The orchestrator checks the cache, misses, calls the text-to-speech API, and there’s an odd block for the two outcomes. A clean

06:43 success or a rate limit with a back-off. Calls are solid, returns are dashed, and the async store uses an open arrowhead. Those are all rules from the skill. Four, the life of a render job as a state machine. Queued, rendering, encoding, published. A timeout sends it to failed, which is the orange state, and it retries up to three times before it gives up and alerts me. Five, a swim lane of who does what. Me, Cloud, the machine, and YouTube. The orange hand-off is where the work goes back to a human for review, which

07:14 honestly is the slowest step in my whole pipeline. Six, a Gantt chart, eight days from repo to upload, grouped into pre-production, production, and post. Exactly one bar is orange, the 12 diagram batch, because that’s the critical path. And there’s a dashed today marker. Seven, the loop of flywheel. Pick a topic, script, produce, publish, measure, learn, and back to the top. Every station writes into one dark hub in the middle, the channel memory. the dashed spokes are the right backs. Measure is orange because the retention

07:46 curve is what drives the next video. Eight, a Sankey of where 60 production hours go. Here, the band thickness is the data and every column adds up to exactly 60. One flow is orange, voice fixes forcing re-renders, and that’s the editorial point. Most of my wasted render time traces back to the voice track. Nine, a quadrant of which tools earn their place, impact against effort. The diagram design skill itself sits in the do first corner, and handmade Figma diagrams sit down and skip one word on

08:17 each axis, no arrows baked into the labels. Again, a rule. 10, a real database schema, videos, scenes, assets, and renders with SQL types and constraint chips. The foreign key lines attach to the exact column rows, not just the boxes, and the one orange line is the dangerous one. On delete cascade, delete a video and its scenes go with it. 11, a fishbone for root cause, the effect on the right, voice drifts off the captions plus 380 milliseconds by

08:48 minute eight. Five categories investigated and one confirmed cause in orange, a sample rate mismatch in the voice track. And 12, import. I wrote a messy mermaid flow chart with a style class and an unconnected note. The skill ships an extractor script that parses mermaid as plain text, never runs it, and prints a digest. Then the diagram gets redrawn from scratch. In this design system, it dropped the dead note, ignored the mermaid styling, turned the cylinder into a store box, and kept the decision loop. You get a fidelity report

09:19 of what was cut. So, pros. One, the output genuinely looks designed and consistent across every type. Two, it’s a single HTML file, no build, and no dependencies. Three, 39 types plus mermaid, draw.io and Excalidraw import. for brand matching from your website, five accessible SVG by default, and six it’s free MIT licensed and works across many agents, not just cloud. Now, the honest cons. The rules are strict, so if

09:51 you want a colorful dense busy diagram, this will fight you. The budget of nine nodes means big systems must be split. Getting the geometry right is still hard. While building my 12, the geometry checker caught labels overlapping boxes a few times and they had to be nudged by hand. Those checker scripts live in the repo, so a plain plugin install won’t give you all of them. And it’s a lot of reading for the model, which means more tokens per diagram. My verdict, if you write docs, blog posts, or make videos like I do, this is one of the most

10:23 useful skills I’ve installed this year. It turns make me a diagram from a 30-minute Figma job into one prompt and the result looks like it came from a designer. The link to the repo is in the description. Let me know in the comments which diagram type you want to see next and I’ll see you in the next one.