Incrustar diagramas Mermaid
Crea un diagrama Mermaid y obtén un código de iframe compartible que puedes incrustar en cualquier sitio web. Gratis, instantáneo, sin cuenta.
Incrustar diagramas Mermaid
Crea un diagrama Mermaid y obtén un código de iframe compartible que puedes incrustar en cualquier sitio web. Gratis, instantáneo, sin cuenta.
Tu código Mermaid
Vista previa en vivo
Código de incrustación
<iframe
src="https://mermaideditor.com/embed?code=Z3JhcGglMjBURCUwQSUyMCUyMCUyMCUyMEElNUJTdGFydCU1RCUyMC0tJTNFJTIwQiU3QklzJTIwaXQlMjB3b3JraW5nJTNGJTdEJTBBJTIwJTIwJTIwJTIwQiUyMC0tJTIwWWVzJTIwLS0lM0UlMjBDJTVCU2hpcCUyMGl0JTVEJTBBJTIwJTIwJTIwJTIwQiUyMC0tJTIwTm8lMjAtLSUzRSUyMEQlNUJEZWJ1ZyU1RCUwQSUyMCUyMCUyMCUyMEQlMjAtLSUzRSUyMEI=&theme=default"
width="100%"
height="400"
frameborder="0"
style="border-radius:8px;overflow:hidden"
></iframe>Para desarrolladores
Puedes generar URL de incrustación de forma programática sin usar este editor. El código del diagrama se codifica como base64 seguro para URL.
Formato de URL
https://mermaideditor.com/embed?code={encoded}&theme={theme}Cómo 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 compatibles: default · dark · forest · neutral
Cómo incrustar un diagrama Mermaid
Escribe el código de tu diagrama Mermaid en el editor de arriba
Copia el código iframe generado con un clic
Pégalo en cualquier sitio web, entrada de blog o página de documentación
Dónde usarlo
GitHub y GitLab
Incrusta diagramas en vivo en páginas wiki, descripciones de issues o documentación del proyecto.
Sitios de documentación
Añade diagramas interactivos a Confluence, Notion o cualquier plataforma de documentación basada en HTML.
Entradas de blog
Enriquece artículos técnicos con diagramas de arquitectura, diagramas de flujo y diagramas de secuencia.
Wikis internos
Mantén las bases de conocimiento del equipo visuales y actualizadas con diagramas incrustados.
Preguntas frecuentes
¿La función de incrustación es gratuita?
Sí, completamente gratis. No hay límites de uso, no se requiere cuenta y las URL de iframe generadas funcionan indefinidamente.
¿Qué navegadores admiten el diagrama incrustado?
El visor de incrustación funciona en todos los navegadores modernos, incluidos Chrome, Firefox, Safari y Edge. Utiliza HTML5 y JavaScript estándar.
¿Puedo personalizar el tamaño del iframe?
Sí — simplemente edita los atributos width y height en el código iframe generado para ajustarlo a tu diseño. También puedes añadir CSS para hacerlo responsive.