วาด Diagram เองไม่เก่ง งั้นเขียนโค้ดวาดไปเลย

By /

เชื่อว่าเพื่อนๆสายไอทีหลายๆคน ต้องเจอกับสถานการณ์ที่ต้องวาดรูป diagram ต่างๆเพื่ออธิบายรายละเอียดการทำงานของระบบ ซอฟต์แวร์ ไม่ว่าจะเป็นมุมใดก็มุมหนึ่ง

ตัวอย่างเช่น

  • ER Diagram อธิบายความสัมพันธ์ของแต่ละ table ในฐานข้อมูล
  • Flowchart เพื่ออธิบายกระบวนการหรือ algorithm ที่จะพัฒนาขึ้นมา
  • Sequence diagram เพื่ออธิบายลำดับขั้นตอน

แล้ววาดไปวาดมา จะลากเส้นข้ามหากัน บางครั้งทำให้เราต้องมานั่งเสียเวลาจัดวางใหม่อีก เพราะมีการอัพเดทเพิ่มเติมภายหลัง หรือมีส่วนที่เราเพิ่งมาค้นหาหลังจากคุยรายละเอียด

บทความนี้ ผมจะมาขอแนะนำเว็บที่ใช้วาด diagram ในแบบที่เขียนเป็นโค้ด แล้วให้มันจัดวางกันเองเลย

Diagram Code

https://playground.diagram.codes/

Diagram.codes Playground เป็นเครื่องมือบนเว็บสำหรับสร้างและแบ่งปันไดอะแกรมและผังงานแบบ interactive ได้รับการออกแบบมาให้ใช้งานและปรับแต่งได้ง่าย พร้อมด้วยคุณสมบัติต่างๆ ที่ทำให้เหมาะสำหรับกรณีการใช้งานที่หลากหลาย โดยมีรูปแบบประเภทของ diagram ให้เลือกเริ่มต้นมากมายตามรูปภาพด้านล่าง

ด้วย Diagram.codes Playground เพื่อนๆสามารถสร้างไดอะแกรมและผังงานโดยใช้อินเทอร์เฟซแบบลากและวางที่เรียบง่าย คุณสามารถเพิ่มองค์ประกอบในไดอะแกรมของคุณโดยลากจากแถบด้านข้างไปยังผืนผ้าใบ และปรับแต่งรูปลักษณ์และลักษณะการทำงานโดยใช้แผงตัวเลือก

เครื่องมือนี้ยังรวมถึงเทมเพลตและตัวอย่างต่างๆ เพื่อช่วยให้คุณเริ่มต้นใช้งาน และช่วยให้คุณสามารถส่งออกไดอะแกรมของคุณเป็นไฟล์รูปภาพหรือแบ่งปันกับผู้อื่นโดยใช้ URL เฉพาะ 

Mermaid JS

https://mermaid.js.org/intro/

Mermaid เป็น Javascript library แบบ Open source สำหรับสร้างไดอะแกรมและแผนภูมิโดยใช้ภาษามาร์กอัปแบบข้อความธรรมดา ได้รับการออกแบบมาให้ใช้งานและปรับแต่งได้ง่าย พร้อมด้วยคุณสมบัติต่างๆ ที่ทำให้เหมาะสำหรับกรณีการใช้งานที่หลากหลาย

ด้วย Mermaid คุณสามารถสร้างไดอะแกรมและแผนภูมิโดยใช้ไวยากรณ์ที่เรียบง่ายและเป็นธรรมชาติ ไลบรารีรองรับไดอะแกรมประเภทต่างๆ รวมถึงผังงาน ไดอะแกรมลำดับ แผนภูมิแกนต์ และอื่นๆ คุณสามารถปรับแต่งรูปลักษณ์และพฤติกรรมของไดอะแกรมของคุณโดยใช้ตัวเลือกและสไตล์ที่หลากหลาย และส่งออกไดอะแกรมของคุณเป็นไฟล์ภาพหรือฝังไว้ในเว็บเพจของคุณโดยใช้ไลบรารี

ซึ่งเพื่อนๆสามารถไปทดลองใช้งานได้ผ่านลิงค์ https://mermaid.live

DBDiagram

https://dbdiagram.io/home

อีกเครื่องมือที่น่าสนใจคือ DBDiagram เครื่องมือวาด ER Diagram แบบเขียนโค้ด ที่รองรับการ Import/Export ในรูปแบบของ SQL ด้วย ซึ่งเหมาะสำหรับนักพัฒนาหรือนักวิเคราะห์ข้อมูล และรองรับการนำรูปออกเป็น PNG หรือ PDF ได้