A free online diagram tool for developers

A free online diagram tool, in the sense that matters on a Tuesday, is one you can open and use before you create an account. MermaidViewer’s editor does that: paste Mermaid, watch the live preview, and export a PNG. The PNG on the free plan is 1x and carries a small watermark. That’s the honest version of free, and the rest of this page is what sits on either side of that line.

I’m writing this for the person who already decided they want a diagram and is now trying to find the catch. There is a catch. It just isn’t a signup wall in front of the canvas.

What you get with the tab open and no account

You get the editor. You can paste a flowchart or a sequence diagram, edit the text, and see the picture update. There’s no “start a trial” step before the first box appears. I care about that because most of my diagrams start as a fragment in a ticket, and I want to know if the fragment renders before I decide it’s worth keeping.

Live preview is the whole loop. Change a label, look at the diamond, change the label again. You don’t export to find out you swapped Yes and No. I still export too early sometimes, and the watermarked PNG on my desktop is how I remember I was impatient.

Templates are there when the blank file is the problem. A template is a finished diagram you can ruin on purpose. I start from one when I know the shape and not the words, then I replace every label before I trust it. A login template with your product’s names still in the sample is how you ship somebody else’s flow. Read it.

You can also share a link once a diagram is saved. Sharing is a step past the anonymous tab. The free plan’s sharing is basic, one public link, and that’s enough for a review thread. It is not a workspace with comments from your whole company. If you needed that, you already know.

AI sits in the same free bucket, with a hard cap. Five uses total. Generate, edit, and fix all spend them. I’ll come back to that, because “free AI” is the phrase that gets people in trouble.

The paid line is a file format and a quota, not a better language

Starter is $6.99 a month. Pro is $11.99 a month. Those are our prices. I’m not going to invent a comparison against someone else’s SKU and call it research.

What you pay for is specific.

PNG exists on every plan. Free is 1x with a small watermark. Starter is watermark-free PNG up to 4x, which is the export I actually want in a slide. A 1x watermarked image is fine in a scratch doc and embarrassing in a customer deck. I learned that by pasting one into a review and getting a comment about the watermark before anyone mentioned the logic. Fair. The logic was also wrong, but they saw the mark first.

Starter’s card also includes more AI than the five lifetime uses: 500 conversations a month, plus a larger pile of saved diagrams and version history. I mention the number because “more” is how people get surprised. Five hundred is a lot if you prompt once per diagram and edit by hand. It is not a lot if you regenerate a chart every time a label changes.

Pro is where JPG, SVG, and PDF show up. SVG is not on the free plan and it is not on Starter. If a doc site needs a vector file, that’s a Pro export. The pricing page calls Pro’s AI unlimited, and the product still has a fair-use cap so a script can’t drain it. The free plan is not that deal. Free is five uses, total. I don’t want anyone to read “unlimited” on a paid card and assume the anonymous editor works the same way.

The pricing page is the list I trust when I forget which format sits on which plan. This post will drift if we change a number. The page shouldn’t.

It will not draw a free-form poster

This is the part people skip, then they’re annoyed. MermaidViewer will not be a free-form drawing app. There’s no stencil of clouds and cylinders you drag onto an infinite canvas. You don’t get connectors that you route by hand around a logo. If your job today is a poster with a mascot and a dotted line that has to dodge a photograph, this is the wrong tool, and a text diagrammer isn’t going to grow that feature because you asked nicely.

What it will do is diagrams as code. Flowcharts, sequence diagrams, and the other Mermaid types. The layout comes from the text. You can nudge by changing direction, splitting a chart, or shortening a label. You can’t grab a box and park it 40 pixels to the left because the slide grid demands it. I like that constraint. A teammate who “just moved one box” in a drag tool is the reason the next person can’t tell whether the arrow still means something.

If you want the drag habit, keep it for the poster. If you want a chart that survives git, type it. The editor is the place that trade is obvious: the text and the picture sit together, and the picture loses when they disagree.

A flowchart you can paste before you sign up

Here’s a billing run I use when I’m showing someone the free editor. No account required. Paste it, break a label, watch the preview complain, fix the label.

flowchart TD
    cron[Nightly job] --> load[Load open invoices]
    load --> due{"Past due?"}
    due -->|No| skip[Leave it]
    due -->|Yes| charge[Charge the card]
    charge --> ok{"Charge ok?"}
    ok -->|Yes| mark[Mark paid]
    ok -->|No| retry[Schedule retry]

