Panduan Beginner: Menulis Mermaid Diagram untuk Dokumentasi Teknis

• Panduan Beginner: Menulis Mermaid Diagram untuk Dokumentasi Teknis
  • Pengantar
• 1. Apa Itu Mermaid Diagram?
• 2. Mengapa Mermaid Cocok untuk Dokumentasi Teknis?
• 3. Struktur Dasar Penulisan Mermaid
• 4. Mengenal flowchart TD, LR, dan Arah Diagram
• 5. Cara Menulis Node
  • 5.1 Node Proses Biasa
  • 5.2 Node Keputusan
  • 5.3 Node Hasil Akhir
  • 5.4 Node Penyimpanan Data
• 6. Cara Menulis Panah
  • 6.1 Panah Biasa
  • 6.2 Panah dengan Label
  • 6.3 Panah Putus-putus
  • 6.4 Panah Tebal
• 7. Menulis Teks Panjang dan Line Break
• 8. Contoh Lengkap Flowchart PGPM
• 9. Menambahkan Warna pada Mermaid Diagram
  • 9.1 Struktur Dasar Warna
  • 9.2 Standar Warna untuk Artikel Teknis
  • 9.3 Contoh Diagram PGPM dengan Warna
• 10. Template Mermaid untuk Beginner
  • 10.1 Template Alur Proses
  • 10.2 Template Decision Tree
  • 10.3 Template Hubungan Sistem
  • 10.4 Template Sebab-Akibat
  • 10.5 Template Dengan Subgraph
• 11. Sequence Diagram untuk Interaksi Antar Sistem
• 12. Gantt Chart untuk Jadwal Kerja
• 13. Standar Penulisan Mermaid di Artikel MDX
  • 13.1 Penamaan ID Diagram
  • 13.2 Struktur Penulisan di Artikel
• 14. Kesalahan Umum Beginner
  • 14.1 Lupa Menulis Jenis Diagram
  • 14.2 Node ID Menggunakan Spasi
  • 14.3 Teks Terlalu Panjang dalam Satu Node
  • 14.4 Diagram Terlalu Besar
  • 14.5 Warna Terlalu Banyak
• 15. Praktik Terbaik untuk Artikel Engineering
• 16. Checklist Sebelum Publish Diagram
• 17. Rekomendasi Standar untuk Beginner
  • Tahap 1 — Flowchart Dasar
  • Tahap 2 — Decision Point
  • Tahap 3 — Line Break
  • Tahap 4 — Warna
  • Tahap 5 — Subgraph
• Kesimpulan
• Apendix Advanced: Bentuk Node pada Mermaid Diagram
  • A.1. Mengapa Bentuk Node Penting?
  • A.2. Bentuk Node Dasar yang Sering Dipakai
  • A.3. Contoh Semua Bentuk Node Dasar
  • A.4. Node Lingkaran
  • A.5. Node Diamond untuk Decision Point
  • A.6. Node Database untuk Log, Historian, dan Catatan Batch
  • A.7. Node Segitiga untuk Warning atau Risiko
  • A.8. Standar Makna Bentuk untuk Artikel Teknis
  • A.9. Kombinasi Bentuk dan Warna
  • A.10. Contoh Advanced untuk Pembiakan PGPM
  • A.11. Catatan Kompatibilitas
  • A.12. Rekomendasi Pemakaian Advanced Shapes
  • Tahap 1 — Bentuk Aman
  • Tahap 2 — Bentuk Menengah
  • Tahap 3 — Bentuk Advanced
  • A.13. Kesimpulan Apendix

Pengantar

Dalam dokumentasi teknis, gambar sering kali lebih mudah dipahami daripada uraian panjang. Alur kerja, proses investigasi, hubungan antar komponen, decision point, jadwal kerja, dan logika sistem akan lebih jelas jika divisualisasikan dalam bentuk diagram.

Namun, membuat diagram secara manual menggunakan aplikasi desain kadang memakan waktu. Setiap revisi harus membuka file gambar, mengubah layout, mengekspor ulang, lalu memasukkan kembali ke artikel. Untuk dokumentasi berbasis Markdown atau MDX, cara ini kurang efisien.

Di sinilah Mermaid diagram menjadi sangat berguna.

Mermaid memungkinkan penulis membuat diagram hanya dengan teks. Diagram ditulis langsung di dalam artikel, lalu dirender otomatis oleh sistem menjadi gambar diagram. Untuk proyek berbasis Next.js, Contentlayer, MDX, dan blog teknis, Mermaid sangat cocok karena mudah diedit, mudah disimpan di Git, dan sangat praktis untuk dokumentasi engineering.

1. Apa Itu Mermaid Diagram?

Mermaid diagram adalah diagram yang dibuat menggunakan syntax teks sederhana. Penulis tidak menggambar secara manual, tetapi menulis struktur diagram menggunakan kode.

Contoh sederhana:

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

Kode di atas akan dibaca sebagai:

