วาง Mermaid แล้วดูแผนภาพ ได้ทันที

วาง Mermaid ดูตัวอย่างทันที ส่งออก SVG/PNG อัปโหลดไฟล์ ลากเพื่อเลื่อน และแชร์ผ่าน URL

เทมเพลตด่วน
เปิดไฟล์ Mermaidวางที่ใดก็ได้ — .mmd · .mermaid · .md · .txt · วิธีเปิดไฟล์ .mmd
กำลังโหลด Mermaid...บรรทัด 1, คอลัมน์ 1
เคล็ดลับ: ในพรีวิว ให้คลิกแล้วลาก (หรือแตะแล้วลาก) เพื่อเลื่อน วางไฟล์ลงในพรีวิวเพื่อโหลด

Mermaid คืออะไร?

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

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

Mermaid ทำงานร่วมกับแพลตฟอร์มเอกสาร วิกิ และไฟล์ Markdown ได้อย่างราบรื่น จึงเป็นเครื่องมือโปรดของนักพัฒนาและนักเขียนเชิงเทคนิค

ทำไมต้องใช้ Mermaid?

  • การควบคุมเวอร์ชัน: ไดอะแกรมเป็นไฟล์ข้อความ จึงสามารถติดตามใน Git ควบคู่กับโค้ดได้
  • อัปเดตได้รวดเร็ว: เปลี่ยนเพียงไม่กี่บรรทัดแทนการวาดใหม่ทั้งหมด
  • ความสม่ำเสมอ: Mermaid จัดการเลย์เอาต์และสไตล์อัตโนมัติ เพื่อให้ไดอะแกรมมีความสม่ำเสมอ
  • ไม่ต้องใช้เครื่องมือออกแบบ: ไม่จำเป็นต้องใช้ Visio, Lucidchart หรือเครื่องมือราคาแพงอื่นๆ
  • เอกสารเป็นโค้ด: เก็บไดอะแกรมไว้ในรีโปเดียวกับเอกสารของคุณ
  • ข้ามแพลตฟอร์ม: ทำงานได้ทั้งในเบราว์เซอร์และ Node.js และเชื่อมต่อได้กับหลายแพลตฟอร์ม
  • ฟรีและโอเพนซอร์ส: ไม่มีค่าไลเซนส์ ชุมชนแอคทีฟ
  • รองรับไดอะแกรมหลายประเภท: รองรับผังงาน ไดอะแกรมลำดับ ไดอะแกรมคลาส และอื่นๆ

ผังงาน

สร้างผังงานแบบมืออาชีพโดยใช้ไวยากรณ์ข้อความง่ายๆ แสดงตัวอย่างทันที ส่งออกเป็น SVG/PNG และแชร์ผ่าน URL - ทั้งหมดฟรี

แผนภูมิลำดับ

ออกแบบแผนภูมิลำดับ UML เพื่อแสดงภาพการโต้ตอบระหว่างส่วนประกอบของระบบ เหมาะสำหรับเอกสาร API และการออกแบบระบบ

แผนภูมิแกนต์

วางแผนและแสดงภาพไทม์ไลน์โครงการด้วยแผนภูมิแกนต์ ติดตามงาน การพึ่งพา และก้าวสำคัญโดยใช้ไวยากรณ์ข้อความง่ายๆ

แผนภูมิคลาส

ออกแบบระบบเชิงวัตถุด้วยแผนภูมิคลาส UML กำหนดคลาส แอตทริบิวต์ เมธอด และความสัมพันธ์โดยใช้ข้อความง่ายๆ

แผนภูมิสถานะ

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

แผนภูมิ ER

ออกแบบสคีมาฐานข้อมูลด้วยแผนภูมิความสัมพันธ์เอนทิตี กำหนดเอนทิตี แอตทริบิวต์ และความสัมพันธ์โดยใช้ไวยากรณ์ข้อความง่ายๆ

โฆษณา

คู่มือฉบับสมบูรณ์สำหรับไดอะแกรม Mermaid

เรียนรู้การสร้างไดอะแกรมมืออาชีพด้วยไวยากรณ์แบบข้อความที่เรียบง่าย

คำถามที่พบบ่อย

คำถามทั่วไปเกี่ยวกับการใช้งาน Mermaid Viewer และการสร้างไดอะแกรม

