Editor online Mermaid - Membuat diagram alur, diagram urutan, dan diagram kelas dengan sintaks Mermaid dalam sekali klik serta 21 jenis diagram lainnya

Mermaid adalah alat untuk menghasilkan diagram berdasarkan sintaks teks. Dengan menulis kode Mermaid yang sederhana, Anda dapat membuat berbagai jenis diagram seperti diagram alur, diagram urutan, diagram kelas, diagram status, diagram ER, diagram Gantt, peta pikiran, dan diagram arsitektur.

Berbeda dengan alat menggambar berbasis tarik-taruh tradisional, Mermaid terutama mendeskripsikan node, hubungan, urutan waktu, dan struktur data di dalam diagram melalui kode. Setelah kode diubah, diagram dapat dibuat ulang secara otomatis, sehingga sangat cocok untuk dokumentasi teknis, desain produk, manajemen proyek, pengembangan perangkat lunak, dan pengorganisasian pengetahuan.

Artikel ini memperkenalkan sintaks dasar Mermaid dan merangkum jenis diagram yang didukung editor Mermaid untuk dirender, beserta sintaks deklarasi, contoh kode, dan skenario penggunaan. Jika Anda ingin menulis dan melihat pratinjau kode Mermaid langsung secara online, Anda dapat mencoba gratis editor online Mermaid dari ProcessOn.

Apa itu Mermaid?

Mermaid adalah alat untuk menghasilkan diagram menggunakan sintaks teks. Kode berikut dapat menghasilkan diagram alur Mermaid yang sederhana:

flowchart TD

A[Start] --> B[Enter information]

B --> C{ Completed?}

C -->|Yes| D[End]

C -->|No| B

Hasil render adalah sebagai berikut:

Di antaranya: flowchart TD digunakan untuk mendeklarasikan pembuatan diagram alur yang tersusun dari atas ke bawah.

Logika operasional Mermaid dapat diringkas sebagai berikut:

Menulis kode Mermaid → Mengurai kode → Merender diagram → Mengubah kode → diagram diperbarui secara real-time

Jadi, salah satu kunci untuk mempelajari Mermaid adalah memahami sintaks deklarasi yang sesuai untuk setiap jenis diagram.

Diagram apa saja yang didukung Mermaid?

Jenis diagram yang berbeda menggunakan sintaks deklarasi Mermaid yang berbeda, saat ini diagram Mermaid yang umum meliputi:

Jenis diagram	Sintaks deklarasi Mermaid	Kegunaan umum
diagram alur	flowchart	Proses bisnis, algoritma, alur kerja
diagram urutan	sequenceDiagram	Interaksi sistem, pemanggilan API
diagram kelas	classDiagram	Struktur perangkat lunak, pemodelan berorientasi objek
diagram status	stateDiagram-v2	Transisi status, mesin status
diagram ER	erDiagram	Hubungan entitas basis data
diagram Gantt	gantt	Rencana proyek, progres tugas
diagram perjalanan pengguna	journey	Pengalaman pengguna, perjalanan pelanggan
peta pikiran	mindmap	Pengorganisasian pengetahuan, curah pendapat
garis waktu	timeline	Linimasa, peristiwa sejarah
diagram lingkaran	pie	Proporsi, analisis komposisi
diagram kuadran	quadrantChart	Klasifikasi, prioritas, analisis posisi
diagram Git	gitGraph	Cabang Git, commit, merge
diagram Sankey	sankey-beta	Data, sumber daya, arah aliran
diagram XY	xychart-beta	Tren data, perbandingan nilai
diagram radar	radar	Perbandingan indikator multidimensi
diagram C4	C4Context, dll.	Pemodelan arsitektur perangkat lunak
diagram arsitektur	architecture-beta	Arsitektur sistem, layanan, dan sumber daya
diagram kanban	kanban	Manajemen tugas dan status pekerjaan
diagram blok	block-beta	Modul, struktur, dan hubungan sistem
diagram paket	packet-beta	Struktur paket jaringan
diagram kebutuhan	requirementDiagram	Analisis kebutuhan dan hubungan antar kebutuhan

Versi editor Mermaid yang berbeda dapat mendukung sintaks dan fitur diagram yang berbeda, jadi saat digunakan, ikuti sintaks yang didukung editor.

Diagram alur Mermaid

Sintaks dasar

Mermaid menggunakan deklarasi flowchart untuk membuat diagram alur. Cara penulisan paling sederhana:

flowchart TD

A[Start] --> B[Arrange]

B --> C[End]

Hasil render

Di antaranya:

flowchart: mendeklarasikan pembuatan diagram alur
TD: tersusun dari atas ke bawah
A[Start]: membuat sebuah node
-->: membuat garis penghubung dengan panah

Diagram alur Mermaid juga dapat menggunakan LR (dari kiri ke kanan), RL (dari kanan ke kiri), BT (dari bawah ke atas) dan pengaturan arah lainnya. Contoh:

flowchart LR

A[Start] --> B[Arrange] --> C[End]

Menunjukkan diagram alur yang disusun dari kiri ke kanan.

Sintaks umum

