Mermaid Artifacts: flowcharts and diagrams from text
Describe a process in words, get a clean diagram
After this, you'll be able to describe a workflow, decision tree, or org chart in plain language. Claude produces a rendered Mermaid diagram you can export or embed, with no boxes or arrows drawn by hand.
Before you start
Complete SVG Artifacts: diagrams, icons, and visual outputs first; this lesson builds on that one by moving from drawn visuals to diagrams generated from text, and both depend on you being comfortable with visual Artifacts rendering in the panel.
The idea
A Mermaid Artifact turns a plain-English description into a rendered diagram. Describe a workflow, a decision tree, or an org chart in words, and Claude renders a clean visual you can export or embed. You never learn the Mermaid syntax yourself; you say what connects to what, and Claude draws it.
The big payoff comes when the process changes. You tell Claude "add a review step after step 3" and the whole diagram re-flows cleanly, with no boxes re-aligned by hand.
Here is the before and after: Without this, you map a refund approval process by drawing five boxes in slide software and realigning arrows three times into a crooked chart. With Claude, you write the steps as sentences and a clean, properly connected flowchart renders in seconds.
Now try it: send "Make a flowchart of this process as a Mermaid diagram: a customer submits a support ticket, support reads it, if it is a billing question route to finance, otherwise support handles it, and every ticket ends with a follow-up email." Then ask Claude to add a step and watch the diagram re-flow.
You describe the logic in plain English; Claude draws the diagram and re-draws it whenever the process changes.
Try it (9 min)
Watch out for
- Describing the process out of order; list the steps in sequence so the arrows connect the way you expect
- Leaving decision points vague; spell out the 'if this, then that' branches or the diagram guesses the logic
- Trying to learn Mermaid syntax yourself; you do not need to, plain-English steps are enough
- Cramming a 30-step process into one diagram; break large processes into a few smaller, readable diagrams
- Exporting a screenshot instead of the diagram; export the diagram so you can re-edit it later by changing the words
Paste this into Claude
Make me a flowchart as a Mermaid diagram from this plain-English process. I do not want to learn any diagram syntax; just turn my description into a rendered diagram. Process: Approving a vacation request. 1. An employee submits a vacation request. 2. Their manager reviews it. 3. If the request is 5 days or fewer, the manager approves it directly. 4. If it is more than 5 days, it goes to HR for a second review. 5. HR either approves or denies it. 6. Either way, the employee gets an email with the final decision. Render the diagram in the panel so I can see the boxes and arrows. Then add one new step: after any approval, the request is added to the team calendar. Re-flow the whole diagram to include it.
What good looks like
- A rendered flowchart appeared in the Artifact panel, with boxes connected by arrows
- The diagram shows the 5-day branch and the more-than-5-days branch as separate paths
- Every path ends at the decision email, matching the described process
- After your add-a-step request, the 'add to team calendar' step appears in the right place
- The diagram re-flowed cleanly when the step was added, with no boxes left disconnected
When this breaks
- Breaks when your description skips the decision logic because the diagram only knows the branches you name, so an 'it depends' step with no stated condition turns into a straight line that misrepresents the process.
- Breaks when the process is too large for one diagram because everything crammed onto one canvas becomes unreadable, so a sprawling workflow needs splitting into linked smaller diagrams instead.
AI can help with this
Paste this into claude.ai, filling in the brackets: 'Make a flowchart as a Mermaid diagram from this process, no diagram syntax needed: [list your steps in order, spelling out any if-this-then-that branches]. Render it in the panel, then add [a new step] and re-flow the whole diagram.'
You can now
You can complete the lesson outcome in a real Claude chat, Project, Artifact, Connector, Desktop, or Code surface.
- You can verify that a rendered flowchart appeared in the Artifact panel, with boxes connected by arrows.
- You can verify that the diagram shows the 5-day branch and the more-than-5-days branch as separate paths.
- You can verify that every path ends at the decision email, matching the described process.
- You can verify that after your add-a-step request, the 'add to team calendar' step appears in the right place.
Key takeaways
A Mermaid Artifact turns plain-English steps into a clean rendered diagram, and re-flows itself when the process changes. You describe the logic; Claude draws and re-draws the boxes.
- Describe a process in plain English and Claude renders the flowchart; you never learn Mermaid syntax.
- Spell out every 'if this, then that' branch so the diagram captures the real logic.
- List steps in sequence so the arrows connect the way you intend.
- Split large processes into linked smaller diagrams instead of one unreadable canvas.
- Change the process by asking; the diagram re-flows, no manual box-nudging required.
Go deeper