Softonic

เครื่องมือดูตัวอย่างแผนภาพ Mermaid

Mermaid คือภาษาสร้างแผนภาพที่ใช้ข้อความเป็นพื้นฐาน คุณเพียงเขียนด้วยข้อความธรรมดาว่าอยากให้แผนภาพหน้าตาเป็นอย่างไร แล้ว Mermaid จะเรนเดอร์ออกมาเป็น SVG รองรับทั้งผังงาน (flowchart), แผนภาพลำดับ (sequence diagram), แผนภาพคลาส (class diagram), เครื่องสถานะ (state machine), แผนภาพ ER, แผนภูมิแกนต์ (gantt), แผนภูมิวงกลม (pie), แผนผังความคิด (mindmap) และกราฟสาขาของ Git เครื่องมือนี้เรียกใช้ตัวแยกวิเคราะห์ (parser) อย่างเป็นทางการของ Mermaid ในเบราว์เซอร์ และอัปเดต SVG ทุกครั้งที่คุณพิมพ์ คุณจึงปรับแก้ได้เรื่อย ๆ โดยไม่ต้องคอมมิตแผนภาพที่ยังไม่เสร็จดีลงในไฟล์ README

วิธีดูตัวอย่างแผนภาพ Mermaid

  1. 1

    เลือกประเภทแผนภาพ

    ผังงาน แผนภาพลำดับ คลาส สถานะ ER แกนต์ วงกลม กราฟ Git หรือแผนผังความคิด

  2. 2

    เขียนไวยากรณ์ Mermaid

    ในแผงด้านซ้าย ตัวแยกวิเคราะห์จะอัปเดตภาพตัวอย่างทุกครั้งที่คุณกดแป้นพิมพ์

  3. 3

    ดูผลการเรนเดอร์เป็น SVG

    ในแผงด้านขวา หากมีข้อผิดพลาดจะแสดงทันทีพร้อมบรรทัดที่เป็นสาเหตุ

  4. 4

    ส่งออก

    คัดลอก SVG ดาวน์โหลด PNG หรือคัดลอกโค้ด Mermaid ไปวางใน GitHub หรือ MkDocs

แผนภาพทั้ง 9 ประเภทโดยสรุป

ประเภท คำเปิดไวยากรณ์ ใช้สำหรับ
ผังงาน flowchart TD ต้นไม้การตัดสินใจ ผังกระบวนการทำงาน
แผนภาพลำดับ sequenceDiagram การเรียก API และการโต้ตอบระหว่างระบบตามลำดับเวลา
แผนภาพคลาส classDiagram สถาปัตยกรรมเชิงวัตถุ (OOP) และโมเดลโดเมน
แผนภาพสถานะ stateDiagram-v2 เครื่องสถานะจำกัด
แผนภาพ ER erDiagram โครงสร้างฐานข้อมูล
แผนภูมิแกนต์ gantt ไทม์ไลน์ของโครงการ
แผนภูมิวงกลม pie สัดส่วนร้อยละของทั้งหมด
กราฟ Git gitGraph การมองเห็นโครงสร้างของสาขา
แผนผังความคิด mindmap การระดมสมองแบบลำดับชั้น

เริ่มต้นอย่างรวดเร็วกับผังงาน

flowchart LR
    A[Start] --> B{Is it working?}
    B -- Yes --> C[Great]
    B -- No --> D[Debug]
    D --> B

คีย์เวิร์ดกำหนดทิศทาง: TD บนลงล่าง, LR ซ้ายไปขวา, RL ขวาไปซ้าย, BT ล่างขึ้นบน

รูปทรงของโหนด: [rect] สี่เหลี่ยม, (rounded) มุมมน, {diamond} ข้าวหลามตัด, ((circle)) วงกลม, >flag] ธง, [[subroutine]] ซับรูทีน

เริ่มต้นอย่างรวดเร็วกับแผนภาพลำดับ

sequenceDiagram
    participant U as User
    participant API
    participant DB
    U->>API: POST /login
    API->>DB: SELECT user
    DB-->>API: record
    API-->>U: 200 + token

->> คือลูกศรเส้นทึบ (คำขอ) ส่วน -->> คือลูกศรเส้นประ (การตอบกลับ) และ participant X as Label ใช้ตั้งชื่อย่อให้ตรงกับชื่อที่แสดงในแผนภาพ

