Rajah Blok
Carta blok terdiri daripada blok dan penyambung, untuk mewakili sistem, proses atau seni bina yang kompleks secara intuitif. Blok mewakili komponen atau fungsi asas, penyambung memaparkan hubungan atau aliran antara komponen ini; carta blok penting dalam pelbagai bidang seperti kejuruteraan, pembangunan perisian dan pengurusan proses.
Salin
Benamkan
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 carta blok
Tujuan utama carta blok ialah menyediakan pandangan peringkat tinggi sistem, membolehkan orang memahami dan menganalisisnya dengan mudah, tanpa perlu memahami butiran kompleks setiap komponen secara mendalam. Ini menjadikan carta blok sangat berguna untuk memudahkan sistem kompleks, serta menerangkan struktur keseluruhan dan interaksi setiap komponen dalam sistem.
Senario penggunaan
Carta blok mempunyai aplikasi yang luas dalam pelbagai industri dan disiplin, terutamanya termasuk:
- Seni bina perisian: dalam pembangunan perisian, carta blok boleh digunakan untuk menerangkan seni bina aplikasi perisian. Ini termasuk memaparkan cara modul atau perkhidmatan berbeza berinteraksi, aliran data dan interaksi komponen peringkat tinggi.
- Gambar rajah topologi rangkaian: carta blok sangat sesuai untuk mewakili seni bina rangkaian dalam IT dan telekomunikasi. Ia boleh memaparkan cara peranti dan perkhidmatan rangkaian berbeza saling bersambung, termasuk penghala, suis, tembok api serta aliran data dalam rangkaian.
- Carta alir proses: dalam perniagaan dan pembuatan, carta blok boleh digunakan untuk mencipta carta alir. Carta alir ini mewakili pelbagai peringkat proses perniagaan atau pembuatan, membantu memvisualisasikan susunan langkah, titik keputusan dan aliran kawalan.
- Sistem elektrik: jurutera menggunakan carta blok untuk mewakili sistem elektrik dan litar. Ia boleh menerangkan struktur peringkat tinggi sistem elektrik, interaksi antara komponen elektrik berbeza serta aliran arus elektrik.
- Tujuan pendidikan: carta blok juga digunakan secara meluas dalam bahan pendidikan, untuk menerangkan konsep dan sistem kompleks dengan cara yang dipermudahkan. Carta blok membantu menguraikan dan memvisualisasikan teori saintifik, prinsip kejuruteraan dan sistem teknologi.
Seterusnya, kita akan menyelidiki cara mencipta dan mengendalikan carta blok menggunakan Mermaid, merangkumi segala-galanya daripada sintaks asas hingga konfigurasi dan gaya lanjutan.
Carta blok mudah
Struktur asas
Carta blok terdiri daripada blok yang mewakili entiti atau komponen berbeza; dalam Mermaid, blok boleh dicipta dengan mudah menggunakan label teks yang ringkas. Bentuk paling asas carta blok boleh jadi satu siri blok tanpa sebarang garis sambungan.
Contoh carta blok mudah: untuk mencipta carta blok mudah yang mengandungi tiga blok berlabel a, b dan c, sintaksnya adalah seperti berikut:
Salin
Benamkan
block-beta
a b c
Kod ini akan menjana tiga blok yang disusun secara mendatar; setiap blok akan dijarakkan dan dijajarkan secara automatik, untuk mencapai kebolehbacaan yang optimum.
Tentukan bilangan lajur yang hendak digunakan
Carta berbilang lajur
Walaupun carta blok mudah adalah linear dan ringkas, sistem yang lebih kompleks mungkin memerlukan susun atur berstruktur. Mermaid membenarkan blok disusun kepada berbilang lajur, sekali gus membantu mencipta carta yang lebih kompleks dan terperinci.
Contoh carta berbilang lajur: dalam keadaan yang memerlukan blok diedarkan ke berbilang lajur, bilangan lajur boleh ditentukan dan blok disusun dengan sepadan. Berikut ialah cara mencipta carta blok dengan tiga lajur dan empat blok, di mana blok keempat muncul pada baris kedua:
Salin
Benamkan
block-beta
columns 3
a b c d
Sintaks ini menyusun blok a, b, c dan d Mermaid dalam tiga lajur, dan membalut ke baris seterusnya mengikut keperluan. Ciri ini sangat berguna untuk mewakili sistem berlapis atau berbilang lapisan.
Konfigurasi blok lanjutan
Sintaks lanjutan Mermaid memberikan fleksibiliti dan kerumitan yang lebih besar dalam reka bentuk carta, boleh menyesuaikan dengan kes penggunaan dan senario yang lebih luas.
Laraskan lebar blok
Merentas berbilang lajur
Dalam carta yang lebih kompleks, anda mungkin memerlukan blok yang merentas berbilang lajur, untuk menekankan komponen tertentu atau mewakili entiti yang lebih besar. Mermaid membenarkan lebar blok dilaraskan untuk merangkumi berbilang lajur, sekali gus meningkatkan kebolehbacaan dan struktur carta.
Contoh: untuk mencipta blok yang merentas dua lajur, anda boleh menentukan lebar yang dikehendaki untuk setiap blok:
Salin
Benamkan
block-beta
columns 3
a["A label"] b:2 c:2 d
Dalam contoh ini, blok berlabel A label menduduki satu lajur, manakala blok b, c merentas 2 lajur, dan d diberikan lajurnya sendiri. Fleksibiliti saiz blok ini penting untuk mewakili sistem yang mempunyai komponen dengan kepentingan atau saiz berbeza dengan tepat.
Cipta blok komposit
Blok bersarang
Blok komposit membenarkan perwakilan sistem bersarang atau berhierarki, di mana satu komponen mengandungi berbilang subkomponen.
Contoh: mencipta blok komposit melibatkan mentakrifkan blok induk, kemudian menyisipkan blok anak di dalamnya. Berikut ialah sintaks untuk mentakrifkan blok komposit dengan elemen bersarang:
Salin
Benamkan
block-beta
block
D
end
A["A: I am a wide one"]
Dalam sintaks ini, D ialah blok anak yang bersarang dalam blok induk yang lebih besar. Ciri ini sangat berguna untuk menerangkan struktur kompleks, contohnya pelayan dengan berbilang perkhidmatan atau satu jabatan dalam rangka organisasi yang lebih besar.
Lebar lajur automatik
Laraskan lebar
Mermaid membenarkan lebar lajur dilaraskan secara dinamik berdasarkan kandungan blok. Lebar lajur ditentukan oleh blok terlebar dalam lajur, memastikan carta kekal seimbang dan mudah dibaca.
Contoh: dalam carta dengan saiz blok yang berbeza, Mermaid akan melaraskan lebar lajur secara automatik untuk menyesuaikan blok terbesar dalam setiap lajur.
Salin
Benamkan
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 cara Mermaid melaraskan lebar lajur secara dinamik untuk menyesuaikan blok terlebar.
Gabungkan blok secara mendatar: dalam keadaan yang memerlukan blok disusun bertindan secara mendatar, lebar lajur boleh digunakan untuk menyelesaikan tugasan. Berikut ialah sintaks carta blok untuk mencipta 4 blok yang bertindan:
Salin
Benamkan
block-beta
block
columns 1
a["A label"] b c d
end
Dalam contoh ini, lebar blok gabungan akan dilaraskan secara automatik kepada lebar subblok terbesar.
Jenis dan bentuk blok
Carta blok Mermaid tidak terhad kepada bentuk segi empat tepat standard. Mermaid menyediakan pelbagai bentuk blok, sekali gus membolehkan perwakilan jenis maklumat atau entiti yang berbeza dengan lebih terperinci dan tersendiri.
Bentuk blok standard
Segi empat tepat bulat
Cipta blok segi empat tepat bulat, boleh digunakan untuk mewakili komponen yang lebih lembut atau lebih fleksibel:
Salin
Benamkan
block-beta
id1("This is the text in the box")
Bentuk stadium
Blok berbentuk stadium boleh digunakan untuk mewakili komponen berorientasikan proses:
Salin
Benamkan
block-beta
id1(["This is the text in the box"])
Bentuk subgraf
Digunakan untuk mewakili subproses atau proses yang terkandung, diwakili oleh blok segi empat tepat dengan dua garisan menegak:
Salin
Benamkan
block-beta
id1[["This is the text in the box"]]
Silinder
Silinder sangat sesuai untuk mewakili pangkalan data atau komponen storan:
Salin
Benamkan
block-beta
id1[("Database")]
Bulatan
Bulatan boleh digunakan untuk mewakili komponen berpusat atau kritikal:
Salin
Benamkan
block-beta
id1(("This is the text in the circle"))
Bentuk tidak simetri, berlian dan heksagon
Gunakan berlian untuk keputusan; untuk proses yang unik atau khusus, bentuk tidak simetri dan heksagon boleh digunakan:
Bentuk tidak simetri
Salin
Benamkan
block-beta
id1>"This is the text in the box"]
Salin
Benamkan
block-beta
id1{"This is the text in the box"}
Salin
Benamkan
block-beta
id1{{"This is the text in the box"}}
Segi empat selari dan trapezium
Segi empat selari dan trapezium sangat sesuai untuk proses input / output dan peralihan
Salin
Benamkan
block-beta
id1[/"This is the text in the box"/]
id2["This is the text in the box"]
A[/"Christmas"]
B["Go shopping"/]
Bulatan berganda
Untuk menyorot komponen kritikal atau berkeutamaan tinggi, penggunaan bulatan berganda akan sangat berkesan:
Salin
Benamkan
block-beta
id1((("This is the text in the circle")))
Blok anak panah dan blok kosong
Blok anak panah
Blok anak panah boleh memaparkan arah atau aliran dalam proses secara intuitif:
Salin
Benamkan
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 boleh digunakan untuk mencipta ruang kosong, yang berguna untuk susun atur dan kebolehbacaan:
Salin
Benamkan
block-beta
columns 3
a space b
c d e
Salin
Benamkan
block-beta
ida space:3 idb idc
Nota, anda boleh menggunakan simbol nombor space:num untuk menetapkan bilangan lajur yang diduduki oleh blok kosong, di mana num mewakili lebar lajur. Anda juga boleh menggunakan space, lalai ialah satu lajur.
Bentuk standard dan bentuk khas dalam Mermaid meningkatkan keupayaan ekspresi carta blok, membolehkannya mewakili dengan lebih tepat dan lebih berkaitan dengan konteks.
Sambung blok dengan garisan
Satu ciri utama carta blok Mermaid ialah keupayaan untuk menyambung setiap blok menggunakan pelbagai jenis garisan atau pautan.
Sambungan asas dan jenis anak panah
Menyambung blok memerlukan anak panah atau garisan. Penyambung ini menerangkan hubungan atau aliran maklumat antara blok. Mermaid menyediakan satu siri jenis anak panah untuk memenuhi keperluan carta yang berbeza.
Pautan asas
Mencipta satu pautan mudah dengan anak panah, memaparkan arah atau aliran dari satu blok ke blok yang lain:
Salin
Benamkan
block-beta
A space B
A-->B
Contoh ini menerangkan sambungan terus dari blok A ke blok B.
Teks pada pautan
Selain menyambung blok, biasanya juga perlu menerangkan atau menandakan hubungan. Mermaid membenarkan teks ditambah pada pautan, memberikan konteks kepada pautan.
Untuk menambah teks pada pautan, sintaksnya ialah memasukkan teks itu dalam definisi pautan:
Salin
Benamkan
block-beta
A space:2 B
A-- "X" -->B
Salin
Benamkan
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 susun atur carta blok, Mermaid juga menyediakan banyak pilihan gaya; fungsi penyesuaian ini membolehkan penciptaan carta yang lebih bercirikan visual dan bermaklumat.
Gaya blok individu
Mermaid boleh melakukan tetapan gaya terperinci pada blok individu; anda boleh menggunakan pelbagai sifat CSS, contohnya warna, lukisan garis dan ketebalan sempadan.
Sesuaikan gaya blok individu
Untuk menggunakan gaya tersuai pada satu blok, anda boleh menggunakan sintaks style, diikuti dengan pengecam blok dan sifat CSS yang dikehendaki:
Salin
Benamkan
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 menyokong penggunaan gaya pada kelas. Jika anda ingin menggunakan satu set gaya tertentu pada berbilang elemen, penggunaan tetapan gaya lebih mudah, kerana anda hanya perlu memautkan elemen ini ke satu kelas.
Tetapkan gaya untuk satu kelas
Salin
Benamkan
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 ditakrifkan dan digunakan pada blok A, manakala blok B menerima gaya berasingan.
Kes penggunaan
Apabila carta modular carta blok Mermaid digunakan pada senario sebenar, kepelbagaian fungsinya terserlah sepenuhnya.
Contoh terperinci pelbagai fungsi
Melalui elemen struktur, pautan dan gaya, kita boleh mencipta carta blok Mermaid yang memainkan peranan tertentu dalam konteks yang berbeza.
Seni bina sistem
Berikut ialah seni bina sistem perisian mudah dengan komponen yang saling bersambung:
Salin
Benamkan
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 memaparkan seni bina asas yang mengandungi bahagian hadapan, bahagian belakang dan pangkalan data; perwakilan setiap blok berbeza, untuk membezakan jenis komponen yang berlainan.
Proses perniagaan
Berikut ialah satu proses perniagaan dengan titik keputusan dan berbilang peringkat:
Salin
Benamkan
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;
Kes sebenar ini menekankan nilai praktikal carta blok Mermaid dalam memudahkan maklumat kompleks dan mencapai komunikasi merentas bidang yang berkesan.
Penyelesaian masalah
Menggunakan sintaks Mermaid untuk menghasilkan carta blok kompleks kadangkala menghadapi cabaran; di sini disenaraikan kesalahan sintaks biasa, dan disediakan petua untuk mengurus struktur carta yang lebih kompleks.
Kesalahan sintaks biasa
Mengelakkan kesalahan sintaks biasa ialah kunci kepada penggunaan carta blok Mermaid yang lancar.
Kesalahan pautan
Menggunakan sintaks pautan yang tidak betul mungkin menyebabkan hasil yang tidak dijangka atau carta yang rosak:
Salin
Benamkan
block-beta
A - B
Pembetulan: pastikan sambungan anak panah (--> atau ---) digunakan dengan betul untuk setiap blok, bagi mentakrifkan arah dan jenis sambungan. Selain itu, salah satu prinsip asas carta blok ialah membenarkan penulis mengawal sepenuhnya kedudukan blok, jadi dalam kes di atas, ruang perlu ditambah antara blok:
Salin
Benamkan
block-beta
A space B
A --> B
Gaya tidak sejajar
Menggunakan gaya dalam konteks yang salah atau dengan sintaks yang tidak betul mungkin menyebabkan gaya tidak dapat ditetapkan seperti yang dijangkakan:
Salin
Benamkan
block-beta
A
style A fillpink;
Pembetulan: pastikan sifat gaya dipisahkan dengan betul menggunakan koma, dan gunakan format sifat CSS yang betul untuk membetulkan sintaks:
Salin
Benamkan
block-beta
A
style A fill:pink,stroke:#333;
