> ## Documentation Index > Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt > Use this file to discover all available pages before exploring further. # 插入文本绘图说明 > 钉钉文档文本绘图功能：通过 PlantUML 或 Mermaid 语法快速生成流程图、时序图等图表，支持实时预览，适合需要以代码方式维护可编辑图示的场景。 文本绘图是钉钉文档提供的一种语法绘图，通过一些特定的语法快速绘制出你需要的流程图、甘特图等。目前支持： * **PlantUML** * **Mermaid** ## 一、插入方式 点击工具栏插入图标 或者 空行行首+号按钮 选择文本绘图，或 输入“/文本绘图” 或者 “/wbht” 快捷键方式插入，支持中文，拼音。 image.png 上方工具栏插入 image.png 空白行顶端【+】插入 image.png “/wbht”插入 image.png “/文本绘图”插入 ## 二、使用指南 ## 实时预览： 在插入的输入框里选择你需要的语法和模板，在左侧输入语法，在右侧可实时预览。 image.png image.png ## 全卡片展示绘图： 点击中间的推拉按钮，即可全卡片展示绘图 image.png image.png ## 全屏展示： 点击右上角全屏按钮，即可全屏浏览 image.png image.png *** ## PlantUML [PlantUML](http://plantuml.com/)是一个开源项目，支持快速绘制时序图、用例图、类图、活动图、组件图、状态图、对象图、部署图等。同时还支持非 UML 图的甘特图、架构图等。例如下面的用例图： ## 插入 PlantUML 图形卡片 1. 点击工具栏插入图标 或者 空行行首+号按钮 选择文本绘图，或 输入“/文本绘图”或者 “/wbht ”快捷键方式插入，支持中文、拼音； 2. 在文本绘图卡片右上角，选择「PlantUML」； 3. 你可在卡片左侧使用PlantUML语法编辑，右侧选择模板可实时预览图形。 image.png ## 更多支持 详情见 [http://plantuml.com](http://plantuml.com/) 更多真实的 PlantUML 例子可以前往 [https://real-world-plantuml.com](https://real-world-plantuml.com/) 搜索 *** ## Mermaid Mermaid 是一种基于 Javascript 的绘图工具，使用类似于 Markdown 的语法，使用户可以方便快捷地通过代码创建图表。 ## 语法 Flowcharts: [https://mermaid.js.org/syntax/flowchart.html](https://mermaid.js.org/syntax/flowchart.html) Sequence diagrams: [https://mermaid.js.org/syntax/sequenceDiagram.html](https://mermaid.js.org/syntax/sequenceDiagram.html) Gant diagrams: [https://mermaid.js.org/syntax/gantt.html](https://mermaid.js.org/syntax/gantt.html) Pie Charts: [https://mermaid.js.org/syntax/pie.html](https://mermaid.js.org/syntax/pie.html) ## 插入 Mermaid 图形卡片 1. 点击工具栏插入图标 或者 空行行首+号按钮 选择文本绘图，或 输入 /文本绘图 或者 /wbht 快捷键方式插入，支持中文，拼音； 2. 在文本绘图卡片右上角，选择「Mermaid」； 3. 可在卡片左侧使用Mermaid语法编辑，右侧选择模板可实时预览图形。 image.png ## 示例 ### 流程图image.png ### 时序图 image.png ### 类图 image.png ### 状态图 image.png ### ER图 image.png ### 甘特图 image.png ### 饼图 image.png ### 需求图 image.png ### Gitgraph图 image.png