ตัวแก้ไข Mermaid
สร้างผังงาน แผนภาพลำดับ แกนต์ชาร์ต และอื่น ๆ จากข้อความด้วยตัวแก้ไข Mermaid เรนเดอร์ ซูม และส่งออก SVG หรือ PNG ในเบราว์เซอร์ของคุณ
Mermaid คืออะไร?
Mermaid คือภาษาสร้างแผนภาพโอเพนซอร์สที่ให้สร้างแผนภาพจากข้อความล้วน คล้าย Markdown โดยอธิบายโหนดและเส้นเชื่อมด้วยไวยากรณ์ง่าย ๆ แล้วตัวเรนเดอร์จะวาดแผนภาพให้เอง
รองรับแผนภาพประเภทใดบ้าง?
ตัวแก้ไขมีตัวอย่างพร้อมใช้สำหรับผังงาน แผนภาพลำดับ แผนภาพคลาส แผนภาพสถานะ แผนภาพ ER แกนต์ชาร์ต แผนภูมิวงกลม แผนผังความคิด และไทม์ไลน์ โดย Mermaid 11 รองรับประเภทอื่นอีกมากที่พิมพ์เองได้
สร้างแผนภาพอย่างไร?
เลือกตัวอย่างจากดรอปดาวน์หรือพิมพ์โค้ดในตัวแก้ไขด้านซ้าย พรีวิวจะเรนเดอร์ใหม่ราว 350 มิลลิวินาทีหลังหยุดพิมพ์ หากไวยากรณ์ไม่ถูกต้องจะมีแผงสีแดงแสดงข้อผิดพลาดเป๊ะ ๆ โดยแผนภาพเดิมยังอยู่ครบ
โค้ดของฉันถูกส่งไปที่ใดหรือไม่?
ไม่ ทุกอย่างเรนเดอร์ในเครื่องด้วย JavaScript โค้ดของคุณไม่เคยออกจากอุปกรณ์
ส่งออกแผนภาพอย่างไร?
ใช้ดาวน์โหลด SVG เพื่อไฟล์เวกเตอร์ หรือดาวน์โหลด PNG เพื่อภาพความละเอียดสองเท่าพร้อมตัวเลือกพื้นหลังโปร่งใส และคัดลอกโค้ดเพื่อคัดลอกซอร์ส Mermaid ไปยังคลิปบอร์ด
ทำไมส่งออก PNG บางครั้งจึงล้มเหลว?
บางฟีเจอร์ของ Mermaid เรนเดอร์ผ่าน foreignObject ซึ่งเบราว์เซอร์อาจปฏิเสธการแรสเตอร์ลงแคนวาส กรณีนั้น PNG จะแจ้งข้อผิดพลาด แต่ดาวน์โหลด SVG ใช้ได้เสมอเพราะไม่ต้องแรสเตอร์
ซูมทำงานอย่างไร?
พรีวิวรองรับสเกล 0.5x ถึง 2x ปุ่ม + และ - ปรับทีละ 10% ปุ่มพอดีจะจัดขนาดแผนภาพให้พอดีพื้นที่พรีวิว และ 100% คืนขนาดเดิม
ใช้ Mermaid ในเอกสารของตัวเองได้หรือไม่?
ได้ GitHub, GitLab และเครื่องมือเอกสารจำนวนมากรองรับโค้ดบล็อก Mermaid แบบนื้นตัว: ครอบโค้ดด้วยโค้ดบล็อก mermaid แล้วแผนภาพจะแสดงอัตโนมัติในหน้าเว็บ
ตัวแก้ไขรองรับโหมดมืดหรือไม่?
รองรับ แผนภาพจะตามธีมของแพลตฟอร์ม: เมื่อสลับเป็นโหมดมืดจะเรนเดอร์ใหม่อัตโนมัติด้วยธีม dark ของ Mermaid
เคล็ดลับทำให้แผนภาพอ่านง่าย?
ใช้ชื่อโหนดสั้น ๆ เลือกทิศทางให้เหมาะกับเนื้อหา (TD บนลงล่าง, LR ซ้ายไปขวา) แบ่งกราฟใหญ่มากเป็น subgraph และใช้ตัวอย่างในตัวเป็นเทมเพลตของแต่ละประเภท
วิธีใช้ ตัวแก้ไข Mermaid
Mermaid เปลี่ยนข้อความธรรมดาให้เป็นผังงาน แผนภาพลำดับ แกนต์ชาร์ต และอื่น ๆ ตัวแก้ไขแบบเรียลไทม์นี้เรนเดอร์โค้ดใหม่ทันทีที่คุณพิมพ์ โดยทำงานทั้งหมดในเบราว์เซอร์ — ไม่มีข้อมูลออกจากอุปกรณ์ของคุณ
- เลือกจุดเริ่มต้นจากดรอปดาวน์ «ตัวอย่าง» — มีไดอะแกรมสำเร็จ 9 แบบ ครอบคลุมผังงาน ลำดับ คลาส สถานะ ER แกนต์ วงกลม แผนผังความคิด และไทม์ไลน์ เลือกแบบใดโค้ดของแบบนั้นจะถูกโหลดเข้าตัวแก้ไข
- แก้ไขโค้ด Mermaid ในแผงด้านซ้าย ส่วนพรีวิวด้านขวาจะเรนเดอร์ใหม่ประมาณหนึ่งในสามวินาทีหลังคุณหยุดพิมพ์ เมื่อมีข้อผิดพลาดของไวยากรณ์แสดงในแผงสีแดง ไดอะแกรมที่ถูกต้องล่าสุดจะยังคงแสดงให้เทียบจนกว่าจะแก้เสร็จ
- ซูมระหว่าง 50%–200% ด้วยปุ่มบวกและลบ กด «พอดี» เพื่อย่อ/ขยายไดอะแกรมให้พอดีกรอบพรีวิว หรือกด «100%» เพื่อกลับไปขนาดจริง
- ติ๊ก «พื้นหลังโปร่งใส» หากต้องการ PNG แบบไม่มีพื้นหลังสีขาว แล้วกด «ดาวน์โหลด SVG» หรือ «ดาวน์โหลด PNG» — PNG ถูกส่งออกที่ความละเอียดสองเท่า จึงคมชัดเมื่อฝังลงเอกสาร
- กด «คัดลอกโค้ด» เพื่อนำซอร์สโค้ด Mermaid ใส่คลิปบอร์ดแล้ววางลงเอกสาร วิกิ หรือรีโพซิทอรี
เมื่อไดอะแกรมไม่ยอมเรนเดอร์ ให้คอมเมนต์บรรทัดที่เพิ่งแก้ไขเพื่อแยกหาสาเหตุ — ข้อความแจ้ง error จะระบุบรรทัดที่ผิด และพรีวิวจะเก็บเวอร์ชันที่ใช้งานได้ล่าสุดไว้จนกว่าไวยากรณ์จะถูกต้องอีกครั้ง
เครื่องมือที่เกี่ยวข้อง
- แปลงโค้ดเป็นรูปภาพ แปลงส่วนย่อยของโค้ดเป็นรูปภาพที่แชร์ได้ด้วยการเน้นไวยากรณ์ ธีมที่กำหนดเองและการตกแต่งหน้าต่าง ความเป็นส่วนตัว 100% ทุกอย่างในเบราว์เซอร์ของคุณ
- ดูตัวอย่าง Markdown ตัวแก้ไข Markdown ออนไลน์ฟรีพร้อมตัวอย่างสด เขียน เรนเดอร์ และส่งออก Markdown พร้อมรองรับ GFM เต็มรูปแบบ
- ตัวดูและแก้ไข SVG ดูตัวอย่าง แก้ไข และเพิ่มประสิทธิภาพไฟล์ SVG ออนไลน์ ตัวอย่างแบบเรียลไทม์ การแก้ไขโค้ด และเครื่องมือเพิ่มประสิทธิภาพ
- ตัวดูต้นไม้ JSON แสดงข้อมูล JSON เป็นต้นไม้แบบโต้ตอบที่ยุบได้ ค้นหาคีย์และค่า ติดตาม JSONPath เมื่อวางเมาส์ และจัดการไฟล์ขนาดใหญ่ด้วยการโหลดแบบขี้เกียจ รองรับการลากและวางไฟล์ .json
- ตรวจสอบแฮช คำนวณและตรวจสอบแฮช MD5, SHA-1, SHA-256, SHA-512 ในเครื่อง
- เครื่องคำนวณ Chmod เครื่องคำนวณ chmod ออนไลน์ฟรีเพื่อแสดงและคำนวณสิทธิ์ไฟล์ Linux ด้วยช่องทำเครื่องหมาย แปลงระหว่างสัญกรณ์ตัวเลข (755, 644) และสัญลักษณ์ (rwxr-xr-x) ทันที รองรับสิทธิ์พิเศษเช่น setuid, setgid, sticky bit
- ตาราง ASCII ข้อมูลอ้างอิงการเข้ารหัสอักขระ ASCII ครบถ้วนพร้อมรหัสทศนิยม เลขฐานสิบหก ฐานแปด ฐานสอง เอนทิตี HTML และคำอธิบายอักขระ ค้นหาและกรองได้ทันที
- ตัวแสดง Hex ดูเนื้อหาไฟล์ในรูปแบบ hex dump พร้อมการค้นหา การนำทางออฟเซ็ต และการเลื่อนเสมือน