图表
@blocknote/diagram-block 包新增了一个图表块：在源代码弹窗中以 Mermaid 源代码编写，并渲染为其描述的图表——流程图、时序图、甘特图以及 Mermaid 支持的其他所有图表。
此块仅在 React（@blocknote/react）中可用。
npm install @blocknote/diagram-block添加到编辑器
该包导出 createReactDiagramBlockSpec。将其添加到 schema 的 blockSpecs 中：
import { BlockNoteSchema } from "@blocknote/core";
import { createReactDiagramBlockSpec } from "@blocknote/diagram-block";
const schema = BlockNoteSchema.create().extend({
blockSpecs: {
// Adds the Diagram block to the schema.
diagram: createReactDiagramBlockSpec(),
},
});要在弹窗中高亮 Mermaid 源代码，请将语法高亮扩展添加到编辑器中。图表块已经声明了其源代码语言（mermaid），因此不需要逐块配置：
import { syntaxHighlighter } from "@blocknote/code-block";
const editor = useCreateBlockNote({
schema,
extensions: [syntaxHighlighter],
});菜单项和本地化
由于图表 spec 位于一个可选包中，其编辑器集成也需要选择启用——该包导出了所需的一切内容：
import {
getDiagramSlashMenuItems, // Slash Menu item for inserting a diagram
getDiagramBlockTypeSelectItems, // Block Type Select item for the Formatting Toolbar
locales as diagramLocales, // dictionary strings, merged under the `diagram` key
} from "@blocknote/diagram-block";getDiagramSlashMenuItems(editor)返回一个用于插入图表的 Slash Menu 菜单项——通过combineByGroup将其与默认菜单项组合。getDiagramBlockTypeSelectItems(editor)返回一个用于将块转换为图表的 Block Type Select 菜单项，并将其展开到默认菜单项旁。diagramLocales翻译图表相关字符串——将一个语言环境合并到编辑器dictionary的diagram键下（参见本地化）；如果不提供，则使用内置的英文字符串。
下面的示例将它们全部连接起来。
示例
导出
图表可以导出为 BlockNote 支持的所有格式。Markdown 开箱即用——图表会导出为 ```mermaid 围栏代码块，这是它们常见的 Markdown 表示方式。
PDF、DOCX、ODT 和电子邮件导出器通过各自的映射将图表嵌入为图像——这些映射位于此包的子路径中，并且每个子路径都导出一个 createDiagramBlockMapping 工厂函数，可将其展开到导出器的默认映射中。下面展示的是 DOCX 导出器；PDF、ODT 和电子邮件导出器使用各自的子路径，方式相同：
import {
DOCXExporter,
docxDefaultSchemaMappings,
} from "@blocknote/xl-docx-exporter";
import { createDiagramBlockMapping } from "@blocknote/diagram-block/docx-exporter";
// ...or "@blocknote/diagram-block/pdf-exporter",
// "@blocknote/diagram-block/odt-exporter",
// "@blocknote/diagram-block/email-exporter"
const exporter = new DOCXExporter(editor.schema, {
...docxDefaultSchemaMappings,
blockMapping: {
...docxDefaultSchemaMappings.blockMapping,
diagram: createDiagramBlockMapping(),
},
});该工厂函数接受一个选项：
createDiagramBlockMapping(options?: {
/**
* Renders the Mermaid source to an image. Defaults to the built-in
* Mermaid renderer, which only works in the browser - see "Exporting
* server-side" below.
*/
renderDiagram?: RenderDiagram;
});无效的 Mermaid 源代码会渲染为一个标识出问题源代码的错误占位符，与编辑器中的行为一致。
电子邮件子路径中的工厂函数还接受一个 imageDelivery 选项：某些电子邮件客户端不会显示默认的数据 URL 图像，也可以将生成的图像作为内联 cid: 附件传送——请参阅电子邮件页面中的图像传送。
服务端导出
将 Mermaid 源代码渲染为图像需要浏览器，因此内置渲染器仅适用于客户端导出。在服务端导出时，将一个 renderDiagram 函数传递给 createDiagramBlockMapping——如果不提供，服务端导出将抛出错误：
import { createDiagramBlockMapping } from "@blocknote/diagram-block/docx-exporter";
import type { RenderDiagram } from "@blocknote/diagram-block/docx-exporter";
const renderDiagram: RenderDiagram = async (source) => {
// Render the Mermaid source to an image with your renderer of choice.
return {
image: { data: pngBytes, mimeType: "image/png", width, height },
};
};
createDiagramBlockMapping({ renderDiagram });服务端渲染器的常见选择包括 @mermaid-js/mermaid-cli（在无头浏览器中渲染）或 Kroki 服务器。无效的 Mermaid 源代码属于预期失败——将其作为 { error } 返回，而不是抛出错误；这样导出时会为该块渲染错误占位符，而不会导致整个导出失败。