Tipo de diagrama de flujo
Expresión gráfica
Mapas mentales
Expresión estructurada
Notas
Expresión eficiente
Mapa de árbol
Diagrama de soportes
Modo predeterminado
Mermaid es una herramienta que genera diagramas a partir de una sintaxis de texto. Escribiendo código Mermaid sencillo puedes crear diagramas de flujo, diagramas de secuencia, diagramas de clases, diagramas de estados, diagramas ER, diagramas de Gantt, mapas mentales, diagramas de arquitectura y muchos otros tipos de diagramas.
A diferencia de las herramientas de dibujo tradicionales basadas en arrastrar y soltar, Mermaid describe mediante código los nodos, las relaciones, el orden temporal y la estructura de datos de un diagrama. Al modificar el código, el diagrama se vuelve a generar automáticamente, por lo que resulta especialmente adecuado para documentación técnica, diseño de producto, gestión de proyectos, desarrollo de software y organización del conocimiento, entre otros escenarios.
Este artículo presenta la sintaxis básica de Mermaid y recopila los tipos de diagrama que el editor Mermaid puede renderizar, así como la sintaxis de declaración, ejemplos de código y casos de uso. Si quieres escribir y previsualizar código Mermaid directamente en línea, puedes probar gratis el editor en línea de Mermaid de ProcessOn.
Mermaid es una herramienta que genera diagramas usando una sintaxis de texto. El siguiente código genera un diagrama de flujo de Mermaid sencillo:
flowchart TD
A[Start] --> B[Enter information]
B --> C{ Completed?}
C -->|Yes| D[End]
C -->|No| B
El resultado del renderizado es el siguiente:
Donde: flowchart TD se usa para declarar la creación de un diagrama de flujo ordenado de arriba hacia abajo.
La lógica de ejecución de Mermaid se puede resumir así:
Escribir el código Mermaid → analizar el código → renderizar el diagrama → modificar el código → el diagrama se actualiza en tiempo real
Por lo tanto, una de las claves para aprender Mermaid es conocer la sintaxis de declaración que corresponde a cada tipo de diagrama.
Los distintos tipos de diagrama usan una sintaxis de declaración de Mermaid diferente, actualmente los diagramas Mermaid más comunes incluyen:
| Tipo de diagrama | Sintaxis de declaración de Mermaid | Usos habituales |
| Diagrama de flujo | flowchart | Procesos de negocio, algoritmos, flujos de trabajo |
| Diagrama de secuencia | sequenceDiagram | Interacción entre sistemas, llamadas a API |
| Diagrama de clases | classDiagram | Estructura de software, modelado orientado a objetos |
| Diagrama de estados | stateDiagram-v2 | Transición de estados, máquinas de estados |
| Diagrama ER | erDiagram | Relaciones de entidades de la base de datos |
| Diagrama de Gantt | gantt | Planificación de proyectos, progreso de tareas |
| Diagrama de recorrido del usuario | journey | Experiencia de usuario, recorrido del cliente |
| Mapa mental | mindmap | Organización del conocimiento, lluvia de ideas |
| Línea de tiempo | timeline | Cronología, eventos históricos |
| Gráfico circular | pie | Proporciones, análisis de composición |
| Gráfico de cuadrantes | quadrantChart | Clasificación, prioridad, análisis de posicionamiento |
| Diagrama de Git | gitGraph | Ramas, commits y fusiones de Git |
| Diagrama de Sankey | sankey-beta | Flujos de datos, recursos y tráfico |
| Gráfico XY | xychart-beta | Tendencias de datos, comparación de valores |
| Gráfico de radar | radar | Comparación de métricas multidimensionales |
| Diagrama C4 | C4Context, etc. | Modelado de arquitectura de software |
| Diagrama de arquitectura | architecture-beta | Arquitectura de sistemas, servicios y recursos |
| Diagrama kanban | kanban | Gestión de tareas y estados de trabajo |
| Diagrama de bloques | block-beta | Módulos, estructura y relaciones del sistema |
| Diagrama de paquetes | packet-beta | Estructura de paquetes de red |
| Diagrama de requisitos | requirementDiagram | Análisis de requisitos y relaciones entre requisitos |
Los distintos editores de Mermaid pueden variar en el soporte de sintaxis y de funcionalidades de los diagramas según la versión; en la práctica, hay que guiarse por la sintaxis que admite el editor.
Sintaxis básica
Mermaid usa la declaración flowchart para crear un diagrama de flujo. La forma más sencilla es:
flowchart TD
A[Start] --> B[Arrange]
B --> C[End]
Resultado del renderizado
Donde:
Los diagramas de flujo de Mermaid también pueden usar LR (de izquierda a derecha), RL (de derecha a izquierda), BT (de abajo hacia arriba) y otras configuraciones de dirección. Por ejemplo:
flowchart LR
A[Start] --> B[Arrange] --> C[End]
Indica un diagrama de flujo dispuesto de izquierda a derecha.
Sintaxis habitual
| Sintaxis | Diagrama | Significado |
| (text) | Rectángulo redondeado | Indica el inicio, el fin o una operación general del proceso |
| [text] | Rectángulo | Indica un paso, una tarea o un proceso concreto |
| {text} | Rombo | Indica una decisión o una bifurcación condicional |
| ((text)) | Círculo | Indica un punto de conexión o un evento |
| [[text]] | Rectángulo doble | Indica la llamada a un subproceso o submódulo |
| [(text)] | Cilindro | Indica un nodo de base de datos |
| >text] | Figura asimétrica | Indica entrada/salida |
| [/text/] | Paralelogramo | Indica datos de entrada o de salida |
| --> | Flecha | Indica la dirección del flujo del proceso |
| --- | Conexión sin flecha | Indica una relación de asociación |
| -.-> | Flecha discontinua | Indica un flujo opcional o una relación de referencia |
| ==> | Flecha gruesa | Indica un flujo destacado o una asociación fuerte |
Para consultar la sintaxis detallada de Mermaid para generar diagramas de flujo, visita la siguiente página: https://www.processon.io/es/mermaid/flowchart
El diagrama de flujo es adecuado para procesos de negocio, flujos de trabajo, flujos de algoritmos, flujos de sistema y flujos de decisión, entre otros escenarios, prueba gratis el editor en línea de Mermaid para diagramas de flujo.
Sintaxis básica
Mermaid usa la declaración sequenceDiagram para crear un diagrama de secuencia. El ejemplo más sencillo es:
sequenceDiagram
Alice->>John: Hello John
John-->>Alice: Hello Alice
Resultado renderizado
Donde:
Sintaxis habitual
| Sintaxis | Diagrama | Significado |
| sequenceDiagram | Diagrama de secuencia | Crear un diagrama de secuencia |
| A->B: message | Línea continua | Indica una llamada de mensaje síncrona o una interacción normal |
| A-->B: message | Línea discontinua | Indica un mensaje de retorno o una interacción de asociación débil |
| A->>B: message | Flecha continua | indica una llamada de mensaje asíncrona |
| A-->>B: message | Flecha discontinua | indica una respuesta asíncrona o un mensaje de retorno |
| participant A | Participante | Define los objetos, los roles o los sistemas que intervienen en la interacción |
| actor A | Actor | Indica participantes activos como usuarios o sistemas externos |
| activate A | Caja de activación | Indica que el objeto empieza a procesar la solicitud |
| deactivate A | Fin de la activación | Indica que el objeto termina el procesamiento actual |
| loop text | Caja de bucle | Indica un proceso de interacción que se repite |
| alt text | Bifurcación condicional | Indica rutas de interacción bajo distintas condiciones |
| opt text | Flujo opcional | Indica una interacción que puede ejecutarse |
| par text | Caja paralela | Indica que varias operaciones se ejecutan a la vez |
Para consultar la sintaxis detallada de Mermaid para generar diagramas de secuencia, visita la siguiente página: https://www.processon.io/es/mermaid/sequence-diagram
El diagrama de secuencia es adecuado para describir las interacciones que ocurren en orden temporal entre usuarios y sistemas, entre sistemas o entre servicios, prueba gratis el editor en línea de Mermaid para diagramas de secuencia.
Sintaxis básica
Mermaid usa la declaración classDiagram para crear un diagrama de clases.
classDiagram
Animal <|-- Duck
Animal <|-- Fish
class Animal {
+String name
+eat()
}
class Duck {
+swim()
}
Resultado renderizado
Donde:
Sintaxis habitual
| Sintaxis | Diagrama | Significado |
| classDiagram | Diagrama de clases | Crear un diagrama de clases |
| class ClassName | Clase | Define un objeto de clase |
| ClassName : attribute | Atributo | Indica una variable miembro de la clase |
| ClassName : method() | Método | Define un método de la clase |
| <|-- | Triángulo hueco+ Línea continua | Indica una relación de herencia |
| <|.. | Triángulo hueco+ Línea discontinua | Indica una relación de implementación |
| *-- | Rombo relleno+ Línea continua | Indica una relación de composición |
| o-- | Rombo hueco+ Línea continua | Indica una relación de agregación |
| --> | Flecha continua | Indica una relación de asociación |
| ..> | Flecha discontinua | Indica una relación de dependencia |
| -- | Línea continua | Indica una relación de conexión normal |
| +attribute | Signo más | Indica un atributo o un método público |
| -attribute | Signo menos | Indica un atributo o un método privado |
Los símbolos +, - y # delante de los miembros de la clase pueden indicar distintos niveles de visibilidad.
Para consultar la sintaxis detallada de Mermaid para generar diagramas de clases, visita la siguiente página: https://www.processon.io/es/mermaid/class-diagram
El diagrama de clases es adecuado para el diseño de software, el modelado orientado a objetos y el análisis de la estructura de programas, entre otros escenarios, prueba gratis el editor en línea de Mermaid para diagramas de clases.
Sintaxis básica
Mermaid usa la declaración stateDiagram-v2 para crear un diagrama de estados.
stateDiagram-v2
state "Pending Payment" as Pending
[*] --> Pending
Pending --> Paid
Paid --> Shipped
Shipped --> Completed
Completed--> [*]
Resultado renderizado
Donde:
Sintaxis habitual
| Sintaxis | Diagrama | Significado |
| stateDiagram-v2 | Diagrama de estados | Crear un diagrama de estados |
| state StateName | Rectángulo redondeado | Define un nodo de estado básico |
| state StateName : text | Rectángulo redondeado con texto | Añade un texto descriptivo al estado |
| [*] | Punto relleno pequeño o anillo doble | Indica el inicio o el fin del estado |
| [*] --> StateName | Flecha de inicio | Indica la entrada en el primer estado |
| StateName --> [*] | Flecha de fin | Indica el fin del flujo de estados |
| A --> B | Flecha continua | Indica una transición de estado |
| A --> B: event | Flecha continua con etiqueta | Transición de estado con evento desencadenante |
| state StateName { ... } | Rectángulo redondeado anidado | Define un estado compuesto |
| state Node <<choice>> | Rombo | Nodo de decisión o de bifurcación |
| state Fork <<fork>> | Línea divisoria horizontal gruesa | Indica el inicio de un flujo paralelo |
| state Join <<join>> | Línea divisoria horizontal gruesa | Indica el fin y la convergencia de un flujo paralelo |
Para consultar la sintaxis detallada de Mermaid para generar diagramas de estados, visita la siguiente página: https://www.processon.io/es/mermaid/state-diagram
El diagrama de estados es adecuado para representar estados de pedidos, estados de flujos de trabajo, estados de usuario, estados de sistema y máquinas de estados, prueba gratis el editor en línea de Mermaid para diagramas de estados.
Sintaxis básica
Mermaid usa la declaración erDiagram para crear un diagrama de entidad-relación, es decir, un diagrama ER.
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ PRODUCT : contains
Resultado renderizado
Donde:
Sintaxis habitual
| Sintaxis | Diagrama | Significado |
| erDiagram | Diagrama ER | Crea un diagrama ER |
| ENTITY { } | Rectángulo | Define una entidad |
| type field | Marca de atributo | Define un atributo de la entidad |
| type field PK | Clave primaria | Define la clave primaria de la entidad |
| type field FK | Clave externa | Define la clave externa de la entidad |
| type field UK | Clave única | Define un campo con restricción de unicidad |
| || | Uno | Exactamente uno |
| o| | Cero o uno | Cero o uno |
| |{ | Uno o varios | Mínimo uno |
| o{ | Cero, uno o varios | Cero o varios |
Para consultar la sintaxis detallada de Mermaid para generar diagramas ER, visita la siguiente página: https://www.processon.io/es/mermaid/er-diagram
El diagrama ER puede representar entidades, atributos y las relaciones entre entidades, y se usa habitualmente en el diseño de bases de datos, prueba gratis el editor en línea de Mermaid para diagramas ER.
Sintaxis básica
Mermaid usa la declaración mindmap para crear un mapa mental.
mindmap
root((Mermaid))
Flowchart
Sequence diagram
Class diagram
Gantt chart
Mind map
Resultado renderizado
Donde:
Sintaxis habitual
| Sintaxis | Diagrama | Significado |
| mindmap | Mapa mental | Crear un mapa mental |
| root[text] | Rectángulo | Tema raíz rectangular |
| root(text) | Rectángulo redondeado | Tema raíz de rectángulo redondeado |
| root((text)) | Círculo | un tema raíz circular |
| root{{text}} | Hexágono | Tema raíz hexagonal |
| root)text( | Gráfico de burbujas | Tema raíz de burbuja |
| [text] | Rectángulo | Nodo rectangular |
| (text) | Rectángulo redondeado | Nodo de rectángulo redondeado |
| ((text)) | Círculo | Nodo circular |
| {{text}} | Hexágono | Nodo hexagonal |
| )text( | Gráfico de burbujas | Nodo de burbuja |
Para consultar la sintaxis detallada de Mermaid para generar mapas mentales, visita la siguiente página: https://www.processon.io/es/mermaid/mindmap
El mapa mental representa la jerarquía principalmente mediante la sangría, por lo que es muy adecuado para organizar conocimiento, hacer lluvia de ideas, tomar apuntes de cursos y diseñar arquitecturas de información, prueba gratis el editor en línea de Mermaid para mapas mentales.
Sintaxis básica
Mermaid usa la declaración gantt para crear un diagrama de Gantt.
gantt
title Project Plan
dateFormat YYYY-MM-DD
section Design
Requirements Analysis:a1, 2026-01-01, 3d
UI Design:after a1, 2d
section Development
Front-end Development:2026-01-06, 4d
Back-end Development:2026-01-07, 4d
Resultado renderizado
Donde:
Sintaxis habitual
| Sintaxis | Diagrama | Significado |
| gantt | Diagrama de Gantt | Crear un diagrama de Gantt |
| title text | Título | Establece el título del diagrama de Gantt |
| dateFormat text | Identificador de configuración de fecha | Define el formato de análisis de fechas de la línea de tiempo |
| section text | Barra de título del bloque de agrupación | Divide las agrupaciones de tareas |
| TaskName : id, startDate, endDate | Barra horizontal de tarea | Define las propiedades de la tarea |
| startDate | Barra horizontal de tarea | Define la fecha de inicio |
| endDate | Barra horizontal de tarea | Define la fecha de fin |
| duration | Barra horizontal de tarea | Define la duración de la tarea |
| id | Personalizado | Define el identificador de la tarea |
| after id | Barra horizontal de tarea | Define una tarea que empieza después de su predecesora |
| 16d, 2w | Barra horizontal de tarea | Indica días o semanas |
| milestone, date | Rombo relleno | Establece un hito |
Para consultar la sintaxis detallada de Mermaid para generar diagramas de Gantt, visita la siguiente página: https://www.processon.io/es/mermaid/gantt
El diagrama de Gantt de Mermaid es adecuado para la planificación de proyectos, la organización de tareas, el progreso de desarrollo y la gestión de proyectos, prueba gratis el editor en línea de Mermaid para diagramas de Gantt.
Sintaxis básica
Mermaid usa la declaración journey para crear un diagrama de recorrido del usuario.
journey
title User purchases a product
section Browse
Search for products: 5: User
View details: 4: User
section Place order
Add to cart: 5: User
Complete payment: 3: User
Resultado renderizado
Donde:
Sintaxis habitual
| Sintaxis | Diagrama | Significado |
| journey | Diagrama de recorrido del usuario | Crear un diagrama de recorrido del usuario |
| title text | Título | Título del diagrama de recorrido del usuario |
| section text | Bloque de sección | Divide las agrupaciones de fases del proceso |
| TaskName:num:Actor | Nodo de proceso + eje de escala de satisfacción | Define las tareas de interacción de la fase, la puntuación de satisfacción y los actores participantes |
| num (1~5) | Puntuación de satisfacción | 1 es la más baja y 5 la mejor |
| Me, Cat | Actor | Define los distintos actores que participan en la tarea |
Para consultar la sintaxis detallada de Mermaid para generar diagramas de recorrido del usuario, visita la siguiente página: https://www.processon.io/es/mermaid/user-journey-diagram
El diagrama de recorrido del usuario es adecuado para analizar los distintos pasos y experiencias que vive el cliente desde que entra en contacto con el producto hasta que alcanza su objetivo, prueba gratis el editor en línea de Mermaid para diagramas de recorrido del usuario.
Sintaxis básica
Mermaid usa la declaración timeline para crear una línea de tiempo.
timeline
title Mermaid Development History
2019 : Project Development
2020 : Feature Expansion
2021 : More Diagram Types
Resultado renderizado
Donde:
Sintaxis habitual
| Sintaxis | Diagrama | Significado |
| timeline | Línea de tiempo | Crear una línea de tiempo |
| title text | Título | Establece el título de la línea de tiempo |
| section text | Bloque de sección | Divide las agrupaciones de fases temporales |
| date : Event1 | Evento | Define los eventos correspondientes a un momento temporal |
| : Event2 | Varios eventos | Otros eventos correspondientes al mismo momento |
| Espacio | Salto de línea | Aplica un salto de línea a las descripciones de eventos demasiado largas |
Para consultar la sintaxis detallada de Mermaid para generar líneas de tiempo, visita la siguiente página: https://www.processon.io/es/mermaid/timeline
La línea de tiempo es adecuada para mostrar eventos históricos, la evolución de un proyecto, la iteración de productos e información en orden cronológico, prueba gratis el editor en línea de Mermaid para líneas de tiempo.
Sintaxis básica
Mermaid usa la declaración quadrantChart para crear un gráfico de cuadrantes.
quadrantChart
title Product Positioning
x-axis Low Price--> High Price
y-axis Low Quality--> High Quality
quadrant-1 High-end
quadrant-2 Quality-focused
quadrant-3 Basic
quadrant-4 Value-for-money
Product A: [0.8, 0.7]
Product B: [0.3, 0.8]
Resultado renderizado
Donde:
Para consultar la sintaxis detallada de Mermaid para generar gráficos de cuadrantes, visita la siguiente página: https://www.processon.io/es/mermaid/quadrant-chart
El gráfico de cuadrantes es adecuado para el posicionamiento de producto, el análisis de prioridades, el análisis de la competencia y la clasificación bidimensional, prueba gratis el editor en línea de Mermaid para gráficos de cuadrantes.
Sintaxis básica
El diagrama kanban de Mermaid se usa para organizar los elementos de trabajo según el estado de las tareas, por ejemplo pendiente, en curso y completado. Una estructura típica se puede representar así:
kanban
Todo
Task A
Task B
Doing
Task C
Done
Task D
Resultado renderizado
Donde：
Para consultar la sintaxis detallada de Mermaid para generar diagramas kanban, visita la siguiente página: https://www.processon.io/es/mermaid/kanban
El diagrama kanban es adecuado para la gestión de proyectos, el seguimiento de tareas, los procesos de I+D y la gestión de flujos de trabajo, prueba gratis el editor en línea de Mermaid para diagramas kanban.
Sintaxis básica
El diagrama de requisitos puede usarse para representar las relaciones entre requisitos, funciones y elementos del sistema, Mermaid usa la declaración requirementDiagram para crear un diagrama de requisitos.
requirementDiagram
requirement userRequirement {
id: 1
text: Customers can purchase products
risk: low
verifymethod: test
}
Resultado renderizado
Donde:
Sintaxis habitual
| Sintaxis | Diagrama | Significado |
| requirementDiagram | Diagrama de requisitos | Crear un diagrama de requisitos |
| Requirement name { } | Requisito | Define un requisito básico |
| functionalRequirement name { } | Función | Define un requisito funcional |
| interfaceRequirement name { } | Interfaz | Define un requisito de interfaz |
| performanceRequirement name { } | Rendimiento | Define un requisito de rendimiento |
| physicalRequirement name { } | Físico | Define un requisito físico |
| element name {type: name docRef: name} | Elemento | Define elementos de entidad como sistemas, componentes o pruebas |
| X - satisfies -> Y | Flecha discontinua | La entidad satisface el requisito correspondiente |
| X - contains -> Y | Línea continua con un extremo circular con cruz en el punto de inicio | Un requisito contiene otro requisito |
| X - derives -> Y | Flecha discontinua | Un requisito deriva de otro requisito |
| X - copies -> Y | Flecha discontinua | Un requisito copia otro requisito |
| X - traces -> Y | Flecha discontinua | Asociación de trazabilidad bidireccional entre requisitos |
Para consultar la sintaxis detallada de creación de un diagrama de requisitos de Mermaid, visita la siguiente página: https://www.processon.io/es/mermaid/requirement-diagram
El diagrama de requisitos es adecuado para el análisis de requisitos de producto, la ingeniería de sistemas y el seguimiento de requisitos, prueba gratis el editor en línea de Mermaid para diagramas de requisitos.
Sintaxis básica
Mermaid usa la declaración pie para crear un gráfico circular.
pie showData
title Population Share by Continent
"Asia" : 59.5
"Africa" : 18.0
"Europe" : 9.0
"North America" : 7.5
"South America" : 5.5
"Oceania" : 0.5
Resultado renderizado
Donde:
Para consultar la sintaxis detallada de Mermaid para generar gráficos circulares, visita la siguiente página: https://www.processon.io/es/mermaid/pie-chart
El gráfico circular es adecuado para representar proporciones y relaciones de composición, prueba gratis el editor en línea de Mermaid para gráficos circulares.
Sintaxis básica
El diagrama de Sankey se usa principalmente para representar los flujos de tráfico, recursos, capital o datos entre distintos nodos, Mermaid usa la declaración sankey-beta para crear un diagrama de Sankey.
sankey-beta
A,B,50
A,C,30
B,D,20
C,D,30
Resultado renderizado
Donde:
Para consultar la sintaxis detallada de Mermaid para generar diagramas de Sankey, visita la siguiente página: https://www.processon.io/es/mermaid/sankey-diagram
El diagrama de Sankey es un tipo de gráfico de visualización que muestra el flujo de un conjunto de valores a otro, prueba gratis el editor en línea de Mermaid para diagramas de Sankey.
Sintaxis básica
Mermaid usa la declaración xychart-beta para crear un gráfico XY.
xychart-beta
title "Monthly Sales Data"
x-axis "Month"["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
y-axis " Sales (million)" 0 --> 100
line [20, 30, 40, 35, 50, 60]
bar [30, 50, 35, 20, 45, 40]
Resultado renderizado
Donde:
Sintaxis habitual
| Sintaxis | Diagrama | Significado |
| xychart-beta | Gráfico de coordenadas XY | Crear un gráfico de coordenadas XY |
| xychart-beta horizontal | Gráfico de coordenadas XY horizontal | Crear un gráfico de coordenadas XY horizontal |
| title "name" | Título | Define el título del gráfico XY |
| x-axis "axisTitle" [a,b,c] | Eje X | Define las categorías y el título del eje horizontal |
| y-axis "axisTitle" min --> max | Eje Y | Define el rango y el título del eje vertical |
| y-axis "axisTitle" | Eje Y solo con título | Solo se define el nombre del eje vertical y el rango numérico se ajusta automáticamente |
| bar [num1, num2, num3] | Gráfico de barras | Define la serie de datos del gráfico de barras |
| line [num1, num2, num3] | Gráfico de líneas | Define la serie de datos del gráfico de líneas |
Para consultar la sintaxis detallada de Mermaid para generar gráficos XY, visita la siguiente página: https://www.processon.io/es/mermaid/xy-chart
El gráfico XY es adecuado para mostrar cambios en los datos, comparar valores y realizar visualizaciones de datos sencillas, prueba gratis el editor en línea de Mermaid para gráficos XY.
Sintaxis básica
El gráfico de radar es adecuado para comparar el rendimiento de varios objetos en múltiples dimensiones, por ejemplo en la evaluación de competencias, las métricas de producto y la comparación de propuestas. Mermaid usa la declaración radar-beta para crear un gráfico de radar.
radar-beta
title "Competency Assessment Radar Chart"
axis a["Communication Skills"], b["Logical Thinking"], c["Team Collaboration"], d["Technical Skills"]
curve A["Chenlaoda"] {80, 90, 70, 85}
curve B["Wangxiaoer"] {60, 70, 90, 80}
Resultado renderizado
Donde:
Sintaxis habitual
| Sintaxis | Diagrama | Significado |
| radar-beta | Gráfico de radar | Crear un gráfico de radar |
| title "name" | Título | Define el título del gráfico de radar, justo después de radar-beta |
| title "name" | Título | Define el título del gráfico de radar, antes de radar-beta, con 3 guiones tanto arriba como abajo |
| axis id ["axisTitle"] | Eje de dimensión | Define las dimensiones y los nombres del gráfico de radar |
| curve id ["name"]{[values]} | Curva de datos | Define el nombre de la serie de datos y los valores de cada dimensión |
| max value | Valor máximo | Establece el valor máximo del rango numérico del gráfico de radar |
| min value | Valor mínimo | Establece el valor mínimo del rango numérico del gráfico de radar |
Para consultar la sintaxis detallada de Mermaid para generar gráficos de radar, visita la siguiente página: https://www.processon.io/es/mermaid/radar-chart
El gráfico de radar resulta especialmente útil para desarrolladores, científicos de datos e ingenieros que necesitan representar datos de forma clara y concisa en un formato circular, prueba gratis el editor en línea de Mermaid para gráficos de radar.
Sintaxis básica
Mermaid usa la declaración gitGraph para crear un diagrama de Git.
gitGraph
commit
branch develop
checkout develop
commit
checkout main
merge develop
Resultado renderizado
Donde:
Para consultar la sintaxis detallada de Mermaid para generar diagramas de Git, visita la siguiente página: https://www.processon.io/es/mermaid/git-graph
El diagrama de Git es adecuado para representar procesos de control de versiones como commits, creación de ramas, cambio de rama y fusiones, prueba gratis el editor en línea de Mermaid para diagramas Git.
Sintaxis básica
El diagrama C4 de Mermaid se usa para el modelado de arquitectura de software y permite describir en distintos niveles el sistema de software, los contenedores, los componentes y las relaciones entre ellos.
C4Context
title C4 Diagram of the Business System
Person(user, " User", " System user")
System(system, " Business System", " Core business system")
Rel(user, system, "Uses")
Resultado renderizado
Donde:
Sintaxis habitual
| Sintaxis | Diagrama | Significado |
| C4Context | Diagrama de contexto del sistema | Crear un diagrama de contexto del sistema C4 |
| C4Container | Diagrama de contenedores | Crear un diagrama de contenedores C4 |
| C4Component | Diagrama de componentes | Crear un diagrama de componentes C4 |
| C4Dynamic | Diagrama de interacción dinámica | Crear un diagrama de interacción dinámica C4 |
| C4Deployment | Diagrama de despliegue | Crear un diagrama de despliegue C4 |
| title | Título | Establece el título del diagrama C4 |
| Person(alias, "label", "description") | Persona | Indica el usuario o el rol que usa el sistema |
| Person_Ext(alias, "label", "description") | Persona externa | Indica las personas o los roles de organización externos al sistema que participan en la interacción |
| System(alias, "label", "description") | Nodo de sistema | Indica el sistema de software que se va a analizar |
| System_Ext(alias, "label", "description") | Nodo de sistema externo | Indica servicios de terceros o sistemas de software externos de los que depende el sistema |
| System_Boundary(alias, "label") | Límite del sistema | Indica el límite del alcance del sistema |
| Container(alias, "label", "technology") | Contenedor | Indica una unidad de software que se ejecuta de forma independiente dentro del sistema |
| Container_Boundary(alias, "label") | Límite del contenedor | Indica el alcance de un contenedor o servicio |
Para consultar la sintaxis detallada de Mermaid para generar diagramas C4, visita la siguiente página: https://www.processon.io/es/mermaid/c4-diagram
El diagrama C4 es adecuado para el diseño de arquitectura de software, el análisis de sistemas y la documentación técnica, prueba gratis el editor en línea de Mermaid para diagramas C4.
Sintaxis básica
Mermaid usa la declaración architecture-beta para crear un diagrama de arquitectura.
architecture-beta
group api(cloud)[API server]
service server(server)[server] in api
service database(database)[databasa] in api
server:R --> L:database
Resultado renderizado
Donde:
Para consultar la sintaxis detallada de Mermaid para generar diagramas de arquitectura, visita la siguiente página: https://www.processon.io/es/mermaid/architecture-diagram
El diagrama de arquitectura es adecuado para representar las relaciones entre servidores, bases de datos, servicios en la nube, servicios de aplicaciones y distintos componentes del sistema, prueba gratis el editor en línea de Mermaid para diagramas de arquitectura.
Sintaxis básica
El diagrama de bloques describe la estructura del sistema principalmente mediante módulos y relaciones de conexión, Mermaid usa la declaración block-beta para crear un diagrama de bloques.
block-beta
A space B
A["User"] --> B["Application"]
B space C
B --> C["Database"]
Resultado renderizado
Donde:
Para consultar la sintaxis detallada de Mermaid para generar diagramas de bloques, visita la siguiente página: https://www.processon.io/es/mermaid/block-diagram
El diagrama de bloques es adecuado para módulos del sistema, estructuras funcionales, arquitecturas técnicas y relaciones entre componentes, entre otros escenarios, prueba gratis el editor en línea de Mermaid para diagramas de bloques.
Sintaxis básica
El diagrama de paquetes se usa principalmente para representar los campos y las longitudes de los paquetes de red o de las estructuras de datos de un protocolo, Mermaid usa la declaración packet-beta para crear un diagrama de paquetes.
packet-beta
0-7: "Version"
8-15: "Type"
16-31: "Length"
Resultado renderizado
Donde:
El diagrama de paquetes es adecuado para protocolos de red, estructuras de paquetes y documentos de especificaciones técnicas, prueba gratis el editor en línea de Mermaid para diagramas de paquetes.
No estar familiarizado con la sintaxis de Mermaid no significa que no puedas usar Mermaid para generar diagramas; puedes usar cualquiera de las siguientes formas:
Usar plantillas de Mermaid gratis
Elige primero una plantilla parecida a lo que necesitas y modifica sus nodos, textos y relaciones. Esta forma de trabajar es adecuada para quienes usan Mermaid por primera vez.
Generar código Mermaid con IA
Puedes describir con lenguaje natural el diagrama que necesitas, por ejemplo:
Crea un flujo de procesamiento de pedidos de comercio electrónico que incluya el pedido del usuario, el pago, la comprobación de inventario, el envío y la finalización del pedido.
La IA puede generar código Mermaid a partir de la descripción y después modificarlo según las necesidades reales.
Usar la IA para revisar y corregir el código
Si el código Mermaid tiene errores de sintaxis, puedes pedir a la IA que localice el problema y modifique el código.
Generar código mediante reconocimiento de imágenes
Para diagramas de flujo, diagramas de arquitectura u otros diagramas estructurados que ya existan, puedes intentar generar código Mermaid mediante reconocimiento de imágenes y seguir editándolo.
El editor en línea de Mermaid suele tener que resolver tres cuestiones fundamentales: escribir código, previsualizar el diagrama y exportar el resultado. Además, las plantillas y la IA también pueden reducir la barrera de uso de Mermaid.
Tomando como ejemplo el ProcessOn Mermaid en línea, puedes hacer directamente en el navegador:
Por lo tanto, para los usuarios que crean diagramas de Mermaid con frecuencia, el editor en línea ProcessOn Mermaid permite reunir la escritura de código Mermaid, la generación de diagramas, la edición y modificación posteriores, la exportación y el uso compartido en un único entorno de trabajo.
Desde diagramas de flujo, diagramas de secuencia y diagramas de clases de Mermaid hasta diagramas de Gantt, mapas mentales, gráficos de cuadrantes, diagramas de Sankey, diagramas de Git, diagramas C4 y diagramas de arquitectura, todos se pueden crear con la sintaxis de Mermaid y editar.
Anímate a usar el editor en línea de Mermaid, escribe código Mermaid en línea y genera diagramas.
¿Es difícil aprender la sintaxis de Mermaid?
La sintaxis básica de Mermaid es relativamente sencilla; para la mayoría de los diagramas basta con dominar la declaración del diagrama, los nodos, las conexiones y el texto. Por ejemplo, sequenceDiagram se usa para declarar un diagrama de secuencia y flowchart para declarar un diagrama de flujo. Las reglas de sintaxis varían según el tipo de diagrama, y los diagramas complejos requieren aprender además los parámetros y la configuración correspondientes.
¿Por qué no se genera el diagrama si el código Mermaid está mal escrito?
Mermaid es bastante sensible a la estructura sintáctica. Las causas habituales son una declaración del diagrama incorrecta, una sintaxis incompleta de nodos o conexiones, un manejo incorrecto de la sangría o de los caracteres especiales, y el uso de sintaxis que la versión actual de Mermaid no admite.
¿En qué se diferencia Mermaid del software de dibujo tradicional?
Mermaid describe los diagramas principalmente mediante código de texto, mientras que el software de dibujo tradicional suele crearlos arrastrando figuras y conexiones y ajustando estilos.
¿Se pueden guardar y reutilizar los diagramas de Mermaid?
Sí. El contenido principal de un diagrama de Mermaid es código de texto, por lo que puedes guardar el código en Markdown, en un archivo de código o en otro documento compatible con Mermaid y volver a renderizarlo cuando lo necesites.
Esta es también una diferencia importante entre Mermaid y los diagramas que son solo imágenes: la imagen guarda el resultado final, mientras que el código Mermaid guarda además la información estructural del diagrama.
¿Qué relación hay entre Mermaid y Markdown?
Mermaid se usa a menudo junto con Markdown, pero no son la misma sintaxis.
Markdown se usa principalmente para escribir texto estructurado, mientras que Mermaid sirve para generar diagramas mediante código. En los editores de Markdown compatibles con Mermaid se puede incrustar código Mermaid en un documento Markdown, de modo que el diagrama y el texto explicativo queden en el mismo documento.
Siguiendo el tutorial para probar
Libre de usar ProcessOn
