Mermaid Online
Create diagrams from text with Mermaid syntax and AI
About Mermaid Online
Mermaid Online is a web-based editor for creating diagrams from text using Mermaid.js syntax, with an AI layer that can write that syntax for you. You type or paste Mermaid code on one side and watch the diagram render on the other, then export it as an image or copy the code into your documentation. Mermaid syntax is a markdown-inspired way of describing flowcharts, sequence diagrams and other charts in plain text, which makes diagrams easy to keep in version control and update alongside code. The catch has always been learning the syntax, and that is the gap Mermaid Online's AI features aim to close.
The editor itself is free, and the site states it can be used for both personal and commercial projects. Paid credits unlock the AI tools: generating a diagram from a plain-language description, rebuilding a diagram from a screenshot as editable Mermaid code, and editing an existing diagram by describing the change. Credits come as a $9.9 monthly package of 100 credits or as one-time packages, and each AI generation or edit uses one credit. Visual styling is permanently unlocked after any purchase and uses no credits.
You open the editor and either choose a template or start from scratch. The left panel offers starting points such as a flowchart, sequence diagram, class diagram and pie chart, alongside an AI Diagram option and a custom code mode.
As you type, the preview panel renders the diagram in real time and gives instant feedback, so a syntax mistake is visible immediately rather than when you publish. When the diagram looks right, you export it as a PNG or a scalable SVG, copy either format to the clipboard, or copy the Mermaid code itself.
If you would rather not write the syntax, you switch to the AI tools. You describe a workflow or a system interaction in words and the AI generates an editable diagram, or you upload a screenshot of an existing diagram and the AI recreates it as Mermaid. You can then refine the result by describing the steps to add or the relationships to change. Finished diagrams can be pasted as code into GitHub, GitLab or any documentation tool that renders Mermaid, or used as images in reports and slides.
- •
Live Preview Editor - Diagrams render as you type, with syntax feedback and a line and character count. The editor is free and needs no AI credits.
- •
Wide Diagram Coverage - Flowcharts, sequence diagrams, class diagrams, state diagrams, entity relationship diagrams, user journey maps and Gantt charts are all supported. The AI side also lists dedicated generators for mind maps, architecture, block, C4, packet, Sankey, timeline and XY chart diagrams.
- •
Text to Diagram - Describe a process or system in plain language and the AI produces an editable Mermaid diagram you can keep refining. Each generation costs one credit.
- •
Screenshot to Editable Diagram - Upload an image of a diagram, for example from an old slide deck or a whiteboard tool, and the AI rebuilds it as Mermaid code you can edit and version.
- •
Edit Diagrams with AI - Instead of hunting through the code, describe the change, such as a step to add or a relationship to alter, and the AI applies it. Edits draw from the same credit balance as generations.
- •
Styling and Export - Adjust themes, colors, font sizes and node shapes, then export to PNG or SVG. Styling is permanently unlocked after purchase, and paid users can store up to 100 diagrams to return to later.
Mermaid Online suits developers and documentation teams who keep diagrams next to their code and want a fast way to draft and preview Mermaid before committing it to a README or wiki. Technical writers can use the free editor to produce clean SVG figures for docs, while product managers and analysts who do not know the syntax can describe a workflow and let the AI produce the first version. Engineers inheriting old architecture diagrams as images will find the screenshot-to-diagram feature useful for turning static pictures into something they can maintain. Students and educators drawing flowcharts or ER diagrams for coursework can do so for free, and teams that only need AI help for a short project can buy a one-time package rather than a subscription.
Pricing
$0 - $9.90/mo
- Free editor$0/mo
- Monthly Package$9.90/mo
- One-time Package$19.90 once
- Life-time Package$99.90 once
From the vendor pricing page, 2026-10-23
