Saltar al contenido
es
Todas las herramientas

Categorías

Herramientas para desarrolladoresCodificación y decodificaciónJSON y datosHash y checksumHerramientas de textoFecha y horaHerramientas de redHerramientas de archivosMarkdown y diagramas

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

Opciones
0 caracteres · 0 líneas
El resultado aparecerá aquí.

¿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?

  1. Escriba o pegue código Mermaid; la primera línea debe indicar el tipo de diagrama (flowchart, sequenceDiagram, gantt…).
  2. Elija un tema (predeterminado, neutro, bosque, oscuro o base) acorde con su documento.
  3. Si el diagrama no se dibuja, lea el mensaje del analizador, corrija la línea indicada e inténtelo de nuevo.
  4. 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

Más herramientas en Markdown y diagramas →