Skip to main content

Visual builder + Mermaid code

Create a Mermaid flowchart without the blank canvas.

Add steps, decisions, and labeled connections with simple controls. The Mermaid code and live preview stay in sync, ready to copy or export.

Open flowchart editor Read the quick guide
No signup Local browser rendering SVG · PNG · PDF · Markdown

Start with a working structure

Choose a flowchart template.

Nodes

0 nodes

Name each step and choose the shape that best explains its role.

Connections

0 connections

Connect steps, label branches, and choose a line style.

Live Mermaid preview

Flowchart preview

Preparing diagram…

Use Ctrl/⌘ + wheel to zoom the canvas.

100%
Private · local render

Building your first preview…

Mermaid loads only on this editor page.

Preparing flowchart editor…

Expanded preview

Mermaid flowchart

100%

Three-minute workflow

From a rough process to clean Mermaid syntax.

Start visually, check the generated code when you need precision, and export only after the diagram reads clearly.

01

Choose the reading direction.

Use top-to-bottom for decision trees and left-to-right for compact processes. The layout engine handles the spacing.

02

Name nodes before styling.

Write short, specific labels, then use diamonds for questions and stadium shapes for clear start and end points.

03

Label only meaningful branches.

Add “Yes,” “No,” or a short condition where paths split. Unlabeled arrows keep routine transitions quiet.

Core Mermaid flowchart syntax

Readable text that stays versionable.

A flowchart begins with a direction, declares nodes, and connects their IDs with arrows. The visual builder writes this structure for you, while code view remains available for subgraphs, custom classes, and other advanced Mermaid features.

Open the Mermaid flowchart reference 
flowchart TD
  A(["New request"])
  BUrgent?
  C["Page on-call"]
  D["Add to queue"]

  A --> B
  B -->|Yes| C
  B -.->|No| D

A free Mermaid flowchart maker for documentation and process maps

This Mermaid flowchart editor combines a beginner-friendly visual builder with the plain-text workflow developers expect from Mermaid. Instead of memorizing every bracket and arrow before you can begin, choose a working template, rename the nodes, select their shapes, and connect the steps. The tool generates valid Mermaid flowchart syntax while you work and renders a live SVG preview beside the editor.

Build process maps, decision trees, and technical workflows

Flowcharts are useful whenever a sequence contains actions, decisions, or alternate outcomes. Map a customer-support escalation, an approval process, a deployment checklist, an API request, a user onboarding path, or a troubleshooting guide. Use a process rectangle for an action, a diamond for a question, a database cylinder for stored data, and a start/end shape to make the boundaries obvious.

Visual editing with Mermaid code when you need it

The visual editor is designed for the common parts of a Mermaid flowchart: node labels, shapes, direction, arrows, and edge labels. Switch to code view to inspect or refine the generated source. If you paste advanced Mermaid statements, the diagram can still render in code view; the editor flags syntax it cannot safely map back to visual controls so you know when a visual change would normalize the source.

Export a flowchart for docs, slides, and README files

Download SVG when the diagram needs to stay sharp on a documentation site, PNG for chat or slide software, and PDF for reports or printing. Copy raw Mermaid code for a compatible editor, or download a Markdown file containing a fenced mermaid block for GitHub, GitLab, Obsidian, and other Mermaid-aware tools. For a general-purpose viewer that supports more diagram types, use the Mermaid Editor.

Private by default

The editor loads Mermaid in your browser and performs rendering locally. Diagram names, internal process labels, and architecture details are not uploaded to a rendering service. A local draft is saved in browser storage so an accidental refresh does not discard your latest visual state.

Frequently Asked Questions

Can I make a Mermaid flowchart without writing code?

Yes. Use the visual builder to add nodes, choose process or decision shapes, and connect each step. The editor writes clean Mermaid flowchart syntax automatically.

Can I edit the generated Mermaid code?

Yes. Switch to the Mermaid code tab at any time. Supported node and connection syntax syncs back to the visual builder. Advanced Mermaid statements still render in code view, and the editor warns before a visual edit would normalize them.

Which flowchart directions are supported?

You can arrange a diagram from top to bottom (TD), left to right (LR), bottom to top (BT), or right to left (RL). Change the Direction control and the preview updates automatically.

Which flowchart shapes can I use?

The visual editor supports process rectangles, rounded steps, start/end stadiums, decision diamonds, circles, database cylinders, and subroutine shapes.

Can I export the flowchart as an image?

Yes. Download the rendered flowchart as scalable SVG, high-resolution PNG, or PDF. You can also copy raw Mermaid code or download a Markdown file with a fenced Mermaid block.

Is my flowchart uploaded anywhere?

No. Editing, previewing, draft storage, and export happen locally in your browser. The flowchart content is not sent to a rendering server.

More Markdown Tools

PDF to Markdown DOCX to Markdown HTML to Markdown CSV to Markdown TXT to Markdown ZIP to Markdown JSON to Markdown XML to Markdown XLSX to Markdown Markdown to PDF Markdown to DOCX Markdown to HTML Markdown Editor URL to Markdown Markdown to Plaintext Mermaid Editor Pie Chart Maker Markdown Table Generator Mermaid Timeline Generator