Mermaid block

docs/package.json

@@ -48,7 +48,7 @@
     "@polar-sh/sdk": "^0.42.2",
     "@react-email/components": "^1.0.4",
     "@react-email/render": "^2.0.4",
-    "@react-pdf/renderer": "^4.3.0",
+    "@react-pdf/renderer": "^4.5.1",
     "@sentry/nextjs": "^10.34.0",
     "@shikijs/core": "^4",
     "@shikijs/engine-javascript": "^4",
@@ -97,7 +97,12 @@
     "y-partykit": "^0.0.25",
     "yjs": "^13.6.27",
     "zod": "^4.3.5",
-    "@blocknote/math-block": "workspace:*"
+    "@blocknote/math-block": "workspace:*",
+    "mermaid": "^11.0.0",
+    "@blocknote/diagram-block": "workspace:*",
+    "docx": "^9.6.1",
+    "@react-pdf/math": "^2.0.1",
+    "katex": "^0.16.11"
   },
   "devDependencies": {
     "@blocknote/code-block": "workspace:*",

examples/05-interoperability/05-converting-blocks-to-pdf/.bnexample.json

@@ -2,11 +2,16 @@
   "playground": true,
   "docs": true,
   "author": "yousefed",
-  "tags": ["Interoperability"],
+  "tags": [
+    "Interoperability"
+  ],
   "dependencies": {
-    "@blocknote/xl-pdf-exporter": "latest",
+    "@blocknote/diagram-block": "latest",
+    "@blocknote/math-block": "latest",
     "@blocknote/xl-multi-column": "latest",
-    "@react-pdf/renderer": "^4.3.0"
+    "@blocknote/xl-pdf-exporter": "latest",
+    "@react-pdf/math": "^2.0.1",
+    "@react-pdf/renderer": "^4.5.1"
   },
   "pro": true
 }

examples/05-interoperability/05-converting-blocks-to-pdf/package.json

@@ -20,9 +20,12 @@
     "@mantine/hooks": "^9.0.2",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
-    "@blocknote/xl-pdf-exporter": "latest",
+    "@blocknote/diagram-block": "latest",
+    "@blocknote/math-block": "latest",
     "@blocknote/xl-multi-column": "latest",