Mulai → Proses → Selesai

Dalam artikel teknis, Mermaid dapat digunakan untuk membuat:

• flowchart proses;
• decision tree;
• sequence diagram;
• Gantt chart;
• state diagram;
• mind map;
• hubungan antar sistem;
• alur troubleshooting;
• workflow proyek;
• alur approval dokumen;
• diagram sebab-akibat.

Untuk beginner, jenis diagram yang paling mudah dipelajari adalah flowchart.

2. Mengapa Mermaid Cocok untuk Dokumentasi Teknis?

Mermaid sangat cocok untuk artikel teknis karena:

1. Ditulis langsung di artikel MDX/Markdown Tidak perlu membuat file gambar terpisah.

2. Mudah direvisi Cukup ubah teks diagram, tidak perlu membuka software desain.

3. Cocok untuk Git Karena diagram berupa teks, perubahannya bisa dilacak melalui version control.

4. Ringan dan cepat Tidak perlu menyimpan banyak file gambar.

5. Ideal untuk dokumentasi engineering Sangat berguna untuk menjelaskan alur investigasi, hubungan sistem, interlock, troubleshooting, dan proses kerja.

6. Mendukung warna dan styling Node dapat diberi warna berbeda untuk membedakan input, proses, risiko, decision point, dan output.

3. Struktur Dasar Penulisan Mermaid

Format dasar penulisan Mermaid di artikel .mdx adalah sebagai berikut:

```mermaid
flowchart TD
    A[Node Awal] --> B[Node Berikutnya]
```

Dalam project yang sudah mendukung metadata code fence, diagram juga bisa ditulis dengan id:

```mermaid id="contoh-diagram-01"
flowchart TD
    A[Node Awal] --> B[Node Berikutnya]
```

Bagian pentingnya adalah:

4. Mengenal flowchart TD, LR, dan Arah Diagram

Untuk beginner, gunakan flowchart terlebih dahulu.

Formatnya:

flowchart TD

Huruf setelah flowchart menunjukkan arah diagram.

Contoh TD:

```mermaid id="flowchart-td-01"
flowchart TD
    A[Masalah Ditemukan] --> B[Pengumpulan Data]
    B --> C[Analisis Penyebab]
    C --> D[Tindakan Koreksi]
```

Contoh LR:

```mermaid id="flowchart-lr-01"
flowchart LR
    A[Motor] --> B[Pompa]
    B --> C[Flow Process]
    C --> D[Pressure System]
    D --> E[Instrumentasi]
    E --> F[DCS]
```

Untuk artikel maintenance, LR sangat cocok untuk menjelaskan hubungan sistem seperti:

Motor → Pump → Flow → Pressure → Transmitter → DCS → Interlock

5. Cara Menulis Node

Node adalah kotak, lingkaran, atau simbol yang mewakili langkah proses, kondisi, keputusan, atau hasil.

5.1 Node Proses Biasa

Format:

A[Proses]

Contoh:

A[Kebutuhan PGPM Meningkat]

Contoh diagram:

```mermaid id="node-proses-01"
flowchart TD
    A[Kebutuhan PGPM Meningkat] --> B[Petani Membutuhkan Alternatif Produksi]
```

5.2 Node Keputusan

Node keputusan menggunakan kurung kurawal { }.

Format:

A{Pertanyaan Keputusan}

Contoh:

E{Metode Pembiakan}

Contoh diagram:

```mermaid id="node-keputusan-01"
flowchart TD
    A[Mulai Pembiakan] --> B{Metode Terkontrol?}
    B -->|Ya| C[Lanjutkan Proses]
    B -->|Tidak| D[Perbaiki Metode]
```

Node keputusan sangat penting untuk artikel troubleshooting karena menunjukkan decision point.

5.3 Node Hasil Akhir

Untuk hasil akhir, bisa menggunakan bentuk terminal:

A([Hasil Akhir])

Contoh:

```mermaid id="node-output-01"
flowchart TD
    A[Proses Terkontrol] --> B([Produk Lebih Konsisten])
```

5.4 Node Penyimpanan Data

Untuk data, catatan batch, database, atau log:

A[(Database)]

Contoh:

```mermaid id="node-database-01"
flowchart TD
    A[Input Data Fermentasi] --> B[(Log Batch)]
    B --> C[Evaluasi Mutu Produk]
```

6. Cara Menulis Panah

Panah menunjukkan hubungan antar node.

6.1 Panah Biasa

A --> B

Contoh:

```mermaid id="panah-biasa-01"
flowchart TD
    A[Mulai] --> B[Proses]
    B --> C[Selesai]
```

6.2 Panah dengan Label

Format:

A -->|Label| B

Contoh:

```mermaid id="panah-label-01"
flowchart TD
    A{Metode Pembiakan} -->|Terkontrol| B[Produk Lebih Stabil]
    A -->|Tidak Terkontrol| C[Risiko Kontaminasi]
```

Panah berlabel sangat berguna untuk membedakan kondisi:

Ya / Tidak
Normal / Abnormal
Terkontrol / Tidak Terkontrol
Lulus / Tidak Lulus
Aman / Tidak Aman

6.3 Panah Putus-putus

Format:

A -.-> B

Contoh:

```mermaid id="panah-putus-01"
flowchart TD
    A[Kelembapan Lingkungan] -.-> B[Stabilitas Fermentasi]
```

Gunakan panah putus-putus untuk hubungan tidak langsung.

6.4 Panah Tebal

Format:

A ==> B

Contoh:

```mermaid id="panah-tebal-01"
flowchart TD
    A[Critical Step] ==> B[Critical Output]
```

Gunakan panah tebal untuk jalur utama atau jalur kritis.

7. Menulis Teks Panjang dan Line Break

Kadang node terlalu panjang. Untuk memecah baris, gunakan <br/>.

Contoh:

```mermaid id="line-break-01"
flowchart TD
    A[Jerigen Tertutup<br/>Fermentasi Asal Berbusa] --> B[Risiko Kontaminasi]
```

Namun untuk standar yang lebih aman, terutama pada teks panjang, gunakan tanda kutip:

```mermaid id="line-break-02"
flowchart TD
    A["Jerigen Tertutup<br/>Fermentasi Asal Berbusa"] --> B["Produk Tidak Stabil<br/>dan Sulit Diprediksi"]
```

Rekomendasi standar:

A["Teks baris pertama<br/>Teks baris kedua"]

8. Contoh Lengkap Flowchart PGPM

Berikut contoh diagram yang cocok untuk artikel tentang bioreactor, PGPM, atau pembiakan mikroba:

```mermaid id="bioreactor-bab1-01"
flowchart TD
    A[Kebutuhan PGPM Meningkat] --> B[Produk PGPM Relatif Mahal]
    A --> C[Mutu Produk Tidak Selalu Konsisten]
    B --> D[Petani Mencoba Memperbanyak Sendiri]
    C --> D

    D --> E{Metode Pembiakan}
    E -->|Tidak Terkontrol| F[Jerigen Tertutup<br/>Fermentasi Asal Berbusa]
    E -->|Terkontrol| G[Bioreactor Cair / Fermentasi Padat<br/>Sesuai Karakter Mikroba]

    F --> H[Kontaminasi]
    F --> I[Mikroba Target Berubah]
    F --> J[Produk Tidak Stabil]

    G --> K[Starter Jelas]
    G --> L[Media Sesuai]
    G --> M[Aerasi / Kelembapan Terkontrol]
    G --> N[Produk Lebih Konsisten]

    H --> O[Risiko Gagal Aplikasi]
    I --> O
    J --> O
    N --> P[PGPM Lebih Layak Digunakan]
```

Diagram di atas menjelaskan perbedaan antara pembiakan PGPM yang tidak terkontrol dan pembiakan yang dilakukan secara lebih terarah.

9. Menambahkan Warna pada Mermaid Diagram

Mermaid mendukung warna menggunakan classDef dan class.

9.1 Struktur Dasar Warna

Format:

classDef namaClass fill:#warnaIsi,stroke:#warnaGaris,color:#warnaTeks,stroke-width:2px;
class A,B,C namaClass;

Contoh:

```mermaid id="warna-dasar-01"
flowchart TD
    A[Masalah] --> B[Penyebab]
    B --> C[Dampak]
    C --> D[Tindakan Koreksi]

    classDef problem fill:#fee2e2,stroke:#dc2626,color:#7f1d1d,stroke-width:2px;
    classDef cause fill:#fef3c7,stroke:#d97706,color:#78350f,stroke-width:2px;
    classDef action fill:#dcfce7,stroke:#16a34a,color:#14532d,stroke-width:2px;

    class A problem;
    class B,C cause;
    class D action;
```

9.2 Standar Warna untuk Artikel Teknis

Gunakan warna sebagai kode makna, bukan dekorasi berlebihan.

Template warna yang bisa dipakai ulang:

classDef input fill:#e0f2fe,stroke:#0284c7,color:#0c4a6e,stroke-width:2px;
classDef process fill:#dcfce7,stroke:#16a34a,color:#14532d,stroke-width:2px;
classDef decision fill:#fef9c3,stroke:#ca8a04,color:#713f12,stroke-width:2px;
classDef warning fill:#ffedd5,stroke:#ea580c,color:#7c2d12,stroke-width:2px;
classDef risk fill:#fee2e2,stroke:#dc2626,color:#7f1d1d,stroke-width:2px;
classDef output fill:#dbeafe,stroke:#2563eb,color:#1e3a8a,stroke-width:3px;

9.3 Contoh Diagram PGPM dengan Warna