The job loads invoices, asks whether each one is past due, and only then talks to the card. The second diamond is the one people forget. “Charge the card” is not a success. It’s an attempt. I once shipped a chart where the charge box pointed straight at “mark paid,” and support spent a morning marking failures as paid because the picture said so. The picture was the spec they had. The code had a retry. Those two facts diverged because I got lazy with the No path.

A free tool that renders this in the browser is enough for that argument. You don’t need a watermark-free PNG to convince a teammate the arrow is wrong. You need the arrow. Export when the arrow is right and the destination cares about pixels.

The AI diagram generator will draft this from a sentence if you’d rather not type the diamonds. Spend a use only after the sentence names both questions. “Diagram billing” will add a dunning team, a ledger, and a forgiveness policy you don’t have. I’ve seen that draft. It looked like a product. It was a vocabulary list.

The same system as a conversation

A flowchart hides who talks. If the review question is “does our app call the card service, or does the ledger,” I switch types. Same story, different picture.

sequenceDiagram
    participant Job as Job
    participant API as API
    participant Card as Card
    Job->>API: Due invoices
    API-->>Job: Invoice list
    Job->>Card: Charge
    alt approved
        Card-->>Job: OK
        Job->>API: Mark paid
    else declined
        Card-->>Job: No
        Job->>API: Schedule retry
    end

Job asks API for the list, Job calls Card, Card answers, Job writes the result back. The alt is the second diamond from the flowchart, written as a reply instead of a box. I keep both diagrams when both questions are live. I don’t merge them into one monster. A monster chart is how “free” starts to feel expensive: you stare, you regenerate, you spend uses trying to make one picture hold two jobs.

Sequence syntax has its own traps, and I’m not teaching them all here. The point is you can paste this into the same free editor and get a preview. The tool didn’t become a different product because the first line says sequenceDiagram.

What I refuse to pretend this replaces

I won’t tell you to throw away a whiteboard. A whiteboard is faster when three people are still arguing about the policy. Type the chart after the argument, when the diamonds have names. Typing during the argument is how you fossilize a guess.

I also won’t tell you this replaces a design tool for UI. A screen flow with pixel-perfect frames is a different job. A flowchart of “user hits save, server says no” is this job. If you mix them, you get a tiny phone drawn out of rectangles and a teammate who thinks you offered to do mockups. You didn’t.

The editor comparison is where I’d look if you’re choosing among text tools and you want the tradeoffs in one place. I’m biased, I work on this one, and I still think the useful comparison is “does it render the file I already have in the repo,” not “which landing page has the rounder buttons.” Bring a real diagram. Paste it. See what breaks.

Related reading on this site, if you’re still sorting out the free path: creating a diagram online without paying, the diagram tool free notes, a flowchart online tool roundup of approaches, and the visual editor if you want to know what the canvas can and can’t drag.

A scratch PNG is not the archive

I keep the Mermaid in the repo and treat the PNG as a disposable view. The free export makes that easy to forget, because a file landed in your downloads folder and it feels like the deliverable. It isn’t. The 1x watermarked image goes stale the moment someone edits the text, and nobody regenerates it. Two weeks later the slide and the source disagree, and the slide wins the argument because it was in the deck. I’ve lost that argument. The retry path was in the source. The slide still showed a straight line to “mark paid.”

So the habit is: link the source, or paste the fenced block, and export only when a tool in the chain can’t render Mermaid. If the destination is a pull request, the fence is enough. If the destination is a slide for a customer, pay for the clean PNG or accept the watermark on purpose. Don’t keep a downloads folder of unnamed exports and call it version control. You will attach diagram (3).png and it will be the draft with the Slack box still in it.

Sharing has the same trap. A public link shows the current diagram, which is what you want in a review, and it’s a surprise if you thought the link froze the picture. Say that in the message: “this link tracks the file.” If you needed a frozen picture, you wanted the export. Free gives you one public link when you save, which is plenty for a single review and awkward when you wanted a link per version. Version history is a paid feature. On free, the history is git, if you put the text there.

How I decide to stay on free

I stay on the free plan when the diagram lives in git, the PNG is only for me, and I can count my AI uses on one hand for the quarter. I pay when a customer-facing deck needs a clean PNG, or when SVG has to go into a docs site, or when five uses are gone and I still want the model to draft. Those are different reasons. “I might want them later” is how you buy a plan you don’t open.

One more mistake I keep seeing: people export the watermarked PNG, email it, and then try to crop the mark off in a screenshot. Don’t. The mark is the plan telling you the truth. Either the scratch image is acceptable or you want Starter’s clean PNG. Cropping is how a fuzzy 1x image gets fuzzier.

If you just need the chart on the page, open the editor and paste. The account can wait until you care about saving, sharing more than a scratch file, or a PNG you’d put in front of a customer.