A Mermaid editor that keeps your diagrams and exports PNGs that actually have labels

Mermaid is the nicest way I know to keep a diagram next to the code it describes: it is plain text, it diffs, and GitHub renders it in a README. The annoying part is everything around it — drafting a diagram somewhere you can see it, keeping more than one around, and getting an image out for a slide or a ticket. The Mermaid Editor on Omikuji Tools is a browser page for exactly that.

Type on the left, see it on the right

Write Mermaid code in the editor and the preview redraws as you type (it waits a moment after your last keystroke, so a half-finished line does not flicker errors at you). Flowcharts, sequence diagrams, ER diagrams, Gantt charts — whatever Mermaid itself supports. When the syntax is wrong, the preview shows Mermaid's own error message instead of a blank box.

The preview behaves like a map: scroll the wheel to zoom around the cursor, double-click to zoom in, drag to pan, and one button fits the whole diagram back into view. For a wide diagram you can hide the editor panel and give the preview the full width.

More than one diagram

The sidebar is a file list. Each diagram gets a title and is saved in your browser's local storage, so you can keep the architecture overview, the login sequence and the migration Gantt chart side by side and come back to them later. Nothing is sent to a server; the page only needs the network to load in the first place.

Export: SVG, or PNG with or without a background

The download menu saves an SVG, a PNG with a transparent background, or a PNG on white. You can also copy the SVG, or the Mermaid code itself, to the clipboard. Files are named after the diagram's title.

Two details I cared about. PNGs are drawn at twice the diagram's size, capped at 8192 pixels on the long side, so they stay sharp on a slide without becoming enormous. And flowchart labels are rendered as plain SVG text rather than embedded HTML — converting an SVG with HTML labels to a PNG can silently drop the text in some browsers, and a flowchart of empty boxes is not much use.

Pasting diagrams from elsewhere

A lot of Mermaid gets copied from a wiki or a colleague's README. The editor runs Mermaid in its strict security mode, which sanitizes the output and blocks things like javascript: links in click handlers — the sensible default when the code came from somewhere else.

One caveat the page states itself: some beta diagram types, such as sankey-beta, may fail to parse non-ASCII characters. If you hit an error there, try ASCII labels.

If the diagram belongs in a longer document, Markdown Preview handles the prose: GitHub-flavoured Markdown with a live preview, auto-saved in the browser, and exported to PDF.

👉 Mermaid Editor — free, no sign-up, diagrams stay in your browser.

Comments

Post a Comment

Popular posts from this blog

Amidakuji (Ghost Leg) maker: a fair random pairing tool for up to 200 people, entirely in the browser

Image
Amidakuji is the Japanese ladder lottery: names go along the top, prizes or roles along the bottom, and each person traces a path down a ladder with random rungs. Every name lands on exactly one result, and nobody can predict it. Offices in Japan use it for seating, task assignment and drawing lots. I built a browser version that works for up to 200 people. How it works Enter names (and optionally results). Paste a column from a spreadsheet and the rows fill in automatically; tab-separated "name → result" pairs work too. Press Draw and watch each path animate down the ladder, or reveal them one at a time. Nothing is sent to a server. The whole lottery (names, results, and the random seed for the rungs) lives in the URL after the # , so you can hand the link to others and they will open exactly the same ladder. Cheat prevention : turn it on and the results stay hidden until every path has been traced. Redrawing changes the seed, so a new link means a new draw. Share...
Read more

omikuji.dev: free browser-based tools, puzzle games and reference sites made in Japan

Image
This blog is where I post news about the sites I build and run under omikuji.dev . Everything is free, needs no sign-up, and wherever possible runs entirely in your browser so that nothing you type or drop into a page ever leaves your device. What is there Omikuji Tools — about 130 small web tools: timers and clocks, a ladder lottery, PDF and audio converters, text converters, network checks (SSL certificate, DNS, IP address), calculators and print templates. Most are available in 12 languages. omikuji games — 105 browser games (puzzles, logic, arcade, brain training, play against the CPU, and games for small children). Everyone gets the same daily puzzle and can post to that day's leaderboard. Japanese only for now. Reference sites — a kaomoji dictionary (59,000 Japanese text faces), an emoji dictionary, a dictionary for the Japanese word game shiritori , traditional colors of the world with sources, and a guide to etiquette mistakes travelers make abroad. These are in Ja...
Read more

Hakarasenai: a Firefox extension that only stops Google Analytics from measuring you

Image
The second piece of software I publish is Hakarasenai , a Firefox extension for desktop and Android. The name means "won't let it measure", and that is the entire feature list: it stops Google Analytics from measuring you. Free, MIT licensed, on addons.mozilla.org (v1.2.0). Why it exists Google ships an official "Google Analytics Opt-out Add-on", and there is a Firefox build of it. The trouble is how it works: it injects a <script> element into the page, and Firefox, like Safari, applies the page's own Content Security Policy to content scripts. On any site with a strict CSP the injection is blocked and the opt-out quietly does nothing. Nothing tells you it failed, which is the worst failure mode a privacy tool can have. I ran into this while trying to keep my own visits out of the GA4 properties of my sites, and wrote this instead. Two layers It tells the Google Analytics code on the page that you have opted out, using the same official hook...
Read more