```mermaid id="bioreactor-bab1-berwarna-01"
flowchart TD
    A[Kebutuhan PGPM Meningkat] --> B[Produk PGPM Relatif Mahal]
    A --> C[Mutu Produk Tidak Selalu Konsisten]
    B --> D[Petani Mencoba Memperbanyak Sendiri]
    C --> D

    D --> E{Metode Pembiakan}
    E -->|Tidak Terkontrol| F["Jerigen Tertutup<br/>Fermentasi Asal Berbusa"]
    E -->|Terkontrol| G["Bioreactor Cair / Fermentasi Padat<br/>Sesuai Karakter Mikroba"]

    F --> H[Kontaminasi]
    F --> I[Mikroba Target Berubah]
    F --> J[Produk Tidak Stabil]

    G --> K[Starter Jelas]
    G --> L[Media Sesuai]
    G --> M[Aerasi / Kelembapan Terkontrol]
    G --> N[Produk Lebih Konsisten]

    H --> O[Risiko Gagal Aplikasi]
    I --> O
    J --> O
    N --> P[PGPM Lebih Layak Digunakan]

    classDef input fill:#e0f2fe,stroke:#0284c7,color:#0c4a6e,stroke-width:2px;
    classDef decision fill:#fef9c3,stroke:#ca8a04,color:#713f12,stroke-width:2px;
    classDef risk fill:#fee2e2,stroke:#dc2626,color:#7f1d1d,stroke-width:2px;
    classDef process fill:#dcfce7,stroke:#16a34a,color:#14532d,stroke-width:2px;
    classDef output fill:#dbeafe,stroke:#2563eb,color:#1e3a8a,stroke-width:3px;

    class A,B,C,D input;
    class E decision;
    class F,H,I,J,O risk;
    class G,K,L,M,N process;
    class P output;
```

10. Template Mermaid untuk Beginner

10.1 Template Alur Proses

Gunakan untuk menjelaskan tahapan kerja.

```mermaid id="template-alur-proses-01"
flowchart TD
    A[Mulai] --> B[Persiapan]
    B --> C[Pelaksanaan]
    C --> D[Pemeriksaan]
    D --> E[Selesai]
```

10.2 Template Decision Tree

Gunakan untuk troubleshooting atau pengambilan keputusan.

```mermaid id="template-decision-tree-01"
flowchart TD
    A[Masalah Ditemukan] --> B{Data Lengkap?}

    B -->|Ya| C[Analisis Data]
    B -->|Tidak| D[Lakukan Pemeriksaan Lapangan]

    C --> E{Penyebab Terkonfirmasi?}
    E -->|Ya| F[Tentukan Corrective Action]
    E -->|Tidak| G[Investigasi Lanjutan]

    D --> C
    G --> D
```

10.3 Template Hubungan Sistem

Gunakan untuk menggambarkan hubungan antar komponen.

```mermaid id="template-hubungan-sistem-01"
flowchart LR
    A[Input] --> B[Process]
    B --> C[Control]
    C --> D[Output]
    D --> E[Monitoring]
    E --> F[Feedback]
    F --> C
```

10.4 Template Sebab-Akibat

Gunakan untuk RCA sederhana.

```mermaid id="template-sebab-akibat-01"
flowchart TD
    A[Masalah Utama] --> B[Penyebab 1]
    A --> C[Penyebab 2]
    A --> D[Penyebab 3]

    B --> E[Dampak 1]
    C --> F[Dampak 2]
    D --> G[Dampak 3]

    E --> H[Konsekuensi Akhir]
    F --> H
    G --> H
```

10.5 Template Dengan Subgraph

Gunakan jika diagram mulai besar dan perlu dikelompokkan.

```mermaid id="template-subgraph-01"
flowchart TD
    subgraph INPUT[Input]
        A[Starter]
        B[Media]
        C[Air]
    end

    subgraph PROCESS[Proses]
        D[Sanitasi]
        E[Fermentasi]
        F[Monitoring]
    end

    subgraph OUTPUT[Output]
        G[Produk Jadi]
        H[Penyimpanan]
    end

    A --> E
    B --> E
    C --> E
    D --> E
    E --> F
    F --> G
    G --> H
```

11. Sequence Diagram untuk Interaksi Antar Sistem

Selain flowchart, Mermaid juga bisa digunakan untuk membuat sequence diagram.

Sequence diagram cocok untuk menjelaskan interaksi antar aktor atau sistem, misalnya:

Petani → Starter → Media → Bioreactor → Produk

Contoh:

```mermaid id="sequence-pgpm-01"
sequenceDiagram
    participant Petani
    participant Starter
    participant Media
    participant Bioreactor
    participant Produk

    Petani->>Starter: Memilih starter mikroba
    Petani->>Media: Menyiapkan media nutrisi
    Starter->>Bioreactor: Inokulasi
    Media->>Bioreactor: Pengisian media
    Bioreactor->>Produk: Fermentasi terkontrol
    Produk->>Petani: PGPM siap aplikasi
```

Untuk beginner, sequence diagram sebaiknya digunakan setelah menguasai flowchart.

12. Gantt Chart untuk Jadwal Kerja

