onul.works

Pratinjau Diagram Mermaid

Masukkan kode Mermaid untuk melihat diagram seperti flowchart dan sequenceDiagram sebagai pratinjau SVG langsung.

⌘ Berjalan di browser ◴ Data tidak disimpan ⌁ Gratis

Dokumentasi diagram

Pratinjau kode Mermaid sebagai diagram SVG secara instan

Pratinjau Diagram Mermaid merender sintaks Mermaid di browser untuk menyiapkan diagram bagi README, wiki, dan dokumen desain.

Masukkan sintaks Mermaid yang sering dipakai dalam dokumentasi seperti flowchart, sequenceDiagram, classDiagram, dan stateDiagram untuk melihat hasil SVG di kanan.

Jika sintaks tidak valid, area pratinjau menampilkan status error bersama kode asli agar bagian yang perlu diperbaiki mudah ditemukan.

Salin SVG yang dirender atau kode Mermaid asli untuk melanjutkan penulisan README, issue, dan dokumen teknis.

Kapan digunakan?

Gunakan untuk memeriksa cepat alur layanan, urutan API, transisi status, atau struktur arsitektur sederhana sebelum dimasukkan ke dokumentasi.

Bisakah langsung memakai contoh?

Pilih contoh flowchart, sequenceDiagram, classDiagram, atau stateDiagram di atas editor untuk mengisi input.

Bagaimana error ditampilkan?

Saat rendering Mermaid gagal, alat menampilkan pesan error bersama blok kode sumber agar sintaks mudah diperbaiki.

Apa yang bisa disalin?

Salin SVG menyalin hasil render, sedangkan Salin sumber menyalin kode Mermaid yang Anda masukkan.

Mermaid renderer dimuat dari CDN eksternal, dan input Anda hanya diproses di dalam browser.

Kode Mermaid
Pratinjau diagram
Diagram Mermaid yang dirender akan muncul di sini.

Cara menggunakan

  1. 1 Tulis atau tempel sintaks Mermaid di area input kiri.
  2. 2 Jika memerlukan contoh, pilih flowchart, sequenceDiagram, classDiagram, atau stateDiagram di atas input.
  3. 3 Periksa diagram SVG atau pesan error di pratinjau sebelah kanan.
  4. 4 Jika hasilnya benar, salin konten dengan tombol Salin SVG atau Salin sumber.

Contoh penggunaan

  • Pratinjau flowchart untuk README
  • Memeriksa sequenceDiagram alur panggilan API
  • Meninjau draf diagram transisi status atau relasi class

Pertanyaan umum

Diagram Mermaid apa saja yang bisa dipratinjau?

Alat ini merender sintaks Mermaid umum yang didukung Mermaid renderer, termasuk flowchart, sequenceDiagram, classDiagram, dan stateDiagram, sebagai SVG.

Apa yang terjadi jika ada error sintaks?

Jika render gagal, area pratinjau menampilkan status error dan kode sumber asli sebagai blok kode.

Apakah kode diagram dikirim ke server?

Tidak. Alat ini hanya berjalan di sisi client, dan kode Mermaid diproses di browser.

Alur kerja terkait

Pratinjau Diagram MermaidMasukkan kode Mermaid untuk melihat diagram seperti flowchart dan sequenceDiagram sebagai pratinjau SVG langsung. → Pratinjau MarkdownPratinjau Markdown daring dan tinjau HTML hasil tampilannya saat Anda mengedit. → SVG OptimizerOptimalkan dan minify kode SVG, lalu tinjau hasil yang sudah dibersihkan.