Feature: adds mind map diagram types to Mermaid (tldraw#8285)

Adds in support for mind maps as a new diagram type in mermaid.

<img width="456" height="301" alt="Screenshot 2026-03-19 at 15 10 12"
src="https://github.com/user-attachments/assets/e5cfe2b7-5174-4275-a5df-501883f3b278"
/>
<img width="1173" height="413" alt="Screenshot 2026-03-19 at 15 10 20"
src="https://github.com/user-attachments/assets/21e17731-dabb-4230-a8b3-bba12eb28ee9"
/>

### Change type

- [ ] `bugfix`
- [ ] `improvement`
- [x] `feature`
- [ ] `api`
- [ ] `other`

### Test plan

1. Run the Mermaid diagrams example and compare the 20 mind map shapes
vs the generated SVGs
2. Enable copy/paste handling for Mermaid code and try pasting in:
```
mindmap
  root((My Project))
    Planning
      Goals
      Timeline
      Budget
    Development
      Frontend
        UI Design
        Components
      Backend
        API
        Database
    Marketing
      Social Media
      SEO
      Ads
    Launch
      Testing
      Deployment
      Feedback
```      


### Release notes

- Adds mind map shape support to the @tldraw/mermaid package

---------

Co-authored-by: Guillaume <guillaume@tldraw.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Guillaume Richard <mynameiskaneel@proton.me>

Author: 4 people

apps/examples/src/examples/use-cases/hundred-mermaids/MermaidDiagramsExample.tsx

@@ -72,6 +72,7 @@ function TopPanel() {
 			startOnLoad: false,
 			flowchart: { useMaxWidth: false, nodeSpacing: 80, rankSpacing: 80, padding: 20 },
 			state: { useMaxWidth: false, nodeSpacing: 80, rankSpacing: 80, padding: 20 },
+			mindmap: { useMaxWidth: false, padding: 20 },
 			sequence: { useMaxWidth: false, actorMargin: 50, noteMargin: 20 },
 			themeVariables: { fontSize: `${18 * FONT_INFLATE}px` },
 		})

apps/examples/src/examples/use-cases/hundred-mermaids/mermaids.ts

