{"id":2120,"date":"2026-05-26T07:53:11","date_gmt":"2026-05-26T07:53:11","guid":{"rendered":"https:\/\/www.vpascode.com\/es\/docs\/uncategorized\/plantuml-c4-model-syntax-guide\/"},"modified":"2026-05-26T07:53:11","modified_gmt":"2026-05-26T07:53:11","slug":"plantuml-c4-model-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/","title":{"rendered":"Gu\u00eda de sintaxis del modelo C4 de PlantUML"},"content":{"rendered":"<h2>\u00bfQu\u00e9 es el diagrama del modelo C4?<\/h2>\n<p>La <strong>Diagrama del modelo C4<\/strong> es un marco arquitect\u00f3nico jer\u00e1rquico de cuatro niveles dise\u00f1ado para documentar la arquitectura de software con diferentes grados de detalle. Creado por Simon Brown, el C4 evita cuadros y l\u00edneas ambiguas al estructurar los mapas del sistema en cuatro lentes de abstracci\u00f3n expl\u00edcitas: <strong>Contexto<\/strong> (alcance a nivel de sistema), <strong>Contenedor<\/strong> (aplicaciones y almacenes de datos), <strong>Componente<\/strong> (m\u00f3dulos internos), y <strong>C\u00f3digo<\/strong> (implementaciones a nivel de clase).<\/p>\n<p>Para implementar este modelo de forma eficaz en texto, los ingenieros utilizan la extensi\u00f3n oficial <code>C4-PlantUML<\/code> biblioteca est\u00e1ndar de extensiones. Esta biblioteca reemplaza las formas UML crudas con macros especializadas que inyectan autom\u00e1ticamente colores distintos, formas y campos de metadatos para usuarios, sistemas y bases de datos. Con <strong>VPasCode<\/strong>, puedes definir estos entornos anidados de forma limpia en c\u00f3digo. El motor de dise\u00f1o enruta din\u00e1micamente los vectores de conexi\u00f3n y escala los campos de texto sin arruinar la geometr\u00eda de tu dise\u00f1o.<\/p>\n<h2>Gu\u00eda de sintaxis principal: elementos y construcciones<\/h2>\n<p>Construir un modelo C4 v\u00e1lido usando PlantUML depende de importar los archivos de biblioteca correctos, seleccionar macros estructurales, establecer l\u00edmites y utilizar enlaces de relaciones especializados.<\/p>\n<h3>1. Importaci\u00f3n de los archivos de la biblioteca est\u00e1ndar C4<\/h3>\n<p>La <code>C4-PlantUML<\/code>extensi\u00f3n se divide en archivos individuales que se corresponden directamente con los niveles distintos del modelo de abstracci\u00f3n. Para evitar retrasos en el rendimiento o errores del compilador, solo debes importar la capa de archivo espec\u00edfica que tu diagrama requiere:<\/p>\n<pre class=\"lang-plantuml\"><code>@startuml\r\n' Incluir el archivo de capa C4 espec\u00edfico requerido\r\n!include &lt;C4\/C4_Context&gt;\r\n' Usa C4_Container o C4_Component para mapas arquitect\u00f3nicos m\u00e1s profundos<\/code><\/pre>\n<h3>2. Declaraci\u00f3n de actores y sistemas principales (nivel de contexto)<\/h3>\n<p>En el nivel de contexto del sistema a alto nivel, modelas componentes internos, dependencias externas y usuarios humanos. La biblioteca est\u00e1ndar proporciona macros espec\u00edficas que aceptan un ID, una etiqueta visual y una etiqueta descriptiva opcional:<\/p>\n<ul>\n<li><code>Person(id, \"Etiqueta\", \"Descripci\u00f3n\")<\/code> \u2014 Representa un perfil de usuario humano o un actor del sistema.<\/li>\n<li><code>System(id, \"Etiqueta\", \"Descripci\u00f3n\")<\/code> \u2014 Representa una aplicaci\u00f3n de software interna principal o ecosistema de servicios.<\/li>\n<li><code>System_Ext(id, \"Etiqueta\", \"Descripci\u00f3n\")<\/code> \u2014 Representa un sistema externo o dependencia de una API de terceros (se representa con una paleta de colores grises expl\u00edcita).<\/li>\n<\/ul>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Plantuml<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:HS_1IWD130RW-yA-GzpJ5XGlFOgemu8UXC9wNz9fMeCp6PbaRVVjdR4j7fFy-KYUr33R70EuzJG4YYIcRNF3uiEy8tXmw_ioSKcCJlRODXlAcgJtirgAb6-XUq7vOZc0kxIwqdk6Qm2ER9-0yFstXm6s9GxeVPh5kbNRZ8iQnNvxLYPTjEoxb0cky3bHsLUKNI25FGkAvw9PHb7qnadqNvk6a_KHELouuQuMC5B-OKzLUYl_v7hE-Fwn0Kd6U_PO6JYWqH6NRlKB\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\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><br \/>\n<span>Editar Plantuml en VPasCode<\/span><br \/>\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\">Plantuml<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:HOzDIiHG3CVtXTuXTjK1OJQp514VWwk1GdLTuZCZmTSyILAPEPT7y6AcEk8o_uzVaZjpL5_c0catxGlD96vjSyMIo_92S9Dsst1I5QUJtxRDG6fL-hoOrvdq6hfKE4e4aRv7oTY5zYIGBtAk0eiWv2L6XESreepm_WF2qctQPZoRqzo7zyRoEjdPWZ7oAk8lLBb22e168Rm7CkTeGmXYc7CCP71aYJ2JelrZf_t9-ncv_759FpWAwy6fgbA5U3oxVdqAvxhY1pHKAhX6f3eVEUDbnNXu783ZCHNiDjy0\" \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 Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml C4_Elements\r\n!include &lt;C4\/C4_Context&gt;\r\nPerson(customer, \"Cliente de Banca\", \"Un cliente con una cuenta bancaria personal\")\r\nSystem(banking_sys, \"Sistema Bancario Central\", \"Gestiona transacciones financieras\")\r\nSystem_Ext(mail_sys, \"Servicio de Correo Electr\u00f3nico\", \"Pasarela de notificaciones SMTP interna\")<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:HOzDIiHG3CVtXTuXTjK1OJQp514VWwk1GdLTuZCZmTSyILAPEPT7y6AcEk8o_uzVaZjpL5_c0catxGlD96vjSyMIo_92S9Dsst1I5QUJtxRDG6fL-hoOrvdq6hfKE4e4aRv7oTY5zYIGBtAk0eiWv2L6XESreepm_WF2qctQPZoRqzo7zyRoEjdPWZ7oAk8lLBb22e168Rm7CkTeGmXYc7CCP71aYJ2JelrZf_t9-ncv_759FpWAwy6fgbA5U3oxVdqAvxhY1pHKAhX6f3eVEUDbnNXu783ZCHNiDjy0\" \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 Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:HS_1IWD130RW-yA-GzpJ5XGlFOgemu8UXC9wNz9fMeCp6PbaRVVjdR4j7fFy-KYUr33R70EuzJG4YYIcRNF3uiEy8tXmw_ioSKcCJlRODXlAcgJtirgAb6-XUq7vOZc0kxIwqdk6Qm2ER9-0yFstXm6s9GxeVPh5kbNRZ8iQnNvxLYPTjEoxb0cky3bHsLUKNI25FGkAvw9PHb7qnadqNvk6a_KHELouuQuMC5B-OKzLUYl_v7hE-Fwn0Kd6U_PO6JYWqH6NRlKB\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\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><br \/>\n<span>Editar Plantuml en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"USSGhTV\"><img fetchpriority=\"high\" alt=\"\" class=\"alignnone size-full wp-image-608\" decoding=\"async\" fetchpriority=\"high\" height=\"316\" sizes=\"(max-width: 461px) 100vw, 461px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1901f8a8e4e.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1901f8a8e4e.png 461w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1901f8a8e4e-300x206.png 300w\" width=\"461\"\/><\/p>\n<h3>3. L\u00edmites explotados (niveles de contenedor y componente)<\/h3>\n<p>Cuando profundizas m\u00e1s en la capa de contenedor, modelas aplicaciones web, microservicios y bases de datos. Puedes aislar estos elementos internos dentro de una caja de l\u00edmite l\u00f3gico expl\u00edcito usando el<code>System_Boundary()<\/code>envoltura de macro:<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Plantuml<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:NOrFQyCm3CNlWNm7DOUHmi8Oz3W6MzfR3zsyUr1iDHCujf6TbZ3stUTaVmxJHNfFqkzjs6ax6OA7TdVNxhhMkuJiI1xBeYpK71EDtREVd46PQtr_2zMXQVquacY2xpqSj6_YEbPR-2WBoFK7gg_KTnX2_bJi1alD2GU2fn0iQqpiNPLNhuGwmGsypO6K5WvfSK_YBsmemXH9u4oO9idgmWYPcZjTg-s_l7rV6qpOOwILQzSCjB3_SLUmZsaGKY_7HQdavJSaY3-p9K1dm98PilNECHymnINhymi0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\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><br \/>\n<span>Editar Plantuml en VPasCode<\/span><br \/>\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\">Plantuml<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:NOx1IiGm48RlXRx3s8FiWY327aNOhNlpeDPxcQQptO4q2PDKAUB3-0pUlFR5d2ooeBbaycVc--Q2dR5JJt1RRwxhJLjxbv0ToLrPb4KpnqHZk_EJwr7cbRcvWcflVEIS8_HaeJdNKFkHnB27lIMJPFboR7orXlUo03rdzkgDkXP3KDWsM3PeM7ip8IoV0pk4vLj7iTA6PqAJu19Uva2D4Guffu_YWyygxJrCBXSKCs2A4ufkC5BFw1B1gww7eC9g_M-B-sxLOy8E8obnfrS6QEGZ25ayqUt9vcCQX9gdX_pQsX4DgJYG7DZ-zH8SLUY5yVT3QD10VCp-Zny0\" \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 Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">!include &lt;C4\/C4_Container&gt;\r\n\r\nSystem_Boundary(c1, \"Ecosistema del Sistema de Comercio Electr\u00f3nico\") {\r\n    Container(web_app, \"Aplicaci\u00f3n de p\u00e1gina \u00fanica\", \"React &amp; TypeScript\", \"Proporciona funciones de usuario mediante vista web\")\r\n    ContainerDb(database, \"Base de datos relacional\", \"PostgreSQL\", \"Almacena perfiles de usuario e historiales de registros\")\r\n}<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:NOx1IiGm48RlXRx3s8FiWY327aNOhNlpeDPxcQQptO4q2PDKAUB3-0pUlFR5d2ooeBbaycVc--Q2dR5JJt1RRwxhJLjxbv0ToLrPb4KpnqHZk_EJwr7cbRcvWcflVEIS8_HaeJdNKFkHnB27lIMJPFboR7orXlUo03rdzkgDkXP3KDWsM3PeM7ip8IoV0pk4vLj7iTA6PqAJu19Uva2D4Guffu_YWyygxJrCBXSKCs2A4ufkC5BFw1B1gww7eC9g_M-B-sxLOy8E8obnfrS6QEGZ25ayqUt9vcCQX9gdX_pQsX4DgJYG7DZ-zH8SLUY5yVT3QD10VCp-Zny0\" \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 Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:NOrFQyCm3CNlWNm7DOUHmi8Oz3W6MzfR3zsyUr1iDHCujf6TbZ3stUTaVmxJHNfFqkzjs6ax6OA7TdVNxhhMkuJiI1xBeYpK71EDtREVd46PQtr_2zMXQVquacY2xpqSj6_YEbPR-2WBoFK7gg_KTnX2_bJi1alD2GU2fn0iQqpiNPLNhuGwmGsypO6K5WvfSK_YBsmemXH9u4oO9idgmWYPcZjTg-s_l7rV6qpOOwILQzSCjB3_SLUmZsaGKY_7HQdavJSaY3-p9K1dm98PilNECHymnINhymi0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\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><br \/>\n<span>Editar Plantuml en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"GZPysCa\"><img alt=\"\" class=\"alignnone size-full wp-image-609\" decoding=\"async\" height=\"223\" sizes=\"(max-width: 473px) 100vw, 473px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902094851f.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902094851f.png 473w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1902094851f-300x141.png 300w\" width=\"473\"\/><\/p>\n<h3>4. Mapeo de relaciones t\u00e9cnicas<\/h3>\n<p>En lugar de depender de l\u00edneas punteadas b\u00e1sicas, C4 utiliza un formato de macros de comunicaci\u00f3n expl\u00edcito como<code>Rel(From_ID, To_ID, \"Etiqueta\", \"Tecnolog\u00eda\")<\/code>. Esto mantiene tus mapas de arquitectura altamente legibles al exigir que cada conexi\u00f3n indique su prop\u00f3sito y el protocolo de transporte subyacente (por ejemplo, HTTPS, gRPC o AMQP):<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Plantuml<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:LPB1QkD038Rl1h-3ciFYG4DPwB4KMZVGXLrmr-uvo6FP5PtCc9bnNBFikrVZE6dZoo0XVVf_oLTib1uQWhlyzYQ_tUNM16H3xZvDqgGWvwt9rE23tPExXjKZcdSs7UHBQYMv1pWLmCZX3H3wkGyrr58Eg9GTJ5YjqwISVA1zLXyfEpzvwS-j8pY1ZnKH-uocqUIXPOD6iT22G-DH1RR6Vz5ssu-GxP7rWjjkOW0bkGChYgHV9f2BSie_LG761cvPOSH0Xu56d2Bjp7iKjGswALC_Prnkz-9DqQ8Djifk_57c6lwb2SXttbisKht3lfVEKlnesXJO4JpqlLvcHaL_IMp03wYcdahbk0ynMpXxu4Oi3rvssHA6mKbqO0IXoajZ57enxwdE6WnOewUPg-SPulLfoSvWwqFdg7pv7QCoM7SQqZlRiYQGNOEcffFK6yin7TEyulzf8inlVy2NlLSla5XAhHCr5thd-rLLKKP619pRBiHYu-V9e-CWZT_kAmPYvOaboc-gl5YjFm40\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\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><br \/>\n<span>Editar Plantuml en VPasCode<\/span><br \/>\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\">Plantuml<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:NPB1Rjim38Rl1lmER0w30nGe1lGu36ZSe3jqW5Uxvu2McPIeB1cItCqRzZ1xXjrspOkDqbmtMIwEAFBx-PEwOAFqs15yAA-lokjTQKr0DkG-vbcULUIyDOKQVR0zkKjObPh910AfsA1Hk9BOem4rXvKrC1e4DSeHeOqfZX6614AzMkTPFVb0VI5tpsmEEpzvOTGSW_WFwjX2AG0d1N9tHpwmL8C4Z4Ubv40UzcmacScXVyFkjjz2qIFhLowv5vQ2s71fdICBMqqgkEDlmyf6V8KU7McCASO6thF2MQB-t5J0OimPZ1gBoiQEfaCt5Ugz4BRA-hd_ZZJKot-HbB55-JFHDVp8Cv3VCktYAxKx70Q1tGmwDI2vaJ0SVnt4A1p_I6aQzmEX2l0EcccWMZaUGdBXx62ZbEJkHpCR4C3enpJGdZh6kACNQGz11AEZiovkswB3W2rw4k96FX4W8UiXJYZHqqegwyF1KVtbFfvkT8-AJ5hpdlMvBi6J25fv1VE5euC4d4rR-vbd3wHFNjZR81u3Q_x-dviWxwp3nKnK_zGqLHrP4RIKdnYv9u89oCkisbSx9qyfzNKA55TNJLcjrdy1\" \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 Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">!include &lt;C4\/C4_Container&gt;\r\n\r\nPerson(customer, \"Cliente de Banca\", \"Un cliente con una cuenta bancaria personal\")\r\nSystem(banking_sys, \"Sistema Bancario Central\", \"Gestiona transacciones financieras\")\r\nSystem_Ext(mail_sys, \"Servicio de Correo Electr\u00f3nico\", \"Pasarela de notificaciones SMTP interna\")\r\n\r\nSystem_Boundary(c1, \"Ecosistema del Sistema de Comercio Electr\u00f3nico\") {\r\n    Container(web_app, \"Aplicaci\u00f3n de p\u00e1gina \u00fanica\", \"React &amp; TypeScript\", \"Proporciona funciones de usuario mediante vista web\")\r\n    ContainerDb(database, \"Base de datos relacional\", \"PostgreSQL\", \"Almacena perfiles de usuario e historiales de registros\")\r\n}\r\nRel(customer, web_app, \"Utiliza funciones de tienda mediante\", \"HTTPS\")\r\nRel(web_app, database, \"Lee y escribe datos transaccionales mediante\", \"SQL\/TCP\")<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:NPB1Rjim38Rl1lmER0w30nGe1lGu36ZSe3jqW5Uxvu2McPIeB1cItCqRzZ1xXjrspOkDqbmtMIwEAFBx-PEwOAFqs15yAA-lokjTQKr0DkG-vbcULUIyDOKQVR0zkKjObPh910AfsA1Hk9BOem4rXvKrC1e4DSeHeOqfZX6614AzMkTPFVb0VI5tpsmEEpzvOTGSW_WFwjX2AG0d1N9tHpwmL8C4Z4Ubv40UzcmacScXVyFkjjz2qIFhLowv5vQ2s71fdICBMqqgkEDlmyf6V8KU7McCASO6thF2MQB-t5J0OimPZ1gBoiQEfaCt5Ugz4BRA-hd_ZZJKot-HbB55-JFHDVp8Cv3VCktYAxKx70Q1tGmwDI2vaJ0SVnt4A1p_I6aQzmEX2l0EcccWMZaUGdBXx62ZbEJkHpCR4C3enpJGdZh6kACNQGz11AEZiovkswB3W2rw4k96FX4W8UiXJYZHqqegwyF1KVtbFfvkT8-AJ5hpdlMvBi6J25fv1VE5euC4d4rR-vbd3wHFNjZR81u3Q_x-dviWxwp3nKnK_zGqLHrP4RIKdnYv9u89oCkisbSx9qyfzNKA55TNJLcjrdy1\" \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 Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:LPB1QkD038Rl1h-3ciFYG4DPwB4KMZVGXLrmr-uvo6FP5PtCc9bnNBFikrVZE6dZoo0XVVf_oLTib1uQWhlyzYQ_tUNM16H3xZvDqgGWvwt9rE23tPExXjKZcdSs7UHBQYMv1pWLmCZX3H3wkGyrr58Eg9GTJ5YjqwISVA1zLXyfEpzvwS-j8pY1ZnKH-uocqUIXPOD6iT22G-DH1RR6Vz5ssu-GxP7rWjjkOW0bkGChYgHV9f2BSie_LG761cvPOSH0Xu56d2Bjp7iKjGswALC_Prnkz-9DqQ8Djifk_57c6lwb2SXttbisKht3lfVEKlnesXJO4JpqlLvcHaL_IMp03wYcdahbk0ynMpXxu4Oi3rvssHA6mKbqO0IXoajZ57enxwdE6WnOewUPg-SPulLfoSvWwqFdg7pv7QCoM7SQqZlRiYQGNOEcffFK6yin7TEyulzf8inlVy2NlLSla5XAhHCr5thd-rLLKKP619pRBiHYu-V9e-CWZT_kAmPYvOaboc-gl5YjFm40\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\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><br \/>\n<span>Editar Plantuml en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"OfOQvLl\"><img alt=\"\" class=\"alignnone size-full wp-image-610\" decoding=\"async\" height=\"692\" sizes=\"(max-width: 744px) 100vw, 744px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a190224848fe.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a190224848fe.png 744w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a190224848fe-300x279.png 300w\" width=\"744\"\/><\/p>\n<h2>Mejores pr\u00e1cticas para arquitecturas C4 legibles<\/h2>\n<ul>\n<li><strong>Nunca mezcles niveles de abstracci\u00f3n:<\/strong>Mant\u00e9n tus diagramas enfocados en una sola capa. No mezcles componentes de software internos de gran detalle en un mapa de contexto de sistema de alto nivel. Si un sistema se vuelve demasiado complejo, div\u00eddelo en un diagrama independiente y dedicado a nivel de contenedor.<\/li>\n<li><strong>Define expl\u00edcitamente las tecnolog\u00edas:<\/strong>Siempre utiliza el cuarto par\u00e1metro en tus<code>Rel()<\/code>macros para indicar la tecnolog\u00eda o protocolo exacto que se est\u00e1 utilizando (por ejemplo, <code>\"JSON\/HTTPS\"<\/code> o <code>\"JDBC\"<\/code>). Esto proporciona a tu equipo un contexto de implementaci\u00f3n crucial a simple vista.<\/li>\n<li><strong>Aprovecha las invalidaciones de dise\u00f1o direccionales:<\/strong> Si tus componentes comienzan a apilarse de forma inc\u00f3moda, utiliza macros de relaci\u00f3n direccionales (como <code>Rel_D()<\/code> para abajo, <code>Rel_R()<\/code> para la derecha, o <code>Rel_L()<\/code> para la izquierda) para limpiar manualmente tu flujo arquitect\u00f3nico.<\/li>\n<\/ul>\n<h2>Ejemplos reales de PlantUML C4<\/h2>\n<h3>Ejemplo 1: Dise\u00f1o de contexto de sistema de alto nivel (Nivel 1)<\/h3>\n<p>Este plano funcional modela un diagrama est\u00e1ndar de contexto de sistema de nivel 1, detallando c\u00f3mo un cliente interact\u00faa con una aplicaci\u00f3n de banca en l\u00ednea y sus dependencias externas.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Plantuml<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TL9BJy904ButwNyOEM7YuyBH6BGIuy6409wRQJk52TjTiZC5_FTEoqCCyTRT-Pwp7OjYrBPnQNB3ldHjHV2KZHwpKPu5hxJNvpH94sLr1FDlKMhWE80tncN41keGuSEkeYU5L_HhziiZjkDEAKhmmx8L3Gt5EnWSRj2TmTbnDh3X2voG46hG5K5XADYnhc1p8c9PXjQhF0nkq-HWDImEOhdqHrFw9rDlubpOoTb9G0DicNPGiqTVibcmhmEWhw31DO56z58Ryi8nd-nrs22xNyl9VNU6ULl8sMjX5RYFOghKVMmYYssJVFKUkO8on4s8g0GzMIXkhRozXId4tYzDPkGkDdXLzKj887Z7dg12MHK1OsMDi6CRDvzThUTly2wC03gAAdrhYy0rbwWSl2MiJByLutUDvf-BQISyDfBzEZy0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\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><br \/>\n<span>Editar Plantuml en VPasCode<\/span><br \/>\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\">Plantuml<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TLAnJiD03DqZvHzCfo8XM3eYLAbKJ4Y8qhboBsvbSV55lalLya-Tkh7cn_2bK8g09Rgptxtt_9nnJAYfhNrPNB0utrO4jvFHpMIqc0H9j4rtPL4MYPCdk6TSAzO81dB7RiZdo36HbHjK1FAdkxMMACvg0hxR2s7cUYADGOQkZIdKf5Smc7WcO_l6Dpq4_S2QSm5twliU4B8wkDQA64zWYjU3oxAOxRBuq72lBEj5xA_6C_lNL5OnKpMR188FyKimmeOKM5P1QtJS7GHMBFQOoGRTWH9wVaE5f2XnHKhMmdCRY-as3MjaV-QZNPxbuu8g1GkDN58JO1UodQat3zsxmRGFc7J3LL1pP0-Qe9XuOpxPJAhOuMycc95K3yfLxdkRk6wC0dj_PV5C_cm9l_AQ9yx3vNqsAFOzvGKrLOmcdNcCPV7yA-sV8qzbq-qHR4MQ5xO3rnqgNXzzMyIyOlUPRnjHgZw2sUFBKnOOsmpsVtu0\" \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 Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\n!include &lt;C4\/C4_Context&gt;\r\n\r\ntitle Diagrama de contexto de sistema para el sistema de banca en l\u00ednea\r\n\r\nPerson(customer, \"Cliente de banca personal\", \"Un cliente del banco con cuentas personales.\")\r\nSystem(banking_system, \"Sistema de banca en l\u00ednea\", \"Permite a los clientes ver informaci\u00f3n financiera y realizar transferencias.\")\r\nSystem_Ext(mail_system, \"Subsistema de correo electr\u00f3nico\", \"El cl\u00faster de servidores corporativos internos de correo electr\u00f3nico SendGrid de la empresa.\")\r\n\r\nRel(customer, banking_system, \"Utiliza el panel en l\u00ednea mediante\")\r\nRel_R(banking_system, mail_system, \"Env\u00eda alertas y c\u00f3digos de verificaci\u00f3n usando\", \"SMTP\")\r\n@enduml<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TLAnJiD03DqZvHzCfo8XM3eYLAbKJ4Y8qhboBsvbSV55lalLya-Tkh7cn_2bK8g09Rgptxtt_9nnJAYfhNrPNB0utrO4jvFHpMIqc0H9j4rtPL4MYPCdk6TSAzO81dB7RiZdo36HbHjK1FAdkxMMACvg0hxR2s7cUYADGOQkZIdKf5Smc7WcO_l6Dpq4_S2QSm5twliU4B8wkDQA64zWYjU3oxAOxRBuq72lBEj5xA_6C_lNL5OnKpMR188FyKimmeOKM5P1QtJS7GHMBFQOoGRTWH9wVaE5f2XnHKhMmdCRY-as3MjaV-QZNPxbuu8g1GkDN58JO1UodQat3zsxmRGFc7J3LL1pP0-Qe9XuOpxPJAhOuMycc95K3yfLxdkRk6wC0dj_PV5C_cm9l_AQ9yx3vNqsAFOzvGKrLOmcdNcCPV7yA-sV8qzbq-qHR4MQ5xO3rnqgNXzzMyIyOlUPRnjHgZw2sUFBKnOOsmpsVtu0\" \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 Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TL9BJy904ButwNyOEM7YuyBH6BGIuy6409wRQJk52TjTiZC5_FTEoqCCyTRT-Pwp7OjYrBPnQNB3ldHjHV2KZHwpKPu5hxJNvpH94sLr1FDlKMhWE80tncN41keGuSEkeYU5L_HhziiZjkDEAKhmmx8L3Gt5EnWSRj2TmTbnDh3X2voG46hG5K5XADYnhc1p8c9PXjQhF0nkq-HWDImEOhdqHrFw9rDlubpOoTb9G0DicNPGiqTVibcmhmEWhw31DO56z58Ryi8nd-nrs22xNyl9VNU6ULl8sMjX5RYFOghKVMmYYssJVFKUkO8on4s8g0GzMIXkhRozXId4tYzDPkGkDdXLzKj887Z7dg12MHK1OsMDi6CRDvzThUTly2wC03gAAdrhYy0rbwWSl2MiJByLutUDvf-BQISyDfBzEZy0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\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><br \/>\n<span>Editar Plantuml en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"NTJPRPC\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-611\" decoding=\"async\" height=\"439\" loading=\"lazy\" sizes=\"auto, (max-width: 561px) 100vw, 561px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a190234b2052.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a190234b2052.png 561w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a190234b2052-300x235.png 300w\" width=\"561\"\/><\/p>\n<p><strong>Desglose de sintaxis:<\/strong> Este diagrama se centra \u00fanicamente en el alcance de alto nivel. La <code>System_Ext<\/code> macro aplica autom\u00e1ticamente un perfil de color gris al servicio de correo electr\u00f3nico, separ\u00e1ndolo visualmente del sistema principal y sus dependencias externas. La <code>Rel_R<\/code> macro obliga al motor de dise\u00f1o a colocar el nodo de correo directamente a la derecha del bloque del sistema bancario.<\/p>\n<h3>Ejemplo 2: Topolog\u00eda de contenedores de microservicios con profundidad (Nivel 2)<\/h3>\n<p>Este plano avanzado de la empresa descompone un sistema en sus aplicaciones contenedoras constituyentes y almacenes de datos aislados, mostrando c\u00f3mo el tr\u00e1fico web fluye a trav\u00e9s de una puerta de enlace de API hasta los microservicios del backend.<\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Plantuml<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TLHTRzf047n7uZziUMY9b3PIbSUgIW9jIfGF5wFsqLgV5tFA-SwwMqEigF-zUxP38Kfv07bzDpExCyj5OFJSL6OyUgUjCar1y6LsVZOxpsRECcfB_kjuD1wnPaEmhy5SO-cnWhNpa61RaML8d6SqS8rCEspZhOHyS7PQaLSRj7mAaz-KmztmA1Sz2zX4wWlB981C0Mg3BB0Lg0sfHzSma2rgfoq7a2y7l27jOKTvq7B-q-GaKgLjOAgoAzVO0dqxhJinML2k9i5_qJY8Ws_AXUx6v0IUnoEGpxwvATOwA_k3SlKoMS1IP6XRGkBTKnlrtfVQFhq8zuhgJbmUsK6XCU4KfCN2I3-nAp2wqd94If2ZGQlaXNN58FyLVSERB93VQXMbBmeHhhc5Ewsy6-gH-jh1UtYubDEVu-ClDBhe9bZGbepqxI5gP_T8jgVkfl4M9J_P0yQLHnjGiNOMRgaeUujkS8kGrZxEuSevZZMPXtGIeclzW7kU2YsMKZJTPK2bP33y1l4yd_PdiY8Nk9uCviWOsFckovbJZzwXsiolkdbNjQ6UgT21lSuRfW8kPulvH-NafOx9Oimbha4IL65F-oU6v4Dd905xNA-rWhLnkm3A45hJYamPRvSnybQ2hFPfboKfYSDuj2HpaERZdAHDtdayJ2B-6eT5WAt6gFp7QfMaPpVfmttK8qZP_3Xfhtp_vwTifglYs0Sh1y1ocSp-0tNivtVdT-X5oNwZUdE30Bu6MXvduT2TkCqoyhsjqgJNj9UJ_hmzMzsc4UX2DbR-LFu2\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\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><br \/>\n<span>Editar Plantuml en VPasCode<\/span><br \/>\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\">Plantuml<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TLJDJjj04Bv7oZjiSsY3X8fKSQmgGe9Q4ALfZ7grnkk96LZlcjrr8AhwC1mvy0Az-iKwumMK0Ct5zlvyV_jj3a847zlQ30Vlo6hJbgW-J_VtfllvrDa8PD5_6Gw6WqZHe9eHL1vgKBnCypnQB9t7e1hme0oefaKV-scq1ZJocr6Dup4ZWmrKBWZS77rmTboZrnTWuwuQPKwJOr0P8bvzWyM8Xu-Pf19inoIjZVnOaWN3d8zuyXHc0n6MphCuj2gqGGMAnCiPwEDeHqYpTOXOvuUkjINuzJZfoeDs3JBLaNQ1P4Ml_mqdIVveH_qU3XJ_dXCQGqDv1H5lOCr0S-zkrscdRoFKXAnRlYVpO_5qLf6zVJBdDJRCOmp7MaBWFT5p8XXsLGqMBtcgUwWf9iCH0gYrmkkM31MSYtMb2xs_5uhQU947z2lIukqxQU_I9_LIg6GYAg4K7L-TUgz-J7ZB9_dy1OPd-iYZkq8RcB6xgmkIz9CDUPGOm7l7oliEl24YtjeD3QSikESMWm4qAx4OXF04Lg2onfEjrA5pSPH2r4oGCcS15GO-JWjAjwmSUY4IWNlDEol61iiAVLuMZ3GnDUZktlQQ8NamQQyGJPs-yWxqnUomFvEwCLWBXS9mtN8R7eClZBnnGJmLBSbHSLaRY5H86VasgCdqUDQh-IDj-w0MRKmfBarxcQABlhjRakvZI6KrL3S42YILLNUVVF5YLrnYf1M_aRJ4flsRbsuuMA3Pk4BR9Joog-w1qm9ViTJkRwJDErDZIT8oSVpj_7oUxPraFyv4EsFci-r2l-ZIwteyTtOBjrhCf_z1t2x60Z69VUf4Sbett6zuYRJORjMhWqOBIKy96mUz9IpxURftVfe9uW7Qal_z_W40\" \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 Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\n!include &lt;C4\/C4_Container&gt;\r\n\r\ntitle Diagrama de contenedores para la puerta de enlace del portal de pagos\r\n\r\nPerson(merchant, \"Socio comercial web\", \"Integra los puntos finales de pago de la plataforma en sus sitios web.\")\r\n\r\nSystem_Boundary(portal_scope, \"Ecosistema de puerta de enlace de pagos\") {\r\n    Container(api_gateway, \"Proxy de enrutamiento de API\", \"Nginx\", \"Intercepta llamadas entrantes, maneja l\u00edmites de tasa y equilibra nodos.\")\r\n    Container(auth_service, \"Microservicio de identidad\", \"Go &amp; OAuth2\", \"Valida los tokens y \u00e1mbitos de API de desarrolladores.\")\r\n    Container(txn_service, \"Libro de transacciones\", \"Java Spring Boot\", \"Procesa pagos y gestiona cuentas de libro.\")\r\n    ContainerDb(ledger_db, \"Almac\u00e9n de datos del libro\", \"CockroachDB\", \"Implementa esquemas de tablas distribuidas compatibles con ACID.\")\r\n}\r\n\r\n' Ruta los flujos de tr\u00e1fico de forma limpia a trav\u00e9s de los objetivos internos de contenedores\r\nRel(merchant, api_gateway, \"Env\u00eda cargas \u00fatiles de pago mediante\", \"HTTPS\/JSON\")\r\nRel_D(api_gateway, auth_service, \"Valida los tokens entrantes mediante\", \"gRPC\")\r\nRel_D(api_gateway, txn_service, \"Reenv\u00eda acciones de compra a\", \"gRPC\")\r\nRel_R(txn_service, ledger_db, \"Almacena entradas del libro mediante\", \"SQL\/TLS\")\r\n@enduml<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TLJDJjj04Bv7oZjiSsY3X8fKSQmgGe9Q4ALfZ7grnkk96LZlcjrr8AhwC1mvy0Az-iKwumMK0Ct5zlvyV_jj3a847zlQ30Vlo6hJbgW-J_VtfllvrDa8PD5_6Gw6WqZHe9eHL1vgKBnCypnQB9t7e1hme0oefaKV-scq1ZJocr6Dup4ZWmrKBWZS77rmTboZrnTWuwuQPKwJOr0P8bvzWyM8Xu-Pf19inoIjZVnOaWN3d8zuyXHc0n6MphCuj2gqGGMAnCiPwEDeHqYpTOXOvuUkjINuzJZfoeDs3JBLaNQ1P4Ml_mqdIVveH_qU3XJ_dXCQGqDv1H5lOCr0S-zkrscdRoFKXAnRlYVpO_5qLf6zVJBdDJRCOmp7MaBWFT5p8XXsLGqMBtcgUwWf9iCH0gYrmkkM31MSYtMb2xs_5uhQU947z2lIukqxQU_I9_LIg6GYAg4K7L-TUgz-J7ZB9_dy1OPd-iYZkq8RcB6xgmkIz9CDUPGOm7l7oliEl24YtjeD3QSikESMWm4qAx4OXF04Lg2onfEjrA5pSPH2r4oGCcS15GO-JWjAjwmSUY4IWNlDEol61iiAVLuMZ3GnDUZktlQQ8NamQQyGJPs-yWxqnUomFvEwCLWBXS9mtN8R7eClZBnnGJmLBSbHSLaRY5H86VasgCdqUDQh-IDj-w0MRKmfBarxcQABlhjRakvZI6KrL3S42YILLNUVVF5YLrnYf1M_aRJ4flsRbsuuMA3Pk4BR9Joog-w1qm9ViTJkRwJDErDZIT8oSVpj_7oUxPraFyv4EsFci-r2l-ZIwteyTtOBjrhCf_z1t2x60Z69VUf4Sbett6zuYRJORjMhWqOBIKy96mUz9IpxURftVfe9uW7Qal_z_W40\" \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 Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TLHTRzf047n7uZziUMY9b3PIbSUgIW9jIfGF5wFsqLgV5tFA-SwwMqEigF-zUxP38Kfv07bzDpExCyj5OFJSL6OyUgUjCar1y6LsVZOxpsRECcfB_kjuD1wnPaEmhy5SO-cnWhNpa61RaML8d6SqS8rCEspZhOHyS7PQaLSRj7mAaz-KmztmA1Sz2zX4wWlB981C0Mg3BB0Lg0sfHzSma2rgfoq7a2y7l27jOKTvq7B-q-GaKgLjOAgoAzVO0dqxhJinML2k9i5_qJY8Ws_AXUx6v0IUnoEGpxwvATOwA_k3SlKoMS1IP6XRGkBTKnlrtfVQFhq8zuhgJbmUsK6XCU4KfCN2I3-nAp2wqd94If2ZGQlaXNN58FyLVSERB93VQXMbBmeHhhc5Ewsy6-gH-jh1UtYubDEVu-ClDBhe9bZGbepqxI5gP_T8jgVkfl4M9J_P0yQLHnjGiNOMRgaeUujkS8kGrZxEuSevZZMPXtGIeclzW7kU2YsMKZJTPK2bP33y1l4yd_PdiY8Nk9uCviWOsFckovbJZzwXsiolkdbNjQ6UgT21lSuRfW8kPulvH-NafOx9Oimbha4IL65F-oU6v4Dd905xNA-rWhLnkm3A45hJYamPRvSnybQ2hFPfboKfYSDuj2HpaERZdAHDtdayJ2B-6eT5WAt6gFp7QfMaPpVfmttK8qZP_3Xfhtp_vwTifglYs0Sh1y1ocSp-0tNivtVdT-X5oNwZUdE30Bu6MXvduT2TkCqoyhsjqgJNj9UJ_hmzMzsc4UX2DbR-LFu2\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\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><br \/>\n<span>Editar Plantuml en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p id=\"ZtGazyC\"><img loading=\"lazy\" alt=\"\" class=\"alignnone size-full wp-image-612\" decoding=\"async\" height=\"728\" loading=\"lazy\" sizes=\"auto, (max-width: 759px) 100vw, 759px\" src=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19024586a43.png\" srcset=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19024586a43.png 759w, https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a19024586a43-300x288.png 300w\" width=\"759\"\/><\/p>\n<p><strong>Desglose de sintaxis:<\/strong> Al utilizar el <code>System_Boundary<\/code> envoltura de macro, los componentes internos se agrupan limpiamente juntos dentro de una caja de per\u00edmetro clara. La macro especializada <code>ContainerDb<\/code> macro representa el almac\u00e9n de datos con un icono expl\u00edcito de cilindro de base de datos, haciendo que la divisi\u00f3n entre las capas de tiempo de ejecuci\u00f3n de c\u00e1lculo y almacenamiento permanente sea clara a simple vista.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00bfQu\u00e9 es el diagrama del modelo C4? La Diagrama del modelo C4 es un marco arquitect\u00f3nico jer\u00e1rquico de cuatro niveles dise\u00f1ado para documentar la arquitectura de software con diferentes grados de detalle. Creado por Simon Brown, el C4 evita cuadros&#8230;<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":12,"template":"","meta":{"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":""}}},"ld_collection":[14],"class_list":["post-2120","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>PlantUML C4 Model Syntax | VPasCode Text to Diagram Guide<\/title>\n<meta name=\"description\" content=\"Map software architecture hierarchies with PlantUML C4 diagrams in VPasCode, your free 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\/plantuml-c4-model-syntax-guide\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"PlantUML C4 Model Syntax | VPasCode Text to Diagram Guide\" \/>\n<meta property=\"og:description\" content=\"Map software architecture hierarchies with PlantUML C4 diagrams in VPasCode, your free diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1901f8a8e4e.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=\"4 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\\\/plantuml-c4-model-syntax-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/plantuml-c4-model-syntax-guide\\\/\",\"name\":\"PlantUML 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\\\/plantuml-c4-model-syntax-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/plantuml-c4-model-syntax-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/img_6a1901f8a8e4e.png\",\"datePublished\":\"2026-05-26T07:53:11+00:00\",\"description\":\"Map software architecture hierarchies with PlantUML C4 diagrams in VPasCode, your free diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/plantuml-c4-model-syntax-guide\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/plantuml-c4-model-syntax-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/plantuml-c4-model-syntax-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/img_6a1901f8a8e4e.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/img_6a1901f8a8e4e.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/es\\\/docs\\\/vpascode-docs\\\/plantuml-c4-model-syntax-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\":\"Gu\u00eda de sintaxis del modelo C4 de PlantUML\"}]},{\"@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":"PlantUML C4 Model Syntax | VPasCode Text to Diagram Guide","description":"Map software architecture hierarchies with PlantUML C4 diagrams in VPasCode, your free 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\/plantuml-c4-model-syntax-guide\/","og_locale":"es_ES","og_type":"article","og_title":"PlantUML C4 Model Syntax | VPasCode Text to Diagram Guide","og_description":"Map software architecture hierarchies with PlantUML C4 diagrams in VPasCode, your free diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/","og_site_name":"VPasCode","og_image":[{"url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1901f8a8e4e.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/","url":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/","name":"PlantUML 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\/plantuml-c4-model-syntax-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1901f8a8e4e.png","datePublished":"2026-05-26T07:53:11+00:00","description":"Map software architecture hierarchies with PlantUML C4 diagrams in VPasCode, your free diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/plantuml-c4-model-syntax-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1901f8a8e4e.png","contentUrl":"https:\/\/www.vpascode.com\/wp-content\/uploads\/2026\/05\/img_6a1901f8a8e4e.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/plantuml-c4-model-syntax-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":"Gu\u00eda de sintaxis del modelo C4 de PlantUML"}]},{"@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\/2120","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\/4"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/media?parent=2120"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/es\/wp-json\/wp\/v2\/ld_collection?post=2120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}