Home / Guides / Mermaid Editor: Turn Mermaid Code Into a Visual, Editable Diagram

Mermaid Editor: Turn Mermaid Code Into a Visual, Editable Diagram

Mermaid is fast to write but painful to reposition by hand — paste your code in and finish the layout visually instead.

5 min read · Free, no sign-up · Updated 2026-09-05

Mermaid is genuinely good for writing a diagram's structure quickly, especially for anyone who thinks in code rather than dragging shapes. Its weak point is layout: once a flowchart has more than a handful of nodes, Mermaid's auto-layout starts producing crossed lines and cramped spacing that's tedious to fix from within the code itself.

The practical fix is to use Mermaid for what it's fast at — describing the structure — and finish the layout visually. FlowDiagrams imports Mermaid flowcharts and ER diagrams directly into real, individually editable shapes.

Importing a flowchart

1. Open FlowDiagrams and go to ☰ → Import diagram (Mermaid / DBML)…
2. Paste your Mermaid code. The dialog detects the format automatically and shows which one it found.
3. Click Build. Every node becomes a shape, every edge becomes a connector, positioned and ready to rearrange.

Try this example directly:

flowchart LR
  A[Client] --> B{Gateway}
  B --> C[(Database)]
  B --> D[Auth Service]

That produces a rectangle ("Client"), a diamond ("Gateway"), a cylinder ("Database"), and a second rectangle ("Auth Service"), connected exactly as the code describes — but now each one can be dragged, restyled, or replaced with a real vendor logo.

Importing an ER diagram

Mermaid's erDiagram syntax imports the same way, converting into real entity tables with crow's-foot relationship lines rather than Mermaid's simplified notation:

erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ ORDER_ITEM : contains

What to do after importing

This is the actual point of importing rather than just rendering the Mermaid code as-is:

• Fix crossed lines by hand. Drag nodes apart — connectors re-route automatically as you move things, using clean elbow corners by default.
• Replace generic boxes with real logos where a node represents a known system — search the library (grid icon, top right) for the actual vendor instead of leaving a plain labelled rectangle.
• Group related nodes with a frame/zone shape once the layout has settled, especially useful for a flowchart that spans multiple system boundaries.

DBML works the same way

The same import dialog also accepts DBML (Database Markup Language) — paste table and relationship definitions and get the same editable entity-table treatment as a Mermaid ER diagram or a raw SQL import.

Exporting back out

Once the layout is right, ☰ → Export image / PDF… gets you a PNG, SVG or PDF for docs or a slide deck. If you need to keep editing later, ☰ → Save to file saves the live, editable version as a .flow.json rather than flattening it to an image.

Frequently asked questions

Which Mermaid diagram types can be imported?

Flowcharts (flowchart / graph syntax) and ER diagrams (erDiagram syntax) both import directly. Each becomes a real, independently editable diagram — not an image of one.

Does Mermaid shape syntax map to specific shapes in the diagram?

Yes. [Text] becomes a rectangle, {Text} becomes a diamond (decision), and [(Text)] becomes a cylinder (database) — matching Mermaid's own shape conventions, so the imported diagram looks like what the code described.

Can I edit the diagram after importing, or is it a static picture?

Fully editable. Every imported shape and connector behaves exactly like one you drew by hand — move it, restyle it, drag in a vendor logo next to it, or connect it to something new.