ฝังไดอะแกรม Mermaid
สร้างไดอะแกรม Mermaid และรับโค้ด iframe ที่แชร์ได้ซึ่งคุณสามารถฝังในเว็บไซต์ใดก็ได้ ฟรี รวดเร็ว ไม่ต้องมีบัญชี
ฝังไดอะแกรม Mermaid
สร้างไดอะแกรม Mermaid และรับโค้ด iframe ที่แชร์ได้ซึ่งคุณสามารถฝังในเว็บไซต์ใดก็ได้ ฟรี รวดเร็ว ไม่ต้องมีบัญชี
โค้ด Mermaid ของคุณ
ดูตัวอย่างสด
โค้ดฝัง
<iframe
src="https://mermaideditor.com/embed?code=Z3JhcGglMjBURCUwQSUyMCUyMCUyMCUyMEElNUJTdGFydCU1RCUyMC0tJTNFJTIwQiU3QklzJTIwaXQlMjB3b3JraW5nJTNGJTdEJTBBJTIwJTIwJTIwJTIwQiUyMC0tJTIwWWVzJTIwLS0lM0UlMjBDJTVCU2hpcCUyMGl0JTVEJTBBJTIwJTIwJTIwJTIwQiUyMC0tJTIwTm8lMjAtLSUzRSUyMEQlNUJEZWJ1ZyU1RCUwQSUyMCUyMCUyMCUyMEQlMjAtLSUzRSUyMEI=&theme=default"
width="100%"
height="400"
frameborder="0"
style="border-radius:8px;overflow:hidden"
></iframe>สำหรับนักพัฒนา
คุณสามารถสร้าง URL ฝังโดยโปรแกรมโดยไม่ต้องใช้ตัวแก้ไขนี้ โค้ดไดอะแกรมถูกเข้ารหัสเป็น base64 ที่ปลอดภัยสำหรับ URL
รูปแบบ URL
https://mermaideditor.com/embed?code={encoded}&theme={theme}วิธีเข้ารหัส
// JavaScript const encoded = btoa(encodeURIComponent(mermaidCode)) const embedUrl = `https://mermaideditor.com/embed?code=${encoded}&theme=default` // Python import base64, urllib.parse encoded = base64.b64encode(urllib.parse.quote(mermaid_code).encode()).decode() embed_url = f"https://mermaideditor.com/embed?code={encoded}&theme=default"ธีมที่รองรับ: default · dark · forest · neutral
วิธีฝังไดอะแกรม Mermaid
เขียนโค้ดไดอะแกรม Mermaid ของคุณในตัวแก้ไขด้านบน
คัดลอกโค้ด iframe ที่สร้างขึ้นด้วยคลิกเดียว
วางลงในเว็บไซต์ โพสต์บล็อก หรือหน้าเอกสารใดก็ได้
ใช้ที่ไหน
GitHub และ GitLab
ฝังไดอะแกรมสดในหน้า wiki คำอธิบาย issue หรือเอกสารโครงการ
ไซต์เอกสาร
เพิ่มไดอะแกรมแบบอินเทอร์แอกทีฟใน Confluence, Notion หรือแพลตฟอร์มเอกสารที่ใช้ HTML ใดก็ได้
โพสต์บล็อก
เสริมบทความเทคนิคด้วยไดอะแกรมสถาปัตยกรรม โฟลว์ชาร์ต และไดอะแกรมลำดับ
Wiki ภายใน
รักษาฐานความรู้ของทีมให้เป็นภาพและอัปเดตด้วยไดอะแกรมที่ฝัง
คำถามที่พบบ่อย
ฟีเจอร์ฝังฟรีหรือไม่?
ใช่ ฟรีอย่างสมบูรณ์ ไม่มีข้อจำกัดการใช้งาน ไม่ต้องมีบัญชี และ URL iframe ที่สร้างขึ้นใช้งานได้ตลอดไป
เบราว์เซอร์ใดรองรับไดอะแกรมที่ฝัง?
โปรแกรมดูการฝังทำงานได้ในเบราว์เซอร์สมัยใหม่ทุกตัว รวมถึง Chrome, Firefox, Safari และ Edge โดยใช้ HTML5 และ JavaScript มาตรฐาน
ฉันสามารถปรับขนาด iframe ได้หรือไม่?
ได้ — เพียงแก้ไขแอตทริบิวต์ width และ height ในโค้ด iframe ที่สร้างขึ้นให้เข้ากับเลย์เอาต์ของคุณ คุณยังสามารถเพิ่ม CSS เพื่อทำให้ตอบสนอง