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.
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.