Editor de diagramas Mermaid
Escribe diagramas como texto con la sintaxis de Mermaid y míralos renderizarse mientras escribes. Parte de una plantilla, elige un tema y descarga un SVG limpio o un PNG de alta resolución. Tus diagramas se renderizan en tu navegador y nunca se suben.
Última actualización:
Cómo usar Editor de diagramas Mermaid
- Elige una plantilla, como Diagrama de flujo o Secuencia, o pega tu propio código Mermaid en el editor.
- Edita el código. El diagrama se actualiza un momento después de que dejas de escribir; los errores de sintaxis se muestran con la línea que hay que corregir.
- Elige un tema y acerca la vista previa para revisar los detalles.
- Descarga en SVG para documentación y edición posterior, o descarga en PNG para presentaciones y chats, con fondo blanco o transparente.
- Comparte o inserta: copia un enlace que contiene el diagrama, o copia un bloque Markdown para pegarlo en GitHub, GitLab o Notion.
Guía rápida de la sintaxis de Mermaid
Todo diagrama empieza con una línea que indica su tipo. Aquí tienes los elementos que más vas a usar.
| Diagrama | Primera línea | Ejemplo |
|---|---|---|
| Diagrama de flujo | flowchart TD (TD de arriba abajo, LR de izquierda a derecha) | A[Box] --> B{Decision}, B -- yes --> C(Rounded), D((Circle)) |
| Secuencia | sequenceDiagram | Alice->>Bob: Hello (continua), Bob-->>Alice: Hi (respuesta discontinua) |
| Gantt | gantt | dateFormat YYYY-MM-DD, Task :t1, 2026-01-05, 3d, Next :after t1, 2d |
| Clases | classDiagram | Animal <|-- Dog (herencia), +name: String, +bark() void |
| ER | erDiagram | CUSTOMER ||--o{ ORDER : places (uno a cero o muchos) |
| Pastel | pie (añade showData para ver los valores) | "Label" : 42 |
| Estados | stateDiagram-v2 | [*] --> Idle, Idle --> Busy : start |
| Mapa mental | mindmap | La sangría define el nivel; root((Topic)) para un centro redondo |
Cómo corregir errores comunes de Mermaid
- Caracteres especiales en las etiquetas. Envuelve entre comillas dobles las etiquetas que contengan paréntesis, corchetes, dos puntos o comillas:
A["Guardar (Ctrl+S)"]. Usa#quot;para una comilla doble literal. - Palabra reservada "end". Un nodo de diagrama de flujo llamado
endrompe el análisis; escribeEndofinishen su lugar. - Fechas en Gantt. Cada fecha debe coincidir exactamente con
dateFormat. Las duraciones usand,woh, por ejemplo5d. - Sangría en mapas mentales. Los hijos deben tener más sangría que su padre, siempre con espacios.
- Cardinalidad en ER. Los marcadores son
|ocero o uno,||exactamente uno,}ocero o más y}|uno o más, escritos a cada lado de--.
Preguntas frecuentes
¿Qué es Mermaid?
Mermaid es una biblioteca JavaScript de código abierto que convierte definiciones en texto plano en diagramas. Una línea como A --> B se convierte en dos cuadros unidos por una flecha. GitHub, GitLab, Notion, Obsidian y muchas herramientas de documentación renderizan los bloques de código Mermaid de forma nativa.
¿Se sube mi diagrama a un servidor?
No. La biblioteca Mermaid se ejecuta en tu navegador y dibuja el diagrama localmente. La única solicitud de red es la carga de la propia biblioteca desde un CDN público la primera vez. El enlace para compartir guarda el código en el fragmento de la URL (después de #), que los navegadores no envían a los servidores.
¿Qué tipos de diagramas se admiten?
Todos los que admite la versión actual de Mermaid, incluidos diagramas de flujo, secuencia, clases, estados, entidad-relación (ER), Gantt, pastel, mapa mental, línea de tiempo, recorrido de usuario, git graph, cuadrantes y más. Las plantillas cubren los más populares.
¿Por qué mi diagrama muestra un error de sintaxis?
Mermaid es estricto con la sintaxis. Las causas más comunes son que falte el tipo de diagrama en la primera línea (por ejemplo flowchart TD), caracteres especiales como paréntesis o comillas dentro de la etiqueta de un nodo sin envolver la etiqueta entre comillas dobles, y una sangría incorrecta en los mapas mentales. El mensaje de error muestra la línea donde falló el análisis.
¿Cómo pongo un diagrama Mermaid en GitHub?
Haz clic en Copiar Markdown y pega el resultado en un README, issue o pull request. GitHub renderiza como diagrama cualquier bloque de código delimitado que empiece con ```mermaid.
SVG o PNG: ¿cuál debo descargar?
SVG es un archivo vectorial que se mantiene nítido a cualquier tamaño y se puede editar en herramientas como Figma o Inkscape; úsalo para documentación y la web. PNG es una imagen normal que funciona en todas partes, incluidas presentaciones y apps de chat; expórtalo a 2× o más para que el texto se vea nítido.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.