Editor dalam talian Mermaid - Jana gambar rajah aliran, gambar rajah jujukan dan gambar rajah kelas dengan satu klik melalui sintaks Mermaid, serta 21 jenis grafik lain

Mermaid ialah alat yang menjana gambar rajah berdasarkan sintaks teks. Dengan menulis kod Mermaid yang ringkas, anda boleh menjana pelbagai jenis gambar rajah seperti gambar rajah aliran, gambar rajah jujukan, gambar rajah kelas, gambar rajah keadaan, gambar rajah ER, carta Gantt, peta minda dan gambar rajah seni bina.

Berbeza daripada alat lukisan seret-dan-lepas tradisional, Mermaid menerangkan nod, hubungan, urutan masa dan struktur data dalam gambar rajah terutamanya melalui kod. Selepas kod diubah suai, gambar rajah dijana semula secara automatik, jadi ia sangat sesuai untuk dokumentasi teknikal, reka bentuk produk, pengurusan projek, pembangunan perisian dan penyusunan pengetahuan.

Artikel ini memperkenalkan sintaks asas Mermaid dan menyusun jenis gambar rajah yang boleh dirender oleh editor Mermaid serta sintaks pengisytiharan, contoh kod dan senario penggunaan. Jika anda ingin menulis dan mempratonton kod Mermaid secara terus dalam talian, anda boleh cuba secara percuma ProcessOn editor dalam talian Mermaid.

Apakah Mermaid?

Mermaid ialah alat yang menggunakan sintaks teks untuk menjana gambar rajah. Kod di bawah boleh menjana gambar rajah aliran Mermaid yang ringkas:

flowchart TD

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

B --> C{ Completed?}

C -->|Yes| D[End]

C -->|No| B

Kesan render adalah seperti berikut:

Di antaranya: flowchart TD digunakan untuk mengisytiharkan penciptaan gambar rajah aliran yang disusun dari atas ke bawah.

Logik pengendalian Mermaid boleh diringkaskan seperti:

Tulis kod Mermaid → huraikan kod → render gambar rajah → ubah suai kod → gambar rajah dikemas kini secara masa nyata

Oleh itu, salah satu kunci untuk mempelajari Mermaid ialah memahami sintaks pengisytiharan yang sepadan dengan setiap jenis gambar rajah.

Apakah gambar rajah yang disokong oleh Mermaid?

Jenis gambar rajah yang berbeza menggunakan sintaks pengisytiharan Mermaid yang berbeza, pada masa ini gambar rajah Mermaid yang biasa termasuk:

Jenis gambar rajah	Sintaks pengisytiharan Mermaid	Kegunaan biasa
Gambar rajah aliran	flowchart	Proses perniagaan, algoritma, aliran kerja
Gambar rajah jujukan	sequenceDiagram	Interaksi sistem, panggilan API
Gambar rajah kelas	classDiagram	Struktur perisian, pemodelan berorientasikan objek
Gambar rajah keadaan	stateDiagram-v2	Peralihan keadaan, mesin keadaan
Gambar rajah ER	erDiagram	Hubungan entiti pangkalan data
Carta Gantt	gantt	Pelan projek, kemajuan tugas
Gambar rajah perjalanan pengguna	journey	Pengalaman pengguna, perjalanan pelanggan
Peta minda	mindmap	Penyusunan pengetahuan, sumbang saran
Garis masa	timeline	Garis masa, peristiwa sejarah
Carta pai	pie	Perkadaran, analisis komposisi
Carta kuadran	quadrantChart	Pengelasan, keutamaan, analisis kedudukan
Gambar rajah Git	gitGraph	Cabang, komit dan gabungan Git
Gambar rajah Sankey	sankey-beta	Aliran data, sumber dan trafik
Gambar rajah XY	xychart-beta	Trend data, perbandingan nilai
Gambar rajah radar	radar	Perbandingan metrik pelbagai dimensi
Gambar rajah C4	C4Context dan lain-lain	Pemodelan seni bina perisian
Gambar rajah seni bina	architecture-beta	Seni bina sistem, perkhidmatan dan sumber
Gambar rajah kanban	kanban	Pengurusan tugas dan status kerja
Gambar rajah blok	block-beta	Modul, struktur dan hubungan sistem
Gambar rajah paket	packet-beta	Struktur paket rangkaian
Gambar rajah keperluan	requirementDiagram	Analisis keperluan dan hubungan keperluan

Versi editor Mermaid yang berbeza mungkin menyokong sintaks dan ciri gambar rajah yang berbeza, jadi semasa penggunaan, ikut sintaks yang disokong oleh editor.

Gambar rajah aliran Mermaid

Sintaks asas

Mermaid menggunakan pengisytiharan flowchart untuk mencipta gambar rajah aliran. Cara penulisan yang paling ringkas:

flowchart TD

A[Start] --> B[Arrange]

B --> C[End]

Kesan render

Di mana:

flowchart: mengisytiharkan penciptaan gambar rajah aliran
TD: susun atur dari atas ke bawah
A[Start]: mencipta satu nod
-->: mencipta garis penghubung dengan anak panah

Gambar rajah aliran Mermaid juga boleh menggunakan LR (dari kiri ke kanan), RL (dari kanan ke kiri), BT (dari bawah ke atas) dan tetapan arah lain. Contohnya:

flowchart LR

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

Menunjukkan gambar rajah aliran yang disusun dari kiri ke kanan.

Sintaks biasa

