แปลง Mermaid เป็น SVG
ส่งออกไดอะแกรม Mermaid เป็นกราฟิกเวกเตอร์ SVG ที่ปรับขนาดได้ เหมาะสำหรับการฝังในเว็บ สื่อสิ่งพิมพ์ และการออกแบบ Responsive
แปลง Mermaid เป็น SVG
เขียนโค้ด Mermaid แล้วใช้ปุ่ม Export เพื่อดาวน์โหลด SVG
Example
Mermaid to SVG example
A simple Mermaid flowchart showing how code becomes a live preview and exportable PNG.
Mermaid code
graph TD
A[User opens Mermaid Editor] --> B[Write Mermaid code]
B --> C{Preview looks right?}
C -- Yes --> D[Export PNG]
C -- No --> E[Edit diagram]
E --> Bวิธีแปลง Mermaid เป็น SVG
เขียนหรือวางโค้ดไดอะแกรม Mermaid ในเอดิเตอร์
ดูตัวอย่างไดอะแกรมที่แสดงผลแบบเรียลไทม์
คลิกดาวน์โหลด SVG เพื่อบันทึกไฟล์เวกเตอร์
หรือคัดลอกมาร์กอัป SVG เพื่อฝังโดยตรงใน HTML
ทำไมต้องใช้ SVG?
ปรับขนาดได้ไม่จำกัด
ภาพ SVG ไม่มีวันสูญเสียคุณภาพไม่ว่าจะซูมเข้าเท่าไร เหมาะสำหรับการนำเสนอและสิ่งพิมพ์
เบา
ไฟล์ SVG โดยทั่วไปมีขนาดเล็กกว่า PNG ที่เทียบเท่า ทำให้หน้าเว็บโหลดเร็วขึ้น
แก้ไขได้
SVG ใช้ XML ดังนั้นคุณสามารถแก้ไขสี ฟอนต์ และสไตล์เพิ่มเติมด้วย CSS หรือ JavaScript
เข้าถึงได้
SVG รองรับองค์ประกอบข้อความที่โปรแกรมอ่านหน้าจอเข้าถึงได้ ปรับปรุงความสามารถในการเข้าถึง
คำถามที่พบบ่อย
ความแตกต่างระหว่าง SVG และ PNG คืออะไร?
SVG เป็นรูปแบบเวกเตอร์ที่ปรับขนาดได้ไม่จำกัดโดยไม่สูญเสียคุณภาพ ในขณะที่ PNG เป็นรูปแบบ Raster ที่มีความละเอียดคงที่ ใช้ SVG สำหรับเว็บและสิ่งพิมพ์ PNG สำหรับโซเชียลมีเดียและข้อความ
สามารถฝัง SVG โดยตรงใน HTML ได้หรือไม่?
ได้ คุณสามารถคัดลอกมาร์กอัป SVG และวางโดยตรงใน HTML คุณยังสามารถใช้เป็นแหล่งภาพด้วยแท็ก img
SVG จะแสดงเหมือนกันในทุกเบราว์เซอร์หรือไม่?
ได้ SVG ได้รับการรองรับดีในเบราว์เซอร์สมัยใหม่ทั้งหมด รวมถึง Chrome, Firefox, Safari และ Edge