100% 免費 無需註冊 即時預覽
嵌入 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，無需使用此編輯器。圖表程式碼以 URL 安全的 base64 編碼。
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 圖表
1
在上方編輯器中撰寫你的 Mermaid 圖表程式碼
2
一鍵複製產生的 iframe 程式碼
3
將其貼到任何網站、部落格文章或文件頁面中
使用場景
GitHub 與 GitLab
在 wiki 頁面、issue 描述或專案文件中嵌入即時圖表。
文件網站
為 Confluence、Notion 或任何基於 HTML 的文件平台新增互動式圖表。
部落格文章
用架構圖、流程圖和時序圖豐富你的技術文章。
內部知識庫
透過嵌入的圖表讓團隊知識庫保持視覺化與最新。
常見問題
嵌入功能免費嗎？
是的，完全免費。沒有使用限制，無需帳號，產生的 iframe URL 可永久使用。
哪些瀏覽器支援嵌入的圖表？
嵌入檢視器可在所有現代瀏覽器中運作，包括 Chrome、Firefox、Safari 和 Edge。它使用標準的 HTML5 和 JavaScript。
可以自訂 iframe 尺寸嗎？
可以 — 只需編輯產生的 iframe 程式碼中的 width 和 height 屬性以符合你的版面配置。你也可以新增 CSS 使其響應式。