# Mermaid

编辑图表源码，并查看编辑器中的 Mermaid 预览。

import ContentEditor from '@/components/editor/ContentEditor.astro';

## 添加图表

创建代码块，将语言设为 `mermaid`；编辑器也识别 `mmd`。修改代码后，编辑器会更新图表预览。保存时，图表仍以代码块保留在文档中。

## 可视化编辑

直接编辑图表源码，再切换到源码查看 Mermaid 代码块。

<ContentEditor content="mermaid" />

````markdown
```mermaid
flowchart LR
  草稿 --> 审阅
  审阅 --> Git
```
````

## 处理预览错误

图表无法显示时，请在代码编辑区域检查语法。预览能力取决于编辑器使用的 Mermaid 渲染器，网站能渲染的语法不一定都能在编辑器中预览。

Prosefly 中的 Mermaid 预览不会为网站添加 Mermaid 支持，网站仍需要在自己的构建流程中处理图表。首次使用某种图表时，请先通过网站预览确认效果。