Membuat Flowchart Menggunakan Script Dengan MermaidJS

Apakah kamu pernah malas menggambar flowchart bahkan dengan aplikasi semacam Microsoft Visio dan semacamnya?

Kalau IYA, berarti kamu sama dengan saya. Lebih memilih “menggambar” dengan script daripada langsung pakai mouse. Dan, ternyata ada memang tools yang demikian. Ada banyak tapi yang paling saya suka adalah MermaidJS.

MermaidJS ini sebenarnya library yang dapat digunakan pada software kita, tetapi MermaidJS menyediakan online editornya sehingga bagi kamu yang awam atau malas, bisa langsung ke website Mermaid Online Editor untuk membuat flowchart nya langsung.

Masih ingat dengan postingan lama saya berjudul Flowchart(Part 2) ?

Saya akan coba menggunakan MermaidJS untuk rebuild flowchart saya disana.

graph TD
    Start --> Bangun
    Bangun --> Doa
    Doa --> Mandi
    Mandi --> Makan
    Makan --> Stop

Bagaimana? Terlalu sederhana ya? Oke saya akan mencoba membuat flowchart untuk mencetak semua angka genap kurang dari 10.

graph TD
    Start --> A[counter = 1, max = 10]
    A --> WHILE{counter < max}
    WHILE --> |TRUE| C{"counter % 2 == 0"}
    C --> |TRUE| D["print (counter)"]
    C --> |FALSE| E
    D --> E["counter = counter + 1"]
    E --> WHILE
    WHILE -----> |FALSE| Stop