Mermaid

Upgrading from v2

What changed in mermaid-to-excalidraw v3, when Pele replaced Mermaid.

In v3, Pele parses and lays out diagrams instead of Mermaid. parseMermaidToExcalidraw is called the same way, but a few things changed:

  • Diagrams look different. Pele's layout isn't Mermaid's: node sizes, spacing and edge routes all change.
  • Mermaid is no longer a dependency. It doesn't need to be loaded in the page any more, and nothing is rendered into the DOM.
  • The engine and startOnLoad config options are gone. See Config for the options that remain.
  • Some definitions now throw. Definitions that Mermaid parsed but Pele doesn't throw a parse error. Pele's errors follow Mermaid's format.
  • Known gap: <br> and \n in class members are drawn as is, because Pele lays members out on one line.

v3 also added:

  • swimlane-beta diagrams.
  • Labels kept where Pele placed them along their arrows. This relies on label.labelPosition support for skeleton arrows in @excalidraw/excalidraw (excalidraw/excalidraw#12425). Older versions center the labels.
  • Per-diagram-type code loading (v3.1), class namespaces drawn as titled boxes (v3.2), and elbow arrows for flowchart edges and state transitions with the elbow option (v3.4).

v3.4 also removed the flowchart.curve option added in v3.3: replace flowchart: { curve: "step" } with elbow: true. The other curves only nudged the layout, since edges that aren't elbow arrows are drawn curved either way. A curve set in the definition itself still applies.

v2 is maintained on the release/2.x branch. See the changelog for every release.

Last updated on