SimpleMermaid

graph TD — scroll to render

Text in.
Diagram out.

SimpleMermaid is a fast, distraction-free Mermaid.js editor. Write plain text, watch it become a diagram — no login, no backend, fully local.

Start Creating

64 templates · draw & highlight · PNG / SVG / PDF export · 100% in your browser

↓ Scroll — dive into the flow

01 — write

If you can type,
you can diagram.

A flowchart is six lines of plain syntax. Version it, diff it, paste it in a PR.

graph TD
  A[Idea] --> B[Write plain text]
  B --> C{Mermaid parses}
  C --> D[Live preview]
  C --> E[Export SVG · PNG]
  C --> F[Share a link]

02 — render

Preview updates as you type.

Every keystroke re-renders instantly in your browser. Zoom it, theme it, tab between diagrams — it always keeps up.

03 — branch out

Flowcharts, sequences, gantts & more.

64 ready-made templates for every kind of team — docs, architecture reviews, client decks, teaching.

the whole picture

No signup. Nothing leaves your browser.

Offline-ready, privacy-first, and free. Your diagrams live where you do.

Start Creating Learn Mermaid

3,000+ developers monthly64 templates0 accounts required

Explore every feature & all 64 templates →

What is SimpleMermaid?

A free, browser-based editor that turns plain text into diagrams.

SimpleMermaid is a free, browser-based editor for Mermaid.js diagrams. You write a few lines of plain text, and it turns them into a flowchart, sequence diagram, Gantt chart, class diagram, state diagram or entity relationship diagram, with a live preview that updates as you type.

Because a diagram is just text, you can keep it in version control, review changes in a pull request and paste it straight into documentation. There is no account to create and nothing to install: everything runs in your browser, so your diagrams stay with you.

Open the editor See all templates

How to create a Mermaid diagram

Four steps from blank page to shareable diagram.

  1. 1

    Open the editor

    Go to SimpleMermaid.com and click 'Start Creating' to open the diagram editor.

  2. 2

    Choose a diagram type

    Start with flowchart TD for top-down flowcharts, sequenceDiagram for sequence diagrams, or gantt for Gantt charts.

  3. 3

    Add content

    Type your diagram code in the editor. Use brackets for nodes [Like This] and arrows --> for connections.

  4. 4

    Share or export

    Click 'Share' for a shareable link, or export to PNG, SVG, PDF or Markdown.

New to the syntax? The Mermaid syntax tutorial and the beginner's guide walk through it step by step, and the editor includes 64 ready-made templates you can open and adapt.

Diagrams for every kind of team

Everything Mermaid.js can draw, with guides for each type.

flowchart TD

Flowcharts

Map processes, decisions and workflows with nodes and arrows.

Flowchart best practices →

sequenceDiagram

Sequence diagrams

Show how services, APIs and people exchange messages over time.

Sequence diagrams for microservices →

gantt

Gantt charts

Plan sprints and releases with tasks, dependencies and milestones.

Gantt charts for project management →

erDiagram

Entity relationship diagrams

Describe database tables and how they relate to each other.

ER diagrams explained →

stateDiagram-v2

State diagrams

Model the states of a UI or system and the transitions between them.

State diagrams for UI design →

architecture · threats

Architecture & threat models

Document systems, trust boundaries and attack paths as code.

Architecture diagrams →
Threat modeling templates →

Want inspiration first? Browse the diagram gallery, read the best practices guide or see real-world use cases.

Mark it up like a whiteboard

Circle the risky service, highlight the happy path, then export the diagram with your marks on it.

  • Highlighter and pen. Six colors, an eraser, and undo/redo. Press D and start drawing right on top of your diagram.
  • Marks stay put. Zoom in, drag the canvas with the right mouse button, resize the window. Your highlights stay exactly where you drew them.
  • Export with your drawings. PNG, SVG and PDF include your marks. Prefer a clean copy? Untick one box.
  • Still private. Drawings are saved in your browser with the tab, like everything else.
Try drawing in the editor

Why people use SimpleMermaid

Fast, private and free, with nothing between you and the diagram.

Private by design

Diagrams are rendered and stored in your browser. Sharing encodes the diagram in the link, with no upload and no account.

Instant preview

Every keystroke re-renders, with zoom, tabs for several diagrams, and light and dark themes.

Share with a link

Anyone who opens the link sees your diagram and can edit their own copy.

Export anywhere

Download PNG for slides, SVG for scalable graphics, PDF for documents, or Markdown with a ready-to-paste mermaid code block.

Free

No registration, no limits, no watermarks.

Great diagrams start as plain text.

Comparing tools? Read Mermaid vs draw.io to see when text-based diagrams beat drag-and-drop, and how diagrams as code fits into a developer workflow.

Frequently asked questions

Quick answers about the editor, sharing and privacy.

What is SimpleMermaid?

SimpleMermaid is a free online Mermaid.js diagram editor that lets you create flowcharts, sequence diagrams, Gantt charts, and more with instant sharing and export capabilities. No login required.

How do I create a flowchart online?

Use SimpleMermaid's online editor to create flowcharts instantly. Type 'flowchart TD' to start, add nodes with brackets like [Start], and connect them with arrows -->. Live preview shows your diagram in real-time.

Can I export diagrams to PNG or SVG?

Yes, SimpleMermaid allows you to export your diagrams to PNG for presentations or SVG for scalable graphics. Click the export buttons in the editor toolbar.

Is SimpleMermaid free to use?

Yes, SimpleMermaid is completely free. No registration, no limits, no watermarks. Create unlimited diagrams and share them with anyone.

Which diagram types does SimpleMermaid support?

Everything Mermaid.js supports, including flowcharts, sequence diagrams, class diagrams, state diagrams, entity relationship diagrams, Gantt charts and user journeys. The editor ships with 64 ready-made templates to start from.

Are my diagrams uploaded to a server?

No. Diagrams are rendered and stored in your browser. When you share a diagram, the whole diagram is compressed into the link itself, so there is nothing to upload and no account to create.

How do I share a Mermaid diagram?

Click Share in the editor to get a link. The diagram is encoded in the URL, so anyone who opens the link sees exactly what you made and can edit their own copy.

Can I highlight or draw on my diagram?

Yes. Press D (or click the highlighter button) in the editor to draw on top of your diagram with a highlighter or pen in six colors, with an eraser and undo/redo. Drawings stay aligned when you zoom or pan, and PNG, SVG and PDF exports include them unless you untick Include my drawings.

More questions and answers →