มาสร้าง diagram code comment ด้วย ASCII diagram tool กัน

ในบางครั้งการอธิบายการทำงานของโปรแกรม หรือการเขียน code comment ออกมาในรูปแบบของ flow diagram ของการทำงาน หรือเขียนออกมาเป็นขั้นตอนแบบ flow chart สามารถช่วยให้เราเข้าใจการทำงานของ code ได้ง่ายขึ้น

หรือการอธิบายบางส่วนของโปรแกรมที่มีความซับซ้อนด้วย diagram สามารถช่วยผู้ที่ทำงานต่อจากเรา หรือเข้ามาดู code ที่เราเขียนไว้ เข้าใจ code ได้ไวขึ้น

ในบทความนี้ ผมได้มีโอกาสไปค้นหา ASCII diagram tool เพื่อมาใช้งาน โดยมีทั้งในรูปแบบ webapp และ desktop

ข้อดีของ ASCII diagram คือเราสามารถที่เรา copy paste วาง diagram เข้าไปกับ source code ได้เลย อีกทั้งสามารถแก้ไขงานได้ทันที่ ไม่ต้องใช้นำ diagram ไปเปิดด้วย tool ใดเพื่อทำการแก้ไข

สำหรับ ASCII diagram tool ที่จะแนะนำมีดังนี้ครับ

https://textik.com ในความเห็นส่วนตัว คิดว่าเป็นตัวดีที่สุดที่มีให้ใช้ฟรีแบบ online

  • สามารถเลือก object ที่เราวาด แล้วลากได้ทันที
  • ใช้ arrow เลื่อนตำแหน่ง object ที่วาดไว้แล้วได้
  • ปรับขนาดของ object ที่วาดไปแล้วให้ใหญ่ขึ้น
  • หรือเล็กลงก็ได้
  • ใช้ CTRL+Z (undo) ได้
  • เสียอย่างเดียวไม่มี shortcut แบบ photo shop ที่ทำให้เรา switch ไป tool ต่างๆ ได้ทันที ต้องกลับไป clickเปลี่ยน tool ซึ่งไปค่อยสะดวก

ตัวอย่าง ACII diagram ที่ผมได้วาดเพื่อแสดงการทำงานของ MVC pattern (Model View Controller) ก็สามารถ copy ไปแปะใน source code ของเราได้เลย

                            MVC                          
                                                         
             +-------- +------------+  ---------+        
             |  +--->  | Controller |  <-----+  |        
             |  |      +------------+        |  |        
             |  |                            |  |        
             |  |                            |  |        
             |  |                            |  |        
             v  |                            |  v        
         +--------+                        +-------+     
         |  View  |                        | Model |     
         +--------+                        +-------+     
                                                              

หน้าของตัวโปรแกรม

enter image description here

และ tool อื่นๆ ไปทดลองเล่นกันได้นะครับ มีทั้งแบบ online และ desktop app

http://asciiflow.com/

enter image description here

http://www.jave.de/

enter image description here

ASCII Art Studio

enter image description here

monodraw

enter image description here

ถ้าเพื่อนๆ มีตัวอื่นที่ดีและอยากแนะนำก็ comment กันมาได้เลยนะครับผม