ตัวแก้ไข Mermaid นี้ฟรีจริงไหม?
ใช่ ฟรีทั้งหมด คุณสามารถสร้างไดอะแกรมได้ไม่จำกัด ส่งออกเป็น SVG/PNG แชร์ผ่าน URL และใช้ทุกฟีเจอร์ได้โดยไม่ต้องสมัครหรือจ่ายเงิน เครื่องมือนี้รองรับด้วยโฆษณาที่ไม่รบกวนการใช้งาน.
ต้องติดตั้งอะไรไหม?
ไม่ต้องติดตั้งอะไรเลย เครื่องมือนี้ทำงานบนเบราว์เซอร์ทั้งหมด เพียงเปิดเว็บไซต์ก็เริ่มสร้างไดอะแกรมได้ทันที ทั้งบนเดสก์ท็อป แท็บเล็ต และมือถือ.
บันทึกไดอะแกรมอย่างไร?
คุณบันทึกงานได้หลายวิธี: 1) ส่งออกเป็น SVG หรือ PNG 2) แชร์ผ่าน URL (โค้ดไดอะแกรมจะถูกเข้ารหัสใน URL) 3) คัดลอกโค้ด Mermaid ไปเก็บในไฟล์ของคุณ 4) อัปโหลด/ดาวน์โหลดไฟล์ .mmd หรือ .mermaid.
ใช้ไดอะแกรมในเอกสารได้ไหม?
ได้แน่นอน ส่งออกไดอะแกรมเป็น SVG (ย่อ-ขยายได้) หรือ PNG แล้วนำไปใช้ในเอกสาร งานนำเสนอ หรือเว็บไซต์ได้ และยังสามารถฝังโค้ด Mermaid โดยตรงในแพลตฟอร์มอย่าง GitHub, GitLab หรือ Notion.
SVG กับ PNG ต่างกันอย่างไร?
SVG เป็นไฟล์เวกเตอร์ จึงคมชัดทุกขนาดและเหมาะกับงานเอกสาร/เว็บ ส่วน PNG เป็นภาพราสเตอร์ เหมาะกับการแชร์เร็ว แต่คุณภาพจะลดลงเมื่อปรับขนาด.
ทำไมไดอะแกรมไม่แสดงผล?
ตรวจสอบข้อผิดพลาดไวยากรณ์ในโค้ด Mermaid ของคุณ ปัญหาที่พบบ่อยคือเครื่องหมายคำพูดไม่ปิด ขาดเครื่องหมายโคลอน/อัฒภาค ID โหนดไม่ถูกต้อง หรือใช้ไวยากรณ์ที่ไม่รองรับ ลองลดความซับซ้อนของไดอะแกรมเพื่อหาจุดผิด.
ทำงานร่วมกับคนอื่นได้ไหม?
ยังไม่มีการทำงานร่วมกันแบบเรียลไทม์ในตัว แต่คุณสามารถแชร์ไดอะแกรมผ่าน URL ได้ง่าย ผู้รับสามารถเปิด แก้ไข และแชร์เวอร์ชันของตนกลับมาได้ และเพราะ Mermaid เป็นข้อความ จึงทำงานร่วมกับ Git ได้ดีมาก.
ใช้งานออฟไลน์ได้ไหม?
การโหลดครั้งแรกต้องใช้อินเทอร์เน็ต หลังจากโหลดแล้ว ฟีเจอร์แก้ไขพื้นฐานมักใช้งานออฟไลน์ได้ แต่บางฟีเจอร์ เช่น การส่งออก อาจยังต้องใช้การเชื่อมต่อ.
เรียนรู้ไวยากรณ์ Mermaid ได้อย่างไร?
เริ่มจากคู่มือ Mermaid แบบครบถ้วนของเรา ซึ่งมีตัวอย่างทุกประเภทไดอะแกรม ใช้เทมเพลตเพื่อเริ่มได้เร็วขึ้น และดูเอกสารทางการเพิ่มเติมที่ mermaid.js.org.
ปรับแต่งหน้าตาไดอะแกรมได้ไหม?
ได้ แผนภาพจะใช้ธีมตามเว็บไซต์: สลับระหว่างโหมดสว่างและมืดด้วยปุ่มธีมบนแถบด้านบน แล้วแผนภาพจะถูกเรนเดอร์ใหม่ด้วยธีม Mermaid ที่สอดคล้องกัน หากต้องการปรับแต่งขั้นสูง ให้ใช้คำสั่ง %%{init:...}%% เพื่อกำหนดสี ฟอนต์ และคุณสมบัติการแสดงผลอื่น ๆ
รองรับไดอะแกรมประเภทใดบ้าง?
ตัวแก้ไขนี้รองรับไดอะแกรม Mermaid หลักทั้งหมด เช่น Flowchart, Sequence Diagram, Class Diagram, State Diagram, ER Diagram, Gantt Chart, Pie Chart, Git Graph, User Journey และอื่น ๆ.
ข้อมูลไดอะแกรมเป็นส่วนตัวไหม?
โค้ดไดอะแกรมของคุณจะไม่ถูกส่งไปยังเซิร์ฟเวอร์ของเรา การเรนเดอร์ทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณ เมื่อแชร์ผ่าน URL โค้ดจะอยู่ใน URL เอง เราไม่เก็บหรือติดตามเนื้อหาไดอะแกรมของคุณ.
ทำไมควรใช้ไดอะแกรมแบบข้อความ?
ไดอะแกรมแบบข้อความมีข้อดีหลายอย่าง: ควบคุมเวอร์ชันได้ดี (เหมาะกับ Git), อัปเดตเร็ว, สไตล์สม่ำเสมอ, ค้นหาได้ง่าย, ขนาดเบา และสร้างแบบอัตโนมัติได้ อีกทั้งยังรีวิวใน pull request ได้ง่ายกว่า.
ฝัง Mermaid ในเว็บไซต์ได้ไหม?
ได้ คุณสามารถเพิ่มไลบรารี JavaScript ของ Mermaid ในเว็บไซต์ แล้วใส่บล็อกโค้ด Mermaid ได้ หลายแพลตฟอร์มรองรับ Mermaid แบบเนทีฟอยู่แล้ว เช่น GitHub, GitLab, Notion และ Obsidian.
ขนาดไดอะแกรมสูงสุดที่แนะนำคือเท่าไร?
ไม่มีขีดจำกัดตายตัว แต่ไดอะแกรมที่ใหญ่มาก (มากกว่า ~100 โหนด) อาจเรนเดอร์ช้าตามประสิทธิภาพอุปกรณ์ สำหรับระบบซับซ้อน แนะนำให้แยกเป็นหลายไดอะแกรมขนาดเล็กที่โฟกัสมากกว่า.