Guía de sintaxis Mermaid para diagramas de arquitectura y flujos
Mermaid permite transformar especificaciones de texto en diagramas vectoriales limpios y mantenibles. Conoce la sintaxis esencial para los diagramas técnicos más empleados en ingeniería de software.
Tabla de tipos de diagramas y palabras clave de sintaxis
A continuación se resumen los encabezados y estructuras primordiales admitidas por el motor de Mermaid:
| Tipo de diagrama | Cabecera de declaración | Conector o relación principal | Caso de uso habitual |
|---|---|---|---|
| Diagrama de flujo | flowchart TD / graph LR |
A --> B / A -. texto .-> B |
Algoritmos lógicos, procesos de negocio y flujos de usuario |
| Diagrama de secuencia | sequenceDiagram |
Cliente->>Servidor: Petición |
Interacciones entre servicios, APIs REST y protocolos de red |
| Diagrama de clases | classDiagram |
Padre <|-- Hijo : hereda |
Modelado de dominio, POO y patrones de diseño de software |
| Entidad-relación (ER) | erDiagram |
CLIENTE ||--o{ PEDIDO : realiza |
Esquemas de bases de datos relacionales y cardinalidades SQL |
| Diagrama de estado | stateDiagram-v2 |
[*] --> Reposo --> Activo |
Máquinas de estado finito, ciclos de vida de entidades y UI |
| Mapa mental (Mindmap) | mindmap |
Indentación jerárquica con tabulación | Brainstorming, taxonomías de producto y mapas conceptuales |
Cómo estructurar y exportar diagramas en 4 pasos
Elegir la tipología y dirección
Declara el tipo de diagrama (flowchart, sequenceDiagram, erDiagram) y su orientación espacial (TD de arriba a abajo o LR de izquierda a derecha).
Definir identificadores y etiquetas de nodo
Asigna claves cortas a cada nodo (ej. A, B, API) y encierra el texto visible entre corchetes rectangulares, circulares o rombos según la forma deseada.
Establecer conectores y mensajes
Traza las dependencias mediante flechas continuas, discontinuas o bidireccionales añadiendo anotaciones explicativas sobre las líneas de unión.
Validar y descargar en SVG o PNG
Verifica la ausencia de errores de sintaxis en el visor reactivo y pulsa el botón de descarga vectorial SVG o imagen de mapa de bits PNG.
Preguntas frecuentes sobre diagramas Mermaid
¿Qué es Mermaid.js y qué ventajas ofrece frente a editores manuales?
Mermaid.js es una biblioteca JavaScript que renderiza diagramas basados en texto declarativo simple similar a Markdown. Permite versionar la arquitectura en Git, actualizar diagramas rápidamente sin arrastrar cajas y mantener la documentación sincronizada con el código.
¿Se envían mis diagramas o datos confidenciales a servidores externos?
No. Todo el análisis sintáctico y el renderizado gráfico se procesan íntegramente en la memoria de tu navegador (procesamiento Zero-Server). Ningún texto, arquitectura o esquema sale de tu ordenador.
¿Qué tipos de diagramas soporta la sintaxis Mermaid?
Soporta diagramas de flujo (flowcharts), diagramas de secuencia interactivos, diagramas de clases UML, modelos entidad-relación (ER), diagramas de estado, diagramas de Gantt para cronogramas, mapas mentales (mindmaps), diagramas de cuadrante y grafos Git.
¿Cómo incluir diagramas Mermaid en archivos README de GitHub o GitLab?
Tanto GitHub como GitLab soportan Mermaid de forma nativa. Solo necesitas abrir un bloque de código cercado con tres acentos graves y la palabra clave 'mermaid', pegando el código generado directamente en tu archivo markdown.
¿Cuál es la diferencia entre exportar en SVG y en PNG?
SVG es un formato vectorial escalable matemáticamente que nunca pierde nitidez sin importar el nivel de zoom, ideal para web e impresión. PNG es un mapa de bits rasterizado de alta resolución perfecto para presentaciones de diapositivas y mensajería.