Sintaks	Bentuk	Maksud
(text)	Segi empat tepat bersudut bulat	Mewakili permulaan, penamat atau operasi am aliran
[text]	Segi empat tepat	Mewakili langkah, tugas atau proses pemprosesan tertentu
{text}	Rombus	Mewakili penilaian dan cabang bersyarat
((text))	Bulatan	Mewakili titik sambungan atau peristiwa
[[text]]	Segi empat tepat berkembar	Mewakili panggilan subaliran atau submodul
[(text)]	Silinder	Mewakili nod pangkalan data
>text]	Bentuk tak simetri	Mewakili input/output
[/text/]	Segi empat selari	Mewakili data input atau output
-->	Anak panah	Mewakili arah perjalanan aliran
---	Garis penghubung tanpa anak panah	Mewakili hubungan perkaitan
-.->	Anak panah garis putus-putus	Mewakili aliran pilihan atau hubungan rujukan
==>	Anak panah tebal	Mewakili aliran penting atau perkaitan kuat

Untuk sintaks terperinci penjanaan gambar rajah aliran Mermaid, sila lawati halaman berikut: https://www.processon.io/ms/mermaid/flowchart

Gambar rajah aliran sesuai digunakan untuk senario seperti proses perniagaan, aliran kerja, aliran algoritma, aliran sistem dan aliran keputusan, cuba secara percuma editor dalam talian Mermaid untuk gambar rajah aliran.

Gambar rajah jujukan Mermaid

Sintaks asas

Mermaid menggunakan pengisytiharan sequenceDiagram untuk mencipta gambar rajah jujukan. Contoh yang paling ringkas:

sequenceDiagram

Alice->>John: Hello John

John-->>Alice: Hello Alice

Kesan render

Di mana:

sequenceDiagram: Mewakili penciptaan gambar rajah jujukan Mermaid
->>: Anak panah garis pepejal, mewakili panggilan mesej tak segerak
-->>: Anak panah garis putus-putus, mewakili respons tak segerak atau mesej balasan

Sintaks biasa

Sintaks	Bentuk	Maksud
sequenceDiagram	Gambar rajah jujukan	Mencipta gambar rajah jujukan
A->B: message	Garis pepejal	Mewakili panggilan mesej segerak atau interaksi biasa
A-->B: message	Garis putus-putus	Mewakili mesej balasan atau interaksi perkaitan lemah
A->>B: message	Anak panah garis pepejal	mewakili panggilan mesej tak segerak
A-->>B: message	Anak panah garis putus-putus	mewakili respons tak segerak atau mesej balasan
participant A	Peserta	Mentakrifkan objek, peranan atau sistem dalam interaksi
actor A	Peranan	Mewakili peserta aktif seperti pengguna dan sistem luaran
activate A	Kotak pengaktifan	Mewakili objek mula memproses permintaan
deactivate A	Tamat pengaktifan	Mewakili objek menyelesaikan pemprosesan semasa
loop text	Kotak gelung	Mewakili proses interaksi yang dilaksanakan berulang kali
alt text	Cabang bersyarat	Mewakili laluan interaksi di bawah keadaan yang berbeza
opt text	Aliran pilihan	Mewakili interaksi yang mungkin dilaksanakan
par text	Kotak selari	Mewakili beberapa operasi yang dilaksanakan serentak

Untuk sintaks terperinci penjanaan gambar rajah jujukan Mermaid, sila lawati halaman berikut: https://www.processon.io/ms/mermaid/sequence-diagram

Gambar rajah jujukan sesuai untuk menerangkan interaksi antara pengguna dengan sistem, sistem dengan sistem, serta perkhidmatan dengan perkhidmatan yang berlaku mengikut urutan masa, cuba secara percuma editor dalam talian Mermaid untuk gambar rajah jujukan.

Gambar rajah kelas Mermaid

Sintaks asas

Mermaid menggunakan pengisytiharan classDiagram untuk mencipta gambar rajah kelas.

classDiagram

Animal <|-- Duck

Animal <|-- Fish

class Animal {

+String name

+eat()

}

class Duck {

+swim()

}

Kesan render

Di mana:

classDiagram: Mewakili penciptaan gambar rajah kelas Mermaid
<|--: Mewakili hubungan pewarisan
+String name: Mewakili atribut atau kaedah awam

Sintaks biasa

Sintaks	Bentuk	Maksud
classDiagram	Gambar rajah kelas	Mencipta gambar rajah kelas
class ClassName	Kelas	Mentakrifkan objek kelas
ClassName : attribute	Atribut	Mewakili pemboleh ubah ahli dalam kelas
ClassName : method()	Kaedah	Mentakrifkan kaedah kelas
<\|--	Segi tiga kosong+ Garis pepejal	Mewakili hubungan pewarisan
<\|..	Segi tiga kosong+ Garis putus-putus	Mewakili hubungan pelaksanaan
*--	Rombus padu+ Garis pepejal	Mewakili hubungan komposisi
o--	Rombus kosong+ Garis pepejal	Mewakili hubungan pengagregatan
-->	Anak panah garis pepejal	Mewakili hubungan perkaitan
..>	Anak panah garis putus-putus	Mewakili hubungan kebergantungan
--	Garis pepejal	Mewakili hubungan sambungan biasa
+attribute	Tanda tambah	Mewakili atribut atau kaedah awam
-attribute	Tanda tolak	Mewakili atribut atau kaedah peribadi

Simbol seperti +, -, # di hadapan ahli kelas boleh mewakili keterlihatan yang berbeza.

Untuk sintaks terperinci penjanaan gambar rajah kelas Mermaid, sila lawati halaman berikut: https://www.processon.io/ms/mermaid/class-diagram

