Mermaid Diagram Editor

Turn text into diagrams. Preview as you type, make it yours, and take it anywhere.

Mermaid code

flowchart TD
    A[Drop a file] --> B{index.html?}
    B -- Yes --> C[Published!]
    B -- No --> D[Add an index.html]
    D --> A

Paste Mermaid code or a Mermaid Markdown block. Ctrl/⌘ + Enter to render.

Editing stays in this browser. Only Publish uploads a page.

Loading diagram preview…

Loading renderer…

Give your diagram a link

Publish the current diagram as a public web page, ready to share. Free, no account needed. Your link opens once the safety checks pass.

Small tips. Better diagrams.

Learn by changing a working example. Click a preview to open its full Mermaid code in the editor above.

Give colours a meaningDefine reusable node styles with classDef, then apply them with :::. Use colour for meaning: blue for work, green for success, and peach for a decision.Break a big flow into groupsUse subgraph to group related steps. flowchart LR reads left to right; switch to TD for a taller layout. Keep node labels short and descriptive.Make decisions easy to followCurly braces create a decision diamond. Put conditions on arrows with |Yes| and |No|, and use a rounded node for the start of a process.Explain a conversation step by stepSequence diagrams show who sends each message. Add autonumber to make steps easy to reference, and alt / else to show success and failure paths.Describe states, not just stepsUse stateDiagram-v2 for lifecycles such as orders or tasks. [*] marks the start or finish; text after a colon explains what triggers a transition.Turn a plan into a timelineGantt charts show dates and dependencies. Use after to link tasks, crit to highlight the critical work, and milestone for a launch or deadline.

Explore Mermaid syntax with examples for flowcharts, sequence diagrams and state diagrams.

New to Mermaid? Read the guide with examples and a video walkthrough →

About the Mermaid Diagram Editor

The Pagelet Mermaid diagram editor turns plain-text Mermaid syntax into flowcharts, sequence diagrams, class diagrams, gantt charts and more. Rendering and draft storage happen in your browser with the official Mermaid v11 library. Try the clickable examples below to learn colour styling, groups, decisions and timelines. Download your diagram or choose Publish diagram to turn it into a public HTML page with a shareable link. It’s free and needs no signup.

How to use it

Write or paste Mermaid code, including Mermaid Markdown blocks, or choose one of seven starter diagrams.
The preview updates as you type, with syntax errors reported inline. Turn off Live preview to render manually with the Render button or Ctrl/Command + Enter.
Choose a theme and use the zoom controls to inspect your diagram. Your draft is saved locally in this browser.
Download a PNG image for easy sharing, download or copy the SVG for docs and slides, or download the Mermaid source to edit later.
To share a web page, give your diagram an optional title and press Publish diagram. Pagelet creates an HTML page from the current preview and makes it available after safety checks.

Frequently asked questions

Is the Mermaid editor really free?

Yes — the editor and downloads are free, with no account needed. Publish diagram creates a public page using Pagelet’s free hosting. Unclaimed guest pages are removed after 30 days; sign in from the same browser to claim and manage yours.

Which diagram types are supported?

Everything Mermaid 11 supports: flowcharts, sequence diagrams, class diagrams, state diagrams, entity-relationship diagrams, gantt charts, pie charts, mindmaps and more.

Do you store my diagrams?

Editing and previews stay in your browser, and drafts are saved locally. Only pressing Publish diagram uploads an HTML page containing your rendered diagram to Pagelet. That page is public after safety checks. You can also download a PNG image, SVG or editable Mermaid source. Download important work because browser storage may be cleared.

How do I share a Mermaid diagram as a link?

Render your diagram, add an optional title, and press Publish diagram. Pagelet creates a self-contained HTML page with the diagram embedded as an image, so viewers don’t need Mermaid or an editor to open it. The link becomes available after the page passes safety checks.

Part of the free pagelet tool set — no account needed.