# 插入文本绘图

URL: https://docs.ones.cn/ones-wiki/edit-and-manage-collaborative-pages/insert-a-text-diagram

## 1.功能介绍

Wiki 协同页面支持插入文本绘图，可以快速将符合特定语法的文本渲染为图表、UML图或流程图

## 2.操作流程

点击顶部工具栏「插入」菜单、或输入 / ，在列表中选择「文本绘图」，选择需要插入的文本绘图类型，包括：mermaid、plantUML、flowChart

![插入文本绘图 配图 1](https://docs.ones.cn/assets/images/59f4feb704913ab0-8f3d3b4e3fc342f9059ad08cc47f322c.png)

### 2.1 撰写文本绘图

插入后，在左侧输入对应文本绘图的语法，右侧展示渲染后的图表 如果语法有异常，无法正常渲染为图片，右侧会展示错误提示；修正语法后，即可正常展示图表。

![插入文本绘图 配图 2](https://docs.ones.cn/assets/images/1d1b632f908bc50d-6e8697ef048234ad949fc5e6d81c0450.png)

如果在撰写文本绘图过程中出现渲染错误信息，可参考下列文档进行修正

> [Mermaid ：https://mermaid.js.org/intro/](https://mermaid.js.org/intro/)

[PlantUML：https://plantuml.com/](https://plantuml.com/)

[flowChart ：https://flowchart.js.org/](https://flowchart.js.org/)

### 2.2 切换绘图模式

点击顶部的「展示代码与绘图」菜单，可切换「仅展示绘图」或「仅展示代码」 。无论编辑状态如何选择显示模式，阅读状态下都仅展示图片。

- 查看页面时，点击绘图，可放大查看；
- 右键点击绘图，可保存为图片或复制 Markdown。
![插入文本绘图 配图 3](https://docs.ones.cn/assets/images/2d57d56a6ccb0ca5-010797a678aa33f33ed1329775bff0f0.png)