Sebuah Diagram Alir<\/strong>adalah peta perilaku dasar yang memvisualisasikan alur kerja operasional langkah demi langkah, prosedur algoritmik, atau logika bisnis berurutan. Dengan mewakili tindakan sistem sebagai bentuk geometris yang berbeda dan mencatat alur kontrol dengan panah arah, diagram alir memudahkan insinyur perangkat lunak dan arsitek sistem untuk melacak jalur eksekusi bersyarat, mengisolasi blok titik kegagalan tunggal, serta menganalisis lingkaran logika sistem sebelum menulis kode backend yang sebenarnya.<\/p>\n Dengan Mermaid.js<\/strong>, Anda tidak perlu menghabiskan berjam-jam menyeret kotak, mengatur garis grid secara detail, atau menghitung ulang variabel padding. Mesin tata letak menghitung koordinat simpul secara dinamis dari skrip deklaratif mentah Anda, sehingga Anda dapat sepenuhnya fokus pada logika dasar sistem Anda.<\/p>\n Untuk merancang diagram alir yang elegan dan mudah dibaca di Mermaid, Anda harus menguasai petunjuk arah kanvas, pembatasan simpul geometris, variabel kabel tautan, dan subgraf struktural.<\/p>\n Orientasi diagram alir Anda ditentukan langsung pada baris pertama oleh pasangan kata kunci yang diterapkan pada Secara default, deklarasi ID biasa ditampilkan sebagai kotak persegi panjang tajam. Untuk membuat diagram Anda lebih mudah dibaca, gunakan kurung penutup khusus Mermaid untuk menyisipkan konteks visual langsung ke langkah-langkah kerja yang berbeda. Setiap blok definisi harus diawali dengan token tata letak arah agar dapat diproses dengan benar:<\/p>\nPanduan Sintaks Inti: Elemen dan Konstruksi<\/h2>\n
1. Menetapkan Arah Kanvas<\/h3>\n
graph<\/code> atau diagram alir<\/code>wrapper. Anda dapat mengendalikan arah penskalaan visual tata letak Anda menggunakan empat kunci orientasi utama:<\/p>\n\n
diagram alir TD<\/code> (Atas ke Bawah \/ Orientasi Vertikal)<\/li>\ndiagram alir BU<\/code> (Bawah ke Atas orientasi)<\/li>\ndiagram alir LR<\/code> (Kiri ke Kanan \/ Orientasi Horizontal)<\/li>\ndiagram alir RL<\/code> (Kanan ke Kiri orientasi)<\/li>\n<\/ul>\n2. Menyesuaikan Geometri Simpul (Bentuk)<\/h3>\n
\n
id(Teks)<\/code> \u2014 Melambangkan langkah proses umum.<\/li>\nid([Text])<\/code> \u2014 Penanda standar untuk batas awal dan akhir batas.<\/li>\nid[[Text]]<\/code> \u2014 Melambangkan rutin sistem yang terenkapsulasi atau skrip kelas eksternal.<\/li>\nid[(Text)]<\/code> \u2014 Melambangkan persistensi basis data, cache, atau gudang data.<\/li>\nid{Text}<\/code> \u2014 Melambangkan sakelar bersyarat, cabang if\/else, atau titik evaluasi.<\/li>\nid[\/Text\/]<\/code> atau id[Text]<\/code> \u2014 Menghasilkan batas miring untuk mewakili input\/output data secara eksplisit (I\/O).<\/li>\n<\/ul>\n
\n
\n