> ## 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.

# Insert a text-based diagram

> DingTalk Docs text-based diagrams: use PlantUML or Mermaid syntax to generate flowcharts, sequence diagrams, and more with real-time preview. Ideal for teams that prefer code-driven, version-controllable diagrams in documents.

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](http://plantuml.com/) 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](http://plantuml.com/).

For more real-world PlantUML examples, visit [https://real-world-plantuml.com](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](https://mermaid.js.org/syntax/flowchart.html)

Sequence diagrams: [https://mermaid.js.org/syntax/sequenceDiagram.html](https://mermaid.js.org/syntax/sequenceDiagram.html)

Gantt 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)

## 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