Gambar rajah kelas sesuai untuk senario seperti reka bentuk perisian, pemodelan berorientasikan objek dan analisis struktur program, cuba secara percuma editor dalam talian Mermaid untuk gambar rajah kelas.

Gambar rajah keadaan Mermaid

Sintaks asas

Mermaid menggunakan pengisytiharan stateDiagram-v2 untuk mencipta gambar rajah keadaan.

stateDiagram-v2

state "Pending Payment" as Pending

[*] --> Pending

Pending --> Paid

Paid --> Shipped

Shipped --> Completed

Completed--> [*]

Kesan render

Di mana:

stateDiagram-v2: Mewakili penciptaan gambar rajah keadaan Mermaid
[*] -->: Mewakili peralihan ke keadaan pertama
-->: Mewakili peralihan keadaan
--> [*]: Mewakili penamatan aliran keadaan

Sintaks biasa

Sintaks	Bentuk	Maksud
stateDiagram-v2	Gambar rajah keadaan	Mencipta gambar rajah keadaan
state StateName	Segi empat tepat bersudut bulat	Mentakrifkan nod keadaan asas
state StateName : text	Segi empat tepat bersudut bulat dengan teks	Melampirkan teks penerangan pada keadaan
[*]	Titik bulatan padu atau cincin bulatan berganda	Mewakili permulaan atau penamatan keadaan
[*] --> StateName	Anak panah mula	Mewakili peralihan ke keadaan pertama
StateName --> [*]	Anak panah tamat	Mewakili penamatan aliran keadaan
A --> B	Anak panah garis pepejal	Mewakili peralihan keadaan
A --> B: event	Anak panah garis pepejal dengan label	Peralihan keadaan dengan peristiwa pencetus
state StateName { ... }	Segi empat tepat bersudut bulat bersarang	Mentakrifkan keadaan komposit
state Node <<choice>>	Rombus	Nod pemilihan cabang penilaian
state Fork <<fork>>	Garis pemisah melintang tebal	Mewakili permulaan aliran selari
state Join <<join>>	Garis pemisah melintang tebal	Mewakili penggabungan penamatan aliran selari

Untuk sintaks terperinci penjanaan gambar rajah keadaan Mermaid, sila lawati halaman berikut: https://www.processon.io/ms/mermaid/state-diagram

Gambar rajah keadaan sesuai untuk mewakili status pesanan, status aliran kerja, status pengguna, status sistem serta mesin keadaan, cuba secara percuma editor dalam talian Mermaid untuk gambar rajah keadaan.

Gambar rajah ER Mermaid

Sintaks asas

Mermaid menggunakan pengisytiharan erDiagram untuk mencipta gambar rajah hubungan entiti, iaitu gambar rajah ER.

erDiagram