-    "@react-pdf/renderer": "^4.3.0"
+    "@blocknote/xl-pdf-exporter": "latest",
+    "@react-pdf/math": "^2.0.1",
+    "@react-pdf/renderer": "^4.5.1"
   },
   "devDependencies": {
     "@types/react": "^19.2.3",

examples/05-interoperability/05-converting-blocks-to-pdf/src/App.tsx

@@ -8,6 +8,11 @@ import "@blocknote/core/fonts/inter.css";
 import * as locales from "@blocknote/core/locales";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
+import { createReactDiagramBlockSpec } from "@blocknote/diagram-block";
+import {
+  createReactInlineMathSpec,
+  createReactMathBlockSpec,
+} from "@blocknote/math-block";
 import {
   SuggestionMenuController,
   getDefaultReactSlashMenuItems,
@@ -24,6 +29,8 @@ import {
   PDFExporter,
   pdfDefaultSchemaMappings,
 } from "@blocknote/xl-pdf-exporter";
+import { diagramBlockMapping } from "@blocknote/xl-pdf-exporter/diagram-block";
+import { mathBlockMapping } from "@blocknote/xl-pdf-exporter/math-block";
 import { pdf, PDFViewer } from "@react-pdf/renderer";
 import { JSX, useEffect, useMemo, useReducer, useState } from "react";
 
@@ -38,7 +45,16 @@ export default function App() {
   // Creates a new editor instance.
   const editor = useCreateBlockNote({
     // Adds support for page breaks & multi-column blocks.
-    schema: withMultiColumn(withPageBreak(BlockNoteSchema.create())),
+    // Adds support for math & diagram blocks.
+    schema: withMultiColumn(withPageBreak(BlockNoteSchema.create())).extend({
+      blockSpecs: {
+        math: createReactMathBlockSpec(),
+        diagram: createReactDiagramBlockSpec(),
+      },
+      inlineContentSpecs: {
+        inlineMath: createReactInlineMathSpec(),
+      },
+    }),
     dropCursor: multiColumnDropCursor,
     dictionary: {
       ...locales.en,
@@ -330,6 +346,31 @@ export default function App() {
   console.log("Hello World", message);
 };`,
       },
+      {
+        type: "math",
+        content: "a^2 = \\sqrt{b^2 + c^2}",
+      },
+      {
+        type: "diagram",
+        content: `graph TD
+  A[Start] --> B{Works?}
+  B -->|Yes| C[Ship it]
+  B -->|No| A`,
+      },
+      {
+        type: "paragraph",
+        content: [
+          {
+            type: "text",
+            text: "Inline math: ",
+            styles: {},
+          },
+          {
+            type: "inlineMath",
+            content: "e^{i\\pi} + 1 = 0",
+          },
+        ],
+      },
       {
         type: "columnList",
         children: [
@@ -402,7 +443,16 @@ export default function App() {
 
   // Exports the editor document to PDF whenever it changes.
   const onChange = async () => {
-    const exporter = new PDFExporter(editor.schema, pdfDefaultSchemaMappings);
+    const exporter = new PDFExporter(editor.schema, {
+      ...pdfDefaultSchemaMappings,
+      blockMapping: {
+        ...pdfDefaultSchemaMappings.blockMapping,
+        // Embeds diagrams as images instead of their Mermaid source.
+        diagram: diagramBlockMapping,
+        // Renders math blocks as formulas instead of their LaTeX source.
+        math: mathBlockMapping,
+      },
+    });
     const pdfDocument = await exporter.toReactPDFDocument(editor.document);
     setPDFDocument(pdfDocument);
     forceRerender();

examples/05-interoperability/06-converting-blocks-to-docx/.bnexample.json

@@ -2,10 +2,15 @@
   "playground": true,
   "docs": true,
   "author": "yousefed",
-  "tags": [""],
+  "tags": [
+    ""
+  ],
   "dependencies": {
+    "@blocknote/diagram-block": "latest",
+    "@blocknote/math-block": "latest",
     "@blocknote/xl-docx-exporter": "latest",
-    "@blocknote/xl-multi-column": "latest"
+    "@blocknote/xl-multi-column": "latest",
+    "katex": "^0.16.11"
   },
   "pro": true
 }

examples/05-interoperability/06-converting-blocks-to-docx/package.json

@@ -20,8 +20,11 @@
     "@mantine/hooks": "^9.0.2",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
+    "@blocknote/diagram-block": "latest",
+    "@blocknote/math-block": "latest",
     "@blocknote/xl-docx-exporter": "latest",
-    "@blocknote/xl-multi-column": "latest"
+    "@blocknote/xl-multi-column": "latest",
+    "katex": "^0.16.11"
   },
   "devDependencies": {
     "@types/react": "^19.2.3",

examples/05-interoperability/06-converting-blocks-to-docx/src/App.tsx

@@ -8,6 +8,11 @@ import "@blocknote/core/fonts/inter.css";
 import * as locales from "@blocknote/core/locales";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
+import {
+  createReactInlineMathSpec,
+  createReactMathBlockSpec,
+} from "@blocknote/math-block";
+import { createReactDiagramBlockSpec } from "@blocknote/diagram-block";
 import {
   SuggestionMenuController,
   getDefaultReactSlashMenuItems,
@@ -18,6 +23,11 @@ import {
   DOCXExporter,
   docxDefaultSchemaMappings,
 } from "@blocknote/xl-docx-exporter";
+import { diagramBlockMapping } from "@blocknote/xl-docx-exporter/diagram-block";
+import {
+  inlineMathMapping,
+  mathBlockMapping,
+} from "@blocknote/xl-docx-exporter/math-block";
 import {
   getMultiColumnSlashMenuItems,
   multiColumnDropCursor,
@@ -32,7 +42,16 @@ export default function App() {
   // Creates a new editor instance.
   const editor = useCreateBlockNote({
     // Adds support for page breaks & multi-column blocks.
-    schema: withMultiColumn(withPageBreak(BlockNoteSchema.create())),
+    // Adds support for math & diagram blocks.
+    schema: withMultiColumn(withPageBreak(BlockNoteSchema.create())).extend({
+      blockSpecs: {
+        math: createReactMathBlockSpec(),
+        diagram: createReactDiagramBlockSpec(),
+      },
+      inlineContentSpecs: {
+        inlineMath: createReactInlineMathSpec(),
+      },
+    }),
     dropCursor: multiColumnDropCursor,
     dictionary: {
       ...locales.en,
@@ -324,6 +343,31 @@ export default function App() {
   console.log("Hello World", message);
 };`,
       },
+      {
+        type: "math",
+        content: "a^2 = \\sqrt{b^2 + c^2}",
+      },
+      {
+        type: "diagram",
+        content: `graph TD
+  A[Start] --> B{Works?}
+  B -->|Yes| C[Ship it]
+  B -->|No| A`,
+      },
+      {
+        type: "paragraph",
+        content: [
+          {
+            type: "text",
+            text: "Inline math: ",
+            styles: {},
+          },
+          {
+            type: "inlineMath",
+            content: "e^{i\\pi} + 1 = 0",
+          },
+        ],
+      },
 
       {
         type: "columnList",
@@ -396,7 +440,23 @@ export default function App() {
 
   // Exports the editor content to DOCX and downloads it.
   const onDownloadClick = async () => {
-    const exporter = new DOCXExporter(editor.schema, docxDefaultSchemaMappings);
+    const exporter = new DOCXExporter(editor.schema, {
+      ...docxDefaultSchemaMappings,
+      blockMapping: {
+        ...docxDefaultSchemaMappings.blockMapping,
+        // Embeds diagrams as images instead of their Mermaid source.
+        diagram: diagramBlockMapping,
+        // Renders math blocks as native equations instead of their LaTeX
+        // source.
+        math: mathBlockMapping,
+      },
+      inlineContentMapping: {
+        ...docxDefaultSchemaMappings.inlineContentMapping,
+        // Renders inline math as native equations instead of its LaTeX
+        // source.
+        inlineMath: inlineMathMapping,
+      },
+    });
     const blob = await exporter.toBlob(editor.document);
 
     const link = document.createElement("a");

examples/05-interoperability/07-converting-blocks-to-odt/.bnexample.json

@@ -2,10 +2,15 @@
   "playground": true,
   "docs": true,
   "author": "areknawo",
-  "tags": [""],
+  "tags": [
+    ""
+  ],
   "dependencies": {
+    "@blocknote/diagram-block": "latest",
+    "@blocknote/math-block": "latest",
+    "@blocknote/xl-multi-column": "latest",
     "@blocknote/xl-odt-exporter": "latest",
-    "@blocknote/xl-multi-column": "latest"
+    "katex": "^0.16.11"
   },
   "pro": true
 }

examples/05-interoperability/07-converting-blocks-to-odt/package.json

@@ -20,8 +20,11 @@
     "@mantine/hooks": "^9.0.2",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
+    "@blocknote/diagram-block": "latest",
+    "@blocknote/math-block": "latest",
+    "@blocknote/xl-multi-column": "latest",
     "@blocknote/xl-odt-exporter": "latest",
-    "@blocknote/xl-multi-column": "latest"
+    "katex": "^0.16.11"
   },
   "devDependencies": {
     "@types/react": "^19.2.3",