Mermaid juga mendukung Gantt chart. Ini berguna untuk artikel tentang jadwal proyek, fermentasi, Turn Around, atau pekerjaan lapangan.

Contoh:

```mermaid id="gantt-pgpm-01"
gantt
    title Jadwal Pembiakan PGPM Cair
    dateFormat  YYYY-MM-DD

    section Persiapan
    Sanitasi alat dan wadah      :a1, 2026-05-01, 1d
    Persiapan media              :a2, after a1, 1d

    section Fermentasi
    Inokulasi starter            :b1, after a2, 1d
    Fermentasi terkontrol        :b2, after b1, 5d

    section Pascapanen
    Penyaringan dan pengemasan   :c1, after b2, 1d
    Penyimpanan awal             :c2, after c1, 2d
```

Untuk dokumentasi engineering, Gantt chart Mermaid bisa digunakan untuk jadwal sederhana. Namun untuk proyek kompleks seperti Turn Around besar, Primavera P6, Microsoft Project, atau OpenProject tetap lebih tepat.

13. Standar Penulisan Mermaid di Artikel MDX

Agar konsisten, gunakan standar berikut.

13.1 Penamaan ID Diagram

Gunakan format:

topik-bab-nomor

Contoh:

bioreactor-bab1-01
bioreactor-bab1-02
pgpm-bab2-01
fermentasi-padat-bab3-01
motor-trip-bab4-01

Aturan:

• gunakan huruf kecil;
• gunakan tanda hubung -;
• hindari spasi;
• hindari karakter khusus;
• buat ID unik dalam satu artikel.

13.2 Struktur Penulisan di Artikel

Format yang disarankan:

## Judul Subbab

Paragraf pembuka yang menjelaskan fungsi diagram.

```mermaid id="nama-diagram"
flowchart TD
    A[Node Awal] --> B[Node Proses]
    B --> C{Decision Point}
    C -->|Ya| D[Tindakan 1]
    C -->|Tidak| E[Tindakan 2]
```

**Gambar X.** Keterangan singkat diagram.

Contoh:

## Mengapa Pembiakan PGPM Perlu Dikontrol

Pembiakan PGPM tidak cukup hanya mencampur starter, molase, dan air. Proses perlu memperhatikan karakter mikroba, jenis media, aerasi, sanitasi, dan risiko kontaminasi.

```mermaid id="bioreactor-bab1-01"
flowchart TD
    A[Kebutuhan PGPM Meningkat] --> B[Produk PGPM Relatif Mahal]
    A --> C[Mutu Produk Tidak Selalu Konsisten]
    B --> D[Petani Mencoba Memperbanyak Sendiri]
    C --> D

    D --> E{Metode Pembiakan}
    E -->|Tidak Terkontrol| F["Jerigen Tertutup<br/>Fermentasi Asal Berbusa"]
    E -->|Terkontrol| G["Bioreactor Cair / Fermentasi Padat<br/>Sesuai Karakter Mikroba"]

    F --> H[Kontaminasi]
    F --> I[Mikroba Target Berubah]
    F --> J[Produk Tidak Stabil]

    G --> K[Starter Jelas]
    G --> L[Media Sesuai]
    G --> M[Aerasi / Kelembapan Terkontrol]
    G --> N[Produk Lebih Konsisten]

    H --> O[Risiko Gagal Aplikasi]
    I --> O
    J --> O
    N --> P[PGPM Lebih Layak Digunakan]
```

**Gambar 1.** Perbedaan antara pembiakan PGPM tidak terkontrol dan pembiakan terkontrol menggunakan bioreactor cair atau fermentasi padat.

14. Kesalahan Umum Beginner

14.1 Lupa Menulis Jenis Diagram

Salah:

```mermaid
A --> B
```

Benar:

```mermaid
flowchart TD
    A --> B
```

Mermaid perlu tahu jenis diagramnya, misalnya flowchart TD, sequenceDiagram, atau gantt.

14.2 Node ID Menggunakan Spasi

Salah:

Masalah Utama[Masalah Utama] --> Penyebab Awal[Penyebab Awal]

Lebih aman:

A[Masalah Utama] --> B[Penyebab Awal]

Gunakan ID node sederhana seperti A, B, C, A1, A2.

14.3 Teks Terlalu Panjang dalam Satu Node

Kurang baik:

A[Proses pembiakan PGPM dilakukan tanpa kontrol aerasi kelembapan sanitasi starter media dan kondisi penyimpanan]

Lebih baik:

A["Pembiakan PGPM<br/>tanpa kontrol proses"]

14.4 Diagram Terlalu Besar

Diagram yang terlalu besar sulit dibaca. Pecah menjadi beberapa diagram:

Diagram 1: Latar belakang masalah
Diagram 2: Alur proses
Diagram 3: Risiko dan kontrol mutu
Diagram 4: Output dan aplikasi

14.5 Warna Terlalu Banyak

