Mermaid Online
A web-based editor that turns text (or screenshots) into Mermaid.js diagrams for documentation and system design.
The Problem
People who write technical documentation, system design docs, or workflow explanations need diagrams like flowcharts, sequence diagrams, and ER diagrams, but hand-drawing or maintaining these visuals separately from text-based docs is slow and hard to keep in sync with changing systems. Teams using Mermaid.js syntax must otherwise write and preview the code elsewhere, and converting an existing diagram image (like a screenshot) back into editable syntax is not straightforward. There is also a gap for quickly styling and exporting these diagrams into shareable formats like PNG or SVG for reports and presentations.
The Solution
Mermaid Online is a browser-based editor where users write Mermaid.js syntax and see diagrams render live, with templates for flowcharts, sequence diagrams, class diagrams, pie charts, Gantt charts, and more. It adds AI features on top of the open-source Mermaid syntax: generating diagrams from plain text descriptions, converting uploaded screenshots into editable Mermaid code, and editing existing diagrams through natural-language instructions. Users can adjust visual styling (themes, colors, fonts, node shapes), export diagrams as PNG or SVG, copy the underlying Mermaid code for use in GitHub, GitLab, or other documentation tools, and store up to 100 diagrams for later editing.