About this tool
Flowchart & Diagram Maker turns short, readable text into a proper diagram. You write lines like “Order --> Payment OK?” and the picture redraws as you type, with boxes, arrows and labels laid out for you. It understands Mermaid, the text format GitHub, GitLab, Notion and many wikis already use, so anything you write here can be pasted straight into a README or a doc page.
It is made for developers sketching how a system fits together, students drawing a process for an assignment, and anyone who has given up dragging boxes around in a drawing app. Start from one of nine templates (flowchart, sequence, class, state, ER, Gantt, pie, mindmap and timeline), flip a flowchart sideways with one tap, and zoom in on big diagrams. If a line has a mistake, the editor marks that exact line in red and says what looks wrong in plain words.
Everything runs inside your browser. Your diagram text never leaves your device, there is no account, no watermark and no limit on how many diagrams you make. The drawing engine only downloads when you open this page, so it stays quick everywhere else.
How to use Flowchart & Diagram Maker
- Pick a starting point from the “Template” menu, or type your own Mermaid code in the “Mermaid code” box.
- Edit the text: the preview redraws a moment after you stop typing. If something is wrong, read the red message and press “Show me the line”.
- For flowcharts, class, state and ER diagrams, choose a “Direction”: Down, Right, Up or Left.
- Choose “Colours”: Match site follows the light or dark look of this page; Night, Day, Mermaid classic and Grey are fixed.
- Use the − and + buttons, Fit, dragging or pinching to look closely at the preview.
- Under “Save or share”, pick a PNG size and press “Download PNG”, “SVG”, “Copy image” or “Copy share link”.
Typing “flowchart LR”, then “A[Idea] --> B{Worth it?}”, “B -->|Yes| C[Build it]” and “B -->|No| D[Park it]” on the next lines draws a four-box decision chart. At 2× the PNG comes out at twice the size shown under “PNG size”, sharp enough for slides.
Features
- Live preview of Mermaid diagrams: flowcharts, sequence, class, state, ER (database), Gantt, pie, mindmap, timeline and more.
- Nine ready-made templates with realistic examples you can edit.
- Code editor with line numbers, colour highlighting and Tab to indent.
- Mistakes pinned to the right line, with a plain-English hint and Mermaid’s own message underneath.
- One-tap direction switch (top-down, left-right, bottom-up, right-left) that rewrites the code for you.
- Brand-matched Night and Day colour themes, plus Mermaid classic and a grey print theme.
- Zoom and pan: buttons, mouse drag, Ctrl + scroll, trackpad or two-finger pinch, and the keyboard (+, −, 0 and arrow keys).
- Export as SVG or PNG at 1×, 2× or 4×, with or without a background, or copy the picture straight to the clipboard.
- Share links that carry the whole diagram, compressed, inside the link itself. Nothing is stored on a server.
Tips and good to know
- Put text with brackets, quotes or symbols inside double quotes, like A["Total (inc. VAT)"], so Mermaid reads it as a label.
- Lines starting with %% are comments: handy for notes that shouldn’t appear in the picture.
- For slides and documents, the SVG stays sharp at any size. Use PNG at 2× or 4× when an app won’t accept SVG.
- Your last diagram is remembered in this browser, so closing the tab by accident doesn’t lose it.
- Mermaid’s maths labels and clickable links are not supported here; everything else in the Mermaid guide works.
Frequently asked questions
Is my diagram uploaded anywhere?
No. The text and the picture are made inside your browser and never sent to us or anyone else. Even a share link keeps the diagram in the part of the address after the # sign, which browsers do not send to websites.
Is it free? Are there limits?
It is completely free, with no sign-up, no watermark and no daily limit. The only limit is Mermaid’s own: one diagram can hold up to 50,000 characters of text.
Does it work on a phone, iPhone or offline?
Yes, it works in Safari and Chrome on phones and tablets: pinch with two fingers to zoom the preview. Each diagram type downloads its drawing code the first time you use it; after that, editing and exporting that type keeps working without a connection.
What is Mermaid?
Mermaid is a free, open-source way to describe diagrams in plain text. GitHub, GitLab, Notion, Obsidian and many documentation sites draw Mermaid code automatically, so the text you write here works there too.
Why does it say there is a mistake on a line?
Mermaid stopped understanding your text at that point. The usual causes are a missing arrow, an unclosed bracket or quote, or a word Mermaid treats as special. Press “Show me the line” to jump there; the preview keeps showing your last working version meanwhile.
Can I edit the SVG in Figma, Illustrator or Inkscape?
Yes. Labels are saved as real text rather than images, so they stay sharp and editable. Fonts fall back to common system fonts such as Trebuchet MS or Arial.
Can I add diagrams to a README on GitHub?
Yes. Press “Copy code” and paste it into your Markdown inside a code block that starts with ```mermaid. GitHub draws it for you, so you don’t need to upload a picture at all.
Page last reviewed