# เครื่องมือสร้างไดอะแกรมระบบ

URL: https://discuvr.org/system-diagram/?hl=th
Last updated: 2026-11-08
MCP tool: `draw_system_diagram`

วาดไดอะแกรมสถาปัตยกรรมและโฟลว์ด้วยการพิมพ์ A -> B จัดวางอัตโนมัติ กลุ่มพับได้ ลำดับขั้นตอน ส่งออก PNG และ SVG

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

## การทำงาน

- จัดวางอัตโนมัติ ซ้ายไปขวาหรือบนลงล่าง อัปเดตทันทีขณะพิมพ์
- เลือกรูปทรงจากชื่อ: DB เป็นฐานข้อมูล Kafka เป็นคิว User เป็นบุคคล ชื่อที่ลงท้ายด้วย ? เป็นจุดตัดสินใจ
- กลุ่มที่ยุบเป็นกล่องเดียวได้ ไดอะแกรมเดียวจึงใช้ได้ทั้งภาพรวมและรายละเอียด
- ลาก เชื่อม เปลี่ยนชื่อ และเพิ่มกล่องบนแคนวาสได้ด้วย ทุกการเปลี่ยนแปลงถูกเขียนกลับไปที่ข้อความ
- ลำดับขั้นตอน สไตล์วาดมือ ส่งออก PNG และ SVG และลิงก์แชร์ ไม่มีการอัปโหลดใดๆ

## วิธีใช้งาน

1. พิมพ์บรรทัดเช่น User -> Web App -> Orders DB หรือเริ่มจากเทมเพลต
2. เพิ่มกลุ่มด้วย ชื่อ { ... } ป้ายหลังเครื่องหมายโคลอน และ --> สำหรับการเรียกแบบอะซิงก์
3. สลับระหว่างภาพรวมและรายละเอียด ลากจัดกล่อง แล้วส่งออกหรือคัดลอกลิงก์

## คำถาม

**ต่างจาก Excalidraw อย่างไร**

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

**จะแสดงทั้งภาพรวมและรายละเอียดได้อย่างไร**

ใส่กล่องที่เกี่ยวข้องในกลุ่มด้วย ชื่อ { ... } ปุ่มภาพรวมจะยุบทุกกลุ่มเป็นกล่องเดียวและรวมลูกศร ปุ่มรายละเอียดจะเปิดกลับ และยุบทีละกลุ่มจากหัวกลุ่มได้

**ไดอะแกรมของฉันถูกเก็บไว้ที่ไหนไหม**

ไม่ ไดอะแกรมวาดในเบราว์เซอร์และเก็บในพื้นที่จัดเก็บภายในของเบราว์เซอร์ ลิงก์แชร์พกไดอะแกรมไว้ในตัวลิงก์หลังเครื่องหมาย # ซึ่งเบราว์เซอร์ไม่เคยส่งไปยังเซิร์ฟเวอร์

**วางผังงานจาก Mermaid ได้ไหม**

วางตรง ๆ ไม่ได้ เพราะไม่มีการนำเข้าจาก Mermaid บรรทัดธรรมดาอย่าง A -> B ใช้ได้ แต่มีสามจุดที่ต่างกัน ให้ลบบรรทัดหัว graph TD ไม่เช่นนั้นจะกลายเป็นกล่อง แล้วเขียน direction: down แทน ลบป้ายของ Mermaid ในวงเล็บเหลี่ยมออก เพราะที่นี่ข้อความใน [ ] ถูกอ่านเป็นแท็กรูปทรงและสี และ --> ที่นี่วาดลูกศรเส้นประสำหรับการเรียกแบบอะซิงโครนัส ขณะที่ใน Mermaid เป็นลูกศรปกติ ใช้ -> สำหรับลูกศรเส้นทึบ

**นอกจาก A -> B เขียนอะไรได้อีก**

A -> B: ข้อความ ใส่ป้ายบนลูกศร A --> B วาดลูกศรเส้นประ A <-> B ลูกศรสองทาง และ A <- B ชี้ย้อนกลับ ชื่อ [db, blue] กำหนดรูปทรงและสี รูปทรงมี service, db, cache, queue, actor, client, storage, external, decision, terminal และ note บรรทัด title: ตั้งชื่อไดอะแกรม direction: down จัดวางจากบนลงล่าง และบรรทัดที่ขึ้นต้นด้วย # หรือ // เป็นคอมเมนต์ หนึ่งไดอะแกรมรองรับได้สูงสุด 300 กล่อง 600 ลูกศร และข้อความ 20,000 ตัวอักษร

**เมื่อพับกลุ่ม ลูกศรจะเปลี่ยนไปอย่างไร**

ลูกศรระหว่างกล่องที่อยู่ในกลุ่มที่พับจะถูกซ่อน ส่วนลูกศรที่ข้ามขอบกลุ่มจะเริ่มหรือจบที่กล่องของกลุ่มแทน ลูกศรหลายเส้นระหว่างกล่องคู่เดียวกันจะรวมเป็นลูกศรเส้นหนาเส้นเดียว ที่เก็บป้ายแรกไว้และเพิ่มจำนวนกำกับ ตัวอย่าง: ถ้า Payments API และ Ledger อยู่ใน Payments { ... } บรรทัด Checkout -> Payments API และ Checkout -> Ledger จะกลายเป็นลูกศรเส้นเดียว Checkout -> Payments x2 ในโหมดภาพรวม กลุ่มที่อยู่ในกลุ่มที่พับจะถูกพับไปด้วย และเมื่อเปิดขั้นตอน ตัวเลขจะเรียงตามลูกศรที่ยังมองเห็น ตามลำดับที่เขียนไว้

## เพิ่มเติมใน เครื่องมือนักพัฒนา

- [JSON Formatter](https://discuvr.org/json-formatter/?hl=th)
- [เครื่องมือจัดรูปแบบ Python](https://discuvr.org/python-formatter/?hl=th)
- [เครื่องมือดู HTML](https://discuvr.org/html-viewer/?hl=th)
- [เครื่องคำนวณซับเน็ต IP](https://discuvr.org/ip-subnet-calculator/?hl=th)

## มักใช้ร่วมกับ

- [เปรียบเทียบข้อความ](https://discuvr.org/text-diff/?hl=th)

---

Part of Discuvr (https://discuvr.org/): Discuvr is a collection of free, focused tools for day-to-day professional work - office and data utilities, legal and compliance helpers, privacy and security checks, and developer formatters. Every tool has its own page, and most can also be called from ChatGPT or Claude over MCP.