Teks ke Diagram Alur
Ketik sintaks Mermaid dan buat diagram alur secara instan. Tanpa server — pemrosesan 100% lokal.
Kesalahan Sintaks
Tentang
Teks ke Diagram Alur adalah alat browser gratis yang menghasilkan diagram alur, diagram urutan, dan lainnya secara otomatis dari sintaks Mermaid.
Semua pemrosesan dilakukan secara lokal menggunakan Mermaid.js — tidak ada data yang dikirim ke server eksternal, sehingga aman untuk alur kerja rahasia.
Ekspor sebagai SVG atau PNG secara instan. Tanpa instalasi aplikasi — cukup buka di browser dan mulai membuat diagram.
Cara Menggunakan
Masukkan kode
Ketik sintaks Mermaid di editor kiri. Contoh diagram sudah tersedia untuk membantu Anda memulai.
Lihat secara real-time
Pratinjau di sebelah kanan diperbarui secara real-time. Jika ada kesalahan sintaks, pesan bantuan akan ditampilkan.
Simpan sebagai SVG atau PNG
Klik "Simpan SVG" atau "Simpan PNG" untuk mengunduh diagram langsung ke perangkat Anda.
Glosarium
- Mermaid.js
- Library JavaScript yang menghasilkan diagram dari sintaks teks. Didukung secara resmi di Markdown GitHub.
- Diagram Alur (Flowchart)
- Representasi visual dari suatu proses. Dibuat di Mermaid dengan
graph TDataugraph LR. - SVG (Scalable Vector Graphics)
- Format gambar vektor yang tidak bergantung pada resolusi. Dapat diperbesar tanpa kehilangan kualitas, ideal untuk presentasi dan cetak.
- Node
- Setiap elemen dalam diagram (persegi, lingkaran, belah ketupat, dll.). Didefinisikan di Mermaid sebagai
A[Label]. - Edge (Sisi)
- Panah atau garis yang menghubungkan node. Dilambangkan dengan
-->(panah) atau---(garis). - Diagram Urutan (Sequence Diagram)
- Diagram yang menampilkan interaksi antar aktor dari waktu ke waktu. Dibuat dengan
sequenceDiagram.
Pertanyaan Umum
- Q.Bisakah saya menggunakan teks bahasa Indonesia di dalam node?
- Ya. Mermaid.js mendukung Unicode sehingga Anda bisa menggunakan bahasa apa saja di dalam node diagram.
- Q.Apa yang harus dilakukan jika diagram meluap dari area pratinjau?
- Area pratinjau mendukung scroll. Anda juga bisa mengubah arah layout dari "graph TD" (atas-bawah) ke "graph LR" (kiri-kanan).
- Q.Apakah diagram saya dikirim ke server?
- Tidak. Semua pemrosesan dilakukan secara lokal di browser menggunakan Mermaid.js. Konten diagram tidak pernah dikirim ke server eksternal.
- Q.Apa perbedaan SVG dan PNG?
- SVG adalah format vektor yang tidak kehilangan kualitas saat diperbesar, ideal untuk presentasi dan cetak. PNG adalah format raster, praktis untuk ditempel langsung di dokumen.
- Q.Bisakah saya membuat jenis diagram selain diagram alur?
- Ya. Mermaid.js mendukung diagram urutan (sequenceDiagram), diagram kelas (classDiagram), bagan Gantt (gantt), dan lainnya.
- Q.Apakah kode tersimpan antar sesi?
- Versi saat ini tidak menyimpan kode antar sesi. Untuk mengedit nanti, salin kode Mermaid dari editor dan simpan secara lokal.
Kasus Penggunaan
Dokumentasi sistem
Dokumentasikan alur pemanggilan API atau skema database dengan Mermaid dan sematkan dalam dokumentasi teknis.
Notulen rapat dan alur kerja
Visualisasikan alur kerja atau proses persetujuan dari rapat dengan cepat dan bagikan ke tim Anda.
Slide presentasi
Saat membuat diagram di PowerPoint terlalu lambat, buat di Mermaid, ekspor sebagai PNG, dan tempel di slide.
Materi pendidikan
Visualisasikan langkah-langkah algoritma atau garis waktu sebagai diagram alur untuk materi belajar yang lebih mudah dipahami.
Sintaks Mermaid
Diagram alur dasar (graph)
graph TD
A[Mulai] --> B{Kondisi}
B -->|Ya| C[Proses A]
B -->|Tidak| D[Proses B]
C --> E[Selesai]
D --> EReferensi bentuk node
A[Teks] — PersegiB(Teks) — BulatC{Teks} — Belah ketupatD((Teks)) — LingkaranE>Teks] — AsimetrisF[(DB)] — Basis dataKirim Umpan Balik
Beri tahu kami pendapat Anda untuk membantu kami menyempurnakan alat ini.
Umpan balik sementara ditangguhkan
Server sedang sibuk atau perlindungan spam aktif. Silakan coba lagi nanti.