Add native support for mermaid class diagrams
Author: kaneelCreated Sep 15, 2026Updated Sep 15, 2026
Labelsfeaturesdk
@tldraw/mermaid converts flowcharts, sequence diagrams, state diagrams and mind maps into native tldraw shapes. Every other diagram type falls through to the default branch in createMermaidDiagram.ts, which either calls onUnsupportedDiagram (pasting a flat, uneditable SVG image) or throws MermaidDiagramError. Class diagrams are likely among the most commonly pasted types that hit that fallback.
Expected: a classDiagram converts to shapes for its classes, their members, and the relationships between them, the way flowcharts convert today.
Example
classDiagram
Animal <|-- Duck
Animal : +int age
Animal : +String gender
Animal : +isMammal()
class Duck {
+String beakColor
+swim()
}
Where this lives
packages/mermaid/src/createMermaidDiagram.ts— the diagram-type switch; needs aclassDiagramcase readingClassDB(getClasses(),getRelations(),getNotes()).packages/mermaid/src/flowchartDiagram.ts,stateDiagram.ts,sequenceDiagram.ts,mindmapDiagram.ts— existing per-diagram converters to model a newclassDiagram.tson. Each pairs aparse*Layout(liveSvg)function with a*ToBlueprint()function.packages/mermaid/src/blueprint.ts—MermaidDiagramKindneeds a new member for the class kind.packages/mermaid/src/defaultMermaidNodeRenderSpec.ts— render specs for the new node kinds.packages/mermaid/src/mermaidDiagrams.test.ts— where coverage for the new type should go.
Open questions
- Which class diagram features matter most to support first: members, relationship types and cardinality, generics, or namespaces? Awaiting answer.
- How should a class box render — a single geo shape with the whole body as text, or separate name/attribute/method sections? The latter reads better but makes the result more fiddly to edit.
Related: #10544 (entity relationship diagrams), which hits the same fallback.
Source: tldraw/tldraw