คัมภีร์เทพ IT 2 Tools ที่ช่วยให้คุณสร้าง Diagrams ได้สะดวกยิ่งขึ้น

2 Tools ที่ช่วยให้คุณสร้าง Diagrams ได้สะดวกยิ่งขึ้น

21-ก.ค.-23

คัมภีร์เทพ IT

2 Tools ที่ช่วยให้คุณสร้าง Diagrams ได้สะดวกยิ่งขึ้น

การสร้าง Diagrams as Code เป็นวิธีที่ช่วยให้แน่ใจว่า Diagrams ของคุณจะ Maintain ได้ง่าย และดูว่า Infrastructure หรือ Ideas ของคุณถูกพัฒนาไปอย่างไร, แก้ไขได้ทันที และ Update อยู่เสมอ วันนี้เรามาดู 2 Tools ที่ช่วยให้คุณสร้าง Diagrams ได้สะดวกยิ่งขึ้น

ทำไมถึงควรสร้าง Diagrams as Code และทำอย่างไร

การสร้าง Diagrams as Code ทำให้คุณสามารถใช้ Text Editor เพื่อสร้าง Diagrams แทนการใช้บาง Software ด้วยวิธีการนี้จะทำให้คุณสามารถสร้าง Diagrams ควบคู่ไปกับ Code ของคุณได้อย่างรวดเร็วและง่ายดาย อีกทั้งแสดงผลใน Process การสร้างของคุณ นอกจากนี้ เนื่องจาก Diagrams ถูกเขียนด้วย Code จึงทำให้สามารถ Share, Edit และ Maintain ได้ง่าย

วิธีการนี้ ยังทำให้ง่ายต่อการทำงานร่วมกับเพื่อนร่วมงานของคุณ Diagrams บางส่วนยังสามารถสร้างขึ้นโดยอัตโนมัติจาก Code หรือ Metadata อื่น ๆ ทำให้กระบวนการแก้ไขทำได้ง่ายยิ่งขึ้น

ดังนั้น เกณฑ์สำคัญในการเลือก Tools ก็คือ Plugin หรือการ Integrate เข้ากับ IDE ของคุณ

สำหรับ Tools ในบทความนี้ มี VS Code Plugin ที่ตรงตามเกณฑ์ข้างต้น ถ้าจะพูดกันตามจริง “Diagram as Code” จะอ้างถึง Tools ที่รองรับภาษาใดภาษาหนึ่งเพื่อสร้าง Diagrams แต่โดยทั่วไปมักจะไม่มีปัญหาในการใช้ Tools อื่น ๆ ที่ต้องใช้ Web-based Editor ตราบใดที่พวกมันมีลักษณะของ Diagrams ใน SVG หรือ JSON เรายังคงได้รับประโยชน์หลัก ๆ ในเรื่องการกำหนด Version และการทำงานร่วมกัน

ด้วยเหตุนี้ เราสามารถใช้ Tools 2 ตัวนี้ควบคู่กันไป ตัวแรกเป็น Web-based Interface (พร้อม VS Code Plugin เพื่อให้สามารถแก้ไขในเครื่องได้) และอีกตัวหนึ่งก็เป็น Declarative Tool ที่มี DSL (Domain-Specific Language) เพื่อสร้าง Diagrams มี Structure และมีความซับซ้อนมากขึ้น

สำหรับ Tools 2 ตัวที่คุณสามารถใช้เพื่อสร้าง “Diagrams as Code” ก็คือ:

1. Excalidraw (สำหรับการสร้าง Diagrams อย่างรวดเร็วและถูกบันทึกในรูปแบบของ JSON)

Excalidraw มี Style ที่เรียบง่ายและมีคลังของ Shapes ขนาดใหญ่ Diagrams มี Hand-Drawn Style ที่เรียบง่ายแต่ดีเยี่ยม

Excalidraw web editor

Tool นี้มี VS Code Extension ซึ่งช่วยทำให้เหมาะสำหรับการจัดเก็บและทำงานกับ Diagrams ควบคู่ไปกับ Code ของคุณ Extension นี้ใช้ Excalidraw ใน Local Version ดังนั้น การเรียก Diagram ของคุณ มันจะไม่ถูกสร้างไปที่ Server ต่าง ๆ เพื่อแสดง Diagram

Excalidraw VS-code extension

