ในโลกของการพัฒนาซอฟต์แวร์ยุคใหม่ แนวคิด Diagram as Code (เขียนโค้ดเพื่อวาดไดอะแกรม) ได้กลายเป็นมาตรฐานที่หลายทีมขาดไม่ได้ เพราะมันช่วยให้เราสามารถเก็บเวอร์ชันของไดอะแกรมไว้บน Git ทำ Code Review และอัปเดตเอกสารสถาปัตยกรรม (Architecture) ไปพร้อมๆ กับซอร์สโค้ดจริงได้อย่างง่ายดาย
แต่ปัญหาที่ตามมาคือ “สงคราม Syntax” และ “ความวุ่นวายในการตั้งค่าเซิร์ฟเวอร์”
- ทีมเดฟคนหนึ่งถนัดเขียน Sequence Diagram ด้วย Mermaid
- สถาปนิกอีกคนถนัดออกแบบ Flow ด้วย PlantUML
- อีกทีมอยากวาดบล็อกเน็ตเวิร์กด้วย BlockDiag
ผลลัพธ์คือ คุณต้องนั่งติดตั้งไลบรารีตัวเรนเดอร์ (Rendering Engines) เต็มเครื่อง หรือต้องตั้งค่า Docker Containers แยกกันถึง 3-4 ตัวเพื่อรองรับทุกค่าย และนั่นคือเหตุผลที่ Kroki (kroki.io) ถูกสร้างขึ้นมาเพื่อเป็นผู้ยุติศึกนี้ครับ
Kroki คืออะไร?
Kroki เป็นเครื่องมือแบบ Open-source ที่ทำหน้าที่เป็น “Unified Gateway สำหรับ Diagram as Code” พูดง่ายๆ คือมันเป็นตัวกลางที่รวบรวมเอนจินในการเรนเดอร์โค้ดให้กลายเป็นภาพกว่า 20+ ตัว มารวมไว้ภายใต้ API และบริการเดียว (Single Web Service)
แทนที่คุณจะต้องส่งโค้ดไปเรนเดอร์ที่เซิร์ฟเวอร์ของ Mermaid ตัวหนึ่ง หรือ PlantUML อีกตัวหนึ่ง คุณแค่ส่งโค้ดทั้งหมดมาที่ Kroki แล้วปล่อยให้มันจัดการแปลงออกมาเป็นรูปภาพสวยๆ (SVG, PNG, PDF) ส่งกลับมาให้คุณเอง
┌──────────────────────────┐────────────
│ โค้ดข้อความ (Text) │
│ Mermaid / PlantUML/... │
└───────────┬────────────┘
│ (ส่งผ่าน API/URL)
▼
┌────────────────────────┐
│ KROKI.IO │
└───────────┬────────────┘
│ (แปลงผลลัพธ์)
▼
┌────────────────────────┐
│ รูปภาพเสร็จสมบูรณ์ │
│ SVG / PNG / PDF │
└────────────────────────┘
รายชื่อเครื่องมือที่ Kroki รองรับ (โคตรครบครัน!)
ความเจ๋งของ Kroki คือมันรองรับแทบทุกไลบรารียอดนิยมในโลกปัจจุบัน เช่น
- สายพิมพ์นิยม: Mermaid, PlantUML
- สายดีไซน์ระบบ / โครงสร้าง: C4 (ผ่าน PlantUML), Structurizr, Graphviz
- สายบล็อกและเน็ตเวิร์ก: BlockDiag, PacketDiag, NwDiag, RackDiag
- สายไดอะแกรมเทคนิคอลอื่นๆ: D2, WaveDrom (วงจรไฟฟ้า), Erd (ฐานข้อมูล), Bytefield
ทำไม Kroki ถึงเป็นจิ๊กซอว์ชิ้นสำคัญของทีม Tech?
1. สถาปัตยกรรมแบบ API เดียว คุมได้หมด (Unified API)
ไม่ว่าคุณจะเขียนด้วยภาษาอะไร Kroki มีรูปแบบการเรียกใช้งาน (GET/POST Request) ที่เหมือนกันหมด คุณไม่ต้องเรียนรู้วิธีติดตั้งโปรแกรมหรือตั้งค่า CLI ของแต่ละค่ายให้ปวดหัว
2. เทคนิคขั้นเทพ: บีบอัดโค้ดให้อยู่ใน URL (URL-based Rendering)
Kroki มีฟีเจอร์ที่ชาญฉลาดมาก คือมันสามารถนำโค้ดไดอะแกรมของคุณไปแปลงผ่านกระบวนการ Brotli หรือ Zlib compression + Base64 encode จนกลายเป็นข้อความชุดสั้นๆ แล้วเอาไปต่อท้าย URL ของ Kroki ได้
ตัวอย่าง:
[https://kroki.io/mermaid/svg/YOUR_ENCODED_CODE](https://kroki.io/mermaid/svg/YOUR_ENCODED_CODE)
เมื่อคุณนำ URL นี้ไปแปะในแท็ก <img> บนหน้าเว็บ หรือในไฟล์ Markdown (.md) ระบบจะวาดไดอะแกรมขึ้นมาให้ทันทีโดยที่คุณไม่ต้องเปิดเซิร์ฟเวอร์เก็บไฟล์รูปภาพเลยแม้แต่รูปเดียว! พอแก้โค้ด URL ก็เปลี่ยน ภาพก็อัปเดตทันที
3. ความปลอดภัยสูงและ Self-hosted ได้ 100%
สำหรับองค์กรที่ซีเรียสเรื่องความปลอดภัย ไม่ต้องการส่งซอร์สโค้ดโครงสร้างระบบภายในออกไปนอกบริษัท คุณสามารถดึง Kroki มาติดตั้งบน Infrastructure ของตัวเองได้ง่ายๆ ผ่าน Dockerdocker run -d --name kroki -p 8000:8000 yuzutech/kroki
เพียงคำสั่งเดียว คุณก็จะได้เซิร์ฟเวอร์เรนเดอร์ไดอะแกรมส่วนตัวภายในองค์กรทันทีฟรีๆ
4. ปลั๊กอินเสริมที่เชื่อมต่อได้ทุกเครื่องมือ
Kroki มี Extension และปลั๊กอินรองรับร่วมกับเครื่องมือทำเอกสารมากมาย เช่น VS Code, IntelliJ, Antora, Asciidoctor รวมไปถึงการประยุกต์ใช้ร่วมกับ Visual Workspace อย่าง draw.io หรือ Eraser.io ในการดึงภาพที่เรนเดอร์แล้วไปแสดงผล
สรุป
Kroki ไม่ใช่เครื่องมือวาดรูปตัวใหม่ แต่เป็น “โครงสร้างพื้นฐาน (Infrastructure)” ที่ดีที่สุดสำหรับทีมที่หลงรักแนวคิด Diagram as Code มันช่วยตัดความซับซ้อนในการบริหารจัดการเซิร์ฟเวอร์ และเปิดโอกาสให้ทุกคนในทีมได้ใช้เครื่องมือที่ตัวเองถนัดที่สุดได้อย่างอิสระ
ถ้าทีมของคุณกำลังทำระบบเอกสาร (Documentation) และอยากทลายข้อจำกัดในการแสดงผลไดอะแกรม ลองนำ Kroki เข้าไปเป็นหนึ่งใน Stack ของทีมดูครับ แล้วชีวิตการทำเอกสารเทคนิคอลจะราบรื่นขึ้นอย่างแน่นอน!
อ่านเพิ่มเติม