Mermaid Flowchart Maker
Build flowcharts by dragging shapes on a canvas or by writing Mermaid code, and TryMermaid keeps both in sync. Start from the example below, then export PNG or SVG or share a link.
Updated · Editable on the visual canvas
Flowchart example
Rendering preview…
flowchart TD
A[Order received] --> B{Is it paid?}
B -->|Yes| C[Pack items]
B -->|No| D[Send payment reminder]
D --> B
C --> E([Ship order])What is a flowchart?
A flowchart is a diagram that shows the steps of a process as shapes connected by arrows. Rectangles are steps, diamonds are decisions, and the arrows show the order things happen in. In Mermaid you describe a flowchart as text that starts with the flowchart keyword and a direction.
When to use a flowchart
- Documenting a business or approval process
- Explaining the logic of an algorithm or function
- Mapping user journeys and checkout flows
- Troubleshooting guides and decision trees
How to make a flowchart in Mermaid
- Step 1
Open the editor
Open TryMermaid with the example on this page, or start a new diagram with flowchart TD (top to bottom) or flowchart LR (left to right) on the first line.
- Step 2
Add steps and decisions
Drag rectangles and diamonds onto the canvas and rename them in place, or type nodes such as A[Start] and B{Approved?} in the code panel.
- Step 3
Connect the shapes
Connect two shapes on the canvas, or write A --> B in code. Add a label to a link with A -->|Yes| B.
- Step 4
Export or share
Download the flowchart as PNG or SVG, copy it to your clipboard, or copy a share link that keeps your layout.
Flowchart syntax cheat sheet
| Element | Syntax | What it does |
|---|---|---|
| Direction | flowchart TD | LR | BT | RL | Top-down, left-right, bottom-top or right-left layout |
| Step | A[Text] | Rectangle |
| Rounded step | A(Text) | Rounded rectangle |
| Decision | A{Text} | Diamond |
| Start or end | A([Text]) | Stadium (pill) shape |
| Database | A[(Text)] | Cylinder |
| Arrow | A --> B | Solid link with an arrowhead |
| Labelled arrow | A -->|Yes| B | Link with text on it |
| Dotted arrow | A -.-> B | Dotted link |
| Group | subgraph Title … end | Box around related nodes |
Flowchart FAQ
Can I make a Mermaid flowchart without writing code?
Yes. In TryMermaid, flowcharts can be built entirely on the drag-and-drop canvas. Every shape and connection you add is written to Mermaid flowchart code automatically, so you can switch to the code panel at any time.
What is the difference between graph and flowchart in Mermaid?
They draw the same kind of diagram. graph is the original keyword and flowchart is the newer one, which supports newer features such as extra shapes and edge options. Use flowchart for new diagrams.
How do I change the direction of a flowchart?
Change the direction after the keyword on the first line: flowchart TD draws top to bottom, LR left to right, BT bottom to top and RL right to left.