Sintaks	Diagram	Arti
(text)	Persegi panjang bersudut bulat	Menunjukkan awal, akhir, atau operasi umum dari alur
[text]	Persegi panjang	Menunjukkan langkah, tugas, atau proses pemrosesan tertentu
{text}	Belah ketupat	Menunjukkan penilaian atau cabang kondisi
((text))	Lingkaran	Menunjukkan titik koneksi atau peristiwa
[[text]]	Persegi panjang ganda	Menunjukkan pemanggilan subalur atau submodul
[(text)]	Silinder	Menunjukkan node basis data
>text]	Bentuk asimetris	Menunjukkan masukan/keluaran
[/text/]	Jajar genjang	Menunjukkan data masukan atau keluaran
-->	Panah	Menunjukkan arah jalannya alur
---	Garis penghubung tanpa panah	Menunjukkan hubungan asosiasi
-.->	Panah garis putus-putus	Menunjukkan alur opsional atau hubungan referensi
==>	Panah tebal	Menunjukkan alur utama atau asosiasi kuat

Untuk sintaks lengkap membuat diagram alur dengan Mermaid, kunjungi halaman berikut: https://www.processon.io/id/mermaid/flowchart

Diagram alur cocok digunakan untuk skenario seperti proses bisnis, alur kerja, alur algoritma, alur sistem, dan alur pengambilan keputusan, coba gratis editor online Mermaid untuk diagram alur.

Diagram urutan Mermaid

Sintaks dasar

Mermaid menggunakan deklarasi sequenceDiagram untuk membuat diagram urutan. Contoh paling sederhana:

sequenceDiagram

Alice->>John: Hello John

John-->>Alice: Hello Alice

Hasil render

Di antaranya:

sequenceDiagram: Menunjukkan pembuatan diagram urutan Mermaid
->>: Panah garis solid, menunjukkan pemanggilan pesan asinkron
-->>: Panah garis putus-putus, menunjukkan respons asinkron atau pesan balasan

Sintaks umum

Sintaks	Diagram	Arti
sequenceDiagram	diagram urutan	Membuat diagram urutan
A->B: message	Garis solid	Menunjukkan pemanggilan pesan sinkron atau interaksi biasa
A-->B: message	Garis putus-putus	Menunjukkan pesan balasan atau interaksi dengan asosiasi lemah
A->>B: message	Panah garis solid	menunjukkan pemanggilan pesan asinkron
A-->>B: message	Panah garis putus-putus	menunjukkan respons asinkron atau pesan balasan
participant A	Partisipan	Mendefinisikan objek, peran, atau sistem di dalam interaksi
actor A	Peran	Menunjukkan partisipan aktif seperti pengguna atau sistem eksternal
activate A	Kotak aktivasi	Menunjukkan objek mulai memproses permintaan
deactivate A	Mengakhiri aktivasi	Menunjukkan objek menyelesaikan pemrosesan saat ini
loop text	Kotak perulangan	Menunjukkan proses interaksi yang diulang
alt text	Cabang kondisi	Menunjukkan jalur interaksi pada kondisi yang berbeda
opt text	Alur opsional	Menunjukkan interaksi yang mungkin dijalankan
par text	Kotak paralel	Menunjukkan beberapa operasi dijalankan secara bersamaan

Untuk sintaks lengkap membuat diagram urutan dengan Mermaid, kunjungi halaman berikut: https://www.processon.io/id/mermaid/sequence-diagram

Diagram urutan cocok untuk menggambarkan interaksi yang terjadi menurut urutan waktu antara pengguna dan sistem, antarsistem, serta antarlayanan, coba gratis editor online Mermaid untuk diagram urutan.

Diagram kelas Mermaid

Sintaks dasar

Mermaid menggunakan deklarasi classDiagram untuk membuat diagram kelas.

classDiagram

Animal <|-- Duck

Animal <|-- Fish

class Animal {

+String name

+eat()

}

class Duck {

+swim()

}

Hasil render

Di antaranya:

classDiagram: Menunjukkan pembuatan diagram kelas Mermaid
<|--: Menunjukkan hubungan pewarisan
+String name: Menunjukkan atribut atau metode publik

Sintaks umum

Sintaks	Diagram	Arti
classDiagram	diagram kelas	Membuat diagram kelas
class ClassName	Kelas	Mendefinisikan objek kelas
ClassName : attribute	Atribut	Menunjukkan variabel anggota di dalam kelas
ClassName : method()	Metode	Mendefinisikan metode kelas
<\|--	Segitiga kosong+ Garis solid	Menunjukkan hubungan pewarisan
<\|..	Segitiga kosong+ Garis putus-putus	Menunjukkan hubungan implementasi
*--	Belah ketupat terisi+ Garis solid	Menunjukkan hubungan komposisi
o--	Belah ketupat kosong+ Garis solid	Menunjukkan hubungan agregasi
-->	Panah garis solid	Menunjukkan hubungan asosiasi
..>	Panah garis putus-putus	Menunjukkan hubungan dependensi
--	Garis solid	Menunjukkan hubungan koneksi biasa
+attribute	Tanda plus	Menunjukkan atribut atau metode publik
-attribute	Tanda minus	Menunjukkan atribut atau metode privat

Simbol seperti +, -, dan # di depan anggota kelas dapat menunjukkan tingkat visibilitas yang berbeda.

Untuk sintaks lengkap membuat diagram kelas dengan Mermaid, kunjungi halaman berikut: https://www.processon.io/id/mermaid/class-diagram

Diagram kelas cocok untuk skenario seperti perancangan perangkat lunak, pemodelan berorientasi objek, dan analisis struktur program, coba gratis editor online Mermaid untuk diagram kelas.

Diagram status Mermaid

Sintaks dasar

Mermaid menggunakan deklarasi stateDiagram-v2 untuk membuat diagram status.

stateDiagram-v2

state "Pending Payment" as Pending

[*] --> Pending

Pending --> Paid

