Notion 如何渲染 Mermaid
Notion 通过代码块来渲染 Mermaid:创建一个代码块,把语言设置为 Mermaid 即可。该代码块可以显示源码、渲染出的图表,或者分屏视图。
渲染发生在 Notion 应用内部,使用的是 Notion 自带的 Mermaid 版本,按 Notion 自己的发布节奏更新,而不是你能控制的。
flowchart TD
note[Notion 代码块] --> lang[语言选择:Mermaid]
lang --> view[预览或分屏视图]哪些效果不错
稳定的核心类型——flowchart、sequenceDiagram、classDiagram、stateDiagram-v2、erDiagram、gantt、pie——在页面中都能可靠渲染,而且图表会跟随 Notion 的浅色/深色主题。
对于会议记录、需求文档和 Wiki 来说,中小型图表在 Notion 里表现得游刃有余。
需要留意的地方
较新的图表类型只有在 Notion 更新其内置 Mermaid 之后才会出现;你自己无法升级它。如果某个类型在本地编辑器里能渲染、在 Notion 里却不行,原因就在这里。
交互式的 click 指令不起作用。
自定义主题指令会和 Notion 自身的主题机制产生冲突;依赖特定颜色表达含义的图表,在深色模式下可能看起来不一样。
非常宽的图表会受限于 Notion 的栏宽——它们会被缩小,标签也会变得很小。对于狭长的内容栏,更适合用自上而下的布局。
把 Notion 页面导出为 PDF 或 markdown 时,渲染出的图表未必能按预期保留下来——对于分享至关重要的文档,建议改为嵌入导出的 SVG 或 PNG 图片。
推荐工作流
在 MermaidPen 的 Studio 里起草并验证图表,开启 markdown-safe 预设以偏向广泛支持的语法,然后粘贴进 Notion 的 Mermaid 代码块。
当一个页面必须对每位读者都呈现一致效果时(面向客户的文档、员工手册),从 Studio 导出 PNG 并使用图片块,再把 Mermaid 源码放进下方的折叠块里,方便日后修改。