Sign-up with email verification
Validation, the email-already-taken branch, and the 24-hour verification window that everyone forgets to draw until support asks what happens to a stale link.
14 steps · 15 connections
Flowchart Templates
Eight fully-branched process flows. Open one and it's on the canvas right away. Then talk it into your process: "add a manager approval above 500, drop the SMS step, send rejections back to the form."
Pick a template
Every diagram here is rendered from the same structured definition you get when you import it — nothing is a touched-up screenshot. The previews leave the branch labels out so the shape stays readable at card size; click any one to see it in full, with every condition spelled out. "Refine in chat" puts the flow on the canvas and opens the conversation panel, so your first sentence can start changing it; "Use this template" drops it into the editor and leaves the rest to you.
Checkout & payment
Guest versus signed-in, shipping eligibility, a stock check and an authorization that can decline. Four decisions is where most real checkout flows actually land.
17 steps · 20 connections
CI/CD pipeline
Lint, unit tests, E2E, the main-branch gate and a health check that can roll back. The picture to put in a README so nobody has to read the YAML first.
18 steps · 21 connections
Support ticket triage
Deflection to a known outage, self-serve articles, plan-based routing and the escalation to engineering. The flow that decides your response-time numbers.
16 steps · 20 connections
Refund approval
Return window, exceptions, digital versus physical goods, inspection on arrival, and an approval limit that sends large amounts up a level. The densest branching here.
17 steps · 21 connections
Login with 2FA
Credentials, rate limiting, the second factor, code expiry, and the new-device notification. Handy for a security review where the lockout path is the point.
15 steps · 18 connections
Content moderation
Automated scoring with a grey zone that goes to a human, severity-based enforcement, and an appeal loop back into review.
16 steps · 19 connections
Incident response
From alert to all-clear: confirm real user impact, set severity, suspect the last deploy, roll back or dig in, then write the postmortem. Good runbook material.
16 steps · 18 connections
How to use these templates
1. Take the most-branched flow, not the closest one
Counter-intuitive, but it works: pick the template with more decisions than you think you need. Deleting a branch you can see is a two-second decision; discovering a missing edge case in production costs rather more.
2. Open it — the whole flow is already drawn
The flowchart is on the canvas the moment the page loads, with every decision labelled on both outgoing arrows and every terminal state drawn, including the ones nobody likes.
3. Talk it into your process
Open the chat panel and correct it in sentences: "add a manager approval when the amount is over 500, drop the SMS step, send rejections back to the form." The assistant edits the same structured flow you are looking at, so each turn returns a redrawn version rather than a fresh guess.
4. Hand-edit and export
The split view puts the Mermaid source next to the preview for the last few touches. Then SVG for docs that get zoomed, PNG for slides and tickets, or the raw source committed next to the code it describes.
What is a flowchart?
A flowchart is a picture of a process: the steps in order, the decisions that split it, and the paths that lead to each ending. It answers "what happens, and in what order" — not "who talks to whom", which is a sequence diagram, and not "what state is this thing in", which is a state diagram.
It is the most-used diagram in engineering documentation for a reason: a flowchart is readable by people who do not write code. Support leads, finance and legal will all argue with a refund flow drawn as boxes and diamonds, and that argument is exactly the value — it happens before the code is written rather than after a customer complains.
Mermaid's flowchart syntax covers what documentation actually needs: four common node shapes, labelled edges, subgraphs and both layout directions. It stops short of full BPMN — no swimlanes with pools, no event semantics. For a README, a runbook or an RFC, that limitation keeps the diagram readable.
Flowchart syntax reference
Six things carry almost all the meaning in a flowchart. Get the node shapes and the branch labels right and the diagram documents your process; get them wrong and it quietly describes a different one.
Direction
flowchart TD / LRTD runs top to bottom, LR left to right. Long approval chains read better as LR — a fifteen-step TD flow ends up taller than any slide it goes on.
Start & end
((...))Round nodes mark where the flow begins and ends. Draw every terminal state, including the unhappy ones: a flow with one exit is usually a flow missing a branch.
Process step
[...]A rectangle is something the system or a person does. Name it with a verb — "Charge the card", not "Payment" — so the diagram reads as a sequence of actions.
Decision
{...}A diamond asks a yes/no question. Phrase it as a question, and give every outgoing arrow a label; an unlabelled fork is the single most common reason a flowchart gets misread.
Labelled edge
-->|text|Text between pipes rides on the arrow. Use it for branch conditions and for loop-backs, where the label explains why the flow goes backwards.
Merge
a --> cSeveral arrows can point at the same node. Merging branches back together keeps the diagram from splitting into parallel columns that never meet.
Nothing close enough?
Describe your process in a sentence or two and let the generator draw the first version — then refine it exactly the same way.
Open the generatorFrequently asked questions
How do I change a template after importing it?
Two ways, suited to different edits. Chat is for structural changes described in words — "add an approval step before payment", "merge these two branches", "drop everything after refund issued" — and returns a redrawn flow each turn. The split-view editor is for surgical ones: fix a typo in a step, retitle a branch, reorder nodes. Most people import, talk the shape into place, then polish in the editor.
Does the assistant actually understand the imported flow?
Yes, because the template is structured data rather than a picture or a blob of text. The imported nodes and edges become the conversation's working state, so "delete the SMS step" removes that exact node and reconnects what was attached to it — the assistant is not re-guessing your diagram from a description of it.
Should my flowchart run top-to-bottom or left-to-right?
Top-to-bottom is the default and reads naturally for short flows. Switch to left-to-right when the flow is long and mostly linear — a fifteen-step vertical chart is taller than any slide it has to go on. Say "make it left to right" in chat and the direction changes without touching the steps.
What is the difference between a flowchart and a sequence diagram?
A flowchart shows the order of steps and the conditions that branch them, with no notion of who performs each step. A sequence diagram shows which participant sends which message to which other participant, over time. If your question is "what happens next", draw a flowchart; if it is "which service calls which", draw a sequence diagram.
How many steps can one flowchart hold before it stops being useful?
Readability, not the tool, is the limit. Past roughly twenty nodes people stop tracing arrows. Pull a self-contained stretch into its own diagram and link to it from the parent — several focused pictures beat one wall chart. The templates here sit deliberately just under that line.
Do I need to label every branch?
Yes, on every arrow leaving a decision. An unlabelled fork is the most common reason a flowchart gets misread: the reader guesses which side is "yes", guesses wrong, and implements the inverse. Every decision in these templates has both outgoing arrows labelled.
What export formats are supported?
SVG, PNG, and the raw Mermaid source. SVG stays sharp at any zoom, which matters for long flows; PNG pastes cleanly into slide decks and issue trackers; and the Mermaid source can be committed alongside your code so the diagram is reviewed like everything else.
Related
AI flowchart generatorStart from prose instead of a template: describe the process, get Mermaid.State diagram generatorWhen the question is "what state is it in" rather than "what happens next".Sequence diagram generatorFor flows where who calls whom matters more than the order of steps.Class diagram templatesThe same idea for structure: eight ready-made UML class diagrams.