{"id":2114,"date":"2026-05-26T08:05:43","date_gmt":"2026-05-26T08:05:43","guid":{"rendered":"https:\/\/www.vpascode.com\/es\/docs\/uncategorized\/mermaid-js-sequence-diagram-syntax-guide\/"},"modified":"2026-05-26T08:05:43","modified_gmt":"2026-05-26T08:05:43","slug":"mermaid-js-sequence-diagram-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-sequence-diagram-syntax-guide\/","title":{"rendered":"Gu\u00eda de sintaxis de diagramas de secuencia de Mermaid.js"},"content":{"rendered":"

\u00bfQu\u00e9 es un diagrama de secuencia?<\/h2>\n

Un diagrama de secuencia<\/strong> es un diagrama comportamental esencial diagrama UML<\/strong> dise\u00f1ado para visualizar el flujo cronol\u00f3gico de mensajes, llamadas a funciones y cargas \u00fatiles de datos entre diferentes entidades del sistema a lo largo de una l\u00ednea temporal lineal. Reconocido como un tipo fundamental de tipo de diagrama UML<\/strong>, representa las interacciones en tiempo de ejecuci\u00f3n al apilar los componentes del sistema a lo largo del eje X como l\u00edneas de vida verticales y rastrear los intercambios de mensajes a lo largo del eje Y. Este plano es invaluable para los desarrolladores que depuran intercambios de API distribuidas, rutas de orquestaci\u00f3n de microservicios o flujos de autenticaci\u00f3n de usuarios en tiempo real.<\/p>\n

Con Mermaid.js<\/strong>, puedes crear procesos temporales complejos utilizando una estructura de texto intuitiva. El motor maneja autom\u00e1ticamente el espaciado vertical, gestiona la alineaci\u00f3n de las flechas de mensaje y dibuja bloques de activaci\u00f3n en tiempo de ejecuci\u00f3n de forma limpia en tu lienzo.<\/p>\n

Gu\u00eda de sintaxis principal: elementos y construcciones<\/h2>\n

Para dise\u00f1ar un diagrama de secuencia UML preciso y altamente legible en Mermaid, debes dominar las declaraciones de participantes, las variantes de flechas de mensaje, las l\u00edneas de vida expl\u00edcitas y las estructuras de bloques condicionales.<\/p>\n

1. Declaraci\u00f3n de participantes y actores<\/h3>\n

Declaras una entidad est\u00e1ndar del sistema utilizando la participante<\/code>palabra clave. Si la entidad representa un usuario final humano o un operador externo, utiliza la actor<\/code>palabra clave para representar un icono est\u00e1ndar de figura de palo en el lienzo:<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar Mermaid en VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n Mermaid<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit Mermaid in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
diagramaSecuencia\r\n    actor Cliente\r\n    participante API como Router de Puerta de Enlace<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEditar Mermaid en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
Consejo profesional:<\/em> Usa la como<\/code>palabra clave para asignar nombres largos de componentes a alias internos compactos, manteniendo tus scripts de mensajes concisos y legibles.<\/p>\n
2. Formato de flechas de mensaje<\/h3>\n
El tipo de l\u00ednea y punta de flecha que uses determina el estilo de comunicaci\u00f3n entre los participantes de tu sistema:<\/p>\n