Editor Diagram Teknis

Buat alur atau arsitektur dari kotak bernama dan koneksi berarah.

Muat contoh atau tambahkan kotak dengan nama yang jelas. Untuk diagram besar, cari nama atau ID tetap.

Berjalan di browser Anda. Diagram tidak diunggah. Tidak memerlukan akun, Python, atau GPU.

Modul tata letak diunduh dari situs ini saat Anda membuat diagram. Diagram tetap berada di perangkat ini.

1. Jelaskan diagram Anda

Ubah nama kotak, tentukan koneksinya, lalu buat diagram. Label dan judul menerima hingga 200 unit UTF-16.

Ke pratinjau

Kotak

Koneksi

Edit koneksi
Kembali ke kotak
Gunakan JSON dari asisten AI

Tempel diagram dengan skema versi 1. Jika JSON tidak valid, formulir Anda tetap utuh. Tindakan ini tidak memanggil model AI.

Menghapus kotak tetap menyimpan koneksinya agar bisa diperbaiki. Perubahan membatalkan hasil ekspor sampai Anda membuat diagram lagi. Masukan hanya berada di memori dan hilang saat Anda meninggalkan atau memuat ulang halaman.

2. Periksa dan ekspor

SVG · teks dapat diedit

Periksa label dan koneksi asli

JSON mempertahankan ID asli, label persis, dan arah koneksi. Periksa sebelum membagikannya.

Kembali mengedit

Periksa maknanya sebelum membagikan. Font dapat berbeda di penampil SVG lain; panah yang rapat dapat bertumpang tindih. Ini adalah tata letak graf, bukan simulator diagram urutan atau rangkaian.

Memerlukan browser modern dengan Canvas, Web Workers, dan Intl.Segmenter.

Lisensi mesin tata letak dan kode sumber
Cara menggunakan

Apa itu editor diagram teknis?

Buat alur atau arsitektur dari kotak bernama dan koneksi berarah. Edit struktur, periksa tata letak, lalu simpan SVG dan JSON berversi. Alat ini mengatur gambar; tidak menyimpulkan langkah yang hilang atau menjamin kebenaran rancangan teknis.

Langkah penggunaan

  1. Muat contoh atau tambahkan kotak dengan nama yang jelas. Untuk diagram besar, cari nama atau ID tetap.
  2. Tambahkan koneksi dan pilih asal serta tujuannya, lalu tata letak vertikal atau horizontal. Menghapus kotak tetap menyimpan koneksinya agar ujungnya dapat diperbaiki atau kotaknya dipulihkan.
  3. Buat diagram dan periksa nama serta arah panah. Sesuaikan tampilan untuk melihat keseluruhan; ukuran asli dapat digulir. Struktur yang valid tidak menjamin panah yang padat mudah dibaca.
  4. Unduh SVG dan JSON. Terapkan kembali JSON untuk memulihkan struktur yang bisa diedit. Mengubah SVG di editor lain tidak memperbarui JSON. Simpan salinan sebelum meninggalkan halaman.

Memilih pengaturan

OpsiApa yang berubah
Alur / arsitekturKeduanya memakai kotak bernama dan koneksi berarah. Pilihan tidak menambahkan aturan khusus urutan, rangkaian listrik, atau bidang lain.
TB / LRAtas ke bawah / kiri ke kanan. Bahasa antarmuka tidak membalik arah diagram.
Pencarian dan halaman10 item yang dapat diedit per halaman. Filter hanya mengubah kontrol yang terlihat, bukan keseluruhan diagram yang dibuat atau diekspor.
SVG / JSONSVG memuat bentuk vektor dan teks. JSON menyimpan ID, label, dan ujung koneksi versi 1, bukan koordinat hasil tata letak.

Contoh dan hasil yang diharapkan

