สำหรับเหล่านักพัฒนาซอฟต์แวร์, System Analyst หรือ Solution Architect ปัญหาคลาสสิกเวลาทำเอกสารระบบ (System Documentation) คือการเลือกระหว่าง “การเขียนโค้ดไดอะแกรม (Diagram as Code)” เพื่อให้เก็บเวอร์ชันบน Git ง่าย กับ “การใช้บอร์ดลากวาง (Visual Canvas)” เพื่อให้จัดแต่งและอธิบายไอเดียร่วมกับทีมได้สะดวก
แต่ถ้าคุณได้ลองรู้จักกับ Eraser (eraser.io) คุณจะไม่ต้องเลือกอีกต่อไป เพราะนี่คือแพลตฟอร์มที่เรียกตัวเองว่า “The Canvas for Technical Teams” ซึ่งถูกสร้างขึ้นมาเพื่อแก้ปัญหานี้โดยเฉพาะ โดยเฉพาะการทำงานร่วมกับ Mermaid และ PlantUML ที่ทำได้ลึกกว่าเครื่องมือตัวอื่น ๆ ในท้องตลาด
Eraser.io คืออะไร? และทำไมทีม Tech ถึงเลิกใช้ตัวอื่น?
Eraser.io เป็น Visual Workspace ที่รวมเอา 3 สิ่งสำคัญในงาน Technical มารวมไว้ในหน้าจอเดียวกันในแบบ Split-screen (แบ่งหน้าจอ)
- Markdown Note: ฝั่งซ้ายสำหรับเขียนอธิบายเนื้อหา โน้ตการประชุม หรือสเปกระบบ
- Visual Canvas: ฝั่งขวาสำหรับวาด Architecture, ลากวางกล่องไอคอน (AWS, Azure, Kubernetes)
- Diagram as Code: เอนจินหลังบ้านที่สามารถเขียนโค้ดเพื่อสั่งวาดไดอะแกรมได้ทันที
Eraser กับการซัพพอร์ต Mermaid และ PlantUML
นี่คือไฮไลต์สำคัญครับ Eraser ซัพพอร์ตทั้งสองตัวนี้ในระดับที่เรียกว่า “เป็นเนื้อเดียวกัน” แต่อาจจะมีวิธีคิดและการทำงานที่แตกต่างกันเล็กน้อย ดังนี้
Eraser + Mermaid: ทำงานร่วมกันได้ 100% (ทั้งขาเข้าและขาออก)
Eraser มีเอนจินภายในที่ชื่อว่า Diagram-as-Code (DiC) ซึ่งใช้ Syntax ที่คล้ายคลึงและทำงานร่วมกับ Mermaid ได้เป็นอย่างดี
- ขาเข้า (Import): คุณสามารถนำโค้ด Mermaid ที่มีอยู่แล้ว (เช่น Sequence Diagram, Flowchart) มาวางในช่องเขียนโค้ดของ Eraser ระบบจะเรนเดอร์ภาพออกมาให้ทันที
- ขาออก (Export): นี่คือจุดเด่นที่เหนือกว่า draw.io หรือ Whimsical เพราะใน Eraser เมื่อคุณเขียนหรือปรับแต่งไดอะแกรมด้วยโค้ดเสร็จแล้ว คุณสามารถกดคัดลอกเป็น Mermaid Syntax นำกลับไปแปะในไฟล์
README.mdบน GitHub หรือ GitLab ได้ทันที! - ความเจ๋งสองทาง (Bi-directional): ภาพที่เกิดจากการเขียนโค้ดใน Eraser คุณยังสามารถใช้เมาส์คลิกเพื่อเปลี่ยนสี จัดกลุ่ม หรือลากไอคอน Cloud (เช่น ไอคอนฐานข้อมูล, เซิร์ฟเวอร์) มาแปะเสริมบนภาพเพื่อเพิ่มความสวยงามได้ด้วย
Eraser + PlantUML: ซัพพอร์ตผ่านระบบ Import
สำหรับ PlantUML ซึ่งเป็นเครื่องมือรุ่นเก๋าที่ใช้ Syntax เฉพาะตัวสูง Eraser ซัพพอร์ตในแง่ของความสามารถในการ Import / Convert ครับ
- หากคุณมีโค้ด PlantUML อยู่เดิม คุณสามารถใช้ฟีเจอร์ AI หรือตัวแปลง Syntax ของ Eraser เพื่ออ่านค่าโค้ด PlantUML นั้น แล้วแปลงให้กลายมาเป็นโครงสร้างไดอะแกรมบน Eraser Canvas ได้ทันที
- ช่วยให้ทีมที่อยากย้ายจากระบบเอกสาร PlantUML เก่า ๆ มาสู่หน้าตาที่ทันสมัยและมินิมอลของ Eraser สามารถย้ายงานได้อย่างรวดเร็ว
จุดเด่นอื่น ๆ ของ Eraser ที่ทีมพัฒนาซอฟต์แวร์ต้องชอบ
- มี AI ช่วย Generate (Text-to-Diagram): คุณสามารถพิมพ์บอกข้อความสั้น ๆ เช่น “สร้าง Sequence Diagram ระบบ Login ด้วย OAuth2” AI ของ Eraser จะเขียนโค้ดและวาดภาพออกมาให้ทันที ซึ่งเราสามารถไปแก้โค้ดต่อเองได้
- Architecture Icon Sets ที่ครบครัน: มีชุดไอคอนมาตรฐานสำหรับสาย System แยกรวดเร็วชัดเจน ไม่ว่าจะเป็น AWS, GCP, Azure, Docker, Kubernetes หรือไอคอน Database แบบต่างๆ
- Git Integration: สามารถซิงค์เอกสารและไดอะแกรมใน Eraser กลับเข้าไปที่ GitHub Repository ของทีมได้โดยอัตโนมัติ ทำให้เอกสารอัปเดตไปพร้อมๆ กับซอร์สโค้ดของระบบ
สรุป: Eraser เหมาะกับใคร?
ถ้าโจทย์ของคุณคือ
- ❌ ไม่ชอบ draw.io เพราะวาดแล้วส่งออกเป็นโค้ดกลับไปยาก หน้าตาดูโบราณไปนิด
- ❌ ไม่ชอบ Whimsical เพราะแม้จะสวยและมินิมอล แต่ก็ไม่สามารถ Export ภาพออกมาเป็นโค้ดเก็บไว้บน Git ได้
- Eraser.io คือคำตอบที่ลงตัวที่สุด เพราะมันเชื่อมโยงโลกของ Diagram as Code (Mermaid/PlantUML) เข้ากับความยืดหยุ่นของ Visual Canvas ได้อย่างสมบูรณ์แบบ เขียนโค้ดได้ภาพ ลากภาพได้โค้ด ตอบโจทย์ทีม Tech ยุคใหม่อย่างแท้จริงครับ
อ่านเพิ่มเติม