文本绘图是钉钉文档提供的一种语法绘图，通过一些特定的语法快速绘制出你需要的流程图、甘特图等。目前支持：

• PlantUML

• Mermaid

一、插入方式

点击工具栏插入图标 或者 空行行首+号按钮 选择文本绘图，或 输入“/文本绘图” 或者 “/wbht” 快捷键方式插入，支持中文，拼音。

二、使用指南

实时预览：

在插入的输入框里选择你需要的语法和模板，在左侧输入语法，在右侧可实时预览。

全卡片展示绘图：

点击中间的推拉按钮，即可全卡片展示绘图

全屏展示：

点击右上角全屏按钮，即可全屏浏览

PlantUML

PlantUML是一个开源项目，支持快速绘制时序图、用例图、类图、活动图、组件图、状态图、对象图、部署图等。同时还支持非 UML 图的甘特图、架构图等。例如下面的用例图：

插入 PlantUML 图形卡片

1. 点击工具栏插入图标 或者 空行行首+号按钮 选择文本绘图，或 输入“/文本绘图”或者 “/wbht ”快捷键方式插入，支持中文、拼音。

2. 在文本绘图卡片右上角，选择「PlantUML」。

3. 你可在卡片左侧使用PlantUML语法编辑，右侧实时预览图形，在这里你可以参考模板进行修改，然后点击预览即可生成图例了。

更多支持

详情见 http://plantuml.com

更多真实的 PlantUML 例子可以前往 https://real-world-plantuml.com 搜索

Mermaid

Mermaid 是一种基于 Javascript 的绘图工具，使用类似于 Markdown 的语法，使用户可以方便快捷地通过代码创建图表。

语法

Flowcharts: https://mermaid.js.org/syntax/flowchart.html

Sequence diagrams: https://mermaid.js.org/syntax/sequenceDiagram.html

Gant diagrams: https://mermaid.js.org/syntax/gantt.html

Pie Charts: https://mermaid.js.org/syntax/pie.html

插入 Mermaid 图形卡片

1. 点击工具栏插入图标 或者 空行行首+号按钮 选择文本绘图，或 输入 /文本绘图 或者 /wbht  快捷键方式插入，支持中文，拼音

2. 在文本绘图卡片右上角，选择「Mermaid」

3. 可在卡片左侧使用Mermaid语法编辑，右侧实时预览图形

示例

Flow chart

Sequence diagram

Larger flowchart with some styling

自动编号 Autonumber

带上 autonumber 关键词，则会自动编号

非自动编号

Loops, alt and opt

Message to self in loop

Gantt

Gantt with color

Pie Chart

Relationship Diagrams

对象关系图 https://mermaid.js.org/syntax/entityRelationshipDiagram.html#entity-relationship-diagrams

Class diagrams

类图 https://mermaid.js.org/syntax/classDiagram.html

User Journey Diagram

用户行程图 https://mermaid.js.org/syntax/userJourney.html

Tasks syntax is Task name: <score>: <comma separated list of actors>