Paid --> Shipped

Shipped --> Completed

Completed--> [*]

Hasil render

Di antaranya:

stateDiagram-v2: Menunjukkan pembuatan diagram status Mermaid
[*] -->: Menunjukkan masuk ke status pertama
-->: Menunjukkan transisi status
--> [*]: Menunjukkan akhir dari alur status

Sintaks umum

Sintaks	Diagram	Arti
stateDiagram-v2	diagram status	Membuat diagram status
state StateName	Persegi panjang bersudut bulat	Mendefinisikan node status dasar
state StateName : text	Persegi panjang bersudut bulat berteks	Menambahkan teks deskripsi pada status
[*]	Titik kecil terisi atau cincin ganda	Menunjukkan awal atau akhir status
[*] --> StateName	Panah awal	Menunjukkan masuk ke status pertama
StateName --> [*]	Panah akhir	Menunjukkan akhir dari alur status
A --> B	Panah garis solid	Menunjukkan transisi status
A --> B: event	Panah garis solid dengan label	Transisi status dengan peristiwa pemicu
state StateName { ... }	Persegi panjang bersudut bulat bertingkat	Mendefinisikan status gabungan
state Node <<choice>>	Belah ketupat	Node pilihan penilaian bercabang
state Fork <<fork>>	Garis pemisah horizontal tebal	Menunjukkan awal alur paralel
state Join <<join>>	Garis pemisah horizontal tebal	Menunjukkan akhir dan penggabungan alur paralel

Untuk sintaks lengkap membuat diagram status dengan Mermaid, kunjungi halaman berikut: https://www.processon.io/id/mermaid/state-diagram

Diagram status cocok untuk menunjukkan status pesanan, status alur kerja, status pengguna, status sistem, serta mesin status, coba gratis editor online Mermaid untuk diagram status.

Diagram ER Mermaid

Sintaks dasar

Mermaid menggunakan deklarasi erDiagram untuk membuat diagram hubungan entitas, yaitu diagram ER.

erDiagram

