Diagram Blok
Diagram blok terdiri dari blok dan konektor, untuk secara visual merepresentasikan sistem, proses, atau arsitektur yang kompleks. Blok merepresentasikan komponen atau fungsi dasar, konektor menunjukkan hubungan atau alur antar komponen tersebut; diagram blok sangat penting di berbagai bidang seperti teknik, pengembangan perangkat lunak, dan manajemen proses.
Salin
Sematkan
block-beta
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
block:ID
A
B["A wide one in the middle"]
C
end
space
D
ID --> D
C --> D
style B fill:#f96,stroke:#333,stroke-width:4px
Kegunaan diagram blok
Tujuan utama diagram blok adalah menyediakan tampilan tingkat tinggi dari sistem, sehingga orang dapat dengan mudah memahami dan menganalisisnya, tanpa perlu mendalami detail rumit setiap komponen. Hal ini membuat diagram blok sangat berguna untuk menyederhanakan sistem yang kompleks, serta menjelaskan struktur keseluruhan dan interaksi antar komponen dalam sistem.
Skenario penggunaan
Diagram blok memiliki penerapan yang luas di berbagai industri dan disiplin ilmu, terutama meliputi:
- Arsitektur perangkat lunak: dalam pengembangan perangkat lunak, diagram blok dapat digunakan untuk mengilustrasikan arsitektur aplikasi perangkat lunak. Ini mencakup menunjukkan bagaimana berbagai modul atau layanan berinteraksi, aliran data, dan interaksi komponen tingkat tinggi.
- Diagram topologi jaringan: diagram blok sangat cocok untuk merepresentasikan arsitektur jaringan dalam TI dan telekomunikasi. Diagram ini dapat menunjukkan bagaimana berbagai perangkat dan layanan jaringan saling terhubung, termasuk router, switch, firewall, serta aliran data dalam jaringan.
- Diagram alur proses: dalam bisnis dan manufaktur, diagram blok dapat digunakan untuk membuat diagram alur. Diagram alur ini merepresentasikan berbagai tahap proses bisnis atau manufaktur, membantu memvisualisasikan urutan langkah, titik keputusan, dan alur kontrol.
- Sistem kelistrikan: insinyur menggunakan diagram blok untuk merepresentasikan sistem kelistrikan dan rangkaian. Diagram ini dapat mengilustrasikan struktur tingkat tinggi sistem kelistrikan, interaksi antar komponen kelistrikan yang berbeda, serta aliran arus listrik.
- Tujuan pendidikan: diagram blok juga banyak digunakan dalam materi pendidikan, untuk menjelaskan konsep dan sistem yang kompleks dengan cara yang disederhanakan. Diagram blok membantu menguraikan dan memvisualisasikan teori ilmiah, prinsip teknik, dan sistem teknis.
Selanjutnya, kita akan mempelajari secara mendalam cara membuat dan mengoperasikan diagram blok menggunakan Mermaid, mencakup semua hal mulai dari sintaks dasar hingga konfigurasi dan gaya tingkat lanjut.
Diagram blok sederhana
Struktur dasar
Diagram blok terdiri dari blok yang merepresentasikan entitas atau komponen yang berbeda; dalam Mermaid, blok dapat dibuat dengan mudah menggunakan label teks sederhana. Bentuk paling dasar dari diagram blok dapat berupa serangkaian blok tanpa garis penghubung apa pun.
Contoh diagram blok sederhana: untuk membuat diagram blok sederhana yang berisi tiga blok berlabel a, b, dan c, sintaksnya adalah sebagai berikut:
Salin
Sematkan
block-beta
a b c
Kode ini akan menghasilkan tiga blok yang tersusun horizontal, setiap blok akan secara otomatis diberi jarak dan disejajarkan, untuk mencapai keterbacaan yang optimal.
Mendefinisikan jumlah kolom yang akan digunakan
Diagram multi-kolom
Meskipun diagram blok sederhana bersifat linear dan sederhana, sistem yang lebih kompleks mungkin memerlukan tata letak yang terstruktur. Mermaid memungkinkan pengorganisasian blok menjadi beberapa kolom, sehingga membantu membuat diagram yang lebih kompleks dan lebih terperinci.
Contoh diagram multi-kolom: dalam kasus yang memerlukan distribusi blok ke beberapa kolom, Anda dapat menentukan jumlah kolom dan menata blok secara sesuai. Berikut adalah cara membuat diagram blok dengan tiga kolom dan empat blok, di mana blok keempat muncul pada baris kedua:
Salin
Sematkan
block-beta
columns 3
a b c d
Sintaks ini membuat Mermaid menata blok a, b, c, dan d dalam tiga kolom, dan berpindah ke baris berikutnya sesuai kebutuhan. Fitur ini sangat berguna untuk merepresentasikan sistem berlapis atau multi-lapis.
Konfigurasi blok lanjutan
Sintaks lanjutan Mermaid memberikan fleksibilitas dan kompleksitas yang lebih besar pada desain diagram, dapat menyesuaikan dengan kasus penggunaan dan skenario yang lebih luas.
Menyesuaikan lebar blok
Mencakup beberapa kolom
Dalam diagram yang lebih kompleks, Anda mungkin memerlukan blok yang mencakup beberapa kolom, untuk menekankan komponen tertentu atau merepresentasikan entitas yang lebih besar. Mermaid memungkinkan penyesuaian lebar blok untuk mencakup beberapa kolom, sehingga meningkatkan keterbacaan dan struktur diagram.
Contoh: untuk membuat blok yang mencakup dua kolom, Anda dapat menentukan lebar yang diinginkan untuk setiap blok:
Salin
Sematkan
block-beta
columns 3
a["A label"] b:2 c:2 d
Dalam contoh ini, blok berlabel A label menempati satu kolom, sedangkan blok b, c mencakup 2 kolom, dan d dialokasikan ke kolomnya sendiri. Fleksibilitas ukuran blok ini sangat penting untuk merepresentasikan secara akurat sistem dengan komponen yang berbeda tingkat kepentingan atau ukurannya.
Membuat blok komposit
Blok bersarang
Blok komposit memungkinkan merepresentasikan sistem bersarang atau berlapis, di mana satu komponen berisi beberapa subkomponen.
Contoh: membuat blok komposit melibatkan pendefinisian blok induk, lalu menyematkan blok anak di dalamnya. Berikut adalah sintaks untuk mendefinisikan blok komposit dengan elemen bersarang:
Salin
Sematkan
block-beta
block
D
end
A["A: I am a wide one"]
Dalam sintaks ini, D adalah blok anak yang disarangkan dalam blok induk yang lebih besar. Fitur ini sangat berguna untuk mendeskripsikan struktur yang kompleks, misalnya server dengan beberapa layanan atau sebuah departemen dalam kerangka organisasi yang lebih besar.
Lebar kolom otomatis
Menyesuaikan lebar
Mermaid memungkinkan penyesuaian lebar kolom secara dinamis berdasarkan konten blok. Lebar kolom ditentukan oleh blok terlebar dalam kolom tersebut, memastikan diagram tetap seimbang dan mudah dibaca.
Contoh: dalam diagram dengan ukuran blok yang berbeda, Mermaid akan secara otomatis menyesuaikan lebar kolom agar sesuai dengan blok terbesar di setiap kolom.
Salin
Sematkan
block-beta
columns 3
a:3
block:group1:2
columns 2
h i j k
end
g
block:group2:3
%% columns auto (default)
l m n o p q r
end
Di sini ditunjukkan bagaimana Mermaid secara dinamis menyesuaikan lebar kolom agar sesuai dengan blok terlebar.
Menggabungkan blok secara horizontal: dalam kasus yang memerlukan penumpukan blok secara horizontal, hal ini dapat dilakukan menggunakan lebar kolom. Berikut adalah sintaks diagram blok untuk membuat 4 blok yang ditumpuk bersama:
Salin
Sematkan
block-beta
block
columns 1
a["A label"] b c d
end
Dalam contoh ini, lebar blok gabungan akan secara otomatis disesuaikan dengan lebar subblok terbesar.
Jenis dan bentuk blok
Diagram blok Mermaid tidak terbatas pada bentuk persegi panjang standar. Mermaid menyediakan berbagai bentuk blok, sehingga memungkinkan representasi yang lebih terperinci dan personal untuk berbagai jenis informasi atau entitas.
Bentuk blok standar
Persegi panjang bersudut tumpul
Membuat blok persegi panjang bersudut tumpul, dapat digunakan untuk merepresentasikan komponen yang lebih lembut atau lebih fleksibel:
Salin
Sematkan
block-beta
id1("This is the text in the box")
Bentuk stadion
Blok berbentuk stadion dapat digunakan untuk merepresentasikan komponen yang berorientasi proses:
Salin
Sematkan
block-beta
id1(["This is the text in the box"])
Bentuk subproses
Digunakan untuk merepresentasikan subproses atau proses yang termuat, direpresentasikan dengan blok persegi panjang yang memiliki dua garis vertikal:
Salin
Sematkan
block-beta
id1[["This is the text in the box"]]
Bentuk silinder
Bentuk silinder sangat cocok untuk merepresentasikan basis data atau komponen penyimpanan:
Salin
Sematkan
block-beta
id1[("Database")]
Lingkaran
Lingkaran dapat digunakan untuk merepresentasikan komponen terpusat atau komponen kunci:
Salin
Sematkan
block-beta
id1(("This is the text in the circle"))
Bentuk asimetris, belah ketupat, dan segi enam
Gunakan belah ketupat untuk keputusan; untuk proses yang unik atau khusus, dapat digunakan bentuk asimetris dan segi enam:
Bentuk asimetris
Salin
Sematkan
block-beta
id1>"This is the text in the box"]
Salin
Sematkan
block-beta
id1{"This is the text in the box"}
Salin
Sematkan
block-beta
id1{{"This is the text in the box"}}
Jajaran genjang dan trapesium
Jajaran genjang dan trapesium sangat cocok untuk input / output dan proses transisi
Salin
Sematkan
block-beta
id1[/"This is the text in the box"/]
id2["This is the text in the box"]
A[/"Christmas"]
B["Go shopping"/]
Lingkaran ganda
Untuk menyorot komponen kunci atau berprioritas tinggi, penggunaan lingkaran ganda akan sangat efektif:
Salin
Sematkan
block-beta
id1((("This is the text in the circle")))
Blok panah dan blok kosong
Blok panah
Panah blok dapat secara visual menunjukkan arah atau aliran di dalam alur:
Salin
Sematkan
block-beta
blockArrowId<["Label"]>(right)
blockArrowId2<["Label"]>(left)
blockArrowId3<["Label"]>(up)
blockArrowId4<["Label"]>(down)
blockArrowId5<["Label"]>(x)
blockArrowId6<["Label"]>(y)
blockArrowId6<["Label"]>(x, down)
Blok kosong
Blok kosong dapat digunakan untuk membuat ruang kosong, yang berguna untuk tata letak dan keterbacaan:
Salin
Sematkan
block-beta
columns 3
a space b
c d e
Salin
Sematkan
block-beta
ida space:3 idb idc
Perhatikan, Anda dapat menggunakan simbol angka space:num untuk mengatur jumlah kolom yang ditempati blok kosong, di mana num merepresentasikan lebar kolom. Anda juga dapat menggunakan space, bawaannya satu kolom.
Bentuk standar dan bentuk khusus dalam Mermaid meningkatkan daya ekspresi diagram blok, sehingga memungkinkan representasi yang lebih akurat dan lebih kontekstual.
Menghubungkan blok dengan garis
Salah satu fitur kunci diagram blok Mermaid adalah kemampuan menghubungkan berbagai blok menggunakan berbagai jenis garis atau tautan.
Koneksi dasar dan jenis panah
Menghubungkan blok memerlukan panah atau garis. Konektor ini mendeskripsikan hubungan atau aliran informasi antar blok. Mermaid menyediakan berbagai jenis panah untuk memenuhi kebutuhan diagram yang berbeda.
Tautan dasar
Membuat tautan sederhana dengan panah, yang menunjukkan arah atau alur dari satu blok ke blok lain:
Salin
Sematkan
block-beta
A space B
A-->B
Contoh ini mengilustrasikan koneksi langsung dari blok A ke blok B.
Teks pada tautan
Selain menghubungkan blok, biasanya juga perlu mendeskripsikan atau menandai hubungan. Mermaid memungkinkan penambahan teks pada tautan, untuk memberikan konteks pada tautan.
Untuk menambahkan teks pada tautan, sintaksnya adalah menyertakan teks tersebut dalam definisi tautan:
Salin
Sematkan
block-beta
A space:2 B
A-- "X" -->B
Salin
Sematkan
block-beta
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
block:ID
A
B["A wide one in the middle"]
C
end
space
D
ID --> D
C --> D
style B fill:pink,stroke:#333,stroke-width:4px
Gaya dan penyesuaian
Selain struktur dan tata letak diagram blok, Mermaid juga menyediakan banyak opsi gaya; fitur penyesuaian ini memungkinkan pembuatan diagram yang lebih berciri visual dan lebih informatif.
Gaya blok tunggal
Mermaid dapat melakukan pengaturan gaya yang terperinci pada setiap blok; Anda dapat menerapkan berbagai properti CSS, misalnya warna, goresan, dan ketebalan batas.
Menyesuaikan gaya satu blok
Untuk menerapkan gaya khusus pada sebuah blok, Anda dapat menggunakan sintaks style, diikuti pengenal blok dan properti CSS yang diinginkan:
Salin
Sematkan
block-beta
id1 space id2
id1("Start")-->id2("Stop")
style id1 fill:pink,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
Gaya kelas
Mermaid mendukung penerapan gaya pada kelas. Jika Anda ingin menerapkan sekumpulan gaya tertentu pada beberapa elemen, menggunakan pengaturan gaya mungkin lebih mudah, karena Anda cukup menautkan elemen-elemen tersebut ke satu kelas.
Mengatur gaya untuk satu kelas
Salin
Sematkan
block-beta
A space B
A-->B
classDef blue fill:pink,stroke:#333,stroke-width:4px;
class A blue
style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
Di sini, kelas bernama blue didefinisikan dan diterapkan pada blok A, sedangkan blok B menerima gaya tersendiri.
Contoh penggunaan
Ketika diagram blok modular Mermaid diterapkan pada skenario nyata, keserbagunaannya tampak sepenuhnya.
Contoh terperinci berbagai fitur
Melalui elemen struktur, tautan, dan gaya, kita dapat membuat diagram blok Mermaid yang memainkan peran tertentu dalam konteks yang berbeda.
Arsitektur sistem
Berikut adalah arsitektur sistem perangkat lunak sederhana dengan komponen yang saling terhubung:
Salin
Sematkan
block-beta
columns 3
Frontend blockArrowId6<[" "]>(right) Backend
space:2 down<[" "]>(down)
Disk left<[" "]>(left) Database[("Database")]
classDef front fill:pink,stroke:#333;
classDef back fill:#f96,stroke:#333;
class Frontend front
class Backend,Database back
Contoh ini menunjukkan arsitektur dasar yang mencakup frontend, backend, dan basis data, dengan tampilan setiap blok berbeda-beda untuk membedakan jenis komponen yang berbeda.
Proses bisnis
Berikut adalah proses bisnis yang memiliki titik keputusan dan beberapa tahap:
Salin
Sematkan
block-beta
columns 3
Start(("Start")) space:2
down<[" "]>(down) space:2
Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"]
downAgain<["No"]>(down) space r3<["Done"]>(down)
Process2["Process B"] r2<["Done"]>(right) End(("End"))
style Start fill:pink;
style End fill:pink;
Contoh-contoh nyata ini menyoroti nilai praktis diagram blok Mermaid dalam menyederhanakan informasi yang kompleks dan mewujudkan komunikasi yang efektif lintas bidang.
Pemecahan masalah
Membuat diagram blok yang kompleks menggunakan sintaks Mermaid terkadang menghadapi tantangan; di sini dicantumkan kesalahan sintaks umum, dan disediakan tips untuk mengelola struktur diagram yang lebih kompleks.
Kesalahan sintaks umum
Menghindari kesalahan sintaks umum adalah kunci penggunaan diagram blok Mermaid yang lancar.
Kesalahan tautan
Menggunakan sintaks tautan yang tidak benar dapat menyebabkan hasil yang tidak terduga atau diagram yang rusak:
Salin
Sematkan
block-beta
A - B
Perbaikan: pastikan menggunakan panah koneksi (--> atau ---) dengan benar untuk menghubungkan setiap blok, guna mendefinisikan arah dan jenis koneksi. Selain itu, salah satu prinsip dasar diagram blok adalah memberi penulis kontrol penuh atas posisi blok, sehingga pada kasus di atas, Anda perlu menambahkan spasi di antara blok:
Salin
Sematkan
block-beta
A space B
A --> B
Ketidaksesuaian gaya
Menerapkan gaya dalam konteks yang salah atau menggunakan sintaks yang tidak benar dapat menyebabkan gaya tidak diterapkan seperti yang diharapkan:
Salin
Sematkan
block-beta
A
style A fillpink;
Perbaikan: pastikan memisahkan properti gaya dengan benar menggunakan koma, dan gunakan format properti CSS yang benar untuk memperbaiki sintaks:
Salin
Sematkan
block-beta
A
style A fill:pink,stroke:#333;
