How it works

parseMermaidToExcalidraw doesn't lay diagrams out itself. Pele parses the definition and draws it as an SVG. The package then reads the shapes, routes and labels from that drawing and rebuilds them as Excalidraw elements in the same places.

The pipelineCopy Anchor Link

1. Load the diagram type. parsePele detects the diagram type and loads Pele's code for it from pele/lazy, so each type is downloaded on first use.
2. Parse. Pele parses the definition into a model of the diagram, with the maxTextSize and maxEdges limits. <br> doesn't parse everywhere \n does (e.g. in bare flowchart ids or sequence participants), so if parsing fails, withLineBreakFallback retries once with <br> replaced by \n.
3. Lay out and draw. Pele renders the model to an SVG, at its natural size and direction. Labels are measured with Excalifont, the font Excalidraw draws them with, and the spacing between nodes is scaled up by 1.5, because Excalidraw's hand-drawn strokes and arrowheads are heavier than Pele's.
4. Read the drawing. A parser per diagram type in src/pele/ combines Pele's model (ids, labels, shape types, styles) with the SVG's geometry (positions, sizes, edge routes, label positions). It returns a plain graph: a Flowchart, Sequence, Class, ERD or State from src/interfaces.ts.
5. Convert. graphToExcalidraw hands the graph to its type's converter in src/converter/types/. The converter builds element skeletons: containers with bound labels, arrows bound to their nodes, lines and text. Duplicate consecutive points are then removed from lines and arrows.

Diagram types that aren't converted skip steps 4 and 5. Pele's SVG becomes an image element, with its data in files. A diagram whose conversion throws falls back to the image too.

Source layoutCopy Anchor Link

Want to support another diagram type? See Adding a diagram type.