แม้ว่า Excalidraw จะไม่ใช่ Diagram as Code อย่างแท้จริง เนื่องจากคุณไม่ต้องเขียน Code แต่ถึงกระนั้นคุณก็ยังได้รับประโยชน์จาก Tool นี้อยู่ดี ด้วย Editor ที่เรียบง่ายและ Versioned Diagram ก็ได้ถูกกล่าวถึงพอสมควรใน Git Repository และถึงคุณจะใช้ Draw.io ควบคู่ไปด้วย แต่คุณอาจไม่ได้ต้องการ Features ทั้งหมดของมัน ดังนั้น คุณควรเปลี่ยนไปใช้ Diagram-as-Code Tool ที่แท้จริง เมื่อต้องการทำ Diagrams ที่มี Structure เพิ่มเติม

2. PlantUML (สำหรับ Diagrams ที่มี Structure)

PlantUML เป็นหนึ่งใน Tools ที่เก่าแก่ที่สุด มันมีวัตถุประสงค์เพื่อสร้าง UML Diagrams as Code อย่างไรก็ตาม มีการพัฒนามาตลอดในช่วงหลายปีที่ผ่านมา ทำให้คุณสามารถสร้าง Diagrams ต่าง ๆ ได้ตั้งแต่ UML Diagrams เรียบง่ายธรรมดาไปจนถึง Network และ Infrastructure Diagrams ที่มีความซับซ้อน PlantUML มีความยืดหยุ่นและต่อยอดได้สูงมาก มี Contributors จำนวนมากที่ช่วยสร้าง Libraries ของ Icons และ Diagram Models ใหม่ ๆ ขึ้นมา PlantUML เป็น Tool ที่เหมาะสำหรับการสร้าง Diagrams as a Code ขอแนะนำให้คุณดูที่ ***Hitchhiker’s Guide to PlantUML เพื่อดูตัวอย่างและคำอธิบายเพิ่มเติม

บางคนอาจจะเคยใช้ Diagrams สำหรับ Infrastructure Diagrams เนื่องจากไม่รู้วิธีใช้ PlantUML แต่กลับกลายเป็นว่าคุณสามารถใช้ Infrastructure Icons ทั้งหมดได้ง่ายดายโดยการ Import Icon Library ที่เหมาะสม การ Import Libraries และ Icons ไม่จำเป็นต้องติดตั้งอะไรให้ยุ่งยากเลย เพราะ PlanUML จะ Fetch Dependencies ในช่วง Runtime เพื่อรับประสบการณ์การใช้งานที่ราบรื่น และนี่ก็คือรายการของ Resources ที่น่าจะมีประโยชน์กับคุณ:

นอกจากนี้ PlantUML มี VS Code Extension และ IDEs อื่น ๆ ที่คุณสามารถนำไปใช้สำหรับการทำงาน ก็มีการรองรับ PlantUML ซึ่งจะช่วยทำให้ทุกอย่างสมบูรณ์แบบมากขึ้น

PlantUML VS-Code extension

PlantUML ไม่ใช่แค่ UML แต่มันเป็น Tool ที่มีความยืดหยุ่นสูงซึ่งแทบจะมีทุก Use Case สำหรับ Software Engineers ซึ่งแน่นอนว่า PlantUML มีประโยชน์กับคุณอย่างมาก

นอกจาก Tools ทั้ง 2 ตัวข้างต้นแล้ว ยังมี Tools อื่น ๆ ที่คุณสามารถนำไปใช้ในการสร้าง Diagrams as Code ได้เช่นกัน

Mermaid: มันเป็นคู่แข่งโดยตรงของ PlantUML มันค่อนข้างดีและสามารถ Integrate เข้ากับ Notion ได้ ไม่ว่าคุณจะชอบมันหรือไม่ แต่ขอแนะนำให้คุณลองเรียนรู้ Tool ตัวนี้ดูก่อนจะตัดสินใจเลือกใช้แค่ Tool ใด Tool หนึ่งเพียงอย่างเดียว
Diagrams: มันเป็น Diagrams-as-Code Tool สำหรับ Infrastructure Diagrams คุณสามารถเขียน Python Code เพื่อสร้าง Diagram แทนที่จะเรียนรู้ DSL Language ตัวใดตัวหนึ่ง หากคุณไม่ถนัดหรือไม่ชอบ PlantUML เชื่อว่า Tool นี้ก็เป็นอีกหนึ่งตัวเลือกที่ดีเช่นกัน

ที่มา: https://betterprogramming.pub/

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

บทความล่าสุด

บทความ IT เจ๋งๆ

2 Tools ที่ช่วยให้คุณสร้าง Diagrams ได้สะดวกยิ่งขึ้น

ประเภทบทความ