มาลองเขียน Flow chart และ Sequence diagram ด้วย MermaidJS กัน

พอดีต้องเขียนเอกสารอธิบายขั้นตอนการทำงานของระบบงานนิดหน่อย
ถ้าจะเขียนแบบใช้ program มาช่วย มันดูจะลำบากเกินไปหน่อย
เลยคิดว่า
ถ้าเขียนเป็นไฟล์ในรูปแบบ Markdown
แล้วทำการแปลงมาอยู่ในรูปแบบต่าง ๆ ได้เลย
เช่นรูปและ pdf น่าจะสะดวกกว่า
แถมสามารถเก็บไฟล์ Markdown ไว้ใน Version Control System ได้อีกด้วย
จึงลองไปหาดูว่ามีอะไรให้ใช้บ้าง

เมื่อไปดูมาก็พบว่า มีของให้ใช้เพียงเลย

ยกตัวอย่างเช่น

• MermaidJS
• Flow chart
• Sequence diagram
• Plant UML
• WaveDrom
• GraphViz

หลังจากที่ลองใช้งานแล้ว ชอบ MermaidJS เป็นการส่วนตัว
เนื่องจากใช้งานง่าย แถมผลที่ออกมาโดน
เลยมาลองใช้กันหน่อย

ตัว MermaidJS ใช้งานได้หลายแบบ

โดยวิธีการที่ผมใช้งานคือ ใช้งานผ่าน Mermaid CLI ดังนี้
ติดตั้งด้วยคำสั่ง

[code] $npm install -g mermaid.cli [/code]

มาลองสร้าง Flow chart

[gist id="185933173366c15e4245ee9df188898b" file="flowchart.mmd"]

ทำการสร้าง flow chart ออกมาในรูปแบบ png ได้ดังนี้

[code] $mmdc -i flowchart.mmd -o output.png [/code]

ได้ผลลัพธ์ออกมาดังรูป

หรือลองสร้าง Sequence diagram ก็สนุกดี

มาลองใช้งานกันดู ง่ายและสะดวกดี