Skip to main content
Text-based diagrams are a syntax-driven drawing feature provided by DingTalk Docs. Use specific syntax to quickly create flowcharts, Timelines, and more. Currently supported:
  • PlantUML
  • Mermaid

​
1. How to insert

Click the Insert icon on the toolbar, or click the + button at the start of a blank line and select Text Diagram. You can also type /Text Diagram or the shortcut /wbht to insert it. Both Chinese characters and Pinyin are supported.

​
2. User guide

​
Real-time preview

In the input box, select the syntax and template you need. Enter the syntax on the left, and preview the result in real time on the right.

​
Display the diagram as a full card

Click the slider in the middle to display the diagram as a full card.

​
Full-screen view

Click the Full Screen button in the top-right corner to view the diagram in full screen.

​
PlantUML

PlantUML is an open-source project that supports quickly drawing sequence diagrams, use case diagrams, class diagrams, activity diagrams, component diagrams, state diagrams, object diagrams, and deployment diagrams. It also supports non-UML diagrams such as Timelines and architecture diagrams.

​
Insert a PlantUML diagram card

  1. Click the Insert icon on the toolbar, or click the + button at the start of a blank line and select Text Diagram. You can also type /Text Diagram or the shortcut /wbht to insert it. Both Chinese characters and Pinyin are supported.
  2. In the top-right corner of the text diagram card, select PlantUML.
  3. Use PlantUML syntax to edit on the left side of the card, and select a template on the right to preview the diagram in real time.

​
More resources

For details, see http://plantuml.com. For more real-world PlantUML examples, visit https://real-world-plantuml.com to Search.

​
Mermaid

Mermaid is a JavaScript-based drawing tool that uses Markdown-like syntax, allowing users to quickly Create Charts through code.

​
Syntax

Flowcharts: https://mermaid.js.org/syntax/flowchart.html Sequence diagrams: https://mermaid.js.org/syntax/sequenceDiagram.html Gantt diagrams: https://mermaid.js.org/syntax/gantt.html Pie Charts: https://mermaid.js.org/syntax/pie.html

​
Insert a Mermaid diagram card

  1. Click the Insert icon on the toolbar, or click the + button at the start of a blank line and select Text Diagram. You can also type /Text Diagram or the shortcut /wbht to insert it. Both Chinese characters and Pinyin are supported.
  2. In the top-right corner of the text diagram card, select Mermaid.
  3. Use Mermaid syntax to edit on the left side of the card, and select a template on the right to preview the diagram in real time.

​
Examples

Mermaid supports the following diagram types:
  • Flowchart
  • Sequence diagram
  • Class diagram
  • State diagram
  • ER diagram
  • Timeline
  • Pie chart
  • Requirement diagram
  • Gitgraph diagram