Editor Mermaid en vivo
Un editor Mermaid libre: escriba el diagrama como código y obtenga una vista renderizada en vivo que puede exportar.
Procesado localmente en tu navegador· Tus datos se quedan en tu navegador.
¿Qué es Editor Mermaid en vivo?
Mermaid convierte breves definiciones de texto en diagramas: de flujo, de secuencia, de clases, de estados, entidad-relación, Gantt, mapas mentales, gráficos circulares, recorridos de usuario, líneas de tiempo y grafos de Git. Como la fuente es texto plano, los diagramas pueden vivir en el control de versiones junto al código y la documentación.
Este editor renderiza su código con Mermaid en modo de seguridad estricto y con etiquetas HTML desactivadas, de modo que el SVG solo contiene formas y texto simples. Si la sintaxis es incorrecta, recibe el mensaje del analizador con la línea y lo que se esperaba, en lugar de una pantalla en blanco. Elija un tema y exporte el resultado.
¿Cómo funciona?
- Escriba o pegue código Mermaid; la primera línea debe indicar el tipo de diagrama (flowchart, sequenceDiagram, gantt…).
- Elija un tema (predeterminado, neutro, bosque, oscuro o base) acorde con su documento.
- Si el diagrama no se dibuja, lea el mensaje del analizador, corrija la línea indicada e inténtelo de nuevo.
- Exporte el diagrama como SVG o PNG para presentaciones, wikis y documentación.
Casos de uso habituales
- Esbozar diagramas de arquitectura y de procesos para un README o un documento de diseño.
- Depurar un bloque Mermaid que no se muestra en GitHub o en su wiki.
- Crear diagramas para presentaciones sin una herramienta de dibujo.
- Aprender la sintaxis de Mermaid editando un ejemplo que funciona.
Ejemplos
Prueba esta entrada en la herramienta de arriba:
flowchart TD
A([Start]) --> B[Read configuration]
B --> C{Configuration valid?}
C -- Yes --> D[Start server]
C -- No --> E[Show error message]
E --> B
D --> F([Ready])Privacidad
Editor Mermaid en vivo se ejecuta por completo en tu navegador. El texto o los archivos que proporcionas se procesan en tu dispositivo y no se suben, registran ni almacenan en nuestros servidores.
Limitaciones
El renderizado usa la versión de Mermaid incluida en este sitio, por lo que tipos de diagrama o sintaxis muy recientes pueden diferir de su plataforma. Las funciones interactivas, como los enlaces con clic, están desactivadas por seguridad.
Preguntas frecuentes
¿Se envía el código de mi diagrama a un servidor?
No. Mermaid se ejecuta localmente en su navegador y el código nunca sale de su dispositivo.
¿Por qué obtengo un error de sintaxis?
El mensaje cita la línea donde se detuvo el análisis y el elemento esperado. Causas habituales: falta la palabra clave del diagrama en la primera línea, etiquetas con corchetes o paréntesis sin comillas, o un carácter sobrante en una flecha.
¿Puedo usar el diagrama fuera de este sitio?
Sí. Exporte a SVG para gráficos escalables o a PNG para presentaciones, o copie el código Mermaid en cualquier plataforma compatible, como GitHub, GitLab o Notion.
Herramientas relacionadas
Generador de diagramas de flujo
Describa un proceso con una cadena de pasos por línea y obtenga un diagrama de flujo junto con el código Mermaid que lo genera.
Markdown y diagramas
Generador de diagramas de secuencia
Escriba un mensaje por línea y vea quién habla con quién, en orden, como diagrama de secuencia.
Markdown y diagramas
Generador de diagramas de Gantt
Liste tareas con un inicio y una duración y obtenga un cronograma de proyecto con secciones y dependencias.
Markdown y diagramas
Generador de diagramas de clases
Escriba código classDiagram con clases, miembros y relaciones y vea el diagrama UML al instante.
Markdown y diagramas
Generador de diagramas de estados
Liste las transiciones entre estados y obtenga un diagrama de máquina de estados con los eventos sobre las flechas.
Markdown y diagramas
Generador de diagramas ER
Describa sus tablas, claves y relaciones como código Mermaid erDiagram y vea el diagrama ER al instante.
Markdown y diagramas
Generador de mapas mentales
Escriba sus ideas como una lista con sangría y véalas como un mapa mental radial.
Markdown y diagramas
Editor Markdown con vista previa en vivo
Escriba o pegue Markdown en un lado y lea el resultado renderizado en el otro, con estadísticas instantáneas del documento.
Markdown y diagramas