#10797·tldraw

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 a classDiagram case reading ClassDB (getClasses(), getRelations(), getNotes()).
  • packages/mermaid/src/flowchartDiagram.ts, stateDiagram.ts, sequenceDiagram.ts, mindmapDiagram.ts — existing per-diagram converters to model a new classDiagram.ts on. Each pairs a parse*Layout(liveSvg) function with a *ToBlueprint() function.
  • packages/mermaid/src/blueprint.tsMermaidDiagramKind needs 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

  1. Which class diagram features matter most to support first: members, relationship types and cardinality, generics, or namespaces? Awaiting answer.
  2. 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.