Sistem Diagram

4 min read

Buat flowchart, diagram UML, diagram jaringan, dan hubungkan semua elemen visual dengan konektor pintar.

! (…/images/diagram-flowchart.png)

Tinjau

Sistem Diagram menyediakan:

      • Bentuk Diagram * * - Flowchart, UML, dan simbol jaringan
      • Konektor Cerdas * * - Panah otomatis-routing yang update ketika bentuk bergerak
      • Hubungkan Apapun * * - Hubungkan sebarang butir kanvas (image, teks, bentuk, SVG)
      • Auto- Tata Letak * * - Otomatis atur diagram

Mengakses Panel Diagram

  1. Klik tombol * * Diagram * * di bilah alat kiri
  2. Panel diagram terbuka menampilkan bentuk yang tersedia

Diagram Panel

Membuat Bentuk Diagram

Dari Panel

  1. Buka panel Diagram
  2. Pilih sebuah kategori bentuk (Flowchart, UML, Network, Dasar)
  3. Klik suatu bentuk untuk menambahkannya ke kanvas
  4. Seret ke posisi

Kategori Bentuk

Kategori Bentuk Gunakan Untuk
Flowchart Proses, Keputusan, Terminal, Data, Dokumen, Basis Data Flowcharts, workflows
UML Kelas, Gunakan Kasus, Aktor Diagram perangkat lunak
Jaringan Cloud, Server Diagram arsitektur
Dasar Rectangle, Circle, Triangle, Star Tujuan umum

Menghubungkan Item

Sambungan Cepat (Objek Apapun)

  1. Pilih objek sumber
  2. Tahan Shift dan klik butir target
  3. Konektor diciptakan secara otomatis

Menggunakan Mode Sambung

  1. Klik * * Sambung * * di panel Diagram (atau tekan C)
  2. Klik pada port butir sumber (lingkaran biru)
  3. Seret ke port target butir
  4. Lepaskan untuk membuat koneksi

Connect Anything

Bekerja Dengan Butir Apapun

Konektor tidak terbatas pada bentuk diagram. Sambung:

  • Gambar dan diimpor SVG
  • Elemen teks
  • Bentuk ubahan (lingkaran, bintang, persegi panjang)
  • Elemen Generator- tercipta

Konektor Styles

Routing Styles

Gaya Deskripsi Terbaik Untuk
Langsung Garis lurus Koneksi sederhana
Orthogonal Jalur kanan-sudut Diagram teknis
Lengkung Kurva bezier halus Tata letak organik

Arrowhead Styles

Gaya Penampilan
Klasik Segitiga Berisi
Stealth Berlian dengan lekukan
Tajam Titik longated
Buka Garis luar bentuk V-
Berlian Bentuk berlian
Lingkaran Lingkaran penuh
Nihil Tanpa panah

[Konektor Styles] (…/images/diagram-connector-styles.png)

Tata Letak Otomatis

Otomatis atur diagram Anda:

  1. Pilih bentuk untuk mengatur (atau pilih kosong untuk semua)
  2. Klik * * Tata Letak Otomatis * * di panel Diagram
  3. Pilih algoritma tata letak

Tipe Tata Letak

Tata Letak Deskripsi Terbaik Untuk
Hierarkis Lapis to- to- bawah Flowcharts, org chart
Pohon Hierarki Parent- child Pohon keluarga, struktur berkas
Radial Lingkaran konsentris Peta pikiran
Grid Grid reguler Inventaris, galeri
Disutradarai Physics- based Diagram jaringan

Auto Layout

Contoh Diagram

Flowchart

Flowchart

Sebuah flowchart proses sederhana dengan:

  • Bentuk terminal untuk Awal / Akhir
  • Bentuk proses untuk aksi
  • Berlian keputusan untuk kondisi
  • Konektor ortogonal

Diagram Jaringan

! [Diagram Jaringan] (…/images/diagram-network.png)

Sebuah arsitektur jaringan menunjukkan:

  • Awan berbentuk untuk internet
  • Bentuk server bagi infrastruktur
  • Konektor putus untuk sambungan internal

UML Gunakan Kasus

UML Diagram

Sebuah diagram kasus dengan:

  • Angka tongkat aktor
  • Gunakan elips case
  • Konektor asosiasi

Konektor Teranimasi

Tambahkan efek “baut” untuk aliran animasi:

  1. Pilih suatu konektor
  2. Aktifkan * * Bolt Effect * * dalam Properti
  3. Atur:
        • Warna * * - Warna Bolt
        • Kecepatan * * - Kecepatan animasi
        • Ukuran * * - Ukuran Bolt

Baut perjalanan sepanjang konektor, menunjukkan arah aliran data.

Tips

Tips Diagram:

  • Gunakan orthogonal routing untuk diagram teknis
  • Gunakan routing melengkung untuk gaya organik, pikiran-peta
  • Terapkan Tata Letak Otomatis setelah menambahkan semua bentuk
  • Tahan Shift saat menyeret untuk snap- to- grid

Pintas Papan Ketik

Kunci Aksi
C Masukkan mode koneksi
Escape Keluar mode koneksi
Delete Hapus konektor / bentuk terpilih

Terkait

  • [Panah & Konektor] (/features/arrows) - Alat panah Legacy
  • [Animations] (/features/animations) - elemen diagram animasi
  • [Keyframe Editor] (/features/keyframes) - Urutan animasi kompleks