Warna harus membantu pemahaman. Jangan semua node diberi warna berbeda tanpa makna teknis.

Gunakan maksimal 5–6 kategori warna:

Input, Process, Decision, Warning, Risk, Output

15. Praktik Terbaik untuk Artikel Engineering

Untuk artikel teknis, Mermaid sebaiknya tidak hanya menjadi dekorasi. Diagram harus membantu pembaca memahami sistem.

Gunakan Mermaid untuk menjelaskan:

1. alur proses Contoh: tahapan fermentasi, tahapan inspeksi, tahapan commissioning.

2. decision point Contoh: “apakah data cukup?”, “apakah parameter abnormal?”, “apakah perlu corrective action?”

3. hubungan sistem Contoh: motor, pompa, proses, transmitter, DCS, interlock.

4. risiko dan kontrol Contoh: kontaminasi, gagal aplikasi, parameter tidak stabil.

5. critical path sederhana Contoh: urutan pekerjaan yang menentukan durasi proyek.

6. alur troubleshooting Contoh: gejala, data awal, hipotesis, verifikasi, root cause, tindakan.

Contoh untuk maintenance:

```mermaid id="motor-trip-troubleshooting-01"
flowchart TD
    A[Motor Trip] --> B{Alarm DCS Tersedia?}

    B -->|Ya| C[Cek Alarm Historian]
    B -->|Tidak| D[Cek MCC dan Protection Relay]

    C --> E[Cek Current Trend]
    D --> F[Cek Overload / Earth Fault / Short Circuit]

    E --> G{Current Naik Bertahap?}
    G -->|Ya| H[Indikasi Beban Mekanik Naik]
    G -->|Tidak| I[Indikasi Gangguan Elektrikal Mendadak]

    H --> J[Cek Pompa / Coupling / Bearing]
    I --> K[Cek Kabel / Motor Winding / Relay]
```

16. Checklist Sebelum Publish Diagram

Sebelum artikel dipublish, periksa hal berikut:

17. Rekomendasi Standar untuk Beginner

Untuk tahap awal, kuasai urutan berikut:

Tahap 1 — Flowchart Dasar

Pelajari:

flowchart TD
A --> B

Tahap 2 — Decision Point

Pelajari:

A{Pertanyaan?}
A -->|Ya| B
A -->|Tidak| C

Tahap 3 — Line Break

Pelajari:

A["Teks panjang<br/>baris kedua"]

Tahap 4 — Warna

Pelajari:

classDef risk fill:#fee2e2,stroke:#dc2626,color:#7f1d1d;
class A risk;

Tahap 5 — Subgraph

Pelajari:

subgraph INPUT[Input]
A[Starter]
B[Media]
end

Setelah lima tahap ini dikuasai, penulis sudah cukup kuat untuk membuat diagram teknis yang jelas dan layak dipakai dalam artikel engineering.

Kesimpulan

Mermaid diagram adalah cara praktis membuat diagram menggunakan teks di dalam artikel Markdown atau MDX. Untuk beginner, jenis diagram yang paling mudah dipelajari adalah flowchart. Dengan memahami node, panah, decision point, line break, warna, dan subgraph, penulis dapat membuat diagram yang cukup kuat untuk dokumentasi teknis.

Dalam artikel engineering, Mermaid sangat membantu menjelaskan proses, hubungan sistem, alur troubleshooting, risiko, dan keputusan teknis. Kekuatan utamanya adalah mudah ditulis, mudah direvisi, dan cocok untuk project berbasis Next.js, Contentlayer, serta dokumentasi modern berbasis Git.

Apendix Advanced: Bentuk Node pada Mermaid Diagram

A.1. Mengapa Bentuk Node Penting?

Pada Mermaid diagram, node tidak harus selalu berbentuk kotak. Mermaid mendukung beberapa bentuk node seperti kotak, rounded rectangle, lingkaran, belah ketupat, database, hexagon, parallelogram, trapezoid, dan pada versi baru juga mendukung bentuk khusus seperti segitiga.

Bentuk node sebaiknya tidak digunakan hanya untuk estetika. Dalam dokumentasi teknis, bentuk node harus memiliki makna. Misalnya, kotak untuk proses, belah ketupat untuk keputusan, lingkaran untuk start/end, database untuk penyimpanan data, dan segitiga untuk warning atau titik perhatian khusus.

Dengan standar bentuk yang konsisten, pembaca akan lebih cepat memahami struktur proses, alur keputusan, dan titik kritis dalam diagram.

A.2. Bentuk Node Dasar yang Sering Dipakai

Berikut beberapa bentuk node yang umum digunakan dalam Mermaid flowchart.

A.3. Contoh Semua Bentuk Node Dasar

Gunakan contoh berikut untuk memahami bentuk-bentuk node utama.

