Home / Diagramming / Mermaid diagram
Mermaid diagram
Paste Mermaid code in and it renders into a diagram locally in real time; syntax mistakes are reported with a line number and the reason while the last good diagram stays on the canvas. Both graph and flowchart syntax are supported, including every arrow type and subgraphs, with editable presets to start from. The theme follows your system’s light or dark mode, and PNG / SVG / PDF export is built in. Rendering and export happen entirely in your browser — the code never leaves your machine.
Free and no sign-up. Mermaid diagram computes and renders entirely in your browser; nothing you enter is uploaded.
More tools in Diagramming
- Flowchart — Drag any of the 15 flowchart shapes onto the canvas, tweak connectors and decision labels freely, import / export JSON, and export PNG / SVG / PDF.
- AI flowchart — Describe how something happens in plain words (for example: “after a customer orders, the system checks stock — if there is enough it deducts stock and creates a shipping order, otherwise it shows out of stock and cancels the order”), and after payment the AI turns the steps, decisions and flow into a flowchart: laid out automatically, decisions drawn as diamonds, start and end coloured separately. Once generated you can drag nodes and double-click to retype them, or hit “Export data” and import it on the Flowchart page to swap shapes, colours and link types; PNG / SVG / PDF export works here too. Pay per use, ¥0.5 each; the description is sent to our backend to call the model only after payment succeeds, and failed calls are refunded automatically.
- Mind map — Drag the central topic, branch topics and subtopics from the left panel onto the canvas — drop a node onto another to make it that node’s child — and the tree is laid out automatically on both sides (or all to the right). Double-click, or press Tab / Enter, to edit text and add nodes, and drag between two nodes to draw a relation line. Import and export Baidu Naotu .km data, and export PNG / SVG / PDF.
- AI mind map — Paste in bullet points, notes or meeting minutes and, after payment, the AI turns them into a mind map: a central topic, first-level branches and nested subtopics, laid out on both sides with their own colours. Afterwards you can retype nodes and drag a node under a different parent, or hit “Export data” and import it on the Mind map page to keep adjusting — PNG / SVG / PDF and Baidu Naotu .km export are available as well. Pay per use, ¥0.5 each; the text is sent to our backend to call the model only after payment succeeds, and failed calls are refunded automatically.
- UML diagram — Drag classes, interfaces, abstract classes, enumerations and packages onto the canvas, type attributes and methods straight into each node (one per line), and connect them with inheritance, realization, composition, aggregation, association or dependency — arrow heads and diamonds are drawn automatically. Import and export JSON data, and export PNG / SVG / PDF.
- Sequence diagram — Sketch sequence diagrams by clicking or dragging from the palette: objects / stick actors, solid / dashed / open-arrow messages, self messages, notes, activation bars and stage dividers. Click any element on the canvas to rename it, restyle the line, swap the sender or receiver, move it up or down, with undo and redo. Prefer text? Switch to the script tab, type a few lines like “who -> whom: what” and apply them to the canvas in one go. JSON data can be imported and exported, the script is one click to copy, and the picture can be exported as PNG / SVG / PDF or copied to the clipboard. Four colour themes are available; the canvas follows the system’s light or dark mode while exported images always come on a light sheet. Rendering and export all happen locally in your browser — nothing leaves your machine.
- AI Mermaid diagram — Pick a chart type (14 in all: flowchart, sequence, class, state, ER, gantt, pie, quadrant, timeline, kanban, mind map, git graph, user journey and C4), type a description, and after payment the AI writes Mermaid code for that chart type directly. The result renders on the page immediately, and every chart type ships with a sample and prompt hints — one click fills the sample if you are stuck. Copy the code in one click, or hit “Edit on the Mermaid diagram page” to jump over with the code pre-loaded, then tweak the diagram by hand and export PNG / SVG / PDF. Pay per use, ¥0.5 each; the description is sent to our backend to call the model only after payment succeeds, and failed calls are refunded automatically.
Frequently asked questions about Mermaid diagram
- What is Mermaid, and how is this different from the Flowchart page?
- Mermaid is a text syntax for describing diagrams — plenty of READMEs, spec documents and AI answers already contain such code blocks. This page turns that code into a picture: rendering, layout and export all happen in your browser, and a few keystrokes redraw the diagram, which suits the “I already have the code” case. The Flowchart page is the other way round: you drag shapes and draw links on a canvas, which suits drawing from scratch and tweaking as you go. They stand on their own and also work together — render here first, then touch it up over there.
- Which syntax is supported, and how do I read the errors?
- Both graph and flowchart syntax are supported, including all of their arrow and link styles (solid, dotted, thick, with circle or cross ends), subgraphs and %% comments. Other diagram types — sequence, state, class, ER, gantt, pie and more — are outside this page’s scope and will report an error. When something fails, the last good diagram stays on the canvas while the reason and a line number appear below; once the code is fixed the diagram recovers automatically. For sequence diagrams use the dedicated Sequence diagram page, which takes its own minimal script.
- What do the exported PNG, SVG and PDF look like?
- Exports are always light-coloured: white background with dark text, regardless of whether the interface is in light or dark mode, so they stay clean in documents and printouts. PNG is rendered at twice the size for sharpness, SVG scales without limit for further editing, and the PDF is a single page sized exactly to the diagram.
- Do I need to register or pay to use Mermaid diagram?
- Almost every tool is free, needs no registration or sign-in and has no usage limit; the few pay-per-use features (such as AI watermark removal, AI image generation, AI upscaling, AI annotation, and AI flowchart, mind-map and Mermaid generation) state their prices on the page.
- Is the data I process with Mermaid diagram uploaded to a server?
- No. Calculation and rendering run locally in the browser and your input is never sent to a server; only the IP address page asks our backend for your outbound address when it opens, and that request carries none of your input. Features that need the backend (such as AI watermark removal, AI image generation, AI upscaling, AI annotation, AI flowchart and mind-map generation and "Financial statements – Small Business Accounting Standards") state their upload scope on their own pages.
About Local Toolbox
Local Toolbox gathers the small tools you reach for every day into one place: formatters, encoding converters, date maths, ID card and address parsing, image and QR code handling, password and amount conversion. Open a page and start working — no sign-up, and almost every tool has no usage limit.
Most features compute inside your browser, so your input never leaves your device; the pages are plain static assets, load fast and keep working offline. The IP page asks our backend for your outbound address when it opens and sends none of your input. AI watermark removal, AI background removal, AI image generation and AI upscaling send content to our backend for inference (watermark removal is ¥1 per run; background removal is ¥1 per run; image generation and upscaling are priced by resolution — 2K ¥2, 4K ¥3); AI annotation sends images to a large model that locates the target and returns coordinates (¥0.5 per image, refunded only when every image in the batch fails); AI flowchart, AI mind-map and AI Mermaid chart generation send your text description to a model that builds the diagram (three separate products, charged ¥0.5, ¥0.5 and ¥0.5 per run respectively); and the accounting helper sends the income, expense, social-insurance and balance figures you fill in to generate a report (¥0.5 for the spoken analysis, ¥1 for the report). These features accept Alipay only, upload nothing before payment succeeds, and refund automatically if processing fails.
- Local first: Parsing, conversion, encoding and image processing all happen in your browser and nothing you type is uploaded (AI watermark removal and AI background removal need the image, AI image generation and upscaling need one upload to obtain a URL, AI annotation needs the images for the model, AI résumé rewriting needs your résumé text, AI flowchart and mind-map generation need your text description, and the accounting helper needs the figures you submit).
- Pay per use, prices in plain sight: Almost every tool is free, needs no account and has no usage limit. Only AI watermark removal (¥1 per run), AI background removal (¥1 per run), AI image generation and AI upscaling (2K ¥2, 4K ¥3), AI annotation (¥0.5 per image), AI résumé rewriting (¥0.5 per run), AI flowchart, mind-map and Mermaid chart generation (¥0.5, ¥0.5 and ¥0.5 per run) and the accounting helper (¥0.5 for the spoken analysis, ¥1 for the report) are charged per use. Payment is Alipay only, nothing is uploaded before you pay, and failed runs are refunded automatically.
- One link per tool: Every tool has its own link, so bookmarks and shared URLs always land on the same page.
Links