# 如何在熊掌记中添加 Mermaid 图表

> 你可以在熊掌记中通过 Mermaid 添加可编辑、实时预览的图表，包括流程图、甘特图、饼图等。了解如何在熊掌记笔记中添加以及如何编辑图表。

Source: https://bear.app/zh/faq/how-to-add-mermaid-diagrams-in-bear/

熊掌记支持通过 [Mermaid](https://mermaid.js.org/) 绘制图表，这是一种使用纯文本创建图表的简洁语法。


![](https://bear.app/faq/images/cn/mermaid.png)

## 如何添加 Mermaid 图表

你可以通过代码块添加 Mermaid 图表：
* 输入三个反引号，并输入 mermaid 来指定语法，然后按回车键
* 在代码块第一行声明图表类型，例如 `flowchart TD`
* 在后续行中添加图表内容

![](https://bear.app/faq/images/mermaid_1.jpg)

Mermaid 支持多种图表类型，包括流程图、甘特图、时序图、思维导图等。如需查看完整列表及语法说明，请参阅 [Mermaid 官方文档](https://mermaid.js.org/intro/)。
## 编辑图表
编辑图表时，熊掌记会在代码块下方显示实时预览。要结束编辑，请将光标移出代码块，随后，图表代码将被隐藏，就像熊掌记自动隐藏 Markdown 格式标记一样。

如需修改现有图表，只需点击或轻触已渲染的图表，编辑代码块就会重新显示在上方。