USER ||--o{ ORDER : places

ORDER ||--|{ PRODUCT : contains

Kesan render

Di mana:

erDiagram: Mewakili penciptaan gambar rajah ER Mermaid
||--o{: Sambungan satu-ke-banyak, Mewakili satu entiti yang sepadan dengan berbilang entiti, boleh kosong
||--|{: Sambungan satu-ke-banyak, Mewakili satu entiti yang sepadan dengan berbilang entiti, sekurang-kurangnya 1

Sintaks biasa

Sintaks	Bentuk	Maksud
erDiagram	gambar rajah ER	Mencipta gambar rajah ER
ENTITY { }	Segi empat tepat	Mentakrifkan satu entiti
type field	Penanda atribut	Mentakrifkan atribut entiti
type field PK	Kunci utama	Mentakrifkan kunci utama entiti
type field FK	Kunci asing	Mentakrifkan kunci asing entiti
type field UK	Kunci unik	Mentakrifkan medan kekangan unik
\|\|	Satu	Mesti dan hanya satu
o\|	Sifar atau satu	Sifar atau satu
\|{	Satu atau banyak	Sekurang-kurangnya satu
o{	Sifar atau satu hingga banyak	Sifar atau banyak

Untuk sintaks terperinci penjanaan gambar rajah ER Mermaid, sila lawati halaman berikut: https://www.processon.io/ms/mermaid/er-diagram

Gambar rajah ER boleh mewakili entiti, atribut serta hubungan antara entiti, dan sering digunakan dalam reka bentuk pangkalan data, cuba secara percuma editor dalam talian Mermaid untuk gambar rajah ER.

Sintaks peta minda Mermaid

Sintaks asas

Mermaid menggunakan pengisytiharan mindmap untuk mencipta peta minda.

mindmap

root((Mermaid))

Flowchart

Sequence diagram

Class diagram

Gantt chart

Mind map

Kesan render

Di mana:

Mindmap: Mewakili penciptaan peta minda Mermaid
root(()): bermakna mencipta tema akar bulat

Sintaks biasa

Sintaks	Bentuk	Maksud
mindmap	Peta minda	Mencipta peta minda
root[text]	Segi empat tepat	Tema akar segi empat tepat
root(text)	Segi empat tepat bersudut bulat	Tema akar segi empat tepat bersudut bulat
root((text))	Bulatan	Tema akar bulatan
root{{text}}	Heksagon	Tema akar heksagon
root)text(	Gambar rajah gelembung	Tema akar gelembung
[text]	Segi empat tepat	Nod segi empat tepat
(text)	Segi empat tepat bersudut bulat	Nod segi empat tepat bersudut bulat
((text))	Bulatan	Nod bulatan
{{text}}	Heksagon	Nod heksagon
)text(	Gambar rajah gelembung	Nod gelembung

Untuk sintaks terperinci penjanaan peta minda Mermaid, sila lawati halaman berikut: https://www.processon.io/ms/mermaid/mindmap

Peta minda terutamanya menggunakan indentasi untuk mewakili hubungan hierarki, jadi ia sangat sesuai untuk penyusunan pengetahuan, sumbang saran, nota kursus dan seni bina maklumat, cuba secara percuma editor dalam talian Mermaid untuk peta minda.

Carta Gantt Mermaid

Sintaks asas

Mermaid menggunakan pengisytiharan gantt untuk mencipta carta 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

Kesan render

Di antaranya:

gantt: Mewakili penciptaan carta Gantt Mermaid
title: mewakili tajuk carta Gantt
dateFormat: mentakrifkan format penghuraian tarikh garis masa
section: mewakili kumpulan tugas yang berbeza

Sintaks biasa

Sintaks	Bentuk	Maksud
gantt	Carta Gantt	Mencipta carta Gantt
title text	Tajuk	Menetapkan tajuk carta Gantt
dateFormat text	Penanda konfigurasi tarikh	Mentakrifkan format penghuraian tarikh garis masa
section text	Bar tajuk blok warna kumpulan	Membahagikan kumpulan tugas
TaskName : id, startDate, endDate	Bar tugas melintang	Mentakrifkan atribut berkaitan tugas
startDate	Bar tugas melintang	Mentakrifkan masa mula
endDate	Bar tugas melintang	Mentakrifkan masa tamat
duration	Bar tugas melintang	Mentakrifkan tempoh tugas
id	Tersuai	Mentakrifkan nombor tugas
after id	Bar tugas melintang	Mentakrifkan tugas yang bermula selepas tugas sebelumnya
16d, 2w	Bar tugas melintang	Mewakili hari atau minggu
milestone, date	Rombus padu	Menetapkan nod pencapaian

Untuk sintaks terperinci penjanaan carta Gantt Mermaid, sila lawati halaman berikut: https://www.processon.io/ms/mermaid/gantt

Carta Gantt Mermaid sesuai untuk pelan projek, penyusunan tugas, kemajuan pembangunan dan pengurusan projek, cuba secara percuma editor dalam talian Mermaid untuk carta Gantt.

Gambar rajah perjalanan pengguna Mermaid

Sintaks asas

Mermaid menggunakan pengisytiharan journey untuk mencipta gambar rajah 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

Kesan render

Di antaranya:

journey: Mewakili penciptaan gambar rajah perjalanan pengguna Mermaid
title: mewakili tajuk gambar rajah perjalanan pengguna
section: mewakili kumpulan fasa aliran
Search for products: 5: User: mentakrifkan tugas tertentu, cabang kepuasan dan peranan peserta dalam fasa

Sintaks biasa

Sintaks	Bentuk	Maksud
journey	Gambar rajah perjalanan pengguna	Mencipta gambar rajah perjalanan pengguna
title text	Tajuk	Tajuk gambar rajah perjalanan pengguna
section text	Blok segmen	Membahagikan kumpulan fasa aliran
TaskName:num:Actor	Nod aliran + paksi skala kepuasan	Mentakrifkan tugas interaksi, skor kepuasan dan peranan peserta dalam fasa
num (1~5)	Skor kepuasan	1 mata paling rendah, 5 mata paling baik
Me, Cat	Peranan	Mentakrifkan berbilang peranan yang menyertai tugas tersebut

Untuk sintaks terperinci penjanaan gambar rajah perjalanan pengguna Mermaid, sila lawati halaman berikut: https://www.processon.io/ms/mermaid/user-journey-diagram

Gambar rajah perjalanan pengguna sesuai untuk menganalisis langkah dan pengalaman berbeza yang dilalui pelanggan daripada menyentuh produk sehingga mencapai matlamat, cuba secara percuma editor dalam talian Mermaid untuk gambar rajah perjalanan pengguna.

Garis masa Mermaid

Sintaks asas

Mermaid menggunakan pengisytiharan timeline untuk mencipta garis masa.

timeline

title Mermaid Development History

2019 : Project Development

2020 : Feature Expansion

2021 : More Diagram Types

Kesan render

Di mana:

timeline: Mewakili penciptaan garis masa Mermaid
title: mewakili tajuk garis masa
2019 : Perkembangan projek: mentakrifkan peristiwa yang sepadan dengan titik masa

Sintaks biasa

Sintaks	Bentuk	Maksud
timeline	Garis masa	Mencipta garis masa
title text	Tajuk	Menetapkan tajuk garis masa
section text	Blok segmen	Membahagikan kumpulan fasa masa
date : Event1	Peristiwa	Mentakrifkan peristiwa yang sepadan dengan titik masa
: Event2	Berbilang peristiwa	Peristiwa lain yang sepadan dengan masa yang sama
Ruang	Baris baharu	Memisahkan perihalan peristiwa yang terlalu panjang ke baris baharu

Untuk sintaks terperinci penjanaan garis masa Mermaid, sila lawati halaman berikut: https://www.processon.io/ms/mermaid/timeline

Garis masa sesuai untuk memaparkan peristiwa sejarah, perkembangan projek, iterasi produk dan maklumat urutan masa, cuba secara percuma editor dalam talian Mermaid untuk garis masa.

Sintaks carta kuadran Mermaid

Sintaks asas

Mermaid menggunakan pengisytiharan quadrantChart untuk mencipta carta 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]

Kesan render

Di mana:

quadrantChart: Mewakili penciptaan carta kuadran Mermaid
x-axis: mentakrifkan label kedua-dua hujung paksi mendatar
y-axis: mentakrifkan label kedua-dua hujung paksi menegak
quadrant-1: Menetapkan teks anotasi dalam kuadran kanan atas
quadrant-2: Menetapkan teks anotasi dalam kuadran kiri atas
quadrant-3: Menetapkan teks anotasi dalam kuadran kiri bawah
quadrant-4: Menetapkan teks anotasi dalam kuadran kanan bawah
Product A: [0.8, 0.7]: mentakrifkan titik koordinat, nilai x/y ialah 0-1

Untuk sintaks terperinci penjanaan carta kuadran Mermaid, sila lawati halaman berikut: https://www.processon.io/ms/mermaid/quadrant-chart

Carta kuadran sesuai untuk kedudukan produk, analisis keutamaan, analisis persaingan dan pengelasan dua dimensi, cuba secara percuma editor dalam talian Mermaid untuk carta kuadran.

Gambar rajah kanban Mermaid

Sintaks asas

Gambar rajah kanban Mermaid digunakan untuk menyusun item kerja mengikut status tugas, contohnya belum diproses, sedang diproses dan selesai. Struktur tipikal boleh ditunjukkan seperti:

kanban

Todo

Task A

Task B

Doing

Task C

Done

Task D

Kesan render

Di antaranya;

kanban: bermakna mencipta gambar rajah kanban Mermaid
Todo: mentakrifkan kategori status
Task A: Mewakili tugas tertentu

Untuk sintaks terperinci penjanaan gambar rajah kanban Mermaid, sila lawati halaman berikut: https://www.processon.io/ms/mermaid/kanban

Gambar rajah kanban sesuai untuk pengurusan projek, penjejakan tugas, proses penyelidikan dan pembangunan serta pengurusan aliran kerja, cuba secara percuma editor dalam talian Mermaid untuk gambar rajah kanban.

Gambar rajah keperluan Mermaid

Sintaks asas

Gambar rajah keperluan boleh digunakan untuk mewakili hubungan antara keperluan, fungsi dan elemen sistem, Mermaid menggunakan pengisytiharan requirementDiagram untuk mencipta gambar rajah keperluan.

requirementDiagram

requirement userRequirement {

id: 1

text: Customers can purchase products

risk: low

verifymethod: test

}

Kesan render

Di mana:

requirementDiagram: Mewakili penciptaan gambar rajah keperluan Mermaid
requirement userRequirement { }: mentakrifkan keperluan asas
text: mentakrifkan nama keperluan
risk: mentakrifkan tahap risiko
verifymethod: mentakrifkan kaedah pengesahan

Sintaks biasa

Sintaks	Bentuk	Maksud
requirementDiagram	Gambar rajah keperluan	Mencipta gambar rajah keperluan
Requirement name { }	Keperluan	Mentakrifkan keperluan asas
functionalRequirement name { }	Fungsi	Mentakrifkan keperluan fungsi
interfaceRequirement name { }	Antara muka	Mentakrifkan keperluan antara muka
performanceRequirement name { }	Prestasi	Mentakrifkan keperluan prestasi
physicalRequirement name { }	Fizikal	Mentakrifkan keperluan fizikal
element name {type: name docRef: name}	Elemen	Mentakrifkan elemen entiti seperti sistem / komponen / ujian
X - satisfies -> Y	Anak panah garis putus-putus	Entiti memenuhi keperluan yang sepadan
X - contains -> Y	Garis pepejal dengan titik hujung bulatan bersimbol tambah pada titik permulaan	Satu keperluan mengandungi keperluan yang lain
X - derives -> Y	Anak panah garis putus-putus	Keperluan diterbitkan daripada keperluan lain
X - copies -> Y	Anak panah garis putus-putus	Keperluan menyalin keperluan lain
X - traces -> Y	Anak panah garis putus-putus	Perkaitan surih dua hala antara keperluan

Sintaks penuh penjanaan gambar rajah keperluan Mermaid boleh dilihat di halaman berikut: https://www.processon.io/ms/mermaid/requirement-diagram

Gambar rajah keperluan sesuai untuk analisis keperluan produk, kejuruteraan sistem dan penjejakan keperluan, cuba secara percuma editor dalam talian Mermaid untuk gambar rajah keperluan.

Carta pai Mermaid

Sintaks asas

Mermaid menggunakan pengisytiharan pie untuk mencipta carta pai.

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

Kesan render

Di mana:

pie: Mewakili penciptaan carta pai Mermaid
pie showData: mewakili penciptaan carta pai Mermaid yang memaparkan nilai data
title: mewakili tajuk carta pai
"Asia" : 59.5: mentakrifkan kategori data dan perkadarannya

Untuk sintaks terperinci penjanaan carta pai Mermaid, sila lawati halaman berikut: https://www.processon.io/ms/mermaid/pie-chart

Carta pai sesuai untuk mewakili perkadaran dan hubungan komposisi, cuba secara percuma editor dalam talian Mermaid untuk carta pai.

Gambar rajah Sankey Mermaid

Sintaks asas

Gambar rajah Sankey terutamanya digunakan untuk mewakili aliran trafik, sumber, dana atau data antara nod yang berbeza, Mermaid menggunakan pengisytiharan sankey-beta untuk mencipta gambar rajah Sankey.

sankey-beta

A,B,50

A,C,30

B,D,20

C,D,30

Kesan render

Di mana:

sankey-beta: bermakna mencipta gambar rajah Sankey Mermaid
A,B,50: Mentakrifkan aliran data: sumber, sasaran dan nilai trafik
A: nod sebelah kiri, mewakili sumber input data
B: nod sebelah kanan, mewakili destinasi output data
50: mewakili saiz trafik

Untuk sintaks terperinci penjanaan gambar rajah Sankey Mermaid, sila lawati halaman berikut: https://www.processon.io/ms/mermaid/sankey-diagram

Gambar rajah Sankey ialah sejenis carta visualisasi yang digunakan untuk menunjukkan aliran daripada satu set nilai ke satu set nilai yang lain, cuba secara percuma editor dalam talian Mermaid untuk gambar rajah Sankey.

Gambar rajah XY Mermaid

Sintaks asas

Mermaid menggunakan pengisytiharan xychart-beta untuk mencipta gambar rajah 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]

Kesan render

Di mana:

xychart-beta: Mewakili penciptaan gambar rajah XY Mermaid
title: mewakili tajuk gambar rajah XY
x-axis: mewakili kategori dan tajuk paksi mendatar
y-axis: mewakili julat dan tajuk paksi menegak
line: mentakrifkan siri data carta garis
bar: mentakrifkan siri data carta bar

Sintaks biasa

Sintaks	Bentuk	Maksud
xychart-beta	Gambar rajah koordinat XY	Mencipta gambar rajah koordinat XY
xychart-beta horizontal	Gambar rajah koordinat XY mendatar	Mencipta gambar rajah koordinat XY mendatar
title "name"	Tajuk	Mentakrifkan tajuk gambar rajah XY
x-axis "axisTitle" [a,b,c]	Paksi X	Mentakrifkan kategori dan tajuk paksi mendatar
y-axis "axisTitle" min --> max	Paksi Y	Mentakrifkan julat dan tajuk paksi menegak
y-axis "axisTitle"	Paksi Y dengan tajuk sahaja	Hanya menetapkan nama paksi menegak, julat nilai dilaraskan secara automatik
bar [num1, num2, num3]	Carta bar	Mentakrifkan siri data carta bar
line [num1, num2, num3]	Carta garis	Mentakrifkan siri data carta garis

Untuk sintaks terperinci penjanaan gambar rajah XY Mermaid, sila lawati halaman berikut: https://www.processon.io/ms/mermaid/xy-chart

Gambar rajah XY sesuai untuk memaparkan perubahan data, perbandingan nilai dan visualisasi data yang ringkas, cuba secara percuma editor dalam talian Mermaid untuk gambar rajah XY.

Gambar rajah radar Mermaid

Sintaks asas

Gambar rajah radar sesuai untuk membandingkan prestasi berbilang objek merentas beberapa dimensi, contohnya penilaian keupayaan, metrik produk dan perbandingan pilihan. Mermaid menggunakan pengisytiharan radar-beta untuk mencipta gambar rajah 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}

Kesan render

Di mana:

radar-beta: bermakna mencipta gambar rajah radar Mermaid
title: mentakrifkan tajuk gambar rajah radar
axis: Mentakrifkan dimensi dan nama gambar rajah radar
curve: Mentakrifkan nama siri data dan nilai setiap dimensi

Sintaks biasa

Sintaks	Bentuk	Maksud
radar-beta	Gambar rajah radar	Mencipta gambar rajah radar
title "name"	Tajuk	Mentakrifkan tajuk gambar rajah radar, terus selepas radar-beta
title "name"	Tajuk	Mentakrifkan tajuk gambar rajah radar, diletakkan sebelum radar-beta, dan 3 garis sempang perlu ditambah di atas serta di bawahnya
axis id ["axisTitle"]	Paksi dimensi	Mentakrifkan dimensi dan nama gambar rajah radar
curve id ["name"]{[values]}	Lengkung data	Mentakrifkan nama siri data dan nilai setiap dimensi
max value	Nilai maksimum	Menetapkan nilai maksimum julat nilai gambar rajah radar
min value	Nilai minimum	Menetapkan nilai minimum julat nilai gambar rajah radar

Untuk sintaks terperinci penjanaan gambar rajah radar Mermaid, sila lawati halaman berikut: https://www.processon.io/ms/mermaid/radar-chart

Gambar rajah radar amat berguna kepada pembangun, saintis data dan jurutera yang perlu mewakili data secara jelas dan ringkas dalam format bulatan, cuba secara percuma editor dalam talian Mermaid untuk gambar rajah radar.

Gambar rajah Git Mermaid

Sintaks asas

Mermaid menggunakan pengisytiharan gitGraph untuk mencipta gambar rajah Git.

gitGraph

commit

branch develop

checkout develop

commit

checkout main

merge develop

Kesan render

Di mana:

gitGraph: Mewakili penciptaan gambar rajah Git Mermaid
commit: mewakili penciptaan komit
commit id:"": menetapkan nama komit
branch: mewakili penciptaan cabang
checkout: mewakili pertukaran cabang
merge: mewakili penggabungan cabang

Untuk sintaks terperinci penjanaan gambar rajah Git Mermaid, sila lawati halaman berikut: https://www.processon.io/ms/mermaid/git-graph

Gambar rajah Git sesuai untuk mewakili proses kawalan versi seperti komit Git, penciptaan cabang, pertukaran cabang dan penggabungan, cuba secara percuma editor dalam talian Mermaid untuk gambar rajah Git.

Gambar rajah C4 Mermaid

Sintaks asas

Gambar rajah C4 Mermaid digunakan untuk pemodelan seni bina perisian, dan boleh menerangkan sistem perisian, kontena, komponen serta hubungan antara kesemuanya daripada lapisan yang berbeza.

C4Context

title C4 Diagram of the Business System

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

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

Rel(user, system, "Uses")

Kesan render

Di mana:

C4Context: Mewakili penciptaan gambar rajah konteks C4
title: mewakili tajuk gambar rajah C4
Person(user, " User", " System user"): mewakili pengguna atau peranan yang menggunakan sistem
System(system, " Business System", " Core business system"): mewakili sistem perisian yang perlu dianalisis
Rel(user, system, "Uses"): mentakrifkan hubungan panggilan, interaksi atau pemindahan data antara dua elemen

Sintaks biasa

Sintaks	Bentuk	Maksud
C4Context	Gambar rajah konteks sistem	Mencipta gambar rajah konteks sistem C4
C4Container	Gambar rajah kontena	Mencipta gambar rajah kontena C4
C4Component	Gambar rajah komponen	Mencipta gambar rajah komponen C4
C4Dynamic	Gambar rajah interaksi dinamik	Mencipta gambar rajah interaksi dinamik C4
C4Deployment	Gambar rajah penggunaan	Mencipta gambar rajah penggunaan C4
title	Tajuk	Menetapkan tajuk gambar rajah C4
Person(alias, "label", "description")	Orang	Mewakili pengguna atau peranan yang menggunakan sistem
Person_Ext(alias, "label", "description")	Orang luar	Mewakili individu atau peranan organisasi di luar sistem yang menyertai interaksi
System(alias, "label", "description")	Nod sistem	Mewakili sistem perisian yang perlu dianalisis
System_Ext(alias, "label", "description")	Nod sistem luaran	Mewakili perkhidmatan pihak ketiga atau sistem perisian luaran yang menjadi kebergantungan sistem
System_Boundary(alias, "label")	Sempadan sistem	Mewakili sempadan julat sistem
Container(alias, "label", "technology")	Kontena	Mewakili unit perisian yang boleh beroperasi secara bebas dalam sistem
Container_Boundary(alias, "label")	Sempadan kontena	Mewakili julat sesuatu kontena atau perkhidmatan

Untuk sintaks terperinci penjanaan gambar rajah C4 Mermaid, sila lawati halaman berikut: https://www.processon.io/ms/mermaid/c4-diagram

Gambar rajah C4 sesuai untuk reka bentuk seni bina perisian, analisis sistem dan dokumentasi teknikal, cuba secara percuma editor dalam talian Mermaid untuk gambar rajah C4.

Gambar rajah seni bina Mermaid

Sintaks asas

Mermaid menggunakan pengisytiharan architecture-beta untuk mencipta gambar rajah seni bina.

architecture-beta

group api(cloud)[API server]

service server(server)[server] in api

service database(database)[databasa] in api

server:R --> L:database

Kesan render

Di mana:

architecture-beta: Mewakili penciptaan gambar rajah seni bina Mermaid.
group api(cloud)[API server]: mencipta kumpulan seni bina
service server(server)[server] in api: mencipta komponen seni bina atau modul perkhidmatan, dan meletakkannya dalam kumpulan seni bina
server:R --> L:database: menentukan arah sambungan nod, dari sebelah kanan server menghala ke sebelah kiri database

Untuk sintaks terperinci penjanaan gambar rajah seni bina Mermaid, sila lawati halaman berikut: https://www.processon.io/ms/mermaid/architecture-diagram

Gambar rajah seni bina sesuai untuk mewakili hubungan antara pelayan, pangkalan data, perkhidmatan awan, perkhidmatan aplikasi serta komponen sistem yang berbeza, cuba secara percuma editor dalam talian Mermaid untuk gambar rajah seni bina.

Gambar rajah blok Mermaid

Sintaks asas

Gambar rajah blok menerangkan struktur sistem terutamanya melalui modul dan hubungan sambungan, Mermaid menggunakan pengisytiharan block-beta untuk mencipta gambar rajah blok.

block-beta

A space B

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

B space C

B --> C["Database"]

Kesan render

Di mana:

block-beta: Mewakili penciptaan gambar rajah blok Mermaid
space: Menambah jarak antara setiap unit atau modul
-->: anak panah garis pepejal, mewakili arah hubungan

Untuk sintaks terperinci penjanaan gambar rajah blok Mermaid, sila lawati halaman berikut: https://www.processon.io/ms/mermaid/block-diagram

Gambar rajah blok sesuai untuk senario seperti modul sistem, struktur fungsi, seni bina teknikal dan hubungan komponen, cuba secara percuma editor dalam talian Mermaid untuk gambar rajah blok.

Gambar rajah paket data Mermaid

Sintaks asas

Gambar rajah paket data digunakan terutamanya untuk mewakili medan dan panjang dalam paket data rangkaian atau struktur data protokol, Mermaid menggunakan pengisytiharan packet-beta untuk mencipta gambar rajah paket data.

packet-beta

0-7: "Version"

8-15: "Type"

16-31: "Length"

Kesan render

Di mana:

packet-beta: Mewakili penciptaan gambar rajah paket data Mermaid
0-7: "Version ": mewakili julat bit yang digunakan oleh medan

Gambar rajah paket data sesuai untuk protokol rangkaian, struktur paket data dan dokumen spesifikasi teknikal, cuba secara percuma editor dalam talian Mermaid untuk gambar rajah paket data.

Bagaimana jika tidak tahu sintaks Mermaid?

Tidak mahir dengan sintaks Mermaid tidak bermakna anda tidak boleh menggunakan Mermaid untuk menjana grafik, anda boleh menggunakan beberapa cara berikut:

Guna templat Mermaid secara percuma

Pilih templat yang hampir dengan keperluan anda terlebih dahulu, kemudian ubah suai nod, teks dan hubungan di dalamnya. Cara ini sesuai untuk pengguna yang kali pertama menggunakan Mermaid.

AI menjana kod Mermaid

Anda boleh menerangkan gambar rajah yang diperlukan terus dengan bahasa semula jadi, contohnya:

Cipta aliran pemprosesan pesanan e-dagang, termasuk pengguna membuat pesanan, pembayaran, semakan inventori, penghantaran dan penyempurnaan pesanan.

AI boleh menjana kod Mermaid berdasarkan penerangan tersebut, kemudian mengubah suainya mengikut keperluan sebenar.

Menggunakan AI untuk menyemak dan membaiki kod

Jika kod Mermaid mengalami ralat sintaks, anda boleh meminta AI membantu mengenal pasti masalah dan mengubah suai kod.

Menjana kod melalui pengecaman imej

Bagi gambar rajah aliran, gambar rajah seni bina atau gambar rajah berstruktur lain yang sedia ada, anda boleh cuba menjana kod Mermaid melalui pengecaman imej, kemudian terus mengeditnya.

Apakah fungsi editor dalam talian Mermaid?

Editor dalam talian Mermaid biasanya perlu menyelesaikan tiga masalah teras: penulisan kod, pratonton gambar rajah dan eksport hasil. Selain itu, templat dan AI juga boleh menurunkan halangan penggunaan Mermaid.

Dengan menggunakan ProcessOn Mermaid editor dalam talian sebagai contoh, anda boleh terus melakukan perkara berikut dalam pelayar:

Tulis kod Mermaid
Tampal kod Mermaid sedia ada
Render dan pratonton gambar rajah secara masa nyata
Guna templat Mermaid secara percuma
Dengan bahasa semula jadi, AI menjana gambar rajah Mermaid
AI menyemak dan membaiki kod Mermaid
Menjana kod Mermaid melalui pengecaman imej
Menyunting dan mengubah suai semula gambar rajah yang dijana
Eksport PNG, PDF, SVG, JPG dan format Markdown

Oleh itu, bagi pengguna yang kerap mencipta gambar rajah Mermaid, editor dalam talian ProcessOn Mermaid boleh menyatukan penulisan kod Mermaid, penjanaan gambar rajah, penyuntingan dan pengubahsuaian kali kedua, eksport dan perkongsian dalam satu persekitaran kerja.

Daripada gambar rajah aliran, gambar rajah jujukan dan gambar rajah kelas Mermaid, hingga carta Gantt, peta minda, gambar rajah kuadran, gambar rajah Sankey, gambar rajah Git, gambar rajah C4 dan gambar rajah seni bina, semuanya boleh dicipta dan diedit.

Ayuh guna editor dalam talian Mermaid, tulis kod Mermaid dan jana gambar rajah secara dalam talian.

Soalan lazim

Adakah sintaks Mermaid sukar dipelajari?

Sintaks asas Mermaid agak mudah; kebanyakan gambar rajah hanya memerlukan penguasaan cara asas seperti pengisytiharan gambar rajah, nod, garis penghubung dan teks. Contohnya, sequenceDiagram digunakan untuk mengisytiharkan gambar rajah jujukan, manakala flowchart digunakan untuk mengisytiharkan gambar rajah aliran. Peraturan sintaks berbeza mengikut jenis gambar rajah, dan gambar rajah yang kompleks memerlukan pembelajaran lanjut tentang parameter dan konfigurasi yang sepadan.

Mengapa gambar rajah tidak dapat dijana apabila kod Mermaid salah?

Mermaid agak sensitif terhadap struktur sintaks. Punca biasa termasuk pengisytiharan gambar rajah yang salah, sintaks nod atau garis penghubung yang tidak lengkap, pengendalian indentasi atau aksara khas yang tidak betul, serta penggunaan sintaks yang tidak disokong oleh versi Mermaid semasa.

Apakah perbezaan antara Mermaid dan perisian lukisan tradisional?

Mermaid menerangkan gambar rajah terutamanya melalui kod teks, manakala perisian lukisan tradisional biasanya menghasilkan gambar rajah dengan menyeret bentuk, garis penghubung dan melaraskan gaya.

Bolehkah gambar rajah Mermaid disimpan dan digunakan semula?

Boleh. Kandungan teras gambar rajah Mermaid ialah kod teks, jadi kod tersebut boleh disimpan dalam Markdown, fail kod atau dokumen lain yang menyokong Mermaid, dan dirender semula apabila diperlukan.

Ini juga merupakan perbezaan penting antara Mermaid dengan gambar rajah dalam bentuk imej semata-mata: Imej menyimpan hasil akhir, manakala kod Mermaid turut menyimpan maklumat struktur gambar rajah.

Apakah hubungan antara Mermaid dan Markdown?

Mermaid sering digunakan bersama Markdown, tetapi kedua-duanya bukan sintaks yang sama.

Markdown digunakan terutamanya untuk menulis teks berstruktur, manakala Mermaid digunakan untuk menjana gambar rajah melalui kod. Dalam editor Markdown yang menyokong Mermaid, kod Mermaid boleh dibenamkan ke dalam dokumen Markdown, sekali gus meletakkan gambar rajah dan penerangan teks dalam dokumen yang sama.

Keupayaan bekerja Alat penting Tutorial Melukis

Bolehkah anda log masuk untuk menyokong pengarang?

Syor Berkaitan

Dikemaskini Baru-baru ini