- 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 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
- 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;
- Di sudut kanan atas kartu diagram teks, pilih “PlantUML”;
- 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. Untuk lebih banyak contoh PlantUML yang nyata, kunjungi 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 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.htmlMenyisipkan kartu diagram Mermaid
- 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;
- Di sudut kanan atas kartu diagram teks, pilih “Mermaid”;
- Edit dengan sintaks Mermaid di sisi kiri kartu, lalu pilih templat di sisi kanan untuk melihat pratinjau diagram secara real-time.