@@ -1024,4 +1024,351 @@ sequenceDiagram
     Worker->>Worker: parse chunk 3 with a suspiciously long status label for layout testing
     deactivate Worker`,
 	],
+	[
+		`mindmap
+    Root
+        A
+            B
+            C`,
+		`mindmap
+    root[Square]
+        A
+        B`,
+		`mindmap
+    root(Rounded square)
+        A
+        B`,
+		`mindmap
+    root((Circle))
+        A
+        B`,
+		`mindmap
+    root)Cloud(
+        A
+        B`,
+		`mindmap
+    root{{Hexagon}}
+        A
+        B`,
+		`mindmap
+    Root
+        A
+            B
+          C`,
+		`mindmap
+    Root
+        A
+        B
+            C
+            D
+        E
+            F`,
+		`mindmap
+    Project
+        Planning
+            Requirements
+            Timeline
+        Development
+            Frontend
+            Backend
+            Database
+        Testing
+            Unit tests
+            Integration`,
+		`mindmap
+    Web Development
+        Frontend
+            HTML
+            CSS
+            JavaScript
+                React
+                Vue
+                Angular
+        Backend
+            Node.js
+            Python
+            Go
+        DevOps
+            Docker
+            CI/CD
+            Monitoring`,
+		`mindmap
+    Company
+        Engineering
+            Platform
+            Product
+            Infrastructure
+        Design
+            UX
+            Visual
+        Marketing
+            Content
+            Analytics`,
+		`mindmap
+    root((Central Idea))
+        Branch A
+            Leaf 1
+            Leaf 2
+            Leaf 3
+        Branch B
+            Leaf 4
+            Leaf 5
+        Branch C
+            Leaf 6`,
+		`mindmap
+    root[Decision]
+        (Option A)
+            Pro 1
+            Pro 2
+        (Option B)
+            Pro 3
+            Con 1
+        (Option C)
+            Pro 4`,
+		`mindmap
+    Release Plan
+        v1.0
+            Core features
+            Bug fixes
+            Documentation
+        v1.1
+            Performance
+            New API
+        v2.0
+            Breaking changes
+            Migration guide
+            New architecture`,
+		`mindmap
+    Onboarding
+        Day 1
+            Setup
+            Intro meeting
+            Codebase tour
+        Week 1
+            First PR
+            Code review
+            Team lunch
+        Month 1
+            Own a feature
+            Present to team`,
+		`mindmap
+    root((tldraw))
+        Editor
+            Shapes
+            Tools
+            Bindings
+        Store
+            Records
+            Signals
+        UI
+            Components
+            Styles
+        Sync
+            Multiplayer
+            Persistence`,
+		`mindmap
+    Debugging
+        Check logs
+            Server logs
+            Client console
+        Reproduce
+            Steps
+            Environment
+        Fix
+            Root cause
+            Regression test
+        Deploy
+            Staging
+            Production`,
+		`mindmap
+    root[Quarterly Goals]
+        Reliability
+            Uptime target
+            Alerting
+            Incident response
+        Growth
+            New users
+            Retention
+            Activation
+        Platform
+            API v2
+            SDK improvements
+            Documentation`,
+		`mindmap
+    Meal Planning
+        Monday
+            Breakfast
+            Lunch
+            Dinner
+        Tuesday
+            Breakfast
+            Lunch
+            Dinner
+        Wednesday
+            Breakfast
+            Lunch
+            Dinner`,
+		`mindmap
+    root((AI))
+        Machine Learning
+            Supervised
+                Classification
+                Regression
+            Unsupervised
+                Clustering
+                Dimensionality Reduction
+        Deep Learning
+            CNNs
+            RNNs
+            Transformers
+        Applications
+            NLP
+            Computer Vision
+            Robotics`,
+		`mindmap
+  root((System Architecture))
+    Layer 1
+      Layer 2
+        Layer 3
+          Layer 4
+            Layer 5
+              Layer 6
+                Layer 7
+                  Layer 8
+                    Layer 9
+                      Layer 10`,
+		`mindmap
+  root((Wide Node))
+    A1
+    A2
+    A3
+    A4
+    A5
+    A6
+    A7
+    A8
+    A9
+    A10
+    A11
+    A12
+    A13`,
+		`mindmap
+  root((Product))
+    Design
+      UX
+        Research
+        Personas
+      UI
+    Engineering
+      Backend
+        APIs
+        DB
+      Frontend
+        Components
+        State
+    Marketing
+      SEO
+      Ads
+      Social`,
+		`mindmap
+  root((Documentation))
+    "This is a very long node label intended to test text wrapping and overflow behavior"
+      "Another extremely verbose and descriptive child node that could break layouts"
+        "Even deeper explanation with excessive verbosity and complexity"`,
+		`mindmap
+  root((Company))
+    CEO
+      Strategy
+    CTO
+      Engineering
+        Platform
+          Infra
+            Kubernetes
+    Intern`,
+		`mindmap
+  root((Duplicates))
+    Node
+      Node
+        Node
+    Node
+      Node`,
+		`mindmap
+  root((Numbers))
+    1
+      1.1
+        1.1.1
+    2
+      2.1
+      2.2
+    3`,
+		`mindmap
+  root((AI System))
+    Data
+      Collection
+      Cleaning
+      Labeling
+    Model
+      Training
+      Evaluation
+      Deployment
+    Ethics
+      Bias
+      Privacy
+      Transparency`,
+		`mindmap
+  root((Hybrid))
+    A
+      A1
+        A1a
+        A1b
+      A2
+    B
+      B1
+      B2
+      B3
+        B3a
+          B3a1
+    C`,
+		`mindmap
+  root((Uneven))
+    Short
+    Medium
+      Mid1
+      Mid2
+    VeryLong
+      L1
+        L2
+          L3
+            L4
+              L5`,
+		`mindmap
+  root((Knowledge))
+    Science
+      Physics
+      Chemistry
+      Biology
+    Arts
+      Music
+      Painting
+      Dance
+    Technology
+      Software
+      Hardware
+      AI`,
+		`mindmap
+  root((Decision))
+    Start
+      Yes
+        Continue
+          Optimize
+      No
+        Stop
+        Retry`,
+		`mindmap
+  root((Edge))
+    ""
+    " "
+    "   "
+    Filled`,
+	],
 ]

packages/mermaid/README.md

@@ -10,7 +10,11 @@ Instead of rendering a static SVG, `@tldraw/mermaid` parses Mermaid text and cre
 npm i @tldraw/mermaid
 ```
 
-> **Peer dependency:** this package requires `tldraw` to be installed in your project.
+**Peer dependencies:** your app must also include compatible versions of:
+
+- **`tldraw`** — the SDK this package plugs into
+- **`react`** — `^18.2.0` or `^19.2.1`
+- **`react-dom`** — `^18.2.0` or `^19.2.1`
 
 ## Quick start
 
@@ -58,6 +62,7 @@ When `centerOnPosition` is `true` (the default), the diagram's center aligns wit
 | Flowchart        | `flowchart`, `graph` | Geo shapes, arrows, subgraph frames                                 |
 | Sequence diagram | `sequenceDiagram`    | Actor shapes, lifelines, signal arrows, fragment frames             |
 | State diagram    | `stateDiagram-v2`    | State shapes, transitions, compound state frames, fork/join, choice |
+| Mindmap          | `mindmap`            | Colored geo shapes, parent-child edges, tree hierarchy              |
 
 Unsupported diagram types (pie, gantt, class, ER, etc.) can be handled with the `onUnsupportedDiagram` callback — for example, to fall back to SVG import:
 

packages/mermaid/package.json

@@ -45,6 +45,8 @@
 		"mermaid": "11.12.2"
 	},
 	"peerDependencies": {
+		"react": "^18.2.0 || ^19.2.1",
+		"react-dom": "^18.2.0 || ^19.2.1",
 		"tldraw": "workspace:*"
 	},
 	"devDependencies": {