Ready-made flowchart templates
Open one for the preview and the full code, and download PNG, SVG, Word or PowerPoint right there; “Open in the editor” lets you edit the text and pick a theme before exporting.
Three steps to a finished diagram
- 1Click "Open the example and edit it" above, or open the template closest to your process in the editor
- 2Double-click a node in the preview to rename it; click a node to add a step after it, add a branch or change its shape. Or send the prompt below to an AI assistant and paste its whole reply
- 3Pick a theme, then choose Export to Word or Export to PowerPoint; for papers use the 3× PNG or the SVG
How to write a flowchart in Mermaid
Try it: copy this and paste it into the editor to render it.
mermaid
flowchart TD
A([Start]) --> B[Submit request]
B --> C{Documents complete?}
C -- Yes --> D[Review]
C -- No --> E[Add missing documents]
E --> B
D --> F{Approved?}
F -- Yes --> G[Process request]
F -- No --> H[Return with reasons]
G --> I([End])
H --> I- Start with flowchart TD (top to bottom) or flowchart LR (left to right), then one link per line: A --> B
- A node is id[Text]: square brackets give a rectangle, (Text) a rounded box, {Text} a decision diamond and ([Text]) a start or end pill
- Put branch labels on the link: B -- Yes --> C and B -- No --> D. Wrap the text in double quotes when it contains brackets or quotes
- Use letters or digits for ids and write anything in the text; the second time an id appears you can leave the text out
Ask an AI for your own version with this structure
Send the prompt below to ChatGPT or Claude with the parts in [brackets] replaced by yours, then paste the whole reply into the editor; the code inside is detected automatically.
prompt.txt
Draw a flowchart with Mermaid flowchart TD syntax. The process is [process name] and the steps are: [step 1 → step 2 → …]. [One step] is a decision drawn as a diamond: "Yes" goes to [...], "No" goes to [...]. Use the pill shape ([Text]) for start and end, square-bracket rectangles for ordinary steps, and letters for node ids. Output only the mermaid code block.
Frequently asked questions
- What do the diamond, rectangle and rounded shapes mean in a flowchart?
- By convention a pill marks the start and end, a rectangle is a process step, a diamond is a decision with two or more exits, and a parallelogram is input or output. In Mermaid they are written ([Text]), [Text], {Text} and [/Text/].
- Can I export a flowchart straight to Word or PowerPoint?
- Yes. Export to Word or Export to PowerPoint gives you a file with a high-resolution image and the Mermaid code appended at the end, so you can paste the code back later, change a step and export again. Export runs in your browser and nothing is uploaded.
- My flowchart is too long for one page. What can I do?
- Try switching the direction from TD to LR first; a horizontal layout fits slides better. If it is still long, split it into several diagrams of 10 to 15 nodes each, or group related steps with subgraph so the structure reads first.
- The flowchart code from an AI assistant throws an error. Now what?
- Paste the whole reply into the editor. Common problems such as full-width brackets, a missing end or a mistyped arrow get a one-click "Fix it". When that is not enough, AI fix can rewrite the code. The help center lists each common error and its cause.
- Flowchart or swimlane diagram: which one do I need?
- Use a flowchart when only the order of steps matters. Use a swimlane diagram when you also need to show which role or team owns each step. In Mermaid a swimlane diagram is a flowchart with one subgraph per role; there is a separate swimlane template page.