Add the free diagram-design skill to Claude Code, type your sales process in plain English, open the diagram in your browser, then switch its type.
Swipe or tap Next · checked on 2026-10-11
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.
Make a folder and start Claude in it
cd ~
mkdir diagrams
cd diagrams
claudeThe setup prompt (copy all of it) · lines 1-4 of 27. Copy all copies the whole prompt; read it in full on the page.
About 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-diagramThis is the manual way: every step and every command. Claude follows it too.
Don't love it? Ask for a different diagram type. Same process, a new file, a totally different picture.
/, like /plugin.Skip this if claude --version already 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 run claude, it sends you to your browser to log in.
Install (Mac, Linux, WSL)
curl -fsSL https://claude.ai/install.sh | bash
# open a NEW terminal window, then:
claude --versionInstall (Windows PowerShell)
irm https://claude.ai/install.ps1 | iexEverything Claude makes lands in this folder, so your diagrams don't end up scattered all over your computer. If the folder's already there, mkdir complains; ignore it.
Make the folder and start Claude
cd ~
mkdir diagrams
cd diagrams
claudeclaude. 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.
Type this in Claude Code
/plugin marketplace add cathrynlavery/diagram-designThis 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 says Run /reload-plugins to apply., Claude Code runs that for you.
Type this in Claude Code
/plugin install diagram-design@diagram-designType / in Claude Code and look for entries that start with diagram-design:, like /diagram-design:export-diagram. Or run /plugin, press Tab until you're on the Installed tab, and find it in the list.
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.
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.
Prompt: the one-sentence diagram
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”.
It draws exactly what you tell it. Messy process in, very pretty mess out. If the office and the rep both think they own the follow-up, the diagram won't fix that. It'll just make it look official. So the check comes before the drawing.
Fill this in with your words. Use roles, not names: “the office”, “the rep”, “the estimator”.
What to write
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>This is the step that fixes the catch. Claude reads it back and asks about the holes, one at a time.
Prompt: find the gaps first
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.Prompt: draw the clean version
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:
Example (made up): a roofing company's new-lead process
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.No customer names, phone numbers or addresses in what you type. Whatever you type goes to Claude, and the diagram is a file you're about to share.
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:
You can't drag the boxes around like a design app. You change it by asking.
1. Let it suggest
Which three diagram types fit this process best, and why? One line each. Don't draw yet.2. Swimlane: who does what
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.3. Funnel: the stages
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.4. A small change
In sales-process.html, rename "Follow up" to "Call back same day". Change nothing else. Save it as sales-process-v2.html.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.
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.
Type this in Claude Code
/diagram-design:export-diagram sales-process.html --svg-only
/diagram-design:export-diagram sales-process.html --png-onlyOnly for PNG: install Playwright (the skill's README command)
pip install playwright && playwright install chromiumPoint 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.
Prompt: your colours
Onboard diagram-design to https://<your website>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.
Prompt: no outside requests
Redraw sales-process.html with system fonts so it doesn't load anything from the internet. Save it as sales-process-offline.html.1. Page one of a new-rep SOP
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.2. Estimate to finished job, by role
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.3. Who to call for what
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.4. A typical job, start to finish
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.5. Too big for one picture
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.Checked 2026-10-11 on claude.com/pricing and the skill's GitHub page. The free Claude plan doesn't include Claude Code. Prices change: check before you buy.
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.
/plugin isn't available in this environmentYou're in the desktop app, the VS Code panel or the browser version, and /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: /pluginYou typed it at the plain terminal prompt. Type claude first, then the /plugin command inside Claude Code.
Failed to clone marketplace repositoryCheck the spelling: 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 marketplaceAdd the marketplace first (the step before the install). If you already did, refresh it with /plugin marketplace update diagram-design and install again.
Run /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.”
That's its first-run check in a new folder. Pick keep the default, or give it your website. Once you've chosen, it doesn't ask again in that folder.
That's the catch: it draws what you typed. Run the gap-check prompt, fix the words, then redraw as a new file.
The skill aims for about nine boxes per diagram and suggests splitting bigger ones. Go with it: an overview plus one detail diagram per stage (real-use prompt 5).
Normal: the skill's own docs say layouts vary from run to run. When you like one, keep that file and ask for small changes to it, saved under a new name, instead of a fresh draw.
It loads its fonts from Google Fonts when it opens. Ask for system fonts (the offline prompt above).
pip isn't foundPNG needs Playwright. Ask Claude to install it for your setup (it should ask first), or skip it: SVG export and a screenshot both work without it.
/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.
What each page backs up is listed at the end of the full guide.
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.
Want help setting this up? Receipts Group builds these systems.
Open the full guide as a page (every file in full, plus the table of contents).