Adding a diagram type

Any diagram type Pele supports already works: it's inserted as an image. Converting it to elements means reading its graph from Pele's drawing and building Excalidraw elements from it. Read How it works first, then follow an existing type, e.g. ER diagrams (src/pele/er.ts and src/converter/types/er.ts), the smallest one.

1. Describe the graphCopy Anchor Link

Add an interface for the diagram to src/interfaces.ts, with a type that tells it apart, e.g. type: "erd". It holds what the converter needs: nodes, lines, arrows and text, with their positions, sizes and styles.

2. Read it from Pele's drawingCopy Anchor Link

Add src/pele/<type>.ts with a function that takes Pele's model of the diagram and its parsed SVG (parseSvg in src/pele/svg.ts) and returns your graph. Take ids, labels and shape types from the model, and positions, sizes and edge routes from the SVG, using the helpers in svg.ts and elements.ts.

Then wire it into src/pele/parsePele.ts:

• add Pele's name for the type to CONVERTED_DIAGRAM_TYPES, so its labels are measured with Excalifont.
• add a case for it in parsePele, which renders the model and calls your function. Add your graph to its return type.
• if the type needs more room in Excalidraw, add its spacing to getPeleConfig.

3. Convert itCopy Anchor Link

Add src/converter/types/<type>.ts exporting a GraphConverter that builds Excalidraw element skeletons from your graph. Use the builders in src/converter/transformToExcalidrawSkeleton.ts for containers, lines, arrows and text. Then add a case for your graph's type in src/graphToExcalidraw.ts.

4. Add test casesCopy Anchor Link

• Add the type's prefix to TESTCASE_TYPES in testcases/testcases.ts.
• Add a testcases/features/<type>-<feature>.mmd file for each syntax feature the type supports. The playground lists them, the unit tests parse them and the visual tests snapshot them.
• Compare Pele's drawing with yours side by side with yarn test:visual:dev, then record the snapshots with yarn test:visual:update.

See Development for the commands. Finally, add the type to the README and to the changelog.