Migrations

Move your Mermaid flowchart to Modudraft

Paste a Mermaid flowchart, or load it from a file. Nodes become components, links become arrows, and subgraphs become boundaries.

Export from Mermaid

Mermaid diagrams are text, so there is nothing to export. Copy the flowchart from your README, your wiki or the Mermaid Live Editor. Copy only the diagram lines, starting at flowchart or graph, without the ``` fence or a --- title block. You can also keep it in a .mmd, .mermaid or .txt file.

Only flowcharts are read. Other Mermaid diagram types, such as sequence, ER, class or C4 diagrams, are refused with a message that names the type. State diagrams import on the States tab: see State machines.

Load it in Modudraft

Open a diagram, then Import in the toolbar, then Paste Mermaid…. In the Import Mermaid dialog, paste the code, or click Load .mmd file to read it from a file (up to 5 MB), then click Import.

If the diagram already has content on any tab, you are asked "Replace current diagram?" first. The import replaces every tab and can't be undone, so import into a new, empty diagram. Imports aren't possible on a view-only diagram. Things that were skipped are listed in the dialog, which stays open so you can read them.

What maps to what

  • Each node becomes a component, named from its text (or from its id when it has none).
  • The component type comes from the node shape: a cylinder [(text)] becomes a database, a circle ((text)) a cache, a hexagon {{text}} a gateway, and a flag >text] a queue. Every other shape becomes a general service.
  • Each link becomes an arrow, with its text as the label. Plain, dotted and thick links, chains, & groups and both label forms (|text| and -- text -->) are understood.
  • Each subgraph becomes a boundary around its nodes, named after its title.
  • The direction (LR, TD, BT, RL) sets the layout: left to right, right to left, top to bottom or bottom to top. Mermaid has no positions, so the diagram is always arranged for you.

What is lost

  • Invisible links (~~~) are ignored.
  • Styling: style, classDef, class, linkStyle and click lines are ignored, and so are arrowhead and line styles.
  • A link that starts or ends at a subgraph is dropped, because a boundary cannot be the end of an arrow.
  • A subgraph inside another subgraph becomes a separate boundary, not a nested one. A direction set inside a subgraph is ignored.
  • A two-way link (<-->) becomes one arrow, from left to right.
  • Lines it cannot understand are skipped and listed as warnings.

After the import

  • Tidy layout. Click Tidy layout in the left palette to arrange everything neatly. The Tidy direction is in the toolbar's Settings menu.
  • Add levels. Group related components into one component and open it to see what is inside. See Levels and C4.
  • Add boundaries. Drag Boundary from the palette around components that belong together, such as a network or a team.

With an agent (MCP)

The MCP server's import_file does not read Mermaid. In the other direction, export with format: "mermaid" returns a Mermaid flowchart from a diagram, and with output_path saves it to your repository. To bring a Mermaid flowchart in with an agent, ask it to build the components and arrows with bulk_add_nodes and bulk_add_edges. Set up the MCP server first.