Membuat Flowchart di Markdown dengan Mermaid

Di Markdown, kita tidak hanya bisa menulis teks. Pada platform yang mendukung Mermaid, kita juga bisa menggambar flowchart langsung dari kode teks. Ini berguna untuk dokumentasi proses, alur aplikasi, algoritma, SOP, diagram keputusan, dan penjelasan sistem.

Mermaid adalah tool diagram berbasis teks. Kita menulis definisi diagram dalam blok kode, lalu platform yang mendukung Mermaid akan merendernya menjadi gambar diagram. GitHub, misalnya, mendukung Mermaid di Issues, Discussions, pull requests, wikis, dan file Markdown.

Kelebihannya jelas: flowchart tidak perlu dibuat sebagai gambar terpisah. Diagram bisa disimpan bersama dokumentasi, bisa diedit seperti teks biasa, dan perubahan alurnya bisa dilacak dengan Git.

Apa itu Mermaid?

Mermaid adalah library untuk membuat diagram dan chart dari deskripsi berbasis teks. Sintaksnya terinspirasi dari Markdown, sehingga cocok dipakai di dokumentasi teknis.

Mermaid bisa membuat banyak jenis diagram, seperti flowchart, sequence diagram, class diagram, state diagram, entity relationship diagram, Gantt chart, pie chart, mind map, timeline, dan lainnya. Untuk artikel ini, fokusnya adalah flowchart.

Cara menulis Mermaid di Markdown

Pada platform yang mendukung Mermaid, tulis diagram di dalam fenced code block dengan language identifier mermaid.

Contoh struktur dasarnya:

    flowchart TD
      A[Mulai] --> B[Proses]
      B --> C[Selesai]

Jika platform mendukung Mermaid, kode tersebut akan dirender menjadi flowchart. Jika tidak mendukung, yang tampil hanya blok kode biasa.

Arah flowchart

Dokumentasi Mermaid menjelaskan bahwa statement arah menentukan orientasi flowchart. Beberapa arah yang umum:

Untuk alur proses biasa, TD sering paling mudah dibaca. Untuk pipeline atau langkah kerja horizontal, LR bisa lebih enak dilihat.

Bentuk node dasar

Di Mermaid, node adalah kotak atau bentuk yang berisi teks. Bentuknya ditentukan dari tanda kurung yang dipakai.

Contoh:

    flowchart TD
      A(Mulai) --> B[Input data]
      B --> C{Data valid?}
      C -->|Ya| D[Simpan data]
      C -->|Tidak| E[Tampilkan error]
      D --> F(Selesai)
      E --> B

Contoh di atas menggambarkan alur validasi data: mulai, input, cek valid atau tidak, simpan jika valid, tampilkan error jika tidak valid, lalu kembali ke input.

Panah dan label

Panah menunjukkan hubungan antar-node. Label pada panah membantu menjelaskan kondisi atau aksi.

Gunakan label untuk kondisi penting seperti Ya, Tidak, Berhasil, Gagal, Lanjut, atau Ulangi.

Contoh flowchart login

Berikut contoh yang lebih realistis untuk dokumentasi aplikasi:

    flowchart TD
      A(Mulai) --> B[Buka halaman login]
      B --> C[Masukkan email dan password]
      C --> D{Credential valid?}
      D -->|Ya| E[Masuk ke dashboard]
      D -->|Tidak| F[Tampilkan pesan error]
      F --> C
      E --> G(Selesai)

Flowchart seperti ini berguna untuk menjelaskan fitur kepada developer, tester, customer support, atau tim non-teknis.

Contoh flowchart belajar

Mermaid juga cocok untuk materi belajar:

    flowchart LR
      A[Belajar Markdown] --> B[Belajar Obsidian]
      B --> C[Belajar Mermaid]
      C --> D[Membuat dokumentasi visual]

Karena formatnya teks, flowchart bisa ditulis di catatan .md, lalu diperbarui kapan saja.

Kapan memakai Mermaid?

Mermaid cocok untuk:

• dokumentasi teknis;
• README proyek;
• flowchart proses bisnis;
• alur login atau checkout;
• diagram keputusan;
• SOP sederhana;
• catatan belajar;
• diagram dalam Obsidian atau GitHub;
• dokumentasi API dan sistem.

Mermaid kurang cocok jika diagram membutuhkan desain visual bebas, ilustrasi detail, atau layout presisi seperti poster. Untuk kebutuhan itu, tool visual seperti Figma, diagrams.net, Lucidchart, atau aplikasi desain lain lebih tepat.

Tips menulis flowchart Mermaid

Pertama, mulai dari alur sederhana. Jangan langsung membuat diagram terlalu besar. Diagram yang terlalu penuh justru sulit dibaca.

Kedua, gunakan nama node pendek seperti A, B, C, tetapi isi labelnya jelas. Ini membuat kode lebih mudah ditulis.

Ketiga, gunakan decision node {} untuk pertanyaan yang menghasilkan cabang. Misalnya Data valid?, Sudah login?, atau Pembayaran berhasil?.

Keempat, pilih arah yang sesuai. Gunakan TD untuk alur bertahap dari atas ke bawah. Gunakan LR untuk pipeline atau proses yang lebih nyaman dibaca dari kiri ke kanan.

Kelima, cek apakah platform target mendukung Mermaid. GitHub mendukung Mermaid, tetapi tidak semua CMS atau editor Markdown otomatis merendernya.

Kesimpulan

Mermaid membuat flowchart bisa ditulis langsung di Markdown. Ini sangat berguna untuk dokumentasi yang sering berubah, karena diagram dapat diedit seperti teks dan disimpan bersama source code atau catatan.

Untuk mulai, cukup pahami flowchart TD, node seperti [Proses] dan {Keputusan}, serta panah seperti --> dan -->|Label|. Setelah itu, flowchart sederhana sudah bisa dibuat untuk menjelaskan alur kerja, proses aplikasi, atau materi belajar.

Referensi

• Mermaid
• Flowcharts Syntax – Mermaid
• Creating diagrams – GitHub Docs