{"id":2085,"date":"2026-07-08T05:51:38","date_gmt":"2026-07-08T05:51:38","guid":{"rendered":"https:\/\/www.vpascode.com\/es\/docs\/uncategorized\/mermaid-js-architecture-diagram-syntax-layout-guide\/"},"modified":"2026-07-08T05:51:38","modified_gmt":"2026-07-08T05:51:38","slug":"mermaid-js-architecture-diagram-syntax-layout-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-architecture-diagram-syntax-layout-guide","title":{"rendered":"Sintaxis y gu\u00eda de dise\u00f1o de diagramas de arquitectura de Mermaid.js"},"content":{"rendered":"

Un diagrama de arquitectura proporciona un plano estructurado utilizado por arquitectos de sistemas y equipos DevOps para visualizar configuraciones de infraestructura, microservicios en la nube y configuraciones de disposici\u00f3n estructural. Construido sobre el arquitectura-beta<\/code>motor, esta herramienta basada en texto reemplaza las utilidades de arrastre manual al organizar autom\u00e1ticamente grupos de servicios estructurales, cl\u00fasteres de bases de datos, pasarelas y rutas de borde en disposiciones de sistema limpias y predecibles.<\/p>\n

Estructura b\u00e1sica de sintaxis<\/h2>\n

Cada diagrama comienza con el arquitectura-beta<\/code>encabezado de declaraci\u00f3n. Pobl\u00e1s el lienzo definiendo elementos individuales de nodo utilizando la servicio<\/code>palabra clave, y mapeas rutas de conexi\u00f3n especificando puertos de coordenadas direccionales exactas (T<\/strong>superior, B<\/strong>inferior, L<\/strong>izquierdo, R<\/strong>derecho) separados por dos puntos y dobles guiones.<\/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 
arquitectura-beta\r\n  servicio pasarela(internet)[Etiqueta de pasarela]\r\n  servicio servidor(servidor)[Servidor de aplicaci\u00f3n]\r\n  \r\n  pasarela:B -- T:servidor<\/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             <\/div>\n
\n\n<\/path><\/path><\/svg>\nEditar Mermaid en VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
Referencia de sintaxis<\/h2>\n
La tabla a continuaci\u00f3n desglosa los componentes de datos principales, palabras clave de formato y atributos de conectores utilizados para construir un mapa de espacio de trabajo de arquitectura en Mermaid.js.<\/p>\n\n\n\n\n\n\n\n\n\n\n
Componente de sintaxis<\/th>\nRequisito de tipo<\/th>\nDescripci\u00f3n y reglas de uso<\/th>\n<\/tr>\n<\/thead>\n
Declaraci\u00f3n<\/strong><\/td>\nIdentificador de palabra clave<\/td>\nInicializa el lienzo del espacio de trabajo de mapeo de infraestructura. Debe usar exactamente el arquitectura-beta<\/code> bloque.<\/td>\n<\/tr>\n
Nodo de servicio<\/strong><\/td>\nPalabra clave + Bloque de identidad<\/td>\nDeclara una entidad arquitect\u00f3nica. Utiliza la sintaxis: servicio id(icon)[Etiqueta de visualizaci\u00f3n]<\/code>.<\/td>\n<\/tr>\n
Envoltura de grupo<\/strong><\/td>\nPalabra clave contenedora<\/td>\nAgrupa servicios relacionados dentro de un contenedor visual. Utiliza la sintaxis: grupo id(icon)[Etiqueta de grupo]<\/code>.<\/td>\n<\/tr>\n
Palabra clave En<\/strong><\/td>\nModificador de asignaci\u00f3n<\/td>\nAsigna expl\u00edcitamente un nodo de servicio para que resida dentro de una envoltura de grupo declarada espec\u00edficamente: servicio id(icon)[Etiqueta] en groupId<\/code>.<\/td>\n<\/tr>\n
Nodo de uni\u00f3n<\/strong><\/td>\nIdentificador de palabra clave<\/td>\nEstablece un punto central de alineaci\u00f3n estructural utilizado para enrutar de forma ordenada rutas de enlace complejas y multidireccionales: nodo id<\/code>.<\/td>\n<\/tr>\n
Aristas de conexi\u00f3n<\/strong><\/td>\nOperadores de direcci\u00f3n de puertos<\/td>\nConfigura rutas de seguimiento direccionales fijando el enlace a lados espec\u00edficos del nodo (T, B, L, R): fuente: lado -- lado: destino<\/code>. Soporta puntas de flecha direccionales (--><\/code>).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n
Agrupaci\u00f3n avanzada y enrutamiento de aristas de puerto<\/h2>\n
Para controlar exactamente c\u00f3mo viajan los enlaces entre los elementos sin que parezca desordenado, el motor de arquitectura requiere enlaces de puertos expl\u00edcitos. Los nodos relacionados se pueden organizar dentro de grupos estructurales para aclarar los l\u00edmites del sistema.<\/p>\n
1. Reglas exactas de enlace de puertos<\/h3>\n
Define d\u00f3nde una l\u00ednea de conexi\u00f3n sale y entra en un componente a\u00f1adiendo dos puntos y una bandera de direcci\u00f3n de borde (“T<\/code>, B<\/code>, L<\/code>, R<\/code>) a los identificadores de nodo respectivos:<\/p>\n