Diagram Design: How to Make an AI Draw Diagrams in Your Client's Brand, One Profile per Client
Ask any AI assistant for a flowchart and you get the same thing: rounded boxes, a pale blue fill, a sans-serif font nobody chose, and arrows that cross in the middle. It is correct and it belongs to no one. For a designer, that default is the problem. The diagram has to sit in a client's deck or report next to their typography and their colours, and a generic chart makes the whole page look borrowed.
Diagram Design, a free skill that has collected 55,000 GitHub stars and was back on the daily trending lists this week, attacks that problem in an unusual way. Before it draws your first diagram, it stops and asks whose brand this is. Give it a website address and it reads the real colours and fonts from the page. Then it does something I rarely see AI tools do. It tells you what it could not match, and it refuses to pretend.
This is a walkthrough of that setup, and of the feature that makes it practical for freelancers and studios: a separate saved profile for each client.
What Diagram Design is
It is a skill, a folder of written instructions and templates that an AI coding assistant reads before it works. It runs in Claude Code, Codex, GitHub Copilot, Cursor, Gemini CLI and a few others. (Claude's Cowork app works too, but only after an organization sets it up through its own plugin marketplace.) You describe a diagram in plain language ("make me an architecture diagram of my app"), and the assistant picks a diagram type, tells you its plan in one short message, and writes a single web page with the diagram inside. No build step, no app to open.
The README claims 45 diagram types, from flowcharts, timelines and org charts to Gantt charts, Sankey flows (the ones where line thickness shows quantity) and customer journey maps. The licence is MIT, so client work is fine.
The look is deliberately spare: one accent colour, hairline rules, no drop shadows, everything snapped to a 4-pixel grid. The README's guiding line is one every editor will recognise: "The highest-quality move is usually deletion."
Why the brand step is the part worth studying
The onboarding guide, a file called references/onboarding.md, reads like a checklist written by someone who has been burned by brand mismatches. A few of its rules are worth knowing before you start.
It asks before visiting the site. Giving it a web address does not count as permission. The assistant shows a warning about loading an external page and waits for a yes. If you would rather not, it offers to work from a screenshot or a local copy instead.
It assigns colours by job, not by guess. The page background becomes the paper colour, body text becomes ink, captions become the muted grey, and the most-used brand colour becomes the single accent. If the site uses six or more colours, you pick the accent.
It will not fake a font. This is my favourite rule. If the client's typeface is a free Google font, it carries over the exact family and weights. If it is a paid or custom-hosted font, the guide says to label it a fallback and never claim an exact match. The assistant checks what the browser actually rendered, so a font that failed to load does not pass. Anyone who has watched a mockup render in a substitute font and get approved that way will appreciate this.
It checks that text is readable. Body text and muted captions must reach a contrast ratio of at least 4.5 to 1 against the background, the standard accessibility threshold for normal-size text. Failing colours come back with a proposed adjustment rather than silently shipped. It also nudges you away from pure white backgrounds unless you confirm that is intended.
It waits for your sign-off. After showing a table of what it found, with low-confidence guesses flagged, it builds a sample and asks you to reply "approved" or list changes. Until you do, onboarding stays pending.
None of this is clever technology. It is good studio practice, written down where the assistant has to follow it.
One profile per client
Here is what makes it workable for anyone with more than one client. Each brand you set up can be saved as a named profile, stored in a folder in your home directory (~/.diagram-design/profiles/), outside the skill itself so updates do not wipe it.
Then, in any project folder, you add a tiny text file called .diagram-design containing one line:
profile: acme-studio
Every diagram made in that folder uses that client's brand. A second folder with a different one-line file uses a different client's brand. Two projects can run side by side without either one touching the other's colours. If the file names a profile that does not exist, the assistant asks you rather than guessing.
You manage profiles with short words: save, load (or switch), list, show, update, reset and delete.
Put this into practice
Here is the whole workflow, from install to a file you can drop into a deck.
1. Install. In Claude Code, run these two commands:
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design
In other assistants, npx skills add cathrynlavery/diagram-design works, and the README lists steps for each host.
2. Ask for a real diagram. Use a job you actually need, such as "a timeline of the launch campaign, six milestones." Because the style guide is still on its defaults, the assistant stops and asks where your brand comes from.
3. Give it the client's website. Approve the external-site warning. Read the table it shows you. Pay attention to anything marked low confidence and to any font labelled fallback. That label tells you to supply the real font files yourself or accept the stand-in.
4. Approve or correct. Open the sample it builds, check it against the client's brand guidelines, and reply "approved" or list fixes.
5. Save the profile. Name it after the client. Add the one-line .diagram-design file to that client's project folder.
6. Respect the budget. The skill caps each diagram at 9 boxes, 12 arrows and 2 callouts, and splits anything larger into an overview plus a detail view. Let it. If the overview does not make sense on its own, the content needed editing anyway.
7. Bring old diagrams across. If the client already has charts in draw.io, Excalidraw or Mermaid (a text-based diagram format common in technical docs), use /diagram-design:import-drawio, import-excalidraw or import-mermaid. The rule here is "Redraw, never convert": it keeps the content, throws away the old colours and positions, and gives you a list of what it merged or dropped. Read that list before you send anything.
8. Export only when ready. Nothing exports unless you ask. /diagram-design:export-diagram gives you a vector file (scalable, opens in Illustrator or Figma) or a PNG image. For slides and documents the PNG default is twice the drawing's size, so a 1280 by 720 diagram becomes 2560 by 1440, and you can go to three times for print.
Where it breaks
There is no canvas to drag. The README says it plainly: the result "is not an editable source format." If the client wants a box moved two centimetres to the left, you ask again. For a designer used to nudging things by hand, this is the biggest adjustment.
The same request can lay out differently. The README warns that output quality depends on the AI model and that the same prompt can produce a different layout on a different run. Save the versions you like.
Fonts can slip on export. The export guide warns that vector-file viewers that do not load web fonts will substitute their own typography, and that a PNG capture can fall back to default fonts if the web fonts stall (it prints a warning when that happens). Open the exported file on the machine where it will be used before you send it.
PNG export needs a setup step. It relies on a browser automation tool called Playwright, and the skill never installs extra software on its own, so you need to install Playwright yourself first.
Not for living documents. For "docs that live in Git and change every sprint," the README itself says Mermaid "is still the better fit," because a text format is easier to update and compare than a redrawn picture.
Small inconsistencies. The README headline says 45 types while its gallery numbers them 01 to 44. Minor, but worth checking that the type you need actually exists before promising it.
Copy the method, even if you skip the tool
You might never install Diagram Design. The onboarding guide is still worth ten minutes of your time, because it answers a question every studio using AI should be asking: what do we let the machine guess, and what do we make it prove?
Its answer is specific. Colours can be sampled. Fonts must be verified or labelled. Contrast must pass a number. Nothing ships until a person types "approved." Write your own version of those rules for whatever AI tool you use, save them where the tool will read them, and you will spend less time correcting generic output and more time on the work your clients pay you for.
Medium metadata
Title: Diagram Design: How to Make an AI Draw Diagrams in Your Client's Brand, One Profile per Client
Subtitle: A free skill for Claude Code and other assistants reads a client's colours and fonts from their website, refuses to fake paid fonts, checks contrast, waits for your approval, and keeps a separate saved brand for every client.
Tags: Graphic Design, Branding, Data Visualization, Artificial Intelligence, Freelancing
Estimated read time: 8 minutes