Editor Mermaid
Escriba código Mermaid, previsualice el diagrama renderizado, cambie temas y exporte el resultado como SVG o PNG.
Editor Mermaid
Escriba código Mermaid, previsualice el diagrama renderizado, cambie temas y exporte el resultado como SVG o PNG.
Acerca del editor Mermaid
Renderiza código Mermaid en el navegador
El editor carga la biblioteca Mermaid del lado del cliente, valida el diagrama después de un breve debounce y renderiza la vista previa SVG con el tema seleccionado. Las plantillas integradas ayudan a empezar con ejemplos flowchart, sequence, class, state, ER, Gantt, pie, mindmap y timeline.
Prepare diagramas para GitHub, README y wikis
Use el editor como área de revisión antes de pegar un bloque Mermaid cercado en archivos README de GitHub, wikis de GitLab, páginas de Notion o documentación técnica. Previsualice diagramas de flujo, diagramas de secuencia y bocetos de arquitectura, luego copie el código Mermaid de vuelta a Markdown o exporte una imagen cuando el destino no renderice Mermaid.
Exporta SVG o PNG desde la vista previa
La descarga renderiza un SVG nuevo con el código Mermaid y el tema actuales. La exportación PNG convierte ese SVG mediante un canvas del navegador, mientras que el control de zoom solo afecta la vista previa en pantalla. El código del diagrama puede guardarse en el hash de la URL como estado local compartible, así que una URL compartida contiene la fuente del diagrama.
Preguntas Frecuentes
Preguntas y respuestas frecuentes sobre este tema.
¿Qué es Mermaid?
Mermaid es un lenguaje de diagramación basado en texto que renderiza diagramas de flujo, diagramas de secuencia, diagramas de clases y más a partir de sintaxis similar a Markdown. Se usa ampliamente en GitHub, GitLab y documentación técnica.
¿Qué tipos de diagrama se admiten?
Diagramas de flujo, diagramas de secuencia, diagramas de clases, diagramas de estado, diagramas entidad-relación, diagramas de Gantt, gráficos circulares y más. El editor soporta todos los tipos de diagrama disponibles en la biblioteca Mermaid.
¿Puedo exportar el diagrama?
Sí, puede descargar el diagrama renderizado como SVG o PNG para presentaciones, documentación u otros proyectos.
¿Mis datos se envían a algún servidor?
No, el renderizado de diagramas Mermaid se ejecuta completamente en su navegador. Su código de diagrama se analiza y renderiza localmente con JavaScript — nada se envía a ningún servidor.
¿Cómo escribo la sintaxis de Mermaid?
Comience declarando el tipo de diagrama (por ejemplo, flowchart TD, sequenceDiagram, classDiagram). Luego defina nodos, conexiones y etiquetas usando la sintaxis de texto de Mermaid. Use las plantillas integradas para explorar diferentes tipos de diagrama.
¿Puedo usar Mermaid en GitHub o Markdown?
Sí. Los archivos README, issues y pull requests de GitHub, las wikis de GitLab, las páginas de Notion y muchos renderizadores Markdown admiten bloques cercados Mermaid. Envuelva el código en un bloque ```mermaid, previsualícelo aquí y luego pegue la misma fuente en su documento.