MarkNode 直接在预览中渲染图表。你在围栏代码块中使用 Mermaid 语法编写图表——这是一种用纯文本描述流程图、时序图等图表的方式——MarkNode 会完全离线地将其绘制为图像，取代代码显示。
编写图表
使用围栏代码块，并将语言标识符设为 mermaid：
```mermaid
flowchart TD
Start[Start] --> Decision{Need a diagram?}
Decision -->|Yes| Draw[Write it in Markdown]
Decision -->|No| Skip[Keep writing prose]
Draw --> Done[Done]
Skip --> Done
```预览会用渲染后的流程图替换代码块。Markdown 源文件保持不变——MarkNode 只是为它绘制一张图片；如果你想修改图表，只需编辑 mermaid 文本，图片便会随之更新。
完整样式化的图表类型
流程图、时序图、类图和状态图享有 MarkNode 的完整处理——经过布局与排版以匹配文档其余部分，而不只是一张通用的嵌入图片。
以时序图为例：
```mermaid
sequenceDiagram
participant Writer
participant MarkNode
Writer->>MarkNode: Write a mermaid code block
MarkNode-->>Writer: Render diagram in preview
```
类图和状态图使用相同的 mermaid 围栏以及各自的 Mermaid 关键字（classDiagram、stateDiagram-v2），并以同样精致的水准渲染。
其他图表类型
许多其他 Mermaid 图表类型——包括饼图和甘特图——如今也能在 MarkNode 中渲染，呈现为契合你主题样式的真实图表，而非代码。流程图、时序图、类图和状态图所享有的定制布局精细度，也计划在未来更新中为这些图表类型提供。
匹配你的主题
在预览中，图表会遵循文档的应用主题。切换主题后，屏幕上的所有图表都会随预览的其余部分一同重新配色——无需单独配置。
Quick Look 预览则遵循 Mac 的系统浅色/深色外观。流程图、时序图、类图和状态图在两种情况下都能匹配；饼图和甘特图目前在 Quick Look 中使用单一配色渲染。
图表出现的位置
在所有显示渲染后 Markdown 的界面中，图表都会呈现：
- 停靠的预览窗格
- 独立的预览窗口
- macOS Quick Look（在 Finder 中选中 Markdown 文件后按空格键——参见 Quick Look 预览）
- DOCX 导出，以嵌入图像的形式
错误
如果图表的 Mermaid 语法有误——无法识别的图表类型、语法拼写错误——MarkNode 会显示原始的围栏代码块，而不是损坏或空白的图像。文档的其余部分正常渲染；只有那一个代码块会受影响。修正源码后，图表会在预览下次更新时出现。
支持的语法
MarkNode 遵循 Mermaid 项目自身的语法。有关全部图表类型和选项，请参阅 Mermaid 官方文档——凡是在那里有效的内容，MarkNode 都会尝试渲染。