When Mermaid diagrams need to be editable

Mermaid is the right tool for diagrams that live in READMEs and docs — text in git, rendered anywhere. Grafloria is what teams reach for at the moment a Mermaid diagram needs to become an application surface: draggable, connectable, undoable — without abandoning the text format.

When to stay with Mermaid

Your diagrams are documentation: rendered in GitHub/GitLab, wikis and static sites, authored as text, reviewed as diffs. Mermaid's 29 diagram types and its ubiquity are unbeatable there — and Grafloria deliberately does not chase that breadth.

What Grafloria adds

	Grafloria	Mermaid
Model	Live editable canvas — drag, connect, undo	Render-only output
Text compatibility	Reads and writes `flowchart`, `erDiagram`, `classDiagram`, `stateDiagram` — verified against real Mermaid v11 in CI	The reference, 29 types
Hand layout	Positions persist in a `%%grafloria:document` sidecar comment — the file stays valid Mermaid	Layout is the renderer's choice
Unsupported types	Refused loudly (`result.unsupported`) — never a wrong guess	—
Export	SVG, PNG, vector PDF (text stays selectable)	SVG/PNG

The round trip

import { render, importDiagramText } from '@grafloria/element';

const api = render({ nodes: [], edges: [] }, host);
api.loadText(mermaidText);          // the same text your README renders
// … user drags things around …
const back = api.exportText();      // still valid Mermaid + position sidecar

Full compatibility story, including the named gaps: grafloria.com/mermaid.

Your existing Mermaid files just load

import { render } from '@grafloria/element';

const api = render({ nodes: [], edges: [] }, document.getElementById('root'));
api.loadText(`flowchart TD
  Start([Start]) --> Check{Valid?}
  Check -->|yes| Save[[Persist]]
  Check -->|no| Start`);
// …edit on the canvas, then:
const text = api.exportText();   // still Mermaid — with a lossless sidecar

Try it live in the Mermaid viewer demo — it round-trips both ways, so the text never drifts from the drawing. The Mermaid & text-format guide documents exactly which constructs are covered and how unsupported types fail loudly instead of blanking.

10-minute tutorial Live demos The full sourced comparison

Pricing and feature cells reflect vendor pages and shipped type definitions as of July–August 2026 — always confirm on the vendor's site. Corrections welcome on GitHub; this page aims to stay honest, not to win.