Alur peninjauan dengan 3 kotak dan 2 koneksi mengekspor seluruh 3 kotak dan kedua koneksi. Cari dan ubah nama satu kotak, buat ulang, lalu periksa label baru dan ujung koneksi yang tidak berubah dalam JSON. Angka ini menjelaskan alur kerja, bukan perkiraan ukuran atau waktu pemrosesan.

Jika tidak berfungsi

  • Terapkan atau buang perubahan JSON yang tertunda sebelum membuat diagram. Perbaiki jalur yang ditunjukkan oleh kesalahan, lalu coba lagi.
  • Jika ujung koneksi hilang, pulihkan kotak yang dihapus atau pilih kotak yang ada. Koneksi tidak dihapus diam-diam.
  • Jika melewati waktu atau batas keluaran, batalkan dan sederhanakan salinan yang disimpan sebelum mencoba lagi. Perubahan masukan membatalkan hasil lama; hanya hasil terbaru yang berhasil dapat diunduh.
  • Bersihkan menyediakan satu pemulihan dalam halaman. Keluar atau memuat ulang membebaskan tugas; tidak ada penyimpanan otomatis. Jika papan klip tidak tersedia, pilih JSON dan gunakan pintasan salin atau unduh.
  • Menyimpan JSON masukan mempertahankan diagram yang valid dan dapat disunting tanpa koordinat tata letak. Jika mesin tidak dapat dimuat, simpan sebelum memuat ulang halaman, lalu buka berkas JSON. Terapkan atau buang draf JSON yang ditempel sebelum menyimpan. Impor menerima JSON UTF-8 hingga 1,000,000 byte; berkas tidak valid tidak mengubah formulir. Pembacaan dapat dibatalkan, dan penyuntingan masukan juga membatalkan hasil pembacaan sebelumnya. Masukan tidak diunggah atau disimpan otomatis.

Format dan batas

Masukan melalui formulir atau JSON skema versi 1, hingga 1,000,000 byte UTF-8. Gunakan 1–100 kotak dan 0–200 koneksi. Judul dan label maksimal 200 unit UTF-16; judul dan label kotak wajib diisi, label koneksi boleh kosong. ID berisi 1–40 karakter ASCII: huruf, angka, _ atau -, diawali huruf.

Tata letak berhenti setelah 15 detik. Keluaran dibatasi 16,384 piksel per sisi, 64,000,000 piksel total, dan 5,000,000 byte SVG. Kolom atau versi tak dikenal, ID duplikat, serta ujung koneksi yang hilang ditolak. Tidak mengimpor Mermaid, CAD, atau berkas rangkaian listrik.

Tidak perlu GPU atau Python. Worker browser memakai sumber daya tetap dari asal yang sama. Teks SVG tidak diubah menjadi jalur; font penampil lain dapat mengubah tampilannya. Periksa SVG di aplikasi tujuan.

Tanya jawab

Apakah alat ini membuat rancangan teknis untuk saya?

Tidak. Anda menyediakan kotak, label, dan koneksi. Pemeriksaan mencakup struktur dan batas keluaran, bukan kebenaran rancangan.

Arah mana yang sebaiknya dipilih?

TB untuk alur vertikal, LR untuk rantai dependensi horizontal. Buat ulang dan periksa kesesuaiannya dengan tujuan pemakaian.

Mengapa diagram valid masih terlihat padat?

Koneksi yang lengkap tetap dapat bertumpuk secara visual. Pendekkan label, sederhanakan salinan, dan periksa ukuran asli sebelum dibagikan.

Mengapa pembuatan tidak tersedia atau JSON ditolak?

Terapkan atau buang JSON tertunda. Periksa jalur, versi, batas, keunikan ID, dan ujung koneksi yang ada.

Apakah diagram diunggah atau dikirim ke AI?

Tidak. Masukan dan hasil tetap dalam memori halaman. Sumber daya tetap dimuat dari situs ini; tidak memanggil model. Asisten dapat menyiapkan skema yang sama, tetapi halaman ini tidak terhubung ke akun AI Anda.