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

# Panduan menyisipkan diagram teks

> Fitur diagram teks DingTalk Docs: gunakan sintaks PlantUML atau Mermaid untuk membuat diagram alur, diagram urutan, dan bagan lainnya dengan cepat, mendukung pratinjau real-time, cocok untuk skenario yang memerlukan diagram editable yang dikelola dengan kode.

Diagram teks adalah metode menggambar berbasis sintaks yang disediakan DingTalk Docs. Melalui sintaks tertentu, Anda dapat membuat diagram alur, Lini Masa, dan bagan lain yang Anda perlukan dengan cepat. Saat ini fitur ini mendukung:

* **PlantUML**

* **Mermaid**

## I. Cara menyisipkan

Klik ikon sisipkan di bilah alat atau tombol + di awal baris kosong, lalu pilih diagram teks. Atau, ketik "/diagram teks" atau pintasan "/wbht" untuk menyisipkannya. Mendukung bahasa Mandarin dan pinyin.

Sisipkan melalui bilah alat di bagian atas.

Sisipkan melalui tombol \[+] di awal baris kosong.

Sisipkan dengan "/wbht".

Sisipkan dengan "/diagram teks".

## II. Panduan penggunaan

## Pratinjau real-time:

Pada kotak input yang disisipkan, pilih sintaks dan templat yang Anda perlukan. Masukkan sintaks di sisi kiri, lalu lihat pratinjau real-time di sisi kanan.

## Menampilkan diagram sebagai kartu penuh:

Klik tombol geser di tengah untuk menampilkan diagram sebagai kartu penuh.

## Tampilan layar penuh:

Klik tombol layar penuh di sudut kanan atas untuk menjelajah dalam mode layar penuh.

***

## PlantUML

[PlantUML](http://plantuml.com/) adalah proyek open source yang mendukung pembuatan cepat diagram urutan, diagram use case, diagram kelas, diagram aktivitas, diagram komponen, diagram status, diagram objek, diagram deployment, dan lainnya. Selain itu, PlantUML juga mendukung diagram non-UML seperti Lini Masa, diagram arsitektur, dan lainnya. Contohnya diagram use case berikut:

## Menyisipkan kartu diagram PlantUML

1. Klik ikon sisipkan di bilah alat atau tombol + di awal baris kosong, lalu pilih diagram teks. Atau, ketik "/diagram teks" atau pintasan "/wbht" untuk menyisipkannya. Mendukung bahasa Mandarin dan pinyin;

2. Di sudut kanan atas kartu diagram teks, pilih "PlantUML";

3. Edit dengan sintaks PlantUML di sisi kiri kartu, lalu pilih templat di sisi kanan untuk melihat pratinjau diagram secara real-time.

## Dukungan lainnya

Untuk detailnya, lihat [http://plantuml.com](http://plantuml.com/).

Untuk lebih banyak contoh PlantUML yang nyata, kunjungi [https://real-world-plantuml.com](https://real-world-plantuml.com/).

***

## Mermaid

Mermaid adalah alat menggambar berbasis Javascript yang menggunakan sintaks mirip Markdown, sehingga pengguna dapat membuat bagan dengan mudah dan cepat melalui kode.

## Sintaks

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)

## Menyisipkan kartu diagram Mermaid

1. Klik ikon sisipkan di bilah alat atau tombol + di awal baris kosong, lalu pilih diagram teks. Atau, ketik /diagram teks atau pintasan /wbht untuk menyisipkannya. Mendukung bahasa Mandarin dan pinyin;

2. Di sudut kanan atas kartu diagram teks, pilih "Mermaid";

3. Edit dengan sintaks Mermaid di sisi kiri kartu, lalu pilih templat di sisi kanan untuk melihat pratinjau diagram secara real-time.

## Contoh

### Diagram alur

### Diagram urutan

### Diagram kelas

### Diagram status

### Diagram ER

### Lini Masa

### Pai

### Diagram kebutuhan

### Diagram Gitgraph