ป้ายกำกับ: แผนภูมิวงกลม

Miro: แสดง Code as Diagram หรือ Diagram as Code แบบ GUIMiro: แสดง Code as Diagram หรือ Diagram as Code แบบ GUI

2014-04-25| phunsanit| 0 Comment | 07:00

Miro เกี่ยวข้องกับแนวคิด Code as Diagram (หรือ Diagram as Code) ในฐานะ “ปลายทาง (Output Target)” หรือพื้นที่แสดงผลแบบ Visual ครับ

ถ้าให้สรุปง่าย ๆ : คุณเขียน Code เพื่ออธิบายโครงสร้าง (เช่น Architecture หรือ Flowchart) แล้วแปลงมันให้ออกมาเป็นแผนภาพบนบอร์ดของ Miro โดยอัตโนมัติ แทนที่จะต้องมานั่งลากกล่องสี่เหลี่ยมทีละใบด้วยมือ

นี่คือรายละเอียดเชิงลึกว่ามันทำงานร่วมกันอย่างไร และมี Tool อะไรที่ใช้เชื่อมต่อครับ

1. Miro ทำหน้าที่เป็น “Visual Canvas” สำหรับ Code

ในกระบวนการ Code as Diagram ปกติเราจะใช้ภาษาที่เป็น Text-based (เช่น Mermaid.js, PlantUML หรือ WebSequenceDiagrams) เพื่อเขียนโค้ดอธิบายระบบ

เมื่อนำมาใช้กับ Miro, ตัว Miro จะมี API และ Developer Plugins ที่สามารถรับข้อมูลโค้ดเหล่านั้น แล้วนำมาเรนเดอร์ (Render) เป็น Object ต่าง ๆ บนบอร์ด เช่น กล่อง, เส้นเชื่อม, หรือสีสัน ทำให้ทีมสามารถเข้ามาคอมเมนต์หรือทำงานร่วมกันต่อได้

2. เครื่องมือที่เชื่อมต่อ Code เข้ากับ Miro

ปัจจุบันมีหลาย Tool และเทคนิคที่ทำให้เราสามารถเปลี่ยน Code เป็น Diagram บน Miro ได้

Miro Mermaid App
Miro มีแอปอย่างเป็นทางการที่รองรับ Mermaid.js คุณสามารถเขียนโค้ดสั้น ๆ ใน Miro แล้วมันจะแปลงเป็น Flowchart, Sequence Diagram หรือ Architecture Diagram ให้ทันที
Miro Developer API
สำหรับวิศวกรระบบ (DevOps/Cloud Architect) สามารถเขียนสคริปต์ (เช่น Python หรือ Node.js) เพื่อดึงข้อมูลโครงสร้าง Cloud (จาก AWS, GCP, Azure) หรือโครงสร้าง Database แล้วใช้ Miro API สั่งสร้าง Diagram บนบอร์ดอัตโนมัติ
Plugins จาก Third-party
มีเครื่องมือประเภท Infrastructure as Code (IaC) บางตัวที่สามารถ Export โครงสร้างระบบออกมาเป็นฟอร์แมตที่นำมานำเข้า (Import) ใน Miro ได้

ตัวอย่างเพื่อให้เห็นภาพ (Mermaid.js ใน Miro)

สมมติว่าคุณต้องการวาด Flow การทำงานของระบบลงบน Miro แทนที่จะต้องไปนั่งคลิกลากกล่องและลูกศร คุณสามารถเขียนโค้ดแบบนี้ลงในแอป Mermaid ของ Miro

Plain Text

graph TD
    A&#x5B;ผู้ใช้กดสั่งซื้อสินค้า] --> B{เช็คสต็อกสินค้า}
    B -- มีสินค้า --> C&#x5B;ตัดเงินในบัตร]
    B -- สินค้าหมด --> D&#x5B;แจ้งเตือนสินค้าหมด]
    C --> E&#x5B;ส่งข้อมูลให้คลังสินค้า]

ผลลัพธ์บน Miro
โค้ดด้านบนจะถูกเปลี่ยนเป็นแผนภูมิกล่อง (Flowchart) สวยงามที่มีเส้นโยงลูกศรให้อัตโนมัติในวินาทีเดียว

ทำไมคนถึงนิยมใช้ Miro ร่วมกับ Code as Diagram?

Single Source of Truth
เก็บ Logic ของ Diagram ไว้ในรูปแบบ Text/Code (ซึ่งจัดการง่าย ตรวจสอบเวอร์ชันผ่าน Git ได้) แต่ยังได้หน้าตาที่สวยงามดูง่ายสำหรับคนในองค์กร
ประหยัดเวลา
เวลาโครงสร้างระบบเปลี่ยน ไม่ต้องมานั่งย้ายกล่อง จัดระเบียบเส้นใหม่ แค่แก้ Code แล้วสั่ง Generate ใหม่ บน Miro ก็จะอัปเดตตาม
Collaboration
พอ Diagram ถูกสร้างขึ้นบน Miro ทีมที่เป็น Non-technical (เช่น PM, UI/UX, Business Analyst) ก็สามารถเข้ามาดู แปะ Post-it หรือ Comment ร่วมกันได้ทันที ซึ่งทำได้ยากหากอยู่บนโค้ดเฉย ๆ

พูดง่าย ๆ คือ Code as Diagram เป็น “วิธีสร้าง” ส่วน Miro เป็น “หน้าร้าน” ที่เอาไว้โชว์และทำงานร่วมกันครับ

อ่านเพิ่มเติม