มาสร้าง 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 |
+--------+ +-------+
หน้าของตัวโปรแกรม
และ tool อื่นๆ ไปทดลองเล่นกันได้นะครับ มีทั้งแบบ online และ desktop app
ถ้าเพื่อนๆ มีตัวอื่นที่ดีและอยากแนะนำก็ comment กันมาได้เลยนะครับผม
┌──────┬──────┬─────┐
┌─┴─┐ ┌─┴─┐ ┌─┴─┐ ┌─┴─┐
│ │ │ x │ │███│ │███│
└───┘ └───┘ └───┘ └───┘