Mermaid Online
Live Mermaid diagram editor with AI text-to-diagram and screenshot-to-diagram, exporting PNG, SVG and code
About
Mermaid Online is a web-based Mermaid editor: write Mermaid syntax, see diagrams render live (flowcharts, sequence, class, state, ER, user journey, Gantt and more), use templates, and export as PNG/SVG or copy the Mermaid code for GitHub, GitLab or docs. AI add-ons generate or edit diagrams from text or from a screenshot of a diagram. It is one of many Mermaid editors, including the official mermaid.live — what distinguishes this one is the AI text/screenshot-to-diagram and styling features, not the editor itself, and the entry should say so.
No install. Use it in the browser; no signup wall was stated for the core editor.
More in Design & Marketing
View all
Apple-design skill
Apple's design rules as a Claude skill: principles for interface design and fluid motion from WWDC talks, translated for the web.
Taste
An art-direction skill pack for coding agents: 3 of 20 researched directions per build, real photos, browser-checked at 3 widths.
UI Discovery
A curated library of real product UI, with palettes, fonts and AI build prompts you can use in Claude Code and Cursor