ตัวแก้ไขแผนภาพ Mermaid ฟรี
เขียน flowchart แผนภาพลำดับ Gantt chart และอื่นๆ ด้วยไวยากรณ์ Mermaid พร้อมตัวอย่างสดๆ ส่งออกเป็น SVG หรือ PNG ทำงานในเบราว์เซอร์ทั้งหมด
ลากหรือเลื่อนเพื่อเลื่อนภาพ บีบนิ้วหรือกด Ctrl ค้างพร้อมเลื่อนล้อเมาส์เพื่อซูม ลากขอบล่างเพื่อทำให้ตัวอย่างสูงขึ้น
💡 เขียนไดอะแกรมด้วยไวยากรณ์ Mermaid — ผังงาน ไดอะแกรมลำดับ แผนภูมิแกนต์ ไดอะแกรมคลาส และอื่น ๆ — แล้วส่งออกเป็น SVG หรือ PNG ทุกอย่างทำงานในเบราว์เซอร์ของคุณ: ข้อความไดอะแกรมไม่เคยถูกอัปโหลด และตัวเรนเดอร์ Mermaid ก็เสิร์ฟจากเว็บไซต์นี้เอง ไม่ใช่จาก CDN ของบุคคลที่สาม
การใช้งานทั่วไป
- สร้างแผนผังการไหลสร้างแผนผังการไหลจากข้อความและส่งออกเป็นรูปภาพ
- วาดแผนภาพลำดับแผนภาพวิธีการโต้ตอบของระบบหรือบุคคลเมื่อเวลาผ่านไป
- เพิ่มแผนภาพใน READMEสร้างแผนภาพที่ GitHub แสดงเป็นไปโดยอัตโนมัติใน README ของคุณ
- สร้างแผนภูมิแกนต์กำหนดเวลาโครงการเป็นแผนภูมิแกนต์จากข้อความ
- สร้างแผนภาพชั้นแผนภาพชั้นและความสัมพันธ์ของมันเพื่อการออกแบบซอฟต์แวร์
วิธีการทำงาน
Mermaid ให้คุณเขียนแผนภาพเป็นข้อความและเรนเดอร์ให้อัตโนมัติ — เหมาะสำหรับเก็บแผนภาพในระบบควบคุมเวอร์ชัน นี่คือตัวแก้ไขสดที่เรนเดอร์ขณะคุณพิมพ์
- 1เครื่องมือ Mermaid โหลดไลบรารี Mermaid จะโหลดจาก LibraTool เมื่อคุณใช้เครื่องมือครั้งแรก แล้วเบราว์เซอร์จะแคชไว้
- 2คุณเขียนรหัสแผนภาพผังงาน แผนภาพลำดับ แผนภูมิแกนต์ แผนภาพคลาส แผนภูมิวงกลม และอื่น ๆ โดยใช้ไวยากรณ์ข้อความของ Mermaid
- 3มันแสดงผลแบบสดโค้ดของคุณถูกแยกวิเคราะห์และเรนเดอร์เป็น SVG ในเบราว์เซอร์ขณะคุณพิมพ์ พร้อมธีมสว่างและมืด
- 4ส่งออก SVG หรือ PNGดาวน์โหลดแผนภาพเป็น SVG ที่ปรับขนาดได้ หรือ PNG 2× เพื่อนำไปใส่ในเอกสาร สไลด์ หรือ README
รหัสแผนภาพของคุณ ซึ่งอาจอธิบายระบบภายใน จะแสดงผลทั้งหมดในเบราว์เซอร์ของคุณและไม่เคยอัปโหลด
เครื่องมือที่เกี่ยวข้อง
ตัวแก้ไข Markdown
เขียนและดูตัวอย่าง Markdown แบบเรียลไทม์ รองรับหัวเรื่อง ตัวหนา ตัวเอียง บล็อกโค้ด ตาราง และรายการ
ตัวสร้าง CSS Grid
ออกแบบ CSS grid ตามภาพ — tracks, units และ gaps — และคัดลอก CSS และ HTML ที่สร้างขึ้น
ตัวสร้างแผนผัง ASCII
แปลงรายการแบบเยื้องเป็นแผนผังโฟลเดอร์ที่สวยงาม (├── └──) สำหรับ README และเอกสาร รองรับ Unicode หรือ ASCII ธรรมดา ทำงานในเบราว์เซอร์ทั้งหมด