Desarrollador / Diagramas
Editor en línea de Mermaid
Escribe código Mermaid y ve el diagrama mientras escribes: diagramas de flujo, de secuencia y de clases, gráficos de Gantt y gráficos circulares, con descargas en SVG y PNG.
Editor en línea de Mermaid: El editor crea diagramas con Mermaid, la biblioteca de código abierto que GitHub, GitLab y muchas herramientas de documentación usan para crear diagramas escritos como texto. Se ejecuta en modo estricto, por lo que el código de otra persona no puede ejecutar scripts ni añadir controladores de clic. Las descargas en SVG mantienen la nitidez a cualquier tamaño; las descargas en PNG se generan al doble del tamaño mostrado en pantalla, sobre un fondo blanco. Funciona al 100 % en tu navegador, sin subir archivos a ningún servidor.
- Categoría
- Herramientas de desarrollo
- Se ejecuta
- En tu navegador
- Coste
- Gratis · sin registro
- Disponibilidad
- Lista para usar
Funciona por completo en tu navegador
Los diagramas se dibujan en tu navegador con Mermaid, en modo estricto, por lo que el código del diagrama no puede ejecutar scripts. Pega el mismo código en GitHub, GitLab o Markdown de Notion dentro de un bloque de código mermaid para mostrarlo allí.
Diagramas como texto
Un diagrama dibujado en un programa de gráficos queda obsoleto porque cambiarlo implica volver a abrir el archivo. Un diagrama de Mermaid son unas pocas líneas de texto que se guardan junto al código o documento que describen, cambian en el mismo commit y se muestran en una revisión como un diff legible.
Cada diagrama empieza con su tipo: flowchart con una dirección como TD (de arriba abajo) o LR (de izquierda a derecha), sequenceDiagram, classDiagram, gantt o pie. Los nodos se escriben una vez con su etiqueta, A[Start], y después se hace referencia a ellos por su nombre, A --> B.
Exportación
SVG mantiene nítidos los trazos y el texto a cualquier tamaño y es la mejor opción para documentos y presentaciones; PNG es adecuado para aplicaciones de chat y lugares que no aceptan SVG. Para editar a mano el SVG exportado, ábrelo en el editor de SVG.
Cómo se usa
- Empieza con un ejemplo o pega tu propio código Mermaid.
- Edita el código; el diagrama se vuelve a dibujar mientras escribes o muestra el error.
- Descarga el diagrama como SVG o PNG, o copia el código.
Privacidad y límites
Los diagramas se crean en tu navegador y el código se conserva únicamente en este navegador para que siga disponible la próxima vez.
Herramientas relacionadas
Preguntas frecuentes
¿Qué es Mermaid?
Una forma de escribir diagramas como texto. Una línea como A --> B dibuja dos cuadros unidos por una flecha, de modo que los diagramas pueden guardarse en archivos Markdown y revisiones de código, y cambiarse editando texto en lugar de usar una herramienta de dibujo.
¿Cómo muestro el diagrama en GitHub?
Coloca el código en un bloque de código delimitado marcado como mermaid dentro de un archivo Markdown, una incidencia o una solicitud de incorporación de cambios: tres acentos graves seguidos de la palabra mermaid, el código y otros tres acentos graves. GitHub, GitLab y Notion lo muestran en el mismo lugar.
¿Por qué aparece un error en mi diagrama?
El mensaje indica la línea que Mermaid no pudo leer. Entre las causas habituales están la falta del tipo de diagrama en la primera línea, como flowchart TD, los corchetes o las comillas sin cerrar y el texto con caracteres especiales que necesita estar entre comillas.
¿Qué tipos de diagramas son compatibles?
Todos los tipos incluidos en la versión de Mermaid que carga el editor, incluidos diagramas de flujo, de secuencia, de clases, de estados y de entidad-relación, además de gráficos de Gantt, gráficos circulares, mapas mentales, líneas de tiempo y gráficos de Git. Los ejemplos abarcan los cinco más habituales.
Herramienta gratuita · se ejecuta en tu navegador · sin cuenta