Incorporar diagramas Mermaid
Crie um diagrama Mermaid e obtenha um código iframe compartilhável que você pode incorporar em qualquer site. Grátis, instantâneo, sem conta.
Incorporar diagramas Mermaid
Crie um diagrama Mermaid e obtenha um código iframe compartilhável que você pode incorporar em qualquer site. Grátis, instantâneo, sem conta.
Seu código Mermaid
Visualização ao vivo
Código de incorporação
<iframe
src="https://mermaideditor.com/embed?code=Z3JhcGglMjBURCUwQSUyMCUyMCUyMCUyMEElNUJTdGFydCU1RCUyMC0tJTNFJTIwQiU3QklzJTIwaXQlMjB3b3JraW5nJTNGJTdEJTBBJTIwJTIwJTIwJTIwQiUyMC0tJTIwWWVzJTIwLS0lM0UlMjBDJTVCU2hpcCUyMGl0JTVEJTBBJTIwJTIwJTIwJTIwQiUyMC0tJTIwTm8lMjAtLSUzRSUyMEQlNUJEZWJ1ZyU1RCUwQSUyMCUyMCUyMCUyMEQlMjAtLSUzRSUyMEI=&theme=default"
width="100%"
height="400"
frameborder="0"
style="border-radius:8px;overflow:hidden"
></iframe>Para desenvolvedores
Você pode gerar URLs de incorporação programaticamente sem usar este editor. O código do diagrama é codificado como base64 seguro para URL.
Formato de URL
https://mermaideditor.com/embed?code={encoded}&theme={theme}Como codificar
// 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"Temas suportados: default · dark · forest · neutral
Como incorporar um diagrama Mermaid
Escreva o código do seu diagrama Mermaid no editor acima
Copie o código iframe gerado com um clique
Cole-o em qualquer site, post de blog ou página de documentação
Onde usar
GitHub e GitLab
Incorpore diagramas ao vivo em páginas wiki, descrições de issues ou documentação do projeto.
Sites de documentação
Adicione diagramas interativos ao Confluence, Notion ou qualquer plataforma de documentação baseada em HTML.
Posts de blog
Enriqueça artigos técnicos com diagramas de arquitetura, fluxogramas e diagramas de sequência.
Wikis internos
Mantenha as bases de conhecimento da equipe visuais e atualizadas com diagramas incorporados.
Perguntas frequentes
O recurso de incorporação é grátis?
Sim, totalmente grátis. Não há limites de uso, não é necessária conta, e as URLs iframe geradas funcionam indefinidamente.
Quais navegadores suportam o diagrama incorporado?
O visualizador de incorporação funciona em todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge. Ele usa HTML5 e JavaScript padrão.
Posso personalizar o tamanho do iframe?
Sim — basta editar os atributos width e height no código iframe gerado para ajustar ao seu layout. Você também pode adicionar CSS para torná-lo responsivo.