Embed Mermaid Diagrams
Create a Mermaid diagram and get a shareable iframe code you can embed in any website. Free, instant, no account needed.
Embed Mermaid Diagrams
Create a Mermaid diagram and get a shareable iframe code you can embed in any website. Free, instant, no account needed.
Your Mermaid Code
Live Preview
Embed Code
<iframe
src="https://mermaideditor.com/embed?code=Z3JhcGglMjBURCUwQSUyMCUyMCUyMCUyMEElNUJTdGFydCU1RCUyMC0tJTNFJTIwQiU3QklzJTIwaXQlMjB3b3JraW5nJTNGJTdEJTBBJTIwJTIwJTIwJTIwQiUyMC0tJTIwWWVzJTIwLS0lM0UlMjBDJTVCU2hpcCUyMGl0JTVEJTBBJTIwJTIwJTIwJTIwQiUyMC0tJTIwTm8lMjAtLSUzRSUyMEQlNUJEZWJ1ZyU1RCUwQSUyMCUyMCUyMCUyMEQlMjAtLSUzRSUyMEI=&theme=default"
width="100%"
height="400"
frameborder="0"
style="border-radius:8px;overflow:hidden"
></iframe>For Developers
You can generate embed URLs programmatically without using this editor. The diagram code is encoded as URL-safe base64.
URL Format
https://mermaideditor.com/embed?code={encoded}&theme={theme}How to encode
// 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"Supported themes: default · dark · forest · neutral
How to Embed a Mermaid Diagram
Write your Mermaid diagram code in the editor above
Copy the generated iframe code with one click
Paste it into any website, blog post, or documentation page
Where to Use It
GitHub & GitLab
Embed live diagrams in wiki pages, issue descriptions, or project documentation.
Documentation Sites
Add interactive diagrams to Confluence, Notion, or any HTML-based docs platform.
Blog Posts
Enrich technical articles with architecture diagrams, flowcharts, and sequence diagrams.
Internal Wikis
Keep team knowledge bases visual and up-to-date with embedded diagrams.
Frequently Asked Questions
Is the embed feature free?
Yes, completely free. There are no usage limits, no account required, and the generated iframe URLs work indefinitely.
What browsers support the embedded diagram?
The embed viewer works in all modern browsers including Chrome, Firefox, Safari, and Edge. It uses standard HTML5 and JavaScript.
Can I customize the iframe size?
Yes — just edit the width and height attributes in the generated iframe code to fit your layout. You can also add CSS to make it responsive.