Editor Mermaid

Editor Mermaid

Tulis kode Mermaid di satu sisi dan lihat diagramnya secara langsung di sisi lain. Gunakan untuk flowchart, sequence diagram, class diagram, dan tipe diagram yang didukung Mermaid.

Berjalan di browser Anda — tidak ada yang Anda masukkan yang diunggah

Memuat Mermaid…

Cara menggunakan

Pilih atau ketik kode Mermaid pada editor.
Periksa pratinjau diagram dan pesan error bila sintaks tidak valid.
Salin kode atau unduh diagram SVG.

Penjelasan opsi

Pratinjau: Diagram dirender saat Anda mengetik atau setelah menjalankan kode, tergantung pengaturan editor.
Tipe diagram: Mermaid mendukung flowchart, sequence, class, state, ER, pie, timeline, dan tipe lain sesuai versi renderer.
SVG: SVG adalah format vektor yang tetap tajam saat diperbesar.

Ringkasan flowchart

flowchart LR
    A[Rectangle] --> B(Rounded)
    B --> C{Decision}
    C -->|Yes| D[(Database)]
    C -.->|No| E((Circle))

TD dari atas ke bawah, LR dari kiri ke kanan
--> panah solid, -.-> titik-titik, ==> tebal, -->|text| dengan label

Pertanyaan yang sering diajukan

Mengapa diagram tidak muncul?

Periksa pesan error, tanda baca, indentasi, dan deklarasi tipe diagram pada baris pertama.

Apakah Mermaid sama dengan Markdown?

Mermaid adalah bahasa diagram yang sering ditempatkan di Markdown, tetapi kodenya harus dirender oleh alat yang mendukung Mermaid.

Apakah diagram saya diunggah?

Tidak. Rendering dan ekspor diagram berjalan di browser.

Privasi

Alat ini berjalan sepenuhnya di browser Anda. File dan teks Anda diproses di perangkat Anda dan tidak pernah diunggah ke server kami.