พรีวิวไดอะแกรม Mermaid

ป้อนโค้ด Mermaid แล้วดูไดอะแกรมอย่าง flowchart และ sequenceDiagram เป็นพรีวิว SVG แบบสด

⌘ ทำงานในเบราว์เซอร์ ◴ ไม่จัดเก็บข้อมูล ⌁ ฟรี

การทำเอกสารด้วยไดอะแกรม

พรีวิวโค้ด Mermaid เป็นไดอะแกรม SVG ได้ทันที

พรีวิวไดอะแกรม Mermaid ช่วยเรนเดอร์ไวยากรณ์ Mermaid ในเบราว์เซอร์เพื่อเตรียมไดอะแกรมสำหรับ README, wiki และเอกสารออกแบบ

ป้อนไวยากรณ์ Mermaid ที่ใช้บ่อยในเอกสาร เช่น flowchart, sequenceDiagram, classDiagram และ stateDiagram แล้วดูผลลัพธ์ SVG ทางด้านขวา

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

คัดลอก SVG ที่เรนเดอร์แล้วหรือโค้ด Mermaid ต้นฉบับเพื่อใช้ต่อใน README, issue และเอกสารทางเทคนิค

ใช้ตรวจสอบ service flow, API sequence, state transition หรือโครงสร้าง architecture แบบง่ายก่อนใส่ในเอกสาร

เลือกตัวอย่าง flowchart, sequenceDiagram, classDiagram หรือ stateDiagram เหนือ editor เพื่อเติม input ได้ทันที

เมื่อ Mermaid render ล้มเหลว เครื่องมือจะแสดงข้อความผิดพลาดพร้อมบล็อกโค้ดต้นฉบับเพื่อให้แก้ไวยากรณ์ได้ง่าย

คัดลอก SVG จะคัดลอกผลลัพธ์ที่เรนเดอร์ ส่วนคัดลอกซอร์สจะคัดลอกโค้ด Mermaid ที่ป้อน

Mermaid renderer โหลดจาก CDN ภายนอก และข้อมูลที่ป้อนจะถูกประมวลผลเฉพาะในเบราว์เซอร์ของคุณ

โค้ด Mermaid

พรีวิวไดอะแกรม

ไดอะแกรม Mermaid ที่เรนเดอร์แล้วจะแสดงที่นี่

1 เขียนหรือวางไวยากรณ์ Mermaid ในช่องป้อนด้านซ้าย
2 ถ้าต้องการตัวอย่าง ให้เลือก flowchart, sequenceDiagram, classDiagram หรือ stateDiagram เหนือช่องป้อน
3 ตรวจไดอะแกรม SVG หรือข้อความผิดพลาดในพรีวิวด้านขวา
4 เมื่อผลลัพธ์ถูกต้อง ให้ใช้คัดลอก SVG หรือคัดลอกซอร์สเพื่อคัดลอกเนื้อหาที่ต้องการ

พรีวิวไดอะแกรม Mermaid แบบใดได้บ้าง?

เครื่องมือเรนเดอร์ไวยากรณ์ Mermaid ทั่วไปที่ Mermaid renderer รองรับ เช่น flowchart, sequenceDiagram, classDiagram และ stateDiagram เป็น SVG

ถ้ามีข้อผิดพลาดของไวยากรณ์จะเกิดอะไรขึ้น?

หาก render ล้มเหลว พื้นที่พรีวิวจะแสดงสถานะข้อผิดพลาดและโค้ดต้นฉบับเป็นบล็อกโค้ด

โค้ดไดอะแกรมถูกส่งไปยังเซิร์ฟเวอร์หรือไม่?

ไม่ เครื่องมือนี้ทำงานเฉพาะฝั่ง client และประมวลผลโค้ด Mermaid ในเบราว์เซอร์