# Pembuat Diagram Sistem

URL: https://discuvr.org/system-diagram/?hl=id
Last updated: 2026-11-08
MCP tool: `draw_system_diagram`

Gambar diagram arsitektur dan alur dengan mengetik A -> B. Tata letak otomatis, grup yang bisa dilipat, langkah bernomor, ekspor PNG dan SVG.

Di alat papan tulis Anda menggambar setiap kotak dan panah lalu merapikannya dengan tangan. Di sini Anda mengetik siapa berbicara dengan siapa, satu baris per panah, dan tata letak dibuat otomatis. Kelompokkan layanan terkait lalu lipat grupnya menjadi satu kotak untuk gambaran besar; buka lagi untuk detailnya.

## Fungsinya

- Tata letak otomatis, kiri ke kanan atau atas ke bawah, yang diperbarui saat Anda mengetik.
- Bentuk dipilih dari nama: DB jadi basis data, Kafka antrean, User orang, nama berakhiran ? jadi keputusan.
- Grup yang bisa dilipat menjadi satu kotak, sehingga satu diagram melayani tampilan umum dan rinci.
- Seret, hubungkan, ganti nama, dan tambah kotak di kanvas juga; setiap perubahan ditulis kembali ke teks.
- Langkah bernomor, gaya gambar tangan, ekspor PNG dan SVG, serta tautan berbagi. Tidak ada yang diunggah.

## Cara kerja

1. Ketik baris seperti User -> Web App -> Orders DB atau mulai dari templat.
2. Tambahkan grup dengan Nama { ... }, label setelah titik dua, dan --> untuk panggilan asinkron.
3. Beralih antara Ringkasan dan Detail, rapikan kotak dengan menyeret, lalu ekspor atau salin tautan.

## Pertanyaan

**Apa bedanya dengan Excalidraw?**

Excalidraw adalah papan tulis bebas: Anda menaruh setiap bentuk dan panah sendiri. Di sini teks adalah diagramnya dan tata letaknya otomatis, jadi menambah layanan cukup satu baris, bukan menggambar dan merapikan kotak. Untuk sketsa bebas, Excalidraw tetap lebih cocok.

**Bagaimana menampilkan tampilan umum dan rinci?**

Masukkan kotak terkait ke grup dengan Nama { ... }. Ringkasan melipat setiap grup menjadi satu kotak dan menggabungkan panahnya; Detail membukanya lagi. Anda juga bisa melipat satu grup lewat kepalanya.

**Apakah diagram saya disimpan di suatu tempat?**

Tidak. Diagram digambar di browser Anda dan disimpan di penyimpanan lokalnya. Tautan berbagi membawa diagram di dalam tautan itu sendiri, setelah tanda #, yang tidak pernah dikirim browser ke server.

**Bisakah saya menempelkan diagram alir Mermaid?**

Tidak langsung; tidak ada impor Mermaid. Baris sederhana seperti A -> B tetap berfungsi, tetapi ada tiga perbedaan. Hapus baris judul graph TD, kalau tidak ia menjadi sebuah kotak, dan tulis direction: down sebagai gantinya. Buang label Mermaid di dalam kurung siku, karena di sini teks di dalam [ ] dibaca sebagai tag bentuk dan warna. Lalu --> di sini menggambar panah putus-putus untuk panggilan asinkron, sedangkan di Mermaid itu panah biasa; pakai -> untuk panah utuh.

**Apa lagi yang bisa ditulis selain A -> B?**

A -> B: teks memberi label pada panah, A --> B menggambar panah putus-putus, A <-> B panah dua arah, dan A <- B menunjuk ke belakang. Nama [db, blue] menetapkan bentuk dan warna; bentuknya service, db, cache, queue, actor, client, storage, external, decision, terminal dan note. title: memberi nama diagram, direction: down menyusunnya dari atas ke bawah, dan baris yang diawali # atau // adalah komentar. Satu diagram memuat hingga 300 kotak, 600 panah, dan 20.000 karakter teks.

**Apa yang terjadi pada panah saat saya melipat grup?**

Panah antar kotak di dalam grup yang dilipat disembunyikan, dan panah yang melintasi batasnya kini berawal atau berakhir di kotak grup. Beberapa panah di antara dua kotak yang sama digabung menjadi satu panah lebih tebal yang mempertahankan label pertama dan menambahkan jumlahnya. Contoh: jika Payments API dan Ledger ada di dalam Payments { ... }, baris Checkout -> Payments API dan Checkout -> Ledger menjadi satu panah Checkout -> Payments x2 di Ringkasan. Grup di dalam grup yang dilipat ikut terlipat, dan saat Langkah aktif, nomornya mengikuti panah yang masih terlihat, sesuai urutan penulisan.

## Lainnya di Alat Pengembang

- [JSON Formatter](https://discuvr.org/json-formatter/?hl=id)
- [Formatter Python](https://discuvr.org/python-formatter/?hl=id)
- [HTML Viewer](https://discuvr.org/html-viewer/?hl=id)
- [Kalkulator Subnet IP](https://discuvr.org/ip-subnet-calculator/?hl=id)

## Sering dipakai bersama

- [Bandingkan Teks](https://discuvr.org/text-diff/?hl=id)

---

Part of Discuvr (https://discuvr.org/): Discuvr is a collection of free, focused tools for day-to-day professional work - office and data utilities, legal and compliance helpers, privacy and security checks, and developer formatters. Every tool has its own page, and most can also be called from ChatGPT or Claude over MCP.