How do I change the direction of a Mermaid flowchart?

Add the direction after the flowchart keyword: `flowchart TD` for top-to-bottom, `flowchart LR` for left-to-right, `flowchart BT` for bottom-to-top, and `flowchart RL` for right-to-left. The default is TD. Changing to LR often works better for wide process flows with many sequential steps.

What node shapes are available in Mermaid flowcharts?

Mermaid supports many node shapes: `[Text]` for rectangles, `(Text)` for rounded rectangles, `([Text])` for stadium shapes, `{Text}` for diamonds (decisions), `((Text))` for circles, `>Text]` for asymmetric shapes, and `[[Text]]` for subroutines. Choosing the right shape improves diagram readability at a glance.

Can I add labels to flowchart arrows?

Yes. Add a label between pipes on the arrow: `A -->|Yes| B` or `A -- Label --> B`. For dotted arrows with labels use `A -.->|Note| B`. Labels on decision branches (like Yes/No) are essential for making decision diamonds unambiguous.

Why does Claude or ChatGPT generate `graph TD` instead of `flowchart TD`?

`graph TD` is the legacy Mermaid syntax for flowcharts — it works identically to `flowchart TD` and is fully supported in all current Mermaid versions. Both render exactly the same way. The newer `flowchart` keyword is preferred in Mermaid v10+ documentation, but `graph` will continue to work indefinitely.

Mermaid Flowchart Viewer

Paste Mermaid flowchart code and preview it instantly. Export to SVG or PNG. Free browser-based viewer — no install required.

Mermaid Code

Preview

Enter Mermaid code to preview your diagram

Mermaid flowcharts are the most widely used diagram type in software development. They map decision trees, business processes, algorithm logic, and system workflows using nodes connected by directed or undirected edges. The syntax supports multiple layout directions — top-to-bottom (TD), left-to-right (LR), bottom-to-top (BT), and right-to-left (RL) — making it easy to match the natural reading direction of your workflow. With the rise of AI coding assistants, Mermaid flowcharts have become the default output when developers ask Claude, ChatGPT, or Gemini to illustrate a process or algorithm. Rather than switching to a GUI diagramming tool, engineers and product managers paste the generated code directly into a viewer to verify the logic before committing it to documentation or sharing it with teammates. Zolkit's flowchart viewer renders the diagram live as you type, highlights syntax errors inline, and lets you export a pixel-perfect SVG for wikis and READMEs or a 2× PNG for slide decks. Common use cases include onboarding flows, CI/CD pipeline maps, incident response runbooks, and API request lifecycles.

Related Diagrams

← Mermaid Diagram Viewer Mermaid State Diagram Viewer Mermaid Mind Map Viewer Mermaid ER Diagram Viewer

Free Online Mermaid Diagram Viewer and Exporter

Zolkit's Mermaid Diagram Viewer lets you paste any Mermaid code and see a rendered diagram instantly — no installation, no sign-up, no server uploads. Everything runs in your browser, making it the fastest way to verify AI-generated diagrams from Claude, ChatGPT, or Gemini. Supports all major Mermaid diagram types: flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, state diagrams, mind maps, Git graphs, pie charts, and timelines.

Instant Live Preview

Diagrams render automatically as you type, with a 300ms debounce so it never feels sluggish.

100% Private

All rendering happens in your browser using mermaid.js. Your code is never sent to any server.

Export SVG & PNG

Download your diagram as a crisp vector SVG or a high-resolution 2× PNG ready for docs and slides.

All Mermaid Diagram Types

Supports flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, mind maps, Git graphs, and more.

AI Diagram Ready

Built for the AI era — directly preview diagrams generated by Claude, ChatGPT, Gemini, or any LLM.

Always Free

No account needed, no usage limits, no watermarks. Zolkit's Mermaid viewer is completely free forever.

How to Preview a Mermaid Diagram

1
Paste your Mermaid code into the editor on the left — you can copy it from an AI assistant or write it manually.
2
The diagram renders instantly in the preview panel on the right. If there's a syntax error, a message explains the issue.
3
Click 'Export SVG' or 'Export PNG' to download your diagram as a file ready for documentation, slides, or sharing.