USER ||--o{ ORDER : places

ORDER ||--|{ PRODUCT : contains

Hasil render

Di antaranya:

erDiagram: Menunjukkan pembuatan diagram ER Mermaid
||--o{: Koneksi satu ke banyak, Menunjukkan satu entitas berhubungan dengan banyak entitas, dapat kosong
||--|{: Koneksi satu ke banyak, Menunjukkan satu entitas berhubungan dengan banyak entitas, minimal 1

Sintaks umum

Sintaks	Diagram	Arti
erDiagram	diagram ER	Membuat diagram ER
ENTITY { }	Persegi panjang	Mendefinisikan entitas
type field	Penanda atribut	Mendefinisikan atribut entitas
type field PK	Kunci utama	Mendefinisikan kunci utama entitas
type field FK	Kunci asing	Mendefinisikan kunci asing entitas
type field UK	Kunci unik	Mendefinisikan kolom dengan batasan unik
\|\|	Satu	Harus tepat satu
o\|	Nol atau satu	Nol atau satu
\|{	Satu atau lebih	Minimal satu
o{	Nol, satu, atau lebih	Nol atau lebih

Untuk sintaks lengkap membuat diagram ER dengan Mermaid, kunjungi halaman berikut: https://www.processon.io/id/mermaid/er-diagram

Diagram ER dapat menunjukkan entitas, atribut, serta hubungan antarentitas, dan sering digunakan dalam perancangan basis data, coba gratis editor online Mermaid untuk diagram ER.

Sintaks peta pikiran Mermaid

Sintaks dasar

Mermaid menggunakan deklarasi mindmap untuk membuat peta pikiran.

mindmap

root((Mermaid))

Flowchart

Sequence diagram

Class diagram

Gantt chart

Mind map

Hasil render

Di antaranya:

Mindmap: Menunjukkan pembuatan peta pikiran Mermaid
root(()): berarti membuat tema akar melingkar

Sintaks umum

Sintaks	Diagram	Arti
mindmap	peta pikiran	Membuat peta pikiran
root[text]	Persegi panjang	Topik akar persegi panjang
root(text)	Persegi panjang bersudut bulat	Topik akar persegi panjang bersudut bulat
root((text))	Lingkaran	Topik akar lingkaran
root{{text}}	Segi enam	Topik akar segi enam
root)text(	Diagram gelembung	Topik akar gelembung
[text]	Persegi panjang	Node persegi panjang
(text)	Persegi panjang bersudut bulat	Node persegi panjang bersudut bulat
((text))	Lingkaran	Node lingkaran
{{text}}	Segi enam	Node segi enam
)text(	Diagram gelembung	Node gelembung

Untuk sintaks lengkap membuat peta pikiran dengan Mermaid, kunjungi halaman berikut: https://www.processon.io/id/mermaid/mindmap

Peta pikiran terutama merepresentasikan hubungan hierarki melalui indentasi, sehingga sangat cocok untuk pengorganisasian pengetahuan, curah pendapat, catatan pelajaran, dan arsitektur informasi, coba gratis editor online Mermaid untuk peta pikiran.

Diagram Gantt Mermaid

Sintaks dasar

Mermaid menggunakan deklarasi gantt untuk membuat diagram Gantt.

gantt

title Project Plan

dateFormat YYYY-MM-DD

section Design

Requirements Analysis:a1, 2026-01-01, 3d

UI Design:after a1, 2d

section Development

Front-end Development:2026-01-06, 4d

Back-end Development:2026-01-07, 4d

Hasil render

Di antaranya:

gantt: Menunjukkan pembuatan diagram Gantt Mermaid
title: menunjukkan judul diagram Gantt
dateFormat: mendefinisikan format penguraian tanggal pada garis waktu
section: menunjukkan pengelompokan tugas yang berbeda

Sintaks umum

Sintaks	Diagram	Arti
gantt	diagram Gantt	Membuat diagram Gantt
title text	Judul	Mengatur judul diagram Gantt
dateFormat text	Penanda konfigurasi tanggal	Mendefinisikan format penguraian tanggal pada garis waktu
section text	Bilah judul blok warna pengelompokan	Membagi pengelompokan tugas
TaskName : id, startDate, endDate	Batang tugas horizontal	Mendefinisikan atribut terkait tugas
startDate	Batang tugas horizontal	Mendefinisikan waktu mulai
endDate	Batang tugas horizontal	Mendefinisikan waktu selesai
duration	Batang tugas horizontal	Mendefinisikan durasi tugas
id	Kustom	Mendefinisikan nomor tugas
after id	Batang tugas horizontal	Mendefinisikan tugas yang mulai mengikuti tugas pendahulu
16d, 2w	Batang tugas horizontal	Menunjukkan hari atau minggu
milestone, date	Belah ketupat terisi	Mengatur node milestone

Untuk sintaks lengkap membuat diagram Gantt dengan Mermaid, kunjungi halaman berikut: https://www.processon.io/id/mermaid/gantt

Diagram Gantt Mermaid cocok untuk perencanaan proyek, penjadwalan tugas, progres pengembangan, dan manajemen proyek, coba gratis editor online Mermaid untuk bagan Gantt.

Diagram perjalanan pengguna Mermaid

Sintaks dasar

Mermaid menggunakan deklarasi journey untuk membuat diagram perjalanan pengguna.

journey

title User purchases a product

section Browse

Search for products: 5: User

View details: 4: User

section Place order

Add to cart: 5: User

Complete payment: 3: User

Hasil render

Di antaranya:

journey: Menunjukkan pembuatan diagram perjalanan pengguna Mermaid
title: menunjukkan judul diagram perjalanan pengguna
section: menunjukkan pengelompokan tahap alur
Search for products: 5: User: mendefinisikan tugas spesifik, cabang kepuasan, dan peran yang terlibat dalam tahap ini

Sintaks umum

Sintaks	Diagram	Arti
journey	diagram perjalanan pengguna	Membuat diagram perjalanan pengguna
title text	Judul	Judul diagram perjalanan pengguna
section text	Blok segmen	Membagi pengelompokan tahap alur
TaskName:num:Actor	Node alur + sumbu skala kepuasan	Mendefinisikan tugas interaksi, skor kepuasan, dan peran yang terlibat dalam tahap ini
num (1~5)	Skor kepuasan	Skor 1 terendah, skor 5 terbaik
Me, Cat	Peran	Mendefinisikan beberapa peran yang terlibat dalam tugas tersebut

Untuk sintaks lengkap membuat diagram perjalanan pengguna dengan Mermaid, kunjungi halaman berikut: https://www.processon.io/id/mermaid/user-journey-diagram

Diagram perjalanan pengguna cocok untuk menganalisis berbagai langkah dan pengalaman yang dilalui pelanggan dari pertama kali mengenal produk hingga mencapai tujuan, coba gratis editor online Mermaid untuk diagram perjalanan pengguna.

Garis waktu Mermaid

Sintaks dasar

Mermaid menggunakan deklarasi timeline untuk membuat garis waktu.

timeline

title Mermaid Development History

2019 : Project Development

2020 : Feature Expansion

2021 : More Diagram Types

Hasil render

Di antaranya:

timeline: Menunjukkan pembuatan garis waktu Mermaid
title: menunjukkan judul garis waktu
2019 : Perkembangan proyek: mendefinisikan peristiwa yang sesuai dengan titik waktu

Sintaks umum

Sintaks	Diagram	Arti
timeline	garis waktu	Membuat garis waktu
title text	Judul	Mengatur judul garis waktu
section text	Blok segmen	Membagi pengelompokan tahap waktu
date : Event1	Peristiwa	Mendefinisikan peristiwa yang sesuai dengan titik waktu
: Event2	Beberapa peristiwa	Peristiwa lain pada waktu yang sama
Spasi	Baris baru	Membuat baris baru untuk deskripsi peristiwa yang terlalu panjang

Untuk sintaks lengkap membuat garis waktu dengan Mermaid, kunjungi halaman berikut: https://www.processon.io/id/mermaid/timeline

Garis waktu cocok untuk menampilkan peristiwa sejarah, perkembangan proyek, iterasi produk, dan informasi urutan waktu, coba gratis editor online Mermaid untuk garis waktu.

Sintaks diagram kuadran Mermaid

Sintaks dasar

Mermaid menggunakan deklarasi quadrantChart untuk membuat diagram kuadran.

quadrantChart

title Product Positioning

x-axis Low Price--> High Price

y-axis Low Quality--> High Quality

quadrant-1 High-end

quadrant-2 Quality-focused

quadrant-3 Basic

quadrant-4 Value-for-money

Product A: [0.8, 0.7]

Product B: [0.3, 0.8]

Hasil render

Di antaranya:

quadrantChart: Menunjukkan pembuatan diagram kuadran Mermaid
x-axis: mendefinisikan label pada kedua ujung sumbu horizontal
y-axis: mendefinisikan label pada kedua ujung sumbu vertikal
quadrant-1: Mengatur teks anotasi di dalam kuadran kanan atas
quadrant-2: Mengatur teks anotasi di dalam kuadran kiri atas
quadrant-3: Mengatur teks anotasi di dalam kuadran kiri bawah
quadrant-4: Mengatur teks anotasi di dalam kuadran kanan bawah
Product A: [0.8, 0.7]: mendefinisikan titik koordinat, nilai x/y berkisar 0-1

Untuk sintaks lengkap membuat diagram kuadran dengan Mermaid, kunjungi halaman berikut: https://www.processon.io/id/mermaid/quadrant-chart

Diagram kuadran cocok untuk positioning produk, analisis prioritas, analisis persaingan, dan klasifikasi dua dimensi, coba gratis editor online Mermaid untuk bagan kuadran.

Diagram kanban Mermaid

Sintaks dasar

Diagram kanban Mermaid digunakan untuk mengorganisasi item pekerjaan menurut status tugas, misalnya belum diproses, sedang berjalan, dan sudah selesai. Struktur tipikalnya dapat digambarkan sebagai berikut:

kanban

Todo

Task A

Task B

Doing

Task C

Done

Task D

Hasil render

Di antaranya：

kanban: berarti membuat diagram kanban Mermaid
Todo: mendefinisikan kanban Klasifikasi status
Task A: Menunjukkan tugas spesifik

Untuk sintaks lengkap membuat diagram kanban dengan Mermaid, kunjungi halaman berikut: https://www.processon.io/id/mermaid/kanban

Diagram kanban cocok untuk manajemen proyek, pelacakan tugas, proses riset dan pengembangan, serta manajemen alur kerja, coba gratis editor online Mermaid untuk diagram kanban.

Diagram kebutuhan Mermaid

Sintaks dasar

Diagram kebutuhan dapat digunakan untuk menunjukkan hubungan antara kebutuhan, fungsi, dan elemen sistem, Mermaid menggunakan deklarasi requirementDiagram untuk membuat diagram kebutuhan.

requirementDiagram

requirement userRequirement {

id: 1

text: Customers can purchase products

risk: low

verifymethod: test

}

Hasil render

Di antaranya:

requirementDiagram: Menunjukkan pembuatan diagram kebutuhan Mermaid
requirement userRequirement { }: mendefinisikan kebutuhan dasar
text: mendefinisikan nama kebutuhan
risk: mendefinisikan tingkat risiko
verifymethod: mendefinisikan metode verifikasi

Sintaks umum

Sintaks	Diagram	Arti
requirementDiagram	diagram kebutuhan	Membuat diagram kebutuhan
Requirement name { }	Kebutuhan	Mendefinisikan kebutuhan dasar
functionalRequirement name { }	Fungsi	Mendefinisikan kebutuhan fungsional
interfaceRequirement name { }	Antarmuka	Mendefinisikan kebutuhan antarmuka
performanceRequirement name { }	Kinerja	Mendefinisikan kebutuhan kinerja
physicalRequirement name { }	Fisik	Mendefinisikan kebutuhan fisik
element name {type: name docRef: name}	Elemen	Mendefinisikan elemen entitas seperti sistem / komponen / pengujian
X - satisfies -> Y	Panah garis putus-putus	Entitas memenuhi kebutuhan yang bersangkutan
X - contains -> Y	Garis solid dengan titik ujung lingkaran bertanda plus di bagian awal	Satu kebutuhan memuat kebutuhan lain
X - derives -> Y	Panah garis putus-putus	Kebutuhan diturunkan dari kebutuhan lain
X - copies -> Y	Panah garis putus-putus	Kebutuhan menyalin kebutuhan lain
X - traces -> Y	Panah garis putus-putus	Hubungan penelusuran dua arah antarkebutuhan

Sintaks lengkap pembuatan diagram kebutuhan Mermaid dapat dilihat di halaman berikut: https://www.processon.io/id/mermaid/requirement-diagram

Diagram kebutuhan cocok untuk analisis kebutuhan produk, rekayasa sistem, dan penelusuran kebutuhan, coba gratis editor online Mermaid untuk diagram kebutuhan.

Diagram lingkaran Mermaid

Sintaks dasar

Mermaid menggunakan deklarasi pie untuk membuat diagram lingkaran.

pie showData

title Population Share by Continent

"Asia" : 59.5

"Africa" : 18.0

"Europe" : 9.0

"North America" : 7.5

"South America" : 5.5

"Oceania" : 0.5

Hasil render

Di antaranya:

pie: Menunjukkan pembuatan diagram lingkaran Mermaid
pie showData: menunjukkan pembuatan diagram lingkaran Mermaid yang menampilkan nilai data
title: menunjukkan judul diagram lingkaran
"Asia" : 59.5: mendefinisikan kategori data beserta proporsinya

Untuk sintaks lengkap membuat diagram lingkaran dengan Mermaid, kunjungi halaman berikut: https://www.processon.io/id/mermaid/pie-chart

Diagram lingkaran cocok untuk menunjukkan proporsi dan hubungan komposisi, coba gratis editor online Mermaid untuk diagram lingkaran.

Diagram Sankey Mermaid

Sintaks dasar

Diagram Sankey terutama digunakan untuk menunjukkan aliran trafik, sumber daya, dana, atau data antarnode, Mermaid menggunakan deklarasi sankey-beta untuk membuat diagram Sankey.

sankey-beta

A,B,50

A,C,30

B,D,20

C,D,30

Hasil render

Di antaranya:

sankey-beta: berarti membuat diagram Sankey Mermaid
A,B,50: Mendefinisikan arah aliran data: sumber, tujuan, dan nilai aliran
A: node kiri, menunjukkan sumber masukan data
B: node kanan, menunjukkan tujuan keluaran data
50: menunjukkan besarnya aliran

Untuk sintaks lengkap membuat diagram Sankey dengan Mermaid, kunjungi halaman berikut: https://www.processon.io/id/mermaid/sankey-diagram

Diagram Sankey adalah jenis diagram visualisasi yang digunakan untuk menampilkan aliran dari satu kelompok nilai ke kelompok nilai lainnya, coba gratis editor online Mermaid untuk diagram Sankey.

Diagram XY Mermaid

Sintaks dasar

Mermaid menggunakan deklarasi xychart-beta untuk membuat diagram XY.

xychart-beta

title "Monthly Sales Data"

x-axis "Month"["Jan", "Feb", "Mar", "Apr", "May", "Jun"]

y-axis " Sales (million)" 0 --> 100

line [20, 30, 40, 35, 50, 60]

bar [30, 50, 35, 20, 45, 40]

Hasil render

Di antaranya:

xychart-beta: Menunjukkan pembuatan diagram XY Mermaid
title: menunjukkan judul diagram XY
x-axis: menunjukkan kategori dan judul sumbu horizontal
y-axis: menunjukkan rentang dan judul sumbu vertikal
line: mendefinisikan deret data diagram garis
bar: mendefinisikan deret data diagram batang

Sintaks umum

Sintaks	Diagram	Arti
xychart-beta	Diagram koordinat XY	Membuat diagram koordinat XY
xychart-beta horizontal	Diagram koordinat XY horizontal	Membuat diagram koordinat XY horizontal
title "name"	Judul	Mendefinisikan judul diagram XY
x-axis "axisTitle" [a,b,c]	Sumbu X	Mendefinisikan kategori dan judul sumbu horizontal
y-axis "axisTitle" min --> max	Sumbu Y	Mendefinisikan rentang dan judul sumbu vertikal
y-axis "axisTitle"	Sumbu Y hanya dengan judul	Hanya mengatur nama sumbu vertikal, rentang nilai disesuaikan secara otomatis
bar [num1, num2, num3]	Diagram batang	Mendefinisikan deret data diagram batang
line [num1, num2, num3]	Diagram garis	Mendefinisikan deret data diagram garis

Untuk sintaks lengkap membuat diagram XY dengan Mermaid, kunjungi halaman berikut: https://www.processon.io/id/mermaid/xy-chart

Diagram XY cocok untuk menampilkan perubahan data, perbandingan nilai, dan visualisasi data sederhana, coba gratis editor online Mermaid untuk bagan XY.

Diagram radar Mermaid

Sintaks dasar

Diagram radar cocok untuk membandingkan performa beberapa objek pada berbagai dimensi, misalnya penilaian kemampuan, indikator produk, dan perbandingan skema. Mermaid menggunakan radar-beta untuk mendeklarasikan pembuatan diagram radar.

radar-beta

title "Competency Assessment Radar Chart"

axis a["Communication Skills"], b["Logical Thinking"], c["Team Collaboration"], d["Technical Skills"]

curve A["Chenlaoda"] {80, 90, 70, 85}

curve B["Wangxiaoer"] {60, 70, 90, 80}

Hasil render

Di antaranya:

radar-beta: berarti membuat diagram radar Mermaid
title: mendefinisikan judul diagram radar
axis: Mendefinisikan dimensi dan nama diagram radar
curve: Mendefinisikan nama deret data dan nilai pada setiap dimensi

Sintaks umum

Sintaks	Diagram	Arti
radar-beta	diagram radar	Membuat diagram radar
title "name"	Judul	Mendefinisikan judul diagram radar, tepat setelah radar-beta
title "name"	Judul	Mendefinisikan judul diagram radar, diletakkan sebelum radar-beta, dan perlu menambahkan 3 garis penghubung di atas serta di bawahnya
axis id ["axisTitle"]	Sumbu dimensi	Mendefinisikan dimensi dan nama diagram radar
curve id ["name"]{[values]}	Kurva data	Mendefinisikan nama deret data dan nilai pada setiap dimensi
max value	Nilai maksimum	Mengatur nilai maksimum rentang nilai diagram radar
min value	Nilai minimum	Mengatur nilai minimum rentang nilai diagram radar

Untuk sintaks lengkap membuat diagram radar dengan Mermaid, kunjungi halaman berikut: https://www.processon.io/id/mermaid/radar-chart

Diagram radar sangat berguna bagi pengembang, ilmuwan data, dan insinyur yang perlu menyajikan data secara jelas dan ringkas dalam format melingkar, coba gratis editor online Mermaid untuk bagan radar.

Diagram Git Mermaid

Sintaks dasar

Mermaid menggunakan deklarasi gitGraph untuk membuat diagram Git.

gitGraph

commit

branch develop

checkout develop

commit

checkout main

merge develop

Hasil render

Di antaranya:

gitGraph: Menunjukkan pembuatan diagram Git Mermaid
commit: menunjukkan pembuatan commit
commit id:"": mengatur nama commit
branch: menunjukkan pembuatan cabang
checkout: menunjukkan perpindahan cabang
merge: menunjukkan penggabungan cabang

Untuk sintaks lengkap membuat diagram Git dengan Mermaid, kunjungi halaman berikut: https://www.processon.io/id/mermaid/git-graph

Diagram Git cocok untuk menunjukkan proses kontrol versi seperti commit Git, pembuatan cabang, perpindahan cabang, dan merge, coba gratis editor online Mermaid untuk diagram Git.

Diagram C4 Mermaid

Sintaks dasar

Diagram C4 Mermaid digunakan untuk pemodelan arsitektur perangkat lunak, dan dapat mendeskripsikan sistem perangkat lunak, kontainer, komponen, serta hubungan di antara semuanya dari berbagai tingkat.

C4Context

title C4 Diagram of the Business System

Person(user, " User", " System user")

System(system, " Business System", " Core business system")

Rel(user, system, "Uses")

Hasil render

Di antaranya:

C4Context: Menunjukkan pembuatan diagram konteks C4
title: menunjukkan judul diagram C4
Person(user, " User", " System user"): menunjukkan pengguna atau peran yang menggunakan sistem
System(system, " Business System", " Core business system"): menunjukkan sistem perangkat lunak yang perlu dianalisis
Rel(user, system, "Uses"): mendefinisikan hubungan pemanggilan, interaksi, atau pengiriman data antara dua elemen

Sintaks	Diagram	Arti
C4Context	Diagram konteks sistem	Membuat diagram konteks sistem C4
C4Container	Diagram kontainer	Membuat diagram kontainer C4
C4Component	Diagram komponen	Membuat diagram komponen C4
C4Dynamic	Diagram interaksi dinamis	Membuat diagram interaksi dinamis C4
C4Deployment	Diagram deployment	Membuat diagram deployment C4
title	Judul	Mengatur judul diagram C4
Person(alias, "label", "description")	Orang	Menunjukkan pengguna atau peran yang menggunakan sistem
Person_Ext(alias, "label", "description")	Orang eksternal	Menunjukkan orang atau peran organisasi di luar sistem yang terlibat dalam interaksi
System(alias, "label", "description")	Node sistem	Menunjukkan sistem perangkat lunak yang perlu dianalisis
System_Ext(alias, "label", "description")	Node sistem eksternal	Menunjukkan layanan pihak ketiga atau sistem perangkat lunak eksternal yang menjadi dependensi sistem
System_Boundary(alias, "label")	Batas sistem	Menunjukkan batas cakupan sistem
Container(alias, "label", "technology")	Kontainer	Menunjukkan unit perangkat lunak yang dapat berjalan secara mandiri di dalam sistem
Container_Boundary(alias, "label")	Batas kontainer	Menunjukkan cakupan sebuah kontainer atau layanan

Untuk sintaks lengkap membuat diagram C4 dengan Mermaid, kunjungi halaman berikut: https://www.processon.io/id/mermaid/c4-diagram

Diagram C4 cocok untuk perancangan arsitektur perangkat lunak, analisis sistem, dan dokumentasi teknis, coba gratis editor online Mermaid untuk diagram C4.

Diagram arsitektur Mermaid

Sintaks dasar

Mermaid menggunakan deklarasi architecture-beta untuk membuat diagram arsitektur.

architecture-beta

group api(cloud)[API server]

service server(server)[server] in api

service database(database)[databasa] in api

server:R --> L:database

Hasil render

Di antaranya:

architecture-beta: Menunjukkan pembuatan diagram arsitektur Mermaid.
group api(cloud)[API server]: membuat grup arsitektur
service server(server)[server] in api: membuat komponen arsitektur atau modul layanan, dan menempatkannya di dalam grup arsitektur
server:R --> L:database: menentukan arah koneksi node, dari sisi kanan server menuju sisi kiri database

Untuk sintaks lengkap membuat diagram arsitektur dengan Mermaid, kunjungi halaman berikut: https://www.processon.io/id/mermaid/architecture-diagram

Diagram arsitektur cocok untuk menunjukkan hubungan antara server, basis data, layanan cloud, layanan aplikasi, serta berbagai komponen sistem, coba gratis editor online Mermaid untuk diagram arsitektur.

Diagram blok Mermaid

Sintaks dasar

Diagram blok terutama mendeskripsikan struktur sistem melalui modul dan hubungan koneksi, Mermaid menggunakan deklarasi block-beta untuk membuat diagram blok.

block-beta

A space B

A["User"] --> B["Application"]

B space C

B --> C["Database"]

Hasil render

Di antaranya:

block-beta: Menunjukkan pembuatan diagram blok Mermaid
space: Memperbesar jarak antarsetiap unit atau modul
-->: panah garis solid, menunjukkan arah hubungan

Untuk sintaks lengkap membuat diagram blok dengan Mermaid, kunjungi halaman berikut: https://www.processon.io/id/mermaid/block-diagram

Diagram blok cocok untuk skenario seperti modul sistem, struktur fungsional, arsitektur teknis, dan hubungan antarkomponen, coba gratis editor online Mermaid untuk diagram blok.

Diagram paket Mermaid

Sintaks dasar

Diagram paket terutama digunakan untuk menunjukkan field dan panjang di dalam struktur data paket jaringan atau protokol, Mermaid menggunakan deklarasi packet-beta untuk membuat diagram paket.

packet-beta

0-7: "Version"

8-15: "Type"

16-31: "Length"

Hasil render

Di antaranya:

packet-beta: Menunjukkan pembuatan diagram paket Mermaid
0-7: "Version ": menunjukkan rentang bit yang digunakan field

Diagram paket cocok untuk protokol jaringan, struktur paket, dan dokumen spesifikasi teknis, coba gratis editor online Mermaid untuk diagram paket.

Bagaimana jika tidak menguasai sintaks Mermaid?

Tidak menguasai sintaks Mermaid bukan berarti tidak dapat menggunakan Mermaid untuk menghasilkan diagram, Anda dapat menggunakan beberapa cara berikut:

Gunakan templat Mermaid secara gratis

Pilih dulu templat yang mendekati kebutuhan, lalu ubah node, teks, dan hubungan di dalamnya. Cara ini cocok untuk pengguna yang baru pertama kali menggunakan Mermaid.

AI membuat kode Mermaid

Anda dapat langsung mendeskripsikan diagram yang dibutuhkan dengan bahasa alami, misalnya:

Buat alur pemrosesan pesanan e-commerce, termasuk pengguna memesan, pembayaran, pemeriksaan stok, pengiriman, dan penyelesaian pesanan.

AI dapat membuat kode Mermaid berdasarkan deskripsi tersebut, lalu Anda ubah sesuai kebutuhan sebenarnya.

Menggunakan AI untuk memeriksa dan memperbaiki kode

Jika kode Mermaid mengalami kesalahan sintaks, Anda dapat meminta AI membantu menemukan masalah dan memperbaiki kodenya.

Membuat kode melalui pengenalan gambar

Untuk diagram alur, diagram arsitektur, atau diagram terstruktur lain yang sudah ada, Anda dapat mencoba membuat kode Mermaid melalui pengenalan gambar, lalu melanjutkan pengeditan.

Apa saja fitur editor online Mermaid?

Editor online Mermaid biasanya perlu menyelesaikan tiga masalah inti: penulisan kode, pratinjau diagram, dan ekspor hasil. Selain itu, templat dan AI juga dapat menurunkan hambatan penggunaan Mermaid.

Menggunakan ProcessOn Mermaid editor online sebagai contoh, Anda dapat langsung di browser:

Menulis kode Mermaid
Menempelkan kode Mermaid yang sudah ada
Merender dan melihat pratinjau diagram secara real-time
Gunakan templat Mermaid secara gratis
Dengan bahasa alami, AI membuat diagram Mermaid
AI memeriksa dan memperbaiki kode Mermaid
Membuat kode Mermaid melalui pengenalan gambar
Melakukan pengeditan dan modifikasi pada diagram yang dihasilkan
ekspor PNG, PDF, SVG, JPG, dan format Markdown

Oleh karena itu, bagi pengguna yang sering membuat diagram Mermaid, editor online ProcessOn Mermaid dapat menyatukan penulisan kode Mermaid, pembuatan diagram, pengeditan dan modifikasi lanjutan, ekspor dan berbagi dalam satu lingkungan kerja.

Dari diagram alur, diagram urutan, dan diagram kelas Mermaid, hingga diagram Gantt, peta pikiran, diagram kuadran, diagram Sankey, diagram Git, diagram C4, dan diagram arsitektur, semuanya dapat dibuat dan diedit.

Ayo gunakan editor online Mermaid, tulis kode Mermaid dan buat diagram secara online.

Pertanyaan umum

Apakah sintaks Mermaid sulit dipelajari?

Sintaks dasar Mermaid relatif sederhana; sebagian besar diagram hanya memerlukan penguasaan penulisan dasar seperti deklarasi diagram, node, garis penghubung, dan teks. Misalnya, sequenceDiagram digunakan untuk mendeklarasikan diagram urutan, sedangkan flowchart digunakan untuk mendeklarasikan diagram alur. Aturan sintaks setiap jenis diagram berbeda-beda, dan diagram yang kompleks masih memerlukan pembelajaran lebih lanjut mengenai parameter dan konfigurasi yang sesuai.

Mengapa kode Mermaid yang salah tidak dapat menghasilkan diagram?

Mermaid cukup sensitif terhadap struktur sintaks. Penyebab umumnya antara lain kesalahan penulisan deklarasi diagram, sintaks node atau garis penghubung yang tidak lengkap, indentasi atau penanganan karakter khusus yang tidak tepat, serta penggunaan sintaks yang tidak didukung oleh versi Mermaid saat ini.

Apa perbedaan Mermaid dengan perangkat lunak menggambar tradisional?

Mermaid mendeskripsikan diagram terutama melalui kode teks, sedangkan perangkat lunak menggambar tradisional biasanya membuat diagram dengan menarik dan melepas bentuk, garis penghubung, serta menyesuaikan gaya.

Apakah diagram Mermaid dapat disimpan dan digunakan kembali?

Bisa. Inti dari diagram Mermaid adalah kode teks, sehingga kode tersebut dapat disimpan ke Markdown, berkas kode, atau dokumen lain yang mendukung Mermaid, lalu dirender kembali saat diperlukan.

Ini juga merupakan perbedaan penting antara Mermaid dan diagram yang hanya berupa gambar: Gambar hanya menyimpan hasil akhirnya, sedangkan kode Mermaid sekaligus menyimpan informasi struktur diagram.

Apa hubungan antara Mermaid dan Markdown?

Mermaid sering digunakan bersama Markdown, tetapi keduanya bukan sintaks yang sama.

Markdown terutama digunakan untuk menulis teks terstruktur, sedangkan Mermaid digunakan untuk menghasilkan diagram melalui kode. Di editor Markdown yang mendukung Mermaid, kode Mermaid dapat disematkan ke dalam dokumen Markdown, sehingga diagram dan penjelasan teks berada dalam satu dokumen yang sama.

Kemampuan kerja Alat penting Tutorial Menggambar

Bisa tolong login untuk mendukung penulis?

Rekomendasi Terkait

Baru Diperbarui