ข้อผิดพลาดที่พบบ่อย

  • ลืมขึ้นบรรทัดใหม่หลังคำเปิด บรรทัดแรกต้องเป็น flowchart TD หรือคำเปิดอื่นที่คล้ายกัน และต้องอยู่บรรทัดเดียวโดด ๆ
  • อักขระสงวนในป้ายชื่อโหนด วงเล็บ วงเล็บเหลี่ยม และเครื่องหมายคำพูดที่อยู่ในป้ายชื่อต้องใส่เครื่องหมาย escape หรือครอบด้วยเครื่องหมายคำพูดคู่ เช่น A["Node (v2)"]
  • สัญกรณ์ของแผนภาพคลาส คำนำหน้า +public, -private, #protected, ~package; สเตอริโอไทป์ <<interface>>; การสืบทอด <|--, การประกอบ *--, การรวมกลุ่ม o--
  • รูปแบบวันที่ของแกนต์ ค่าเริ่มต้นคือ YYYY-MM-DD หากใช้รูปแบบอื่นให้กำหนดด้วย dateFormat YYYY-MM-DD ไว้บรรทัดบนสุด

Mermaid ใช้งานได้จริงที่ไหนบ้าง

  • GitHub เรนเดอร์บล็อกโค้ดที่กำกับด้วย mermaid ใน issue, pull request และไฟล์ README.md
  • GitLab เช่นเดียวกัน โดยรองรับมาตั้งแต่ปี 2022
  • MkDocs เมื่อใช้ปลั๊กอิน pymdown-extensions
  • Docusaurus และ Hugo ผ่านปลั๊กอิน
  • Obsidian มีตัวเรนเดอร์มาให้ในตัว
  • VS Code เมื่อติดตั้งส่วนขยายสำหรับดูตัวอย่าง Mermaid

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

GitHub รองรับเกือบทุกประเภท ได้แก่ ผังงาน แผนภาพลำดับ คลาส สถานะ ER แกนต์ และวงกลม ส่วนประเภทใหม่ ๆ (journey, mindmap) อาจยังรองรับช้ากว่า ควรทดสอบใน issue แบบร่างก่อนคอมมิตลงไฟล์ README

ใช้คำสั่ง classDef และ class เพื่อกำหนดคลาส CSS ให้กับโหนด นอกจากนี้ Mermaid ยังรองรับการปรับแต่งธีมผ่านบล็อกไดเรกทีฟที่วางไว้บรรทัดบนสุด เช่น %%{init: {"theme": "dark"}}%%

ได้ ภาพตัวอย่างถูกเรนเดอร์เป็น SVG คุณจึงดาวน์โหลด SVG ได้โดยตรง (ขยายได้ไม่จำกัดโดยไม่เสียความคมชัด) หรือจะส่งออกเป็น PNG ที่ความละเอียด 1x, 2x หรือ 3x ก็ได้

สาเหตุที่พบบ่อยที่สุดคืออักขระสงวนในป้ายชื่อโหนด ให้ครอบป้ายชื่อที่มีวงเล็บ วงเล็บเหลี่ยม หรือเครื่องหมายคำพูดด้วยเครื่องหมายคำพูดคู่ เช่น A["Node name (v2)"] ข้อความแจ้งข้อผิดพลาดจะระบุบรรทัดที่เป็นสาเหตุให้เอง

ไม่ ไลบรารี Mermaid ทำงานทั้งหมดภายในเบราว์เซอร์ของคุณและเรนเดอร์แผนภาพในเครื่อง ไม่มีการส่งข้อมูลใด ๆ ออกไปยังเซิร์ฟเวอร์

เครื่องมือที่เกี่ยวข้อง

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

ตัวลดรูปพีชคณิตบูลีน

ประเมินนิพจน์บูลีนสำหรับทุกชุดอินพุตและดูตารางค่าความจริงที่สมบูรณ์ รองรับตัวแปรสูงสุดห้าตัวและตัวดำเนินการ &, |, !, ^

เครื่องสร้างตัวอักษรสุ่ม

สร้างตัวอักษร A-Z แบบสุ่ม เลือกจำนวน ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือแบบผสม แล้วใช้กับเกม โจทย์ หรือกิจกรรมในห้องเรียน

เครื่องมือเลือกสี HEX

เลือกหรือป้อนสี HEX แล้วดูค่า RGB, HSL, CMYK โดยประมาณ ค่าความสว่างสัมพัทธ์ และคอนทราสต์กับสีขาวและสีดำ

เครื่องกำเนิดจานสี

สร้างพาเลตสีแบบเอกรงค์ ใกล้เคียง คู่ตรงข้าม ไตรแอดิก หรือเตตราดิกจากสี HEX หลัก พร้อมส่งออกตัวแปร CSS ที่คัดลอกได้ทันที

เลขฐานสองเป็นฐานสิบ

แปลงเลขฐานสองเป็นฐานสิบ หรือเลขฐานสิบเป็นฐานสองได้ทันที วางตัวเลขหนึ่งตัวแล้วอ่านผลลัพธ์