{"id":2080,"date":"2026-07-08T06:48:07","date_gmt":"2026-07-08T06:48:07","guid":{"rendered":"https:\/\/www.vpascode.com\/es\/docs\/uncategorized\/mermaid-js-c4-diagram-syntax-architecture-guide\/"},"modified":"2026-07-08T06:48:07","modified_gmt":"2026-07-08T06:48:07","slug":"mermaid-js-c4-diagram-syntax-architecture-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide","title":{"rendered":"Sintaxis de diagrama C4 de Mermaid.js y gu\u00eda de arquitectura"},"content":{"rendered":"<p>Un diagrama C4 es un m\u00e9todo estandarizado de visualizaci\u00f3n arquitect\u00f3nica dise\u00f1ado para modelar sistemas de software a m\u00faltiples niveles de abstracci\u00f3n estructural. Integrado nativamente en Mermaid.js, el <code>c4<\/code>motor sigue los cuatro niveles centrales del modelo C4: <strong>Contexto<\/strong> (el macroecosistema), <strong>Contenedores<\/strong> (aplicaciones, servicios y bases de datos), <strong>Componentes<\/strong> (m\u00f3dulos estructurales internos), y <strong>Interacciones din\u00e1micas<\/strong>. Esta herramienta elimina la molestia de aplicar estilos CSS personalizados al aplicar bloques arquitect\u00f3nicos coherentes y listos para presentaci\u00f3n basados en sus declaraciones de texto.<\/p>\n<h2>Entendiendo las abstracciones y palabras clave del diagrama C4<\/h2>\n<p>Mermaid admite cuatro encabezados especializados para la inicializaci\u00f3n de diagramas, dependiendo del nivel de detalle que requiera su dise\u00f1o de sistema:<\/p>\n<ul>\n<li><code>C4Contexto<\/code>: Se centra en la visi\u00f3n general, mostrando usuarios, ecosistemas de software principales y dependencias externas de alto nivel.<\/li>\n<li><code>C4Contenedor<\/code>: Se acerca un nivel para descomponer aplicaciones independientes, interfaces de frontend, microservicios, sistemas de almacenamiento de bases de datos y colas.<\/li>\n<li><code>C4Componente<\/code>: Explora en profundidad un contenedor para mostrar m\u00f3dulos a nivel de c\u00f3digo interno, como Controladores, Servicios y Repositorios.<\/li>\n<li><code>C4Din\u00e1mico<\/code>: Se centra en rastrear interacciones de datos en tiempo de ejecuci\u00f3n o la secuenciaci\u00f3n paso a paso de transacciones entre bloques de infraestructura.<\/li>\n<\/ul>\n<h2>Estructura b\u00e1sica de sintaxis<\/h2>\n<p>Cada diagrama C4 comienza con su encabezado de nivel espec\u00edfico, seguido de una declaraci\u00f3n opcional de t\u00edtulo y componentes macro separados por comas. Los par\u00e9ntesis albergan los par\u00e1metros, con cadenas delimitadas por comillas dobles.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpljr0KwkAQhHvBdxiuiiBWvoCm0U5MrCWGjR6et+F2Y\/TtvfyJYLkzs99Muk7ZK710PgPUqiOY7C1KD4wGtq6hOlivqDhgH8XgSaMdyHRfBwrCPikbUX5QWMJsC3+3\/op0lEzUNpgC4Ap6I1xiCq3VG+qeUDgUZcmNV1mZRUcehiSXAXeW\/oys74apaAj2Nc5xK98ugTKeltoJDesrHvFHcj+r\/1pOQtIhd3l+yMziAwImZes=\" rel=\"noopener noreferrer\" target=\"_blank\">\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\n<span>Editar Mermaid en VPasCode<\/span>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptj7FuAjEMhvdKvIOVCaSKqU\/QW+iGCszIDUaK5LNRnKsq3ompW9d7sTq5gy7dnN\/W9\/3pXjqVQl9FF08AZbyVgRXCq0YqCieCOK99ZrBkhXqEC2YEf8v4E5na3ZufZaESKmdL2VRwGTmR588Qummqlx8oEYNnB4H4iLnlWn0QBw\/R4DJhmGwdVpW7m\/zLucexoXJSh82rhwBIgMebUFN5oT65B4HV7laDT8rACEnOmnuMafyWCrDB7h1m8Tvx32f+sR9K4nRtqs1+v92F1S\/wP3fu\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">C4Contexto\r\n  t\u00edtulo \"Boceto de contexto del sistema para el n\u00facleo de Internet\"\r\n  Persona(cliente, \"Cliente de banca\", \"Un cliente del banco con cuentas personales.\")\r\n  Sistema(sistema_bancario, \"Sistema de banca en l\u00ednea\", \"Permite a los clientes ver la informaci\u00f3n de sus cuentas.\")\r\n  Rel(cliente, sistema_bancario, \"Utiliza\", \"HTTPS\")<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptj7FuAjEMhvdKvIOVCaSKqU\/QW+iGCszIDUaK5LNRnKsq3ompW9d7sTq5gy7dnN\/W9\/3pXjqVQl9FF08AZbyVgRXCq0YqCieCOK99ZrBkhXqEC2YEf8v4E5na3ZufZaESKmdL2VRwGTmR588Qummqlx8oEYNnB4H4iLnlWn0QBw\/R4DJhmGwdVpW7m\/zLucexoXJSh82rhwBIgMebUFN5oT65B4HV7laDT8rACEnOmnuMafyWCrDB7h1m8Tvx32f+sR9K4nRtqs1+v92F1S\/wP3fu\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n             <\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpljr0KwkAQhHvBdxiuiiBWvoCm0U5MrCWGjR6et+F2Y\/TtvfyJYLkzs99Muk7ZK710PgPUqiOY7C1KD4wGtq6hOlivqDhgH8XgSaMdyHRfBwrCPikbUX5QWMJsC3+3\/op0lEzUNpgC4Ap6I1xiCq3VG+qeUDgUZcmNV1mZRUcehiSXAXeW\/oys74apaAj2Nc5xK98ugTKeltoJDesrHvFHcj+r\/1pOQtIhd3l+yMziAwImZes=\" rel=\"noopener noreferrer\" target=\"_blank\">\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\n<span>Editar Mermaid en VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"eQIcfSE\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-981\" decoding=\"async\" fetchpriority=\"high\" height=\"486\" sizes=\"(max-width: 1002px) 100vw, 1002px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.png 1002w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c-300x146.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c-768x373.png 768w\" width=\"1002\"\/><\/p>\n<h2>La taxonom\u00eda completa de macros de elementos C4<\/h2>\n<p>La biblioteca C4 de Mermaid proporciona un amplio conjunto de macros especializadas para distinguir claramente entre componentes internos, sistemas externos y capas de bases de datos en todos los niveles de abstracci\u00f3n.<\/p>\n<h3>1. Macros de Persona y Usuario<\/h3>\n<ul>\n<li><code>Persona(alias, etiqueta, [descr], [sprite], [tags])<\/code>: Modela un usuario humano interno o un interesado.<\/li>\n<li><code>Persona_Ext(alias, etiqueta, [descr], [sprite], [tags])<\/code>: Modela un usuario externo (por ejemplo, un proveedor de terceros o auditor) fuera de los l\u00edmites organizativos centrales.<\/li>\n<\/ul>\n<h3>2. Macros de Sistema y Ecosistema de Software<\/h3>\n<ul>\n<li><code>Sistema(alias, etiqueta, [descr], [sprite], [tags])<\/code>: Representa un grupo de sistemas de software interno y dentro del alcance bajo su gesti\u00f3n directa.<\/li>\n<li><code>Sistema_Ext(alias, etiqueta, [descr], [sprite], [tags])<\/code>: Modela un sistema de software externo crucial gestionado por un tercero (por ejemplo, proveedores de identidad, libros mayores de banca central).<\/li>\n<li><code>SistemaDb(alias, etiqueta, [descr], [sprite], [tags])<\/code>: Representa una caja de repositorio de datos a nivel de sistema con forma de cilindro.<\/li>\n<li><code>SistemaDb_Ext(alias, etiqueta, [descr], [sprite], [tags])<\/code>: Representa una capa de base de datos externa de terceros.<\/li>\n<\/ul>\n<h3>3. Macros de Capa de Contenedor (Nivel C4Container)<\/h3>\n<ul>\n<li><code>Contenedor(alias, etiqueta, tecnolog\u00eda, [descr], [sprite], [tags])<\/code>: Modela una aplicaci\u00f3n ejecutable independiente, servidor de API o interfaz de frontend.<\/li>\n<li><code>ContenedorDb(alias, etiqueta, tecnolog\u00eda, [descr], [sprite], [tags])<\/code>: Representa un envoltorio de motor de base de datos relacional o no relacional a nivel de contenedor.<\/li>\n<li><code>Contenedor_Ext(alias, etiqueta, tecnolog\u00eda, [descr], [sprite], [tags])<\/code>: Representa un contenedor en la nube externo o un servicio de aplicaci\u00f3n.<\/li>\n<li><code>ContenedorDb_Ext(alias, etiqueta, tecnolog\u00eda, [descr], [sprite], [tags])<\/code>: Representa una capa de almacenamiento de base de datos en la nube gestionada externamente.<\/li>\n<\/ul>\n<h3>4. Macros de Capa de Componente (Nivel C4Component)<\/h3>\n<ul>\n<li><code>Componente(alias, etiqueta, tecnolog\u00eda, [descr], [sprite], [tags])<\/code>: Mapea un m\u00f3dulo, capa o controlador de clase a nivel de c\u00f3digo interno.<\/li>\n<li><code>ComponenteDb(alias, etiqueta, tecnolog\u00eda, [descr], [sprite], [tags])<\/code>: Modela un sistema de almacenamiento de microcomponentes interno o un sistema de cach\u00e9 de archivos de bajo nivel.<\/li>\n<\/ul>\n<hr \/>\n<h2>Contenedores de L\u00edmite y Envoltura Estructural<\/h2>\n<p>Para indicar per\u00edmetros de seguridad, cortafuegos corporativos o l\u00edmites l\u00f3gicos de aplicaciones, Mermaid proporciona tres envoltorios de contenedor con corchetes dedicados. Los elementos anidados dentro se agrupan visualmente.<\/p>\n<ul>\n<li><code>Enterprise_Boundary(alias, etiqueta) { ... }<\/code>: Envuelve sistemas de alto nivel dentro de una amplia frontera visual que representa el per\u00edmetro general de la infraestructura corporativa o de la empresa.<\/li>\n<li><code>System_Boundary(alias, etiqueta) { ... }<\/code>: Agrupa contenedores de aplicaciones o microservicios estrechamente relacionados dentro de una caja de ecosistema de software unificado.<\/li>\n<li><code>Container_Boundary(alias, etiqueta) { ... }<\/code>: Aisla componentes a nivel de c\u00f3digo dentro de una \u00fanica capa de contexto de m\u00f3dulo de aplicaci\u00f3n.<\/li>\n<\/ul>\n<hr \/>\n<h2>Operadores direccionales avanzados de relaciones<\/h2>\n<p>Conectar bloques en diagramas C4 depende del <code>Rel<\/code>macro o sus variaciones expl\u00edcitamente direccionadas. En lugar de pasar l\u00edneas de diagrama de flujo directas, rastreas las conexiones sem\u00e1nticamente declarando vectores de tecnolog\u00eda directamente dentro de los bloques l\u00f3gicos.<\/p>\n<table border=\"1\" cellpadding=\"5\" cellspacing=\"0\">\n<thead>\n<tr>\n<th>Token de sintaxis de relaci\u00f3n<\/th>\n<th>Direcci\u00f3n visual de la flecha<\/th>\n<th>Contexto de alineaci\u00f3n de uso<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>Rel(desde, hasta, etiqueta, [tecn])<\/code><\/td>\n<td>Din\u00e1mico \/ Automatizado<\/td>\n<td>Relaci\u00f3n predeterminada. Deja que el algoritmo de dise\u00f1o determine la mejor ruta de l\u00ednea.<\/td>\n<\/tr>\n<tr>\n<td><code>BiRel(desde, hasta, etiqueta, [tecn])<\/code><\/td>\n<td>Bidireccional (&lt;\u2013&gt;)<\/td>\n<td>Indica intercambios interactivos de dos v\u00edas, protocolos d\u00faplex o procesos de sincronizaci\u00f3n.<\/td>\n<\/tr>\n<tr>\n<td><code>Rel_Atras(desde, hasta, etiqueta, [tecn])<\/code><\/td>\n<td>Flecha invertida en la parte superior (&lt;\u2013)<\/td>\n<td>Dibuja la relaci\u00f3n hacia adelante en la l\u00f3gica del c\u00f3digo, pero invierte la flecha visual visible hacia atr\u00e1s.<\/td>\n<\/tr>\n<tr>\n<td><code>Rel_Vecino(desde, hasta, etiqueta, [tecn])<\/code><\/td>\n<td>Preferencia de dise\u00f1o horizontal<\/td>\n<td>Forza al nodo objetivo a permanecer directamente al lado del nodo de origen en la misma fila horizontal.<\/td>\n<\/tr>\n<tr>\n<td><code>Rel_Abajo(desde, hasta, etiqueta, [tecn])<\/code> \/ <code>Rel_Abajo(...)<\/code><\/td>\n<td>Recto hacia abajo (v)<\/td>\n<td>Forza los flujos de datos verticales hacia abajo hasta capas de base de datos o procesos posteriores en segundo plano.<\/td>\n<\/tr>\n<tr>\n<td><code>Rel_Up(from, to, label, [tech])<\/code> \/ <code>Rel_U(...)<\/code><\/td>\n<td>Hacia arriba recto (^)<\/td>\n<td>Forza a que las rutas de relaci\u00f3n viajen rectas hacia los componentes de la interfaz de usuario del cliente.<\/td>\n<\/tr>\n<tr>\n<td><code>Rel_Izq(from, to, label, [tech])<\/code> \/ <code>Rel_I(...)<\/code><\/td>\n<td>Hacia la izquierda recto (&lt;-)<\/td>\n<td>Dirige las rutas horizontalmente hacia el lado izquierdo del elemento del lienzo.<\/td>\n<\/tr>\n<tr>\n<td><code>Rel_Der(from, to, label, [tech])<\/code> \/ <code>Rel_D(...)<\/code><\/td>\n<td>Hacia la derecha recto (-&gt;)<\/td>\n<td>Dirige las rutas horizontalmente hacia el lado derecho del elemento del lienzo.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h2>Estilo y etiquetado din\u00e1micos personalizados (anulaciones de forma C4)<\/h2>\n<p>Para marcar aplicaciones heredadas, destacar sistemas premium o resaltar flujos de datos seguros, puedes crear estilos personalizados utilizando el motor de etiquetas de elementos. Definir\u00e1s una matriz de propiedades de etiqueta en la parte superior de tu documento y luego agregar\u00e1s esa etiqueta a las definiciones de tus elementos.<\/p>\n<h3>Palabras clave para modificar el estilo:<\/h3>\n<ul>\n<li><code>ActualizarEstiloElemento(elemento, colorFondo, colorFuente, [colorBorde], [sombreado])<\/code>: Sustituci\u00f3n directa de la paleta de fondo predeterminada de una caja de elemento expl\u00edcita.<\/li>\n<li><code>ActualizarEstiloRel(from, to, colorLinea, colorTexto)<\/code>: Dirige expl\u00edcitamente una ruta de conexi\u00f3n para cambiar el color de las l\u00edneas o las descripciones de conexi\u00f3n.<\/li>\n<\/ul>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptj1FLw0AMx98Fv0NoGShMEdeCe9ROfHEwGD6Pa5p1B9e7kkut9dN7d5ugY4FA7pL8\/vlXReWs0JdcXwGIFkOQVYMX10HljOO7yjXUwJtxtTLwzHjQQigDE6xVn8WtmNvJC3U3hlqF0071eg7Ze3rAizZG2zbgmLLwvWGH5D158EPtkXUv2llgsjQq4++z2z\/ALqiz3fWORZn572nEsFL+UDvFDWxSL5LXaRgGH\/oj1fCpaQSyrbZ0osaczWClOXgAjAYBE1J\/q3iGjxMffaOEXg11ZGUrk6H\/xvJmWS6KfZTM9ylSicvFwyMehS4gzq3kJdZPJZ5TClRUBMoPnuOEdw==\" rel=\"noopener noreferrer\" target=\"_blank\">\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\n<span>Editar Mermaid en VPasCode<\/span>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1kM9KA0EMxu+C7xB2KSiIiN2CPUrpsVLwAUp2JlsHppM1M1v\/vJMnb177YmZmEbXQgUAYku+X71s0Cw6JXtP5GUA6fKTBM1Qr7BEsAcrz4BKZNAjC1nOLHgwHLes6Z9C4w2eAnkV\/PAtF6EkiB\/TuHS1WWTTXo4uJdnjhaYvmbYO9u4Lq4fBlPHHmdFgQo9wTCVm0XOnMWthQRPAYQSjwXmc4KEeX4hCNuH78uK4u\/4J2bEnCRi9L6LNOafJWj4FKoz6ScG7Vk3ekKWTiipPaGffLbXuVRHihVlc1hSEOKI5\/gLkmE1j\/2h5NWCcaG46gEk2evFebZUiWMTnPS087BfP\/YGo7n02bLl9Td+WV1synN7dmxJ4UOjZez0x7NzPHWo1BalTrG+E8rq8=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">C4Context\r\n  t\u00edtulo \"Mapa de arquitectura global con codificaci\u00f3n por colores personalizada\"\r\n  \r\n  Sistema(legacy_api, \"N\u00facleo de facturaci\u00f3n heredado\", \"Procesa las renovaciones de suscripciones.\")\r\n  Sistema(modern_portal, \"Portal de panel de control del cliente\", \"Motor moderno de vista web para usuarios.\")\r\n  \r\n  %% Personalizaci\u00f3n directa de colores\r\n  ActualizarEstiloElemento(legacy_api, \"#d9534f\", \"#ffffff\", \"#c9302c\")\r\n  ActualizarEstiloElemento(modern_portal, \"#5cb85c\", \"#ffffff\", \"#4cae4c\")<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1kM9KA0EMxu+C7xB2KSiIiN2CPUrpsVLwAUp2JlsHppM1M1v\/vJMnb177YmZmEbXQgUAYku+X71s0Cw6JXtP5GUA6fKTBM1Qr7BEsAcrz4BKZNAjC1nOLHgwHLes6Z9C4w2eAnkV\/PAtF6EkiB\/TuHS1WWTTXo4uJdnjhaYvmbYO9u4Lq4fBlPHHmdFgQo9wTCVm0XOnMWthQRPAYQSjwXmc4KEeX4hCNuH78uK4u\/4J2bEnCRi9L6LNOafJWj4FKoz6ScG7Vk3ekKWTiipPaGffLbXuVRHihVlc1hSEOKI5\/gLkmE1j\/2h5NWCcaG46gEk2evFebZUiWMTnPS087BfP\/YGo7n02bLl9Td+WV1synN7dmxJ4UOjZez0x7NzPHWo1BalTrG+E8rq8=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n             <\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptj1FLw0AMx98Fv0NoGShMEdeCe9ROfHEwGD6Pa5p1B9e7kkut9dN7d5ugY4FA7pL8\/vlXReWs0JdcXwGIFkOQVYMX10HljOO7yjXUwJtxtTLwzHjQQigDE6xVn8WtmNvJC3U3hlqF0071eg7Ze3rAizZG2zbgmLLwvWGH5D158EPtkXUv2llgsjQq4++z2z\/ALqiz3fWORZn572nEsFL+UDvFDWxSL5LXaRgGH\/oj1fCpaQSyrbZ0osaczWClOXgAjAYBE1J\/q3iGjxMffaOEXg11ZGUrk6H\/xvJmWS6KfZTM9ylSicvFwyMehS4gzq3kJdZPJZ5TClRUBMoPnuOEdw==\" rel=\"noopener noreferrer\" target=\"_blank\">\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\n<span>Editar Mermaid en VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"dwmLoBg\"><img alt=\"\" class=\"alignnone size-full wp-image-982\" decoding=\"async\" height=\"438\" sizes=\"(max-width: 877px) 100vw, 877px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df388473d4.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df388473d4.png 877w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df388473d4-300x150.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df388473d4-768x384.png 768w\" width=\"877\"\/><\/p>\n<hr \/>\n<h2>Plano del mundo real: Mapa de contenedor de l\u00edmites del sistema empresarial de comercio electr\u00f3nico<\/h2>\n<p>Este plano completo y de m\u00faltiples niveles de contenedor rastrea un ecosistema de comercio electr\u00f3nico en l\u00ednea. Aisla los servidores centrales internos utilizando un <code>Contenedor_Sistema<\/code> contenedor de bloque, implementa retransmisiones de notificaciones externas en la nube mediante <code>System_Ext<\/code>, mapea los almacenes de bases de datos relacionales internas junto con los microservicios externos de seguimiento, y fija los canales de comunicaci\u00f3n usando par\u00e1metros expl\u00edcitos de la pila tecnol\u00f3gica.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptU11v2zAMfB\/Q\/0AEKJACbfOyP5AmAdYia7M42B4DRWJsrYpkkHQ+Nuy\/j7LT1mj7ksg0dUfenSdfJymK8RHp4guAeAkIg9ca3IUGa\/JRYJsIZlGQ9JERZjeTtNshWYRFMKJvd4OLLxljgcQpDm3DkrThGgZPMSgYFFWqa6SBVu4oHRgZrBETUglecMdgogPjHENNyTVWGCSBVOgJnC+9tuoFktvBVeYpTqy31rOjDGtz2mGUdWkED+akBIWQrxHGi3sokPbeYqZdVZ7cTa0YJ7CEzksGdLA3TZCWXpktMvtYAsZSp27JenR3qYnO0GmI9rz\/mm2qUdF7kkwSYRbC71AVG1zB3wwB8CrscEt6xOjWpq7befVGW4NfuIFxXed5H\/Eot7\/5GpZorOTKFIPfq8DAYsRbMMwonXKV\/gTVtGH1LesEnDdJkc+C9elthfY5NbLmTh2FnpxL8N1bSvym2mNy2E4xO9akkLm26HRSOs6uZr1aykOi521Qc9uRrAm20XRom5jjxzGmm2Eih7R2mxyTfIQ5ulL\/ppqMjeF2gEViKQmLH\/PBi1QMldd8kVcKEDKRVSDdFXLSOnJG26gLocMj9YvcixT\/Ok8vL2FMttL0WWlIke5zwM9ICyMV564lhl6a3xn30+OhF9g2Q8GoNtBulu1QcfLc31arRTHqkk\/dGIq8nqZDfJeGT8wp9GVPaw18SMb1N2fYe5N5Hoqnx9FyVqxy+jueF66lLyv5xPueCfnrVWW5D63C5LjpTj6yd60nasboYXo3yWZGbNvedprj9jOaj5\/puJFKTfyTA5KeMepJU1MZKjGHJzAcvFQtX+fmal6MWiG75f4D4gqf5g==\" rel=\"noopener noreferrer\" target=\"_blank\">\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\n<span>Editar Mermaid en VPasCode<\/span>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp9lMFOGzEQhu+VeAcrElKQEFz6AiGJVBClKRu1x9XEOywGr721vSGh6sP02AMnHiEv1n+8CVAU9RR5PJn555t\/Pf449i6RcRwOPiiVNk+ps14NZpZcMtaSqlhJCjuufOCoWgqkcJ3oxoeG1LRpEaZgyPa5DQdtvJpa1ilsnp3RfnDwQarPOETvaKitYVQ8VgNkt4FQWLFTl5snxzRAeLpqrUcbChCkISiitFWa0ua39bVXa0V14JpUG3zV6YQEUrFDRggmeVWZ2iSyJ4Mj6VusY+KmnK7SsKXalzUlfqA1GhUclkbUjmbnor5IwbQsEs42z0uu8viJwh0nEg1Kh82fKndAHINyQOu1anzCDIhBjwaNRgb0uf0bAWe+cxWF9ZCsJqe55FL7RngJC9DZPDWcgldj\/Dv8j+eR+il11ZvVDKm1RhNSXXkTEEbJ0TaEf6nvvJB6cyirMuQrXqWTu3isrpl0ytjRVaDiaJaYiyN4J\/STEWucUBuYOeKXexw73qy62MEEfov8H2VxS7nUt6zvfSfSPhsNdDv8Muj2LkvzFWdpMALMFSU268mqG9vdZT8oIFrQnd9a40WIzp4SyRqcO1jYNG0H9T7uETdZDBcUuawI92XLlal8lP0jKNUmEs8tLs0i5AazPimL8jHBiMXXSzmNbEOagchmJ+9Eukha98huDZA+ByxF9AE2zqGfxubykesu7CD+6t1zeKjGcJTr886hPEhBWeoo\/OhMgjGyL0iyr9m+fmB7PPHNYFHWPL79dkTKNtbPhm2Sq7wM9Wk+nxWnV7SEM8CrV4Ym5cQ\/uD2m27fsqVtunugdi94+Nb3uTDXojncnf4AXxZer0+tpMZdvs+\/60pkD61va56u9u5R3B6BZDE0y3RshZLMUl\/JupTGWeQp\/8CoTvpicjV9nPn8Ebw7V3t7v3pZRhzdBmOIVbaiil4m9Sv6eHa4kqL3L3sEDVMjySc0vi9NMfXD0FxSb\/Ek=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">C4Container\r\n  t\u00edtulo \"Plantilla de Contenedores para Plataforma Empresarial de Comercio Electr\u00f3nico\"\r\n\r\n  Persona(cliente, \"Comprador en L\u00ednea\", \"Explora art\u00edculos del cat\u00e1logo y agrega productos a su carrito digital.\")\r\n  System_Ext(pago_gateway, \"Servicio API de Stripe\", \"B\u00f3veda de tarjetas de cr\u00e9dito de terceros y motor de procesamiento.\")\r\n\r\n  System_Boundary(alcance_e_commerce, \"Per\u00edmetro Central de Comercio Electr\u00f3nico\") {\r\n    Contenedor(aplicacion_front, \"Aplicaci\u00f3n Web de Tienda\", \"Next.js, React\", \"Entrega activos est\u00e1ticos y gestiona sesiones de carrito de usuario.\")\r\n    Contenedor(servicio_checkout, \"Microservicio de Checkout\", \"Node.js, Express\", \"Procesa flujos de trabajo del carrito de compras y calcula impuestos.\")\r\n    ContenedorDb(base_datos_pedidos, \"Base de Datos del Libro de Pedidos\", \"PostgreSQL\", \"Almacena l\u00edneas de transacciones hist\u00f3ricas y registros de libro seguro.\")\r\n  }\r\n\r\n  %% Caminos de Interacci\u00f3n Arquitect\u00f3nica\r\n  Rel(cliente, aplicacion_front, \"Visualiza productos y realiza pedidos usando\", \"HTTPS\/Navegador\")\r\n  Rel_Down(aplicacion_front, servicio_checkout, \"Env\u00eda transacciones de carga de compra mediante\", \"JSON\/REST API\")\r\n  \r\n  Rel_Derecha(servicio_checkout, base_datos_pedidos, \"Persiste estados transaccionales dentro de\", \"SQL\/Conexi\u00f3n JDBC\")\r\n  Rel_Izquierda(servicio_checkout, pago_gateway, \"Autoriza llamadas de cargo tokenizadas con\", \"API Segura TLS\/HTTPS\")<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp9lMFOGzEQhu+VeAcrElKQEFz6AiGJVBClKRu1x9XEOywGr721vSGh6sP02AMnHiEv1n+8CVAU9RR5PJn555t\/Pf449i6RcRwOPiiVNk+ps14NZpZcMtaSqlhJCjuufOCoWgqkcJ3oxoeG1LRpEaZgyPa5DQdtvJpa1ilsnp3RfnDwQarPOETvaKitYVQ8VgNkt4FQWLFTl5snxzRAeLpqrUcbChCkISiitFWa0ua39bVXa0V14JpUG3zV6YQEUrFDRggmeVWZ2iSyJ4Mj6VusY+KmnK7SsKXalzUlfqA1GhUclkbUjmbnor5IwbQsEs42z0uu8viJwh0nEg1Kh82fKndAHINyQOu1anzCDIhBjwaNRgb0uf0bAWe+cxWF9ZCsJqe55FL7RngJC9DZPDWcgldj\/Dv8j+eR+il11ZvVDKm1RhNSXXkTEEbJ0TaEf6nvvJB6cyirMuQrXqWTu3isrpl0ytjRVaDiaJaYiyN4J\/STEWucUBuYOeKXexw73qy62MEEfov8H2VxS7nUt6zvfSfSPhsNdDv8Muj2LkvzFWdpMALMFSU268mqG9vdZT8oIFrQnd9a40WIzp4SyRqcO1jYNG0H9T7uETdZDBcUuawI92XLlal8lP0jKNUmEs8tLs0i5AazPimL8jHBiMXXSzmNbEOagchmJ+9Eukha98huDZA+ByxF9AE2zqGfxubykesu7CD+6t1zeKjGcJTr886hPEhBWeoo\/OhMgjGyL0iyr9m+fmB7PPHNYFHWPL79dkTKNtbPhm2Sq7wM9Wk+nxWnV7SEM8CrV4Ym5cQ\/uD2m27fsqVtunugdi94+Nb3uTDXojncnf4AXxZer0+tpMZdvs+\/60pkD61va56u9u5R3B6BZDE0y3RshZLMUl\/JupTGWeQp\/8CoTvpicjV9nPn8Ebw7V3t7v3pZRhzdBmOIVbaiil4m9Sv6eHa4kqL3L3sEDVMjySc0vi9NMfXD0FxSb\/Ek=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n             <\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptU11v2zAMfB\/Q\/0AEKJACbfOyP5AmAdYia7M42B4DRWJsrYpkkHQ+Nuy\/j7LT1mj7ksg0dUfenSdfJymK8RHp4guAeAkIg9ca3IUGa\/JRYJsIZlGQ9JERZjeTtNshWYRFMKJvd4OLLxljgcQpDm3DkrThGgZPMSgYFFWqa6SBVu4oHRgZrBETUglecMdgogPjHENNyTVWGCSBVOgJnC+9tuoFktvBVeYpTqy31rOjDGtz2mGUdWkED+akBIWQrxHGi3sokPbeYqZdVZ7cTa0YJ7CEzksGdLA3TZCWXpktMvtYAsZSp27JenR3qYnO0GmI9rz\/mm2qUdF7kkwSYRbC71AVG1zB3wwB8CrscEt6xOjWpq7befVGW4NfuIFxXed5H\/Eot7\/5GpZorOTKFIPfq8DAYsRbMMwonXKV\/gTVtGH1LesEnDdJkc+C9elthfY5NbLmTh2FnpxL8N1bSvym2mNy2E4xO9akkLm26HRSOs6uZr1aykOi521Qc9uRrAm20XRom5jjxzGmm2Eih7R2mxyTfIQ5ulL\/ppqMjeF2gEViKQmLH\/PBi1QMldd8kVcKEDKRVSDdFXLSOnJG26gLocMj9YvcixT\/Ok8vL2FMttL0WWlIke5zwM9ICyMV564lhl6a3xn30+OhF9g2Q8GoNtBulu1QcfLc31arRTHqkk\/dGIq8nqZDfJeGT8wp9GVPaw18SMb1N2fYe5N5Hoqnx9FyVqxy+jueF66lLyv5xPueCfnrVWW5D63C5LjpTj6yd60nasboYXo3yWZGbNvedprj9jOaj5\/puJFKTfyTA5KeMepJU1MZKjGHJzAcvFQtX+fmal6MWiG75f4D4gqf5g==\" rel=\"noopener noreferrer\" target=\"_blank\">\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\n<span>Editar Mermaid en VPasCode<\/span>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"iepSRLk\"><img alt=\"\" class=\"alignnone size-full wp-image-983\" decoding=\"async\" height=\"863\" sizes=\"(max-width: 1746px) 100vw, 1746px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df3944f3b6.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df3944f3b6.png 1746w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df3944f3b6-300x148.png 300w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df3944f3b6-1024x506.png 1024w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df3944f3b6-768x380.png 768w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df3944f3b6-1536x759.png 1536w\" width=\"1746\"\/><\/p>\n<hr \/>\n<h2>Errores comunes de sintaxis y restricciones del sistema<\/h2>\n<p>Al compilar mapas C4 limpios para marcos de software, ten cuidado con estos par\u00e1metros de ejecuci\u00f3n para evitar que los diagramas se da\u00f1en:<\/p>\n<ul>\n<li><strong>Formato de separadores de coma:<\/strong> A diferencia de casi cualquier otro esquema de Mermaid, los macros C4 requieren comas estrictas entre los par\u00e1metros: <code>Persona(id, \"Etiqueta\", \"Desc\")<\/code>. Olvidar una coma separadora har\u00e1 que el constructor de dise\u00f1o falle por completo.<\/li>\n<li><strong>Comillas reservadas para etiquetas:<\/strong> Los campos de visualizaci\u00f3n, etiquetas t\u00e9cnicas y bloques de descripci\u00f3n dentro de los macros *deben* estar envueltos en comillas dobles claras. Incluir textos sin envolver entre comillas provoca errores de an\u00e1lisis que rompen el proceso.<\/li>\n<li><strong>Orden de anidamiento de l\u00edmites:<\/strong> Cuando envuelves elementos dentro de un <code>System_Boundary<\/code> o <code>Enterprise_Boundary<\/code> bloque, debes borrar expl\u00edcitamente el contenido de su \u00e1rea de trabajo usando corchetes est\u00e1ndar <code>{ }<\/code>. Dejar un corchete de l\u00edmite abierto o emparejarlos incorrectamente rompe los dise\u00f1os de renderizado.<\/li>\n<li><strong>Instanciaci\u00f3n din\u00e1mica de alias:<\/strong> No puedes dibujar relaciones (<code>Rel<\/code>) a un identificador de alias que no haya sido inicializado expl\u00edcitamente por un bloque de macro de elemento por encima. Mant\u00e9n tu flujo de declaraci\u00f3n avanzando progresivamente de arriba hacia abajo.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"Un diagrama C4 es un m\u00e9todo estandarizado de visualizaci\u00f3n arquitect\u00f3nica dise\u00f1ado para modelar sistemas de software a m\u00faltiples niveles de abstracci\u00f3n estructural. Integrado nativamente en Mermaid.js, el c4motor sigue los cuatro niveles centrales del modelo C4: Contexto (el macroecosistema), Contenedores&#8230;","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":24,"template":"","meta":{"_yoast_wpseo_title":"Mermaid C4 Model Syntax | VPasCode Text to Diagram Guide","_yoast_wpseo_metadesc":"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile diagram-as-code tool.","inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"source_url":"","fifu_image_url":"","fifu_image_alt":"","_fifu_image_alt":"","fifu_alt":"","_fifu_alt":"","fifu_image_title":"","_fifu_image_title":"","fifu_input_alt":"","vp_image_hash":""},"ld_collection":[14],"class_list":["post-2080","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Mermaid C4 Model Syntax | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile diagram-as-code tool.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mermaid C4 Model Syntax | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/\",\"name\":\"Mermaid C4 Model Syntax | VPasCode Text to Diagram Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4df36e38f3c.png\",\"datePublished\":\"2026-07-08T06:48:07+00:00\",\"description\":\"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4df36e38f3c.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/img_6a4df36e38f3c.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/mermaid-js-playbook\\\/mermaid-js-c4-diagram-syntax-architecture-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Sintaxis de diagrama C4 de Mermaid.js y gu\u00eda de arquitectura\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mermaid C4 Model Syntax | VPasCode Text to Diagram Guide","description":"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile diagram-as-code tool.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/","og_locale":"es_ES","og_type":"article","og_title":"Mermaid C4 Model Syntax | VPasCode Text to Diagram Guide","og_description":"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/","url":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/","name":"Mermaid C4 Model Syntax | VPasCode Text to Diagram Guide","isPartOf":{"@id":"https:\/\/www.vpascode.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.png","datePublished":"2026-07-08T06:48:07+00:00","description":"Build C4 context and container diagrams quickly using Mermaid syntax in VPasCode, a versatile diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/07\/img_6a4df36e38f3c.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-c4-diagram-syntax-architecture-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/es\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/es\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"Sintaxis de diagrama C4 de Mermaid.js y gu\u00eda de arquitectura"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/es\/#website","url":"https:\/\/www.vpascode.com\/es\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/es\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.vpascode.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/es\/wp-content\/uploads\/sites\/5\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/es\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_docs\/2080","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/users\/3"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/media?parent=2080"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_collection?post=2080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}