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 使其响应式。