```mermaid id="advanced-node-shapes-01"
flowchart TD
    A[Kotak / Proses Biasa]
    B(Rounded Rectangle)
    C([Stadium / Terminal])
    D[[Subroutine]]
    E[(Database / Log Data)]
    F((Lingkaran))
    G{Decision / Keputusan}
    H{{Hexagon / Preparation}}
    I[/Input Output/]
    J[\Input Output Alt\]
    K[/Manual Process\]
    L[\Manual Process Alt/]
    M(((Double Circle / Final)))

    A --> B --> C --> D --> E --> F --> G --> H --> I --> J --> K --> L --> M
```

Gambar A.1. Contoh bentuk node dasar pada Mermaid flowchart.

A.4. Node Lingkaran

Node lingkaran ditulis dengan dua pasang tanda kurung:

A((Teks))

Contoh:

```mermaid id="advanced-circle-node-01"
flowchart TD
    A((Mulai))
    B[Persiapan Media]
    C[Inokulasi Starter]
    D((Selesai))

    A --> B --> C --> D
```

Gambar A.2. Penggunaan node lingkaran untuk menandai awal dan akhir proses.

Node lingkaran cocok digunakan untuk:

A.5. Node Diamond untuk Decision Point

Node decision menggunakan tanda kurung kurawal:

A{Pertanyaan?}

Contoh:

```mermaid id="advanced-decision-node-01"
flowchart TD
    A[Mulai Pemeriksaan] --> B{Data Lengkap?}
    B -->|Ya| C[Analisis Data]
    B -->|Tidak| D[Lengkapi Data Lapangan]
    D --> B
    C --> E[Kesimpulan Awal]
```

Gambar A.3. Node diamond digunakan untuk decision point.

Dalam artikel teknis, node decision sangat penting karena menunjukkan titik berpikir kritis. Contoh pertanyaan yang cocok ditulis sebagai decision point:

Apakah alarm tersedia?
Apakah data trend cukup?
Apakah pH masih dalam range?
Apakah aerasi mencukupi?
Apakah kontaminasi terindikasi?
Apakah tindakan koreksi berhasil?

A.6. Node Database untuk Log, Historian, dan Catatan Batch

Node database menggunakan bentuk cylinder:

A[(Database)]

Contoh:

```mermaid id="advanced-database-node-01"
flowchart TD
    A[Pengukuran pH Harian] --> B[(Log Batch Fermentasi)]
    C[Pengukuran Bau dan Warna] --> B
    D[Pengukuran Suhu] --> B
    B --> E[Evaluasi Mutu Produk]
```

Gambar A.4. Node database digunakan untuk catatan batch atau data monitoring.

Untuk artikel engineering, bentuk database cocok untuk:

A.7. Node Segitiga untuk Warning atau Risiko

Pada Mermaid versi baru, beberapa bentuk tambahan bisa ditulis dengan format:

A@{ shape: tri, label: "Teks" }

Contoh:

```mermaid id="advanced-triangle-node-01"
flowchart TD
    A[Proses Pembiakan] --> B{Kontrol Proses Memadai?}
    B -->|Tidak| C@{ shape: tri, label: "Risiko Kontaminasi" }
    B -->|Ya| D[Produk Lebih Stabil]
```

Gambar A.5. Node segitiga dapat digunakan sebagai simbol warning atau risiko.

Jika bentuk segitiga tidak tampil di project lokal, kemungkinan versi Mermaid yang digunakan belum mendukung expanded node shape. Dalam kondisi tersebut, gunakan alternatif yang lebih aman:

```mermaid id="advanced-triangle-alternative-01"
flowchart TD
    A[Proses Pembiakan] --> B{Kontrol Proses Memadai?}
    B -->|Tidak| C["⚠️ Risiko Kontaminasi"]
    B -->|Ya| D[Produk Lebih Stabil]
```

Gambar A.6. Alternatif penulisan warning jika bentuk segitiga belum didukung.

A.8. Standar Makna Bentuk untuk Artikel Teknis

Agar konsisten, gunakan standar bentuk berikut.

Standar ini penting agar diagram tidak membingungkan pembaca. Jika dalam satu artikel diamond berarti keputusan, maka jangan gunakan diamond untuk proses biasa.

A.9. Kombinasi Bentuk dan Warna

Bentuk node dapat dikombinasikan dengan warna. Ini sangat berguna untuk membedakan proses normal, decision point, risiko, dan output akhir.

Contoh:

```mermaid id="advanced-shape-color-01"
flowchart TD
    A((Mulai))
    B[Persiapan Starter]
    C[(Log Batch)]
    D{Metode Terkontrol?}
    E@{ shape: tri, label: "Risiko Kontaminasi" }
    F[Bioreactor Terkontrol]
    G(((Produk PGPM Stabil)))

    A --> B
    B --> C
    C --> D
    D -->|Tidak| E
    D -->|Ya| F
    F --> G

    classDef start fill:#e0f2fe,stroke:#0284c7,color:#0c4a6e,stroke-width:2px;
    classDef process fill:#dcfce7,stroke:#16a34a,color:#14532d,stroke-width:2px;
    classDef data fill:#f3e8ff,stroke:#9333ea,color:#581c87,stroke-width:2px;
    classDef decision fill:#fef9c3,stroke:#ca8a04,color:#713f12,stroke-width:2px;
    classDef risk fill:#fee2e2,stroke:#dc2626,color:#7f1d1d,stroke-width:2px;
    classDef output fill:#dbeafe,stroke:#2563eb,color:#1e3a8a,stroke-width:3px;

    class A start;
    class B,F process;
    class C data;
    class D decision;
    class E risk;
    class G output;
```

Gambar A.7. Kombinasi bentuk dan warna untuk memperjelas makna teknis diagram.

A.10. Contoh Advanced untuk Pembiakan PGPM

Contoh berikut menggunakan kombinasi node start, proses, data log, decision point, warning, dan output final.

```mermaid id="advanced-pgpm-process-01"
flowchart TD
    A((Mulai))
    B[Siapkan Starter Mikroba]
    C[Siapkan Media Nutrisi]
    D[Sanitasi Wadah]
    E[(Catatan Batch Awal)]

    F{Starter dan Media Sesuai?}
    G@{ shape: tri, label: "Risiko Populasi Mikroba Tidak Stabil" }
    H[Inokulasi ke Bioreactor]
    I[Kontrol Aerasi / Kelembapan]
    J[(Log Monitoring Harian)]
    K{Parameter Stabil?}
    L@{ shape: tri, label: "Risiko Kontaminasi / Fermentasi Gagal" }
    M[Panen Produk]
    N(((PGPM Siap Aplikasi)))

    A --> B
    A --> C
    A --> D
    B --> E
    C --> E
    D --> E
    E --> F

    F -->|Tidak| G
    F -->|Ya| H

    H --> I
    I --> J
    J --> K

    K -->|Tidak| L
    K -->|Ya| M
    M --> N

    classDef start fill:#e0f2fe,stroke:#0284c7,color:#0c4a6e,stroke-width:2px;
    classDef process fill:#dcfce7,stroke:#16a34a,color:#14532d,stroke-width:2px;
    classDef data fill:#f3e8ff,stroke:#9333ea,color:#581c87,stroke-width:2px;
    classDef decision fill:#fef9c3,stroke:#ca8a04,color:#713f12,stroke-width:2px;
    classDef risk fill:#fee2e2,stroke:#dc2626,color:#7f1d1d,stroke-width:2px;
    classDef output fill:#dbeafe,stroke:#2563eb,color:#1e3a8a,stroke-width:3px;

    class A start;
    class B,C,D,H,I,M process;
    class E,J data;
    class F,K decision;
    class G,L risk;
    class N output;
```

Gambar A.8. Contoh advanced flowchart untuk pembiakan PGPM dengan kombinasi bentuk, warna, decision point, dan node risiko.

A.11. Catatan Kompatibilitas

Tidak semua bentuk node selalu didukung oleh semua versi Mermaid. Bentuk dasar seperti kotak, lingkaran, diamond, database, parallelogram, dan subroutine umumnya aman digunakan. Bentuk baru seperti segitiga dengan syntax @{ shape: tri } membutuhkan versi Mermaid yang lebih baru.

Jika diagram tidak muncul, lakukan pengecekan berikut:

A.12. Rekomendasi Pemakaian Advanced Shapes

Untuk beginner yang mulai masuk tahap advanced, gunakan bentuk node secara bertahap.

Tahap 1 — Bentuk Aman

Gunakan dulu bentuk berikut:

Kotak       : A[Proses]
Lingkaran  : A((Start))
Diamond    : A{Decision}
Database   : A[(Data)]

Tahap 2 — Bentuk Menengah

Tambahkan:

Subroutine     : A[[Prosedur]]
Parallelogram  : A[/Input Output/]
Double circle  : A(((Final)))

Tahap 3 — Bentuk Advanced

Gunakan jika renderer sudah mendukung:

Triangle       : A@{ shape: tri, label: "Risk" }
Flipped triangle: A@{ shape: flip-tri, label: "Extract" }

Jangan terlalu banyak memakai bentuk berbeda dalam satu diagram. Untuk artikel teknis, 4–6 bentuk sudah cukup.

A.13. Kesimpulan Apendix

Mermaid tidak hanya mendukung kotak dan panah. Mermaid juga dapat digunakan untuk membuat node berbentuk lingkaran, diamond, database, parallelogram, subroutine, hexagon, trapezoid, double circle, dan pada versi baru juga segitiga. Namun, bentuk node harus digunakan secara konsisten dan memiliki makna teknis.

Untuk dokumentasi engineering, bentuk node yang paling penting adalah kotak untuk proses, diamond untuk keputusan, database untuk data, lingkaran untuk start/end, dan segitiga atau node warning untuk risiko. Jika dikombinasikan dengan warna, diagram Mermaid dapat menjadi alat visual yang kuat untuk menjelaskan proses, risiko, kontrol, dan output teknis.