The diagram in my video took one sentence. Not an afternoon dragging boxes around. It's a free Claude Code skill called diagram-design. (A skill is a set of instructions Claude picks up when the job calls for it.) You type your process the way you'd explain it to a new rep, and out comes one web page with a clean diagram on it. Double-click the file and there it is.
This guide is the whole setup: adding the skill (two commands), your first diagram, writing your real process so it's worth drawing, switching it to a different diagram type, and getting it into a pitch deck, an SOP or a post. Plus the one catch: it draws exactly what you tell it. Messy process in, very pretty mess out. So there's a step for cleaning up the mess before anything gets drawn.
Start here: paste this into Claude Code
Install Claude Code first if you don't have it (step 1 under “Add the skill to Claude Code” below). Then make a folder for your diagrams, start Claude Code in it, and paste the prompt. It walks you through adding the skill, checks your process for gaps before it draws anything, and asks before anything that costs money, installs something or overwrites a file.
cd ~
mkdir diagrams
cd diagrams
claudeAbout me: I run a small business and I'm not technical, so use plain words and short sentences.
Goal: turn how my business handles <a process: a new lead, an estimate, a new hire> into a clean diagram that opens in my browser, so I can put it in a pitch deck, an SOP or a post. We'll use a free Claude Code skill called diagram-design. Follow this guide; it's the source of truth for every command:
https://receiptsgroup.com/guides/sales-process-diagram
Steps:
1. Check we're in a folder just for diagrams. If we're not, tell me how to make one and start you again inside it.
2. Explain in two sentences what a plugin and a marketplace are. Then tell me to type these two commands myself, one at a time (slash commands are mine to type, not yours):
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design
On the second one I pick "Install for you (user scope)". Tell me what the screen should say after each one, and help me if it says something else.
3. Ask me to describe the process the way I'd explain it to a new rep: what starts it, who does each step, every yes/no decision, and where it ends. One question at a time.
4. Before you draw anything, read the process back to me as numbered steps and list anything vague, missing or out of order. We fix those first.
5. Use the diagram-design skill to draw it as one HTML file in this folder, named after the process (for example sales-process.html). If the skill asks about my brand or style, explain the choices in plain words; for this first one I'll keep the default look. Tell me which diagram type you picked and why before you draw.
6. Tell me how to open the file in my browser, then ask what I think.
7. Suggest two other diagram types that fit this process, one line each. Draw the one I pick as a new file. Never overwrite a file I already have.
8. Show me how to get it into a deck, an SOP or a post. A screenshot first; the export command only if I ask.
Rules: no customer names, phone numbers or addresses anywhere in the diagram; describe the process, not the people. Don't add steps, numbers or results I didn't give you. If the process has more than about nine steps, suggest an overview plus a detail diagram instead of cramming it into one. Ask me before you install anything.
House rules for this setup:
- Go one step at a time and wait for me after each step.
- If you use a technical word, explain it in plain English the first time.
- Ask me before you assume anything about my business, my accounts or my setup.
- Stop and check with me before anything that costs money or spends credits.
- Stop and check with me before anything that sends, posts or publishes to real people.
- Stop and check with me before you delete or overwrite anything.How the pieces connect
This is the manual way: every step and every command. Claude follows it too.
- 1Your processYou, in plain words, like you'd tell a new rep→ a few sentences
- 2The checkClaude Code reads it back and flags the gaps→ a clean list of steps
- 3The drawingClaude Code with the diagram-design skill→ sales-process.html
- 4The lookYour browser (double-click the file)→ the diagram on screen
- 5The useA screenshot, or the skill's export command→ a picture for a deck, an SOP or a post
Don't love it? Ask for a different diagram type. Same process, a new file, a totally different picture.
Words you'll see
- Claude Code: Anthropic's AI assistant that works on the files in a folder on your computer. You talk to it in plain English inside a terminal (the text-only window where you type commands).
- Skill: a set of instructions Claude picks up when the job calls for it. This one teaches Claude how to draw clean diagrams.
- Plugin: the package a skill comes in. Installing the plugin adds the skill and its commands to Claude Code.
- Marketplace: a catalog of plugins. Here it's the skill's page on GitHub. You add it once.
- Slash command: a command you type inside Claude Code that starts with
/, like/plugin. - HTML file: that's just a web page saved on your computer. Double-click it and your browser opens it.
Add the skill to Claude Code
Install Claude Code (skip if you have it)
Skip this if
claude --versionalready prints a version. You need a paid Claude plan: Pro, Max, Team or Enterprise. The free plan doesn't include Claude Code. The first time you runclaude, it sends you to your browser to log in.curl -fsSL https://claude.ai/install.sh | bash # open a NEW terminal window, then: claude --versionirm https://claude.ai/install.ps1 | iexStart Claude Code in a folder for your diagrams
Everything Claude makes lands in this folder, so your diagrams don't end up scattered all over your computer. If the folder's already there,
mkdircomplains; ignore it.cd ~ mkdir diagrams cd diagrams claudeAdd the skill's marketplace
WhereInside Claude Code, after you typeclaude. Not at the plain terminal prompt.This tells Claude Code where the skill lives on GitHub. You only do it once. When it works, it says
Successfully added marketplace: diagram-design./plugin marketplace add cathrynlavery/diagram-designInstall it
WhereInside Claude Code.This opens the plugin's details instead of installing straight away. Read the Will install list, then pick Install for you (user scope) so it works in every folder on your computer. The last line should say
Plugin is now active.If it saysRun /reload-plugins to apply., Claude Code runs that for you./plugin install diagram-design@diagram-designPermissionsClaude Code shows a trust warning before any plugin installs: a plugin can run code on your computer with your permissions, and Anthropic doesn't control what third-party plugins include. This one is open source (MIT license), and its privacy page says it has no server, no accounts and no tracking. Its only outside request is Google Fonts, when a diagram opens. You can read all of it on GitHub before you say yes.Check it's there
Type
/in Claude Code and look for entries that start withdiagram-design:, like/diagram-design:export-diagram. Or run/plugin, press Tab until you're on the Installed tab, and find it in the list.Auto-update: your call
Updates are off by default for third-party marketplaces like this one. On means you get the skill's fixes without thinking about it. Off means nothing changes until you choose, so the files you checked stay the files you checked. To turn it on:
/plugin, the Marketplaces tab, diagram-design, Enable auto-update.
First test: the one sentence from my video
No extra cost: it uses a little of your plan's usage, like any other question. In the same Claude Code session, paste this. It's the exact sentence from the video.
Use the diagram-design skill. Draw this as a diagram and save it as first-test.html in this folder:
A lead comes in, we follow up, we book the call.What happens: the first time in a folder, the skill stops and asks about your style: match your brand (from your website, colours you paste or a saved profile) or keep its default look. Say keep the default for now; you can brand it later. Then it tells you which diagram type it picked and writes the file.
Open it: double-click first-test.html in the diagrams folder in your home folder, or just ask Claude “open it in my browser”.
Good: a clean diagram with your three steps in the order you said them, and nothing you didn't say. Bad: Claude answers with a block of code instead of saving a file, or the drawing looks like a plain default chart. Then the skill probably isn't loaded: see “When it breaks”.
Write your real process like you'd explain it to a new rep
Write it down, rough is fine
Fill this in with your words. Use roles, not names: “the office”, “the rep”, “the estimator”.
What starts it: <e.g. a lead fills in the website form or calls the office> Who's involved: <roles only: the office, the sales rep, the estimator, the customer> The steps, in order: 1. <who> <does what> <how: text, call, email, the CRM> 2. ... Decisions: <every yes/no point, and where each answer goes> Where it ends: <the booked call, the signed contract, or the lead closed out>Have Claude check it before it draws
This is the step that fixes the catch. Claude reads it back and asks about the holes, one at a time.
Here's our process: <paste it>. Don't draw anything yet. Read it back to me as numbered steps, then list anything vague, missing or contradictory: a step with no owner, a yes with no no, a place a lead could fall through, two people who both think it's their job. Ask me about them one at a time until it's clean.Draw it
Use the diagram-design skill. Draw the cleaned-up process as a flowchart and save it as sales-process.html. Every decision gets both its yes path and its no path. Tell me the plan before you draw.
Example (made up), so you can see the level of detail that works:
What starts it: a lead fills in the website form or calls the office.
Who's involved: the office, the sales rep, the customer.
The steps:
1. The office texts the lead back and logs them in the CRM.
2. The rep calls the same day.
3. Answered and a fit: the rep books the estimate visit.
4. Answered but not a fit: the office sends a polite no and closes the lead.
5. No answer: the rep tries again the next day.
Decisions: a fit or not; answered or not.
Where it ends: the estimate visit is booked, the lead is closed, or after the last try it goes on the monthly email list.Same process, totally different picture
The skill has 44 diagram types, and the same process tells a different story in each one. The ones that fit a business process best:
- Flowchart: the steps and every yes/no.
- Swimlane: the same steps, one lane per role, so you can see who's holding the ball.
- Pyramid / funnel: the stages a lead goes through, widest at the top.
- Timeline: what happens when.
- User journey: the same process from the customer's side.
- Org chart: who answers to whom.
You can't drag the boxes around like a design app. You change it by asking.
Which three diagram types fit this process best, and why? One line each. Don't draw yet.Draw the same process as a swimlane, one lane each for the office, the rep and the customer. Save it as sales-process-swimlane.html. Keep the first file.Draw the same process as a funnel: the stages a lead goes through, from new lead to booked call. No numbers unless I give them to you. Save it as sales-process-funnel.html.In sales-process.html, rename "Follow up" to "Call back same day". Change nothing else. Save it as sales-process-v2.html.Put it in a deck, an SOP or a post
Screenshot it (the easy way)
The default look is built to be screenshot-ready. Open the file, zoom your browser in so the diagram fills the window, and take a screenshot: Command+Shift+4 on a Mac (then drag around the diagram), Windows key+Shift+S on Windows. Paste it into your deck, your SOP or your post like any other picture.
Export an image file (the sharper way)
The skill comes with an export command. SVG stays sharp at any size and needs nothing extra. PNG works anywhere a picture works, but needs Playwright installed first (a tool that runs a browser behind the scenes to take the picture). The exports hold only the diagram, not the title card around it, and land next to your HTML file.
/diagram-design:export-diagram sales-process.html --svg-only /diagram-design:export-diagram sales-process.html --png-onlypip install playwright && playwright install chromiumOr ask Claude to set it up for you. It downloads a browser engine, so it should ask you first.Match your brand (optional)
Point it at your website and it pulls your colours and fonts, shows you the changes, and only saves them after you say yes. It visits your site to do this; nothing is fetched unless you ask.
Onboard diagram-design to https://<your website>Make it work offline (optional)
When a diagram opens, it loads three fonts from Google Fonts. That's its only outside request. For a file that looks the same with no internet, ask for system fonts.
Redraw sales-process.html with system fonts so it doesn't load anything from the internet. Save it as sales-process-offline.html.
Real use: prompts for real jobs
Use the diagram-design skill. Here's how we handle a new lead, written for a new rep: <paste it>. First list any gaps and ask me about them. Then draw it as a flowchart for page one of our SOP, every decision with a yes and a no path. Save it as sop-new-lead.html.Use the diagram-design skill. Draw our process from signed estimate to finished job as a swimlane with lanes for the office, the estimator, the crew lead and the customer: <paste the steps>. Save it as estimate-to-job.html. Ask me before you guess who owns a step.Use the diagram-design skill. Draw an org chart of who handles what in the business, roles only, no names: <paste the roles and who they report to>. Save it as who-handles-what.html.Use the diagram-design skill. Draw a typical <job type> from first call to final walkthrough as a timeline, using only these stages: <paste them>. Don't add durations or dates I didn't give you. Save it as job-timeline.html.This process is too long for one diagram. Draw an overview with just the main stages as overview.html, then a detail diagram of <the stage that matters most> as detail.html.What it costs
| Tool | Plan | List price |
|---|---|---|
| Claude Code | Claude Pro, billed monthly | $20 a month |
| Claude Code | Claude Pro, billed yearly | $17 a month ($200 billed up front) |
| Claude Code | Claude Max | From $100 a month |
| Claude Code | Claude Team, Standard seat | $25 a seat a month, or $20 billed yearly |
| diagram-design skill | Open source, MIT license | $0 |
| Your browser | The one you already have | $0 |
What a diagram uses: there's no per-diagram charge. Each one is a job inside your plan's usage, and every plan has usage limits that reset on a rolling five-hour window, with weekly limits on top for paid plans. Redraws use usage too, which is why the gap check comes before the drawing, not after.
When it breaks
/plugin isn't available in this environment
/plugin only runs in a terminal session. Open a terminal, type claude and do it there. Or, at the plain terminal prompt, run claude plugin marketplace add cathrynlavery/diagram-design and then claude plugin install diagram-design@diagram-design. Installed for you (user scope), it also shows up in the desktop app's local sessions and in VS Code.zsh: no such file or directory: /plugin
claude first, then the /plugin command inside Claude Code.Failed to clone marketplace repository
cathrynlavery/diagram-design. On Windows without WSL, the message often ends in Command 'git' not found: install Git for Windows, open a new terminal, check git --version prints a version, and run the add command again.Plugin "diagram-design" not found in marketplace
/plugin marketplace update diagram-design and install again.Claude draws it without the skill (a block of code, or a plain default chart)
/plugin and check the Installed tab says it's enabled, and the Errors tab is empty. If you installed it in this session, run /reload-plugins. Then start your prompt with “Use the diagram-design skill.”It stops and asks about your brand before it draws
A pretty diagram of the wrong process
Too many boxes, cramped or split up
Same prompt, different layout every time
The fonts look different offline or on someone else's computer
PNG export stops and asks for Playwright, or pip isn't found
You want it gone
/plugin uninstall diagram-design@diagram-design. To drop the marketplace too, /plugin marketplace remove diagram-design, which also uninstalls its plugins. Your diagram files stay where they are.That's the setup
One sentence in, a clean diagram out, and a gap check in between so it's your real process and not a very pretty mess.
Checked on Oct 11, 2026 against
Every claim about a third-party tool in this guide (plans, prices, menu paths, commands, limits) was checked against these official pages on Oct 11, 2026. These screens change often: if something looks different, trust the page over this guide.
- diagram-design on GitHubThe Claude Code install commands (
/plugin marketplace add,/plugin install diagram-design@diagram-design), auto-update off for this marketplace, 44 diagram types, one self-contained HTML file, Google Fonts as its only network request, Playwright for PNG export, layouts that vary between runs, no drag-and-drop canvas, MIT license. - diagram-design: SKILL.mdThe first-run style check (keep the default or brand it), stating the plan before drawing, about nine boxes per diagram, the screenshot-ready default look.
- diagram-design: export command
--svg-onlyand--png-only, files written next to the source, Playwright needed only for PNG. - diagram-design: PrivacyNo server, no accounts, no telemetry; Google Fonts when a diagram opens; website fetches only when you ask for brand onboarding.
- Claude Code: OverviewWhat Claude Code is and where it runs.
- Claude Code: Advanced setupInstall commands for Mac, Linux, WSL and Windows PowerShell;
claude --version; Pro, Max, Team, Enterprise or Console account required, the free plan excluded. - Claude Code: SkillsClaude uses a skill when it's relevant; a plugin's skills show up as
/plugin-name:skill-name. - Claude Code: Install and manage pluginsAdding a marketplace from GitHub, the install scopes, the Installed and Marketplaces tabs, auto-update off by default for third-party marketplaces, uninstalling, removing a marketplace.
- Claude Code: Plugin security and trustWhat a plugin can do on your computer, the trust warning, how to review one before installing.
- Claude Code: Troubleshoot plugins
/plugin isn't available in this environment, the shell error, clone failures and Git on Windows,not found in marketplace, skills not showing up. - Claude: Plans and pricingPro at $20 a month billed monthly or $17 a month with $200 billed up front, Max from $100, Team Standard seats at $25 monthly or $20 billed yearly, the five-hour and weekly usage limits, the free plan without Claude Code (checked 2026-10-11).
