{"id":11364,"date":"2026-08-25T15:50:31","date_gmt":"2026-08-25T07:50:31","guid":{"rendered":"https:\/\/www.cybermedian.com\/es\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/"},"modified":"2026-09-03T23:26:01","modified_gmt":"2026-09-03T15:26:01","slug":"deep-dive-review-diagram-as-code-with-mermaid-using-vpascode","status":"publish","type":"post","link":"https:\/\/www.cybermedian.com\/es\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/","title":{"rendered":"An\u00e1lisis en profundidad: Diagramas como c\u00f3digo con Mermaid utilizando VPasCode"},"content":{"rendered":"<p><strong>\u2014\u2014 Compartir mejores pr\u00e1cticas con el chatbot de IA de Visual Paradigm + VPasCode<\/strong><\/p>\n<p>Hola a todos, soy Angus. Como Gerente de Producto con m\u00e1s de 7 a\u00f1os de experiencia, s\u00e9 lo cr\u00edtica que es la comunicaci\u00f3n clara. Recientemente, mientras exploraba el flujo de trabajo &#8220;Diagramas como c\u00f3digo&#8221; (DaC), evalu\u00e9 en profundidad la combinaci\u00f3n de <strong>Mermaid<\/strong> con <strong>Chatbot de IA de Visual Paradigm (VP)<\/strong> y <strong>VPasCode<\/strong>.<\/p>\n<p id=\"JEZJxlS\"><img alt=\"Flujo de trabajo de Diagramas como C\u00f3digo: Mermaid + Chatbot de IA de Visual Paradigm + VPasCode: Mejorando la Comunicaci\u00f3n y la Eficiencia\" class=\"alignnone wp-image-20177 size-full\" decoding=\"async\" height=\"572\" loading=\"lazy\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4f60c67dd.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4f60c67dd.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4f60c67dd-300x168.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4f60c67dd-768x429.png 768w\" width=\"1024\"\/><\/p>\n<p>Hoy quiero compartir una revisi\u00f3n del producto y un desglose funcional de esta cadena de herramientas, cubriendo su valor central, conceptos clave y casos de uso pr\u00e1cticos. Mi objetivo es ayudarles a mejorar la eficiencia en la documentaci\u00f3n, la organizaci\u00f3n de requisitos y la comunicaci\u00f3n t\u00e9cnica.<\/p>\n<hr\/>\n<h2>1. Antecedentes y puntos de dolor: \u00bfPor qu\u00e9 necesitamos &#8220;Diagramas como c\u00f3digo&#8221;?<\/h2>\n<p>En el trabajo tradicional de productos, a menudo utilizamos herramientas de interfaz gr\u00e1fica de usuario como Visio, Lucidchart o XMind. Aunque son intuitivas, presentan varios puntos de dolor evidentes:<\/p>\n<ul>\n<li>\n<p><strong>Control de versiones dif\u00edcil<\/strong>: Los archivos binarios no se pueden comparar con Git-diff, lo que dificulta rastrear el historial de cambios.<\/p>\n<\/li>\n<li>\n<p><strong>Alto costo de colaboraci\u00f3n<\/strong>: Los miembros del equipo necesitan tener instalado software espec\u00edfico para ver o editar diagramas.<\/p>\n<\/li>\n<li>\n<p><strong>Retraso en el mantenimiento<\/strong>: El c\u00f3digo cambia, pero los diagramas no, lo que genera documentaci\u00f3n desincronizada con el sistema real.<\/p>\n<\/li>\n<\/ul>\n<p><strong>&#8220;Diagramas como c\u00f3digo&#8221; (DaC)<\/strong>naci\u00f3 para resolver estos problemas. Al definir los diagramas como c\u00f3digo de texto, aporta los siguientes valores centrales:<\/p>\n<ul>\n<li>\n<p>\u2705\u00a0<strong>Amigable con el control de versiones<\/strong>: Gestionar los diagramas como c\u00f3digo, admitiendo Ramas\/Fusiones.<\/p>\n<\/li>\n<li>\n<p>\u2705\u00a0<strong>Listo para la automatizaci\u00f3n<\/strong>: Puede integrarse en pipelines de CI\/CD para generar autom\u00e1ticamente los diagramas de arquitectura m\u00e1s recientes.<\/p>\n<\/li>\n<li>\n<p>\u2705\u00a0<strong>Consistencia garantizada<\/strong>: Asegura un estilo de salida uniforme en todo el equipo mediante plantillas y est\u00e1ndares de c\u00f3digo.<\/p>\n<\/li>\n<li>\n<p>\u2705\u00a0<strong>Reproducibilidad<\/strong>: Los diagramas pueden reconstruirse en cualquier momento siempre que exista el archivo fuente.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h2>2. Descripci\u00f3n general del producto: \u00bfQu\u00e9 es Mermaid?<\/h2>\n<p><strong>Mermaid<\/strong> es una biblioteca de diagramaci\u00f3n basada en JavaScript que utiliza una sintaxis de texto similar a Markdown para generar diagramas de forma din\u00e1mica.<\/p>\n<h3>\ud83d\udca1 \u00bfPor qu\u00e9 elegir Mermaid?<\/h3>\n<ul>\n<li>\n<p><strong>Baja barrera de entrada<\/strong>: Sintaxis simple, altamente legible por humanos.<\/p>\n<\/li>\n<li>\n<p><strong>Ecosistema amplio<\/strong>: Soporte nativo para GitHub, GitLab, Notion, VS Code y otras plataformas principales.<\/p>\n<\/li>\n<li>\n<p><strong>Renderizado en tiempo real<\/strong>: Vista previa instant\u00e1nea al modificar el c\u00f3digo, proporcionando un ciclo de retroalimentaci\u00f3n corto.<\/p>\n<\/li>\n<li>\n<p><strong>Altamente extensible<\/strong>: Soporta temas y estilos personalizados.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h2>3. An\u00e1lisis de caracter\u00edsticas clave: Conceptos fundamentales de Mermaid<\/h2>\n<p>Al usar Mermaid, varios conceptos fundamentales forman su \u201cl\u00f3gica de producto\u201d:<\/p>\n<p id=\"dvGOfWW\"><img alt=\"Hoja de trucos de sintaxis de Mermaid que detalla declaraciones de diagramas, nodos, aristas, direcciones de dise\u00f1o y opciones de estilo.\" class=\"alignnone size-full wp-image-20188\" decoding=\"async\" height=\"521\" loading=\"lazy\" sizes=\"auto, (max-width: 986px) 100vw, 986px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d537baf8c3.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d537baf8c3.png 986w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d537baf8c3-300x159.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d537baf8c3-768x406.png 768w\" width=\"986\"\/><\/p>\n<h3>3.1 Declaraci\u00f3n de diagrama<\/h3>\n<p>Cada diagrama debe comenzar con una declaraci\u00f3n de tipo, como <code data-backticks=\"1\">graph TD<\/code>. Esto equivale a definir el \u201cmodo\u201d del producto.<\/p>\n<h3>3.2 Nodos y aristas<\/h3>\n<ul>\n<li>\n<p><strong>Nodos<\/strong>: Representan entidades, pasos de proceso o estados.<\/p>\n<\/li>\n<li>\n<p><strong>Aristas<\/strong>: Definen relaciones y flujo de datos entre nodos.<\/p>\n<\/li>\n<\/ul>\n<h3>3.3 Direcci\u00f3n del dise\u00f1o<\/h3>\n<p>Controla el flujo visual para adaptarse a diferentes h\u00e1bitos de lectura:<\/p>\n<ul>\n<li>\n<p><code data-backticks=\"1\">TD<\/code>\u00a0\/\u00a0<code data-backticks=\"1\">TB<\/code>: De arriba hacia abajo (predeterminado, adecuado para diagramas de flujo)<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">LR<\/code>: De izquierda a derecha (adecuado para l\u00edneas de tiempo o secuencias)<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">BT<\/code>\u00a0\/\u00a0<code data-backticks=\"1\">RL<\/code>: De abajo hacia arriba \/ De derecha a izquierda<\/p>\n<\/li>\n<\/ul>\n<h3>3.4 Sem\u00e1ntica de las formas de los nodos<\/h3>\n<p>Diferentes formas transmiten diferentes significados empresariales:<\/p>\n<ul>\n<li>\n<p><code data-backticks=\"1\">[ ]<\/code>: Rect\u00e1ngulo (paso regular)<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">( )<\/code>: Rect\u00e1ngulo redondeado (inicio\/fin)<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">(( ))<\/code>: C\u00edrculo (evento)<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">{ }<\/code>: Rombo (punto de decisi\u00f3n)<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">[\/ \/]<\/code>: Paralelogramo (entrada\/salida)<\/p>\n<\/li>\n<\/ul>\n<h3>3.5 Tipos de aristas<\/h3>\n<ul>\n<li>\n<p><code data-backticks=\"1\">--&gt;<\/code>: Flecha s\u00f3lida<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">---<\/code>: L\u00ednea sin flecha<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">-.-&gt;<\/code>: Flecha punteada (generalmente indica as\u00edncrono u opcional)<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">==&gt;<\/code>: Flecha gruesa (resalta el camino principal)<\/p>\n<\/li>\n<\/ul>\n<h3>3.6 Subgrafos<\/h3>\n<p>Se utilizan para modularizar y agrupar sistemas complejos, mejorando la legibilidad y la jerarqu\u00eda l\u00f3gica.<\/p>\n<h3>3.7 Estilizado<\/h3>\n<p>Soporta una sintaxis similar a CSS, permitiendo la personalizaci\u00f3n de colores, bordes y fuentes para cumplir con las directrices de marca.<\/p>\n<hr\/>\n<h2>4. Configuraci\u00f3n del entorno e integraci\u00f3n: La ventaja del ecosistema de Visual Paradigm<\/h2>\n<p>Aunque Mermaid puede utilizarse en cualquier editor de texto, combinarlo con el <strong>Visual Paradigm (VP)<\/strong> cadena de herramientas mejora significativamente la experiencia.<\/p>\n<h3>\ud83d\udee0\ufe0f Combinaci\u00f3n de herramientas recomendada: Chatbot de IA de Visual Paradigm + VPasCode<\/h3>\n<p><strong>Visual Paradigm<\/strong> ofrece un soporte empresarial potente, mientras que el <strong>VPasCode<\/strong> plugin act\u00faa como puente entre la interfaz gr\u00e1fica de usuario y el c\u00f3digo.<\/p>\n<hr\/>\n<h2>5. Primeros pasos: Sintaxis b\u00e1sica<\/h2>\n<p>Veamos un ejemplo simple de diagrama de flujo para entender su &#8220;estructura de c\u00f3digo&#8221;:<\/p>\n<p id=\"uqGQPgN\"><img alt=\"Ejemplo de diagrama de flujo Mermaid en VPasCode que muestra rutas de Inicio, decisi\u00f3n y Depuraci\u00f3n\" class=\"alignnone size-full wp-image-20163\" decoding=\"async\" height=\"876\" loading=\"lazy\" sizes=\"auto, (max-width: 1919px) 100vw, 1919px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49adec69c.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49adec69c.png 1919w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49adec69c-300x137.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49adec69c-1024x467.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49adec69c-768x351.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49adec69c-1536x701.png 1536w\" width=\"1919\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIceHlUgACx+jgksSiklgFXV07Badqz2KFzBKF8vyi7My8dPtaiBonkGRNZGpxjYJztHtRamKJYiyyjF9+jYJLtEtqUmk6VNwFYhwAWaYcuw==\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIceHlUgACx+jgksSiklgFXV07Badqz2KFzBKF8vyi7My8dPtaiBonkGRNZGpxjYJztHtRamKJYiyyjF9+jYJLtEtqUmk6VNwFYhwAWaYcuw==\" 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 Mermaid 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\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIceHlUgACx2jPvMzkzPxYBV1dOwWn6kP7XYtLDi9USCvNA4rmJeal5NvXQpQ6gZTUBB9eW6PgHH1ooWtFcmpOal5JqmIssrxffo2CS7RLakFpUWIRVMYFYjgAcl0lfg==\" \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\">graph TD\r\n    A[Inicio] --&gt; B{\u00bfEst\u00e1 funcionando?}\r\n    B --&gt;|S\u00ed| C[\u00a1Excelente!]\r\n    B --&gt;|No| D[Depurar]\r\n    D --&gt; B\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIceHlUgACx2jPvMzkzPxYBV1dOwWn6kP7XYtLDi9USCvNA4rmJeal5NvXQpQ6gZTUBB9eW6PgHH1ooWtFcmpOal5JqmIssrxffo2CS7RLakFpUWIRVMYFYjgAcl0lfg==\" \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            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIceHlUgACx+jgksSiklgFXV07Badqz2KFzBKF8vyi7My8dPtaiBonkGRNZGpxjYJztHtRamKJYiyyjF9+jYJLtEtqUmk6VNwFYhwAWaYcuw==\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIceHlUgACx+jgksSiklgFXV07Badqz2KFzBKF8vyi7My8dPtaiBonkGRNZGpxjYJztHtRamKJYiyyjF9+jYJLtEtqUmk6VNwFYhwAWaYcuw==\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>Desglose del c\u00f3digo:<\/strong><\/p>\n<ul>\n<li>\n<p><code data-backticks=\"1\">graph TD<\/code>: Define un diagrama de flujo de arriba a abajo.<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">A[Inicio]<\/code>: Nodo con ID &#8216;A&#8217;, que muestra el texto &#8220;Inicio&#8221;.<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">--&gt;<\/code>: Define la direcci\u00f3n del flujo.<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">B{...}<\/code>: Nodo en forma de diamante, que representa una decisi\u00f3n.<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">|S\u00ed|<\/code>: Etiqueta en la l\u00ednea de conexi\u00f3n.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h2>6. Casos de uso basados en escenarios: Tipos de diagramas comunes<\/h2>\n<p>Como gerentes de producto, frecuentemente necesitamos dibujar diferentes tipos de diagramas. Aqu\u00ed hay escenarios de aplicaci\u00f3n de alta frecuencia para Mermaid:<\/p>\n<h3>6.1 Diagrama de flujo<\/h3>\n<p><em>Caso de uso: Inicio de sesi\u00f3n de usuario, flujos de procesamiento de pedidos<br \/>\n<\/em><\/p>\n<p id=\"wvBvjha\"><img alt=\"Diagrama de flujo Mermaid en VPasCode que muestra el inicio de sesi\u00f3n del usuario, la validaci\u00f3n de credenciales y la l\u00f3gica de entrada al panel de control.\" class=\"alignnone size-full wp-image-20165\" decoding=\"async\" height=\"871\" loading=\"lazy\" sizes=\"auto, (max-width: 1915px) 100vw, 1915px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49d40f1d5.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49d40f1d5.png 1915w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49d40f1d5-300x136.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49d40f1d5-1024x466.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49d40f1d5-768x349.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49d40f1d5-1536x699.png 1536w\" width=\"1915\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFDwCeLlUgACx+jQ4tQiBZ\/89My8WAVdXTsFp+iwxJzMlMSSVAXnotSU1LySzMSc4liIcieQkhqwghoF52jXvBKgZpfE4oyk\/MSiFBRFnnllEGUu0cEZ+eUKrkVF+UUKvqnFxYnpqVCVLmAbHQHkWSvt\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFDwCeLlUgACx+jQ4tQiBZ\/89My8WAVdXTsFp+iwxJzMlMSSVAXnotSU1LySzMSc4liIcieQkhqwghoF52jXvBKgZpfE4oyk\/MSiFBRFnnllEGUu0cEZ+eUKrkVF+UUKvqnFxYnpqVCVLmAbHQHkWSvt\" 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 Mermaid 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\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpVjrENwkAMRXskdvACWQEpIRSRoKFIc0phXSwwOuzIl1BlGWZghCzGXYCCX1nWe1\/\/Yjhc4XjebiCldI2wZ4WeIFLk5SX5nOKExtpBUeygci0G7tHAG\/UknjFQ7D4FVUbmdnkmQmfYu4OMllAMMKBQyG1e00\/Dn9HI4+fU7qRxle4kEW+UHTJT+xr1OqN8A3qaPI4=\" \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\">graph LR\r\n    A[Inicio de sesi\u00f3n de usuario] --&gt; B[Validar credenciales]\r\n    B --&gt;|V\u00e1lido| C[Entrar al panel de control]\r\n    B --&gt;|Inv\u00e1lido| D[Mostrar mensaje de error]\r\n    D --&gt; A\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpVjrENwkAMRXskdvACWQEpIRSRoKFIc0phXSwwOuzIl1BlGWZghCzGXYCCX1nWe1\/\/Yjhc4XjebiCldI2wZ4WeIFLk5SX5nOKExtpBUeygci0G7tHAG\/UknjFQ7D4FVUbmdnkmQmfYu4OMllAMMKBQyG1e00\/Dn9HI4+fU7qRxle4kEW+UHTJT+xr1OqN8A3qaPI4=\" \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            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFDwCeLlUgACx+jQ4tQiBZ\/89My8WAVdXTsFp+iwxJzMlMSSVAXnotSU1LySzMSc4liIcieQkhqwghoF52jXvBKgZpfE4oyk\/MSiFBRFnnllEGUu0cEZ+eUKrkVF+UUKvqnFxYnpqVCVLmAbHQHkWSvt\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFDwCeLlUgACx+jQ4tQiBZ\/89My8WAVdXTsFp+iwxJzMlMSSVAXnotSU1LySzMSc4liIcieQkhqwghoF52jXvBKgZpfE4oyk\/MSiFBRFnnllEGUu0cEZ+eUKrkVF+UUKvqnFxYnpqVCVLmAbHQHkWSvt\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>6.2 Diagrama de secuencia<\/h3>\n<p><em>Caso de uso: Interacciones de API, llamadas a microservicios<br \/>\n<\/em><\/p>\n<p id=\"OGiznZz\"><img alt=\"Diagrama de secuencia Mermaid en VPasCode que ilustra las interacciones de API entre Usuario, APIGateway y Base de datos.\" class=\"alignnone size-full wp-image-20166\" decoding=\"async\" height=\"873\" loading=\"lazy\" sizes=\"auto, (max-width: 1918px) 100vw, 1918px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49f6ea32b.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49f6ea32b.png 1918w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49f6ea32b-300x137.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49f6ea32b-1024x466.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49f6ea32b-768x350.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d49f6ea32b-1536x699.png 1536w\" width=\"1918\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpljj0KwzAMRvdC7+AL5AIeAoVAydYfegDVEcWQOq4kE3L7yoiQwR5k0Pf0JMZfwRRwiPAh+J5PTl8GkhhihiTuxUht93IbryC4wtZmAwi8gdESq9XS9f0x5t2jbmbDDTpSRXeLd\/eCtCkeFpoM3LOuUUqhpB+XWbiRKl3v8O6JaapUXhLjHyLGUYU=\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpljj0KwzAMRvdC7+AL5AIeAoVAydYfegDVEcWQOq4kE3L7yoiQwR5k0Pf0JMZfwRRwiPAh+J5PTl8GkhhihiTuxUht93IbryC4wtZmAwi8gdESq9XS9f0x5t2jbmbDDTpSRXeLd\/eCtCkeFpoM3LOuUUqhpB+XWbiRKl3v8O6JaapUXhLjHyLGUYU=\" 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 Mermaid 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\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptjkEKwjAQRfeCd8gFeoEsCmpF3AnSAwztUAIxiTOTiLc3bQO11mGYzf9v\/md8RnQdNgYGgsd+p\/IEIDGdCeBEtRyBjN8Kh9v1AoIveG+1IzCqPi+I51meb\/lW1fWCa3X3NpMC9A0shuxePdTq5B1HOwKEg2Gh0m9lq35SGkzeJhyZCe7\/JGWkVNTq7JKZEjhEZIEPf7xhmA==\" \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\">sequenceDiagram\r\n    participant Usuario\r\n    participant APIGateway\r\n    participant Base de datos\r\n    \r\n    Usuario-&gt;&gt;APIGateway: Solicitar datos\r\n    APIGateway-&gt;&gt;Base de datos: Consultar registro\r\n    Base de datos--&gt;&gt;APIGateway: Devolver resultados\r\n    APIGateway--&gt;&gt;Usuario: Enviar respuesta\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptjkEKwjAQRfeCd8gFeoEsCmpF3AnSAwztUAIxiTOTiLc3bQO11mGYzf9v\/md8RnQdNgYGgsd+p\/IEIDGdCeBEtRyBjN8Kh9v1AoIveG+1IzCqPi+I51meb\/lW1fWCa3X3NpMC9A0shuxePdTq5B1HOwKEg2Gh0m9lq35SGkzeJhyZCe7\/JGWkVNTq7JKZEjhEZIEPf7xhmA==\" \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            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpljj0KwzAMRvdC7+AL5AIeAoVAydYfegDVEcWQOq4kE3L7yoiQwR5k0Pf0JMZfwRRwiPAh+J5PTl8GkhhihiTuxUht93IbryC4wtZmAwi8gdESq9XS9f0x5t2jbmbDDTpSRXeLd\/eCtCkeFpoM3LOuUUqhpB+XWbiRKl3v8O6JaapUXhLjHyLGUYU=\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpljj0KwzAMRvdC7+AL5AIeAoVAydYfegDVEcWQOq4kE3L7yoiQwR5k0Pf0JMZfwRRwiPAh+J5PTl8GkhhihiTuxUht93IbryC4wtZmAwi8gdESq9XS9f0x5t2jbmbDDTpSRXeLd\/eCtCkeFpoM3LOuUUqhpB+XWbiRKl3v8O6JaapUXhLjHyLGUYU=\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>6.3 Diagrama de clases<\/h3>\n<p><em>Caso de uso: Dise\u00f1o de modelo de dominio, ordenamiento de relaciones de objetos<br \/>\n<\/em><\/p>\n<p id=\"ELqcWnQ\"><img alt=\"Diagrama de clases Mermaid en VPasCode que muestra la relaci\u00f3n entre ProductManager y ScrumTeam.\" class=\"alignnone size-full wp-image-20167\" decoding=\"async\" height=\"872\" loading=\"lazy\" sizes=\"auto, (max-width: 1919px) 100vw, 1919px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a191cec8.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a191cec8.png 1919w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a191cec8-300x136.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a191cec8-1024x465.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a191cec8-768x349.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a191cec8-1536x698.png 1536w\" width=\"1919\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptkL0KwkAQhHvBd9hSkbyAhYXRzkhItLDcXJbz8H7C3kUF8d29EISLOM3CDMs3u0Kj9zuFktHMZxAlBgdKdm0vQoEWJTG8xmzQqg6srIQjGkpcZQPsnx2xIivoQsg+SXMmDFQ5bA12i2WaODuAzp64Ih\/XxPWbv8eR1qoF9+ZEaCaNDsoHKMg0NIHWXSwaSo3WxsITakV3RY8tipt28i\/v5wFZtknga8id1tg4jlf5Dy7dWcg=\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptkL0KwkAQhHvBd9hSkbyAhYXRzkhItLDcXJbz8H7C3kUF8d29EISLOM3CDMs3u0Kj9zuFktHMZxAlBgdKdm0vQoEWJTG8xmzQqg6srIQjGkpcZQPsnx2xIivoQsg+SXMmDFQ5bA12i2WaODuAzp64Ih\/XxPWbv8eR1qoF9+ZEaCaNDsoHKMg0NIHWXSwaSo3WxsITakV3RY8tipt28i\/v5wFZtknga8id1tg4jlf5Dy7dWcg=\" 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 Mermaid 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\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptkEFqAkEQRfeB3KGXhuAFshCMk0UgBnHiAb5tpSnS3TVU9YgoOZTkCF4sIyJ0JH9TUP\/Df1U+wqxhBEW6v3OD\/HnjFiqb3pc5MgKpO1y8sx7bopyDe5e0Vqr2nIubno5iDb3sOlKm7BlVYKYEXQo2Cd3ooTKWhMh76GvekhUO8Hz6yQ2trIey2DX8fRk1Z+u1Tx+E9Afxja3AzZkGRLHKWERk\/mR\/bWi74ZZyA7Nlgz7Df0UJ\/1bfPGc8nlQcT24mEWtR\/AKiuGUP\" \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\">classDiagram\r\n    class ProductManager {\r\n        +String Nombre\r\n        +int A\u00f1osDeExperiencia\r\n        +CrearRoadmap()\r\n        +RealizarInvestigaci\u00f3nDeUsuarios()\r\n    }\r\n    \r\n    class ScrumTeam {\r\n        +Lista Miembros\r\n        +Planificaci\u00f3nDeSprint()\r\n        +RevisarBacklog()\r\n    }\r\n    \r\n    ProductManager --&gt; ScrumTeam : Colabora\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptkEFqAkEQRfeB3KGXhuAFshCMk0UgBnHiAb5tpSnS3TVU9YgoOZTkCF4sIyJ0JH9TUP\/Df1U+wqxhBEW6v3OD\/HnjFiqb3pc5MgKpO1y8sx7bopyDe5e0Vqr2nIubno5iDb3sOlKm7BlVYKYEXQo2Cd3ooTKWhMh76GvekhUO8Hz6yQ2trIey2DX8fRk1Z+u1Tx+E9Afxja3AzZkGRLHKWERk\/mR\/bWi74ZZyA7Nlgz7Df0UJ\/1bfPGc8nlQcT24mEWtR\/AKiuGUP\" \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            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptkL0KwkAQhHvBd9hSkbyAhYXRzkhItLDcXJbz8H7C3kUF8d29EISLOM3CDMs3u0Kj9zuFktHMZxAlBgdKdm0vQoEWJTG8xmzQqg6srIQjGkpcZQPsnx2xIivoQsg+SXMmDFQ5bA12i2WaODuAzp64Ih\/XxPWbv8eR1qoF9+ZEaCaNDsoHKMg0NIHWXSwaSo3WxsITakV3RY8tipt28i\/v5wFZtknga8id1tg4jlf5Dy7dWcg=\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptkL0KwkAQhHvBd9hSkbyAhYXRzkhItLDcXJbz8H7C3kUF8d29EISLOM3CDMs3u0Kj9zuFktHMZxAlBgdKdm0vQoEWJTG8xmzQqg6srIQjGkpcZQPsnx2xIivoQsg+SXMmDFQ5bA12i2WaODuAzp64Ih\/XxPWbv8eR1qoF9+ZEaCaNDsoHKMg0NIHWXSwaSo3WxsITakV3RY8tipt28i\/v5wFZtknga8id1tg4jlf5Dy7dWcg=\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>6.4 Diagrama de Estado<\/h3>\n<p><em>Caso de uso: Transiciones de estado del pedido, flujos de trabajo de aprobaci\u00f3n<br \/>\n<\/em><\/p>\n<p id=\"mnRDgmO\"><img alt=\"Diagrama de estados Mermaid en VPasCode que ilustra las transiciones del estado del pedido desde Borrador hasta Aprobado y Publicado.\" class=\"alignnone size-full wp-image-20168\" decoding=\"async\" height=\"871\" loading=\"lazy\" sizes=\"auto, (max-width: 1911px) 100vw, 1911px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a4528df1.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a4528df1.png 1911w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a4528df1-300x137.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a4528df1-1024x467.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a4528df1-768x350.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a4528df1-1536x700.png 1536w\" width=\"1911\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAgmitWAVdXTsFl6LEtBKIEJgJFgzNS0ktCkoty0wtV7BSCC5Nys2EqkGWAal0LCgoyi9LTQEqC0gsLsauCGKwlUJQalZqcolCWn6RgnNGYl56KlQ93BCQ4oDSpJzM4gyIkRA2RBVCAqQM6H4ADE5AVg==\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAgmitWAVdXTsFl6LEtBKIEJgJFgzNS0ktCkoty0wtV7BSCC5Nys2EqkGWAal0LCgoyi9LTQEqC0gsLsauCGKwlUJQalZqcolCWn6RgnNGYl56KlQ93BCQ4oDSpJzM4gyIkRA2RBVCAqQM6H4ADE5AVg==\" 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 Mermaid 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\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAgmitWAVdXTsFp\/yiosSU\/CKIKIwHlnLNC0otyyzOPLw5T8EKyCvLTIQqQ5YBqXQsKMpPAuoDKoMwcaiDG2+lEJSanJFYlVikUJBYlKiQnJiblJlfDNEFNw2kJaA0KSczGWI2lA01HCEDUgf0DwAKPEiE\" \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\">stateDiagram-v2\r\n    [*] --&gt; Borrador\r\n    Borrador --&gt; EnRevisi\u00f3n : Enviar\r\n    EnRevisi\u00f3n --&gt; Aprobado : Aprobar\r\n    EnRevisi\u00f3n --&gt; Borrador : Rechazar para cambios\r\n    Aprobado --&gt; Publicado : Publicar\r\n    Publicado --&gt; [*]\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAgmitWAVdXTsFp\/yiosSU\/CKIKIwHlnLNC0otyyzOPLw5T8EKyCvLTIQqQ5YBqXQsKMpPAuoDKoMwcaiDG2+lEJSanJFYlVikUJBYlKiQnJiblJlfDNEFNw2kJaA0KSczGWI2lA01HCEDUgf0DwAKPEiE\" \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            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAgmitWAVdXTsFl6LEtBKIEJgJFgzNS0ktCkoty0wtV7BSCC5Nys2EqkGWAal0LCgoyi9LTQEqC0gsLsauCGKwlUJQalZqcolCWn6RgnNGYl56KlQ93BCQ4oDSpJzM4gyIkRA2RBVCAqQM6H4ADE5AVg==\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNorLkksSXXJTEwvSszVLTPi5VIAgmitWAVdXTsFl6LEtBKIEJgJFgzNS0ktCkoty0wtV7BSCC5Nys2EqkGWAal0LCgoyi9LTQEqC0gsLsauCGKwlUJQalZqcolCWn6RgnNGYl56KlQ93BCQ4oDSpJzM4gyIkRA2RBVCAqQM6H4ADE5AVg==\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>6.5 Diagrama de Entidad-Relaci\u00f3n (DER)<\/h3>\n<p><em>Caso de uso: Dise\u00f1o de base de datos, modelado de datos<\/em><\/p>\n<p id=\"XibenPl\"><img alt=\"Diagrama ERD Mermaid en VPasCode que visualiza las relaciones del esquema de la base de datos entre Usuario, Pedido y Producto.\" class=\"alignnone size-full wp-image-20169\" decoding=\"async\" height=\"870\" loading=\"lazy\" sizes=\"auto, (max-width: 1922px) 100vw, 1922px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a8334031.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a8334031.png 1922w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a8334031-300x136.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a8334031-1024x464.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a8334031-768x348.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4a8334031-1536x695.png 1536w\" width=\"1922\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp9jUEKwzAMBO+F\/kEfyAd6K3HPCW7zAFGrQWDLYKunOH+vgwsJFLqn3dGyomQY54ThfIKq6X6zUErXxQUGa2q4wOjxSbndG9sKZYHRDmbqH7XSR1FkyYeRpflNLArs9pw1scwgGOgHUkD2ja7Hl3\/mHCpBTI6SqW7nLx9RQaOiv4b4Fv3OfgAGLj4h\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp9jUEKwzAMBO+F\/kEfyAd6K3HPCW7zAFGrQWDLYKunOH+vgwsJFLqn3dGyomQY54ThfIKq6X6zUErXxQUGa2q4wOjxSbndG9sKZYHRDmbqH7XSR1FkyYeRpflNLArs9pw1scwgGOgHUkD2ja7Hl3\/mHCpBTI6SqW7nLx9RQaOiv4b4Fv3OfgAGLj4h\" 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 Mermaid 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\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1jkEOwjAMBO9I\/MEf6Ae4oYZDT6lK8wBD3GIpiaWQEw1\/pylVBUjsbdej9VJUjGNEv9\/BLHM2x67RkHNVyQTtSTVKwwE6QscPfENrWpg8M51Wpu4LVUtITIG+u6bFFXFIwHaz9xQ5jBDEXyL9puSR3RI+P5\/+LbOYCAa63rAly1a2w+AEE\/h5mvSScO18AVw8Qgs=\" \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\">erDiagram\r\n    USUARIO ||--o{ PEDIDO : Realiza\r\n    PEDIDO ||--|{ PRODUCTO : Contiene\r\n    USUARIO {\n        int id\n        string nombre\n        string email\n    }\n    PEDIDO {\n        int id\n        date fechaPedido\n        float montoTotal\n    }\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1jkEOwjAMBO9I\/MEf6Ae4oYZDT6lK8wBD3GIpiaWQEw1\/pylVBUjsbdej9VJUjGNEv9\/BLHM2x67RkHNVyQTtSTVKwwE6QscPfENrWpg8M51Wpu4LVUtITIG+u6bFFXFIwHaz9xQ5jBDEXyL9puSR3RI+P5\/+LbOYCAa63rAly1a2w+AEE\/h5mvSScO18AVw8Qgs=\" \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            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp9jUEKwzAMBO+F\/kEfyAd6K3HPCW7zAFGrQWDLYKunOH+vgwsJFLqn3dGyomQY54ThfIKq6X6zUErXxQUGa2q4wOjxSbndG9sKZYHRDmbqH7XSR1FkyYeRpflNLArs9pw1scwgGOgHUkD2ja7Hl3\/mHCpBTI6SqW7nLx9RQaOiv4b4Fv3OfgAGLj4h\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp9jUEKwzAMBO+F\/kEfyAd6K3HPCW7zAFGrQWDLYKunOH+vgwsJFLqn3dGyomQY54ThfIKq6X6zUErXxQUGa2q4wOjxSbndG9sKZYHRDmbqH7XSR1FkyYeRpflNLArs9pw1scwgGOgHUkD2ja7Hl3\/mHCpBTI6SqW7nLx9RQaOiv4b4Fv3OfgAGLj4h\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>6.6 Diagrama de Gantt<\/h3>\n<p><em>Caso de uso: Programaci\u00f3n de proyectos, visualizaci\u00f3n de hoja de ruta<br \/>\n<\/em><\/p>\n<p id=\"xsaqPUB\"><img alt=\"Diagrama de Gantt Mermaid en VPasCode que muestra una l\u00ednea de tiempo de desarrollo de producto con fases de planificaci\u00f3n, desarrollo y pruebas.\" class=\"alignnone size-full wp-image-20170\" decoding=\"async\" height=\"876\" loading=\"lazy\" sizes=\"auto, (max-width: 1911px) 100vw, 1911px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4aaf64d8d.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4aaf64d8d.png 1911w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4aaf64d8d-300x138.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4aaf64d8d-1024x469.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4aaf64d8d-768x352.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4aaf64d8d-1536x704.png 1536w\" width=\"1911\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptj8EKwjAQRO+C\/7AfYKGm1YM3pRQ8CFXqwWNolhpMN5psBf\/etFWp4pLTztuZSS2JeTqBMKzZIBTOqrZiyPCOxl4bJIZSN2g04cApyZhb10gGOIWJdrsoywbNY8XaEhRGEmmqoThL\/7o74K3VDjtHD2uS5uG17wRYiVgso3ge3gySWA38cRtKeF0TwJgSPSXe1Dtx3HcUupHVBUl18rfJfDGDdPEyyZ0l\/oMlfVb6m1Wi55\/P7def7VfbtA8KbZ8Lz2F+\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptj8EKwjAQRO+C\/7AfYKGm1YM3pRQ8CFXqwWNolhpMN5psBf\/etFWp4pLTztuZSS2JeTqBMKzZIBTOqrZiyPCOxl4bJIZSN2g04cApyZhb10gGOIWJdrsoywbNY8XaEhRGEmmqoThL\/7o74K3VDjtHD2uS5uG17wRYiVgso3ge3gySWA38cRtKeF0TwJgSPSXe1Dtx3HcUupHVBUl18rfJfDGDdPEyyZ0l\/oMlfVb6m1Wi55\/P7def7VfbtA8KbZ8Lz2F+\" 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 Mermaid 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\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1UEFqAzEMvBfyBz0gC5vNpofe2iyBHgKhkEOOqu0NJo5FJfvS3\/QBPZQ+YT8Wr52SpqHCB0kzI2m8Rx\/C5A5ShOEzREewZPK0ZzwiaAOdEWQml4BUbZh0VIGKoic+YiCAXYpqva66rgBilLLDt4cVisk6h972VmFuF9KjHz6cFSsj4cW8xZQHkhGCh6Zu7qt6lt4U5rUuis6KGb7yIc8+GO7xfcy3EpEtAfyWNlna\/EhvLrr4Os+++HxCdTBeX0+bLabQLvQNeZV+K\/xhz\/Pu9t\/dG47mFaWg52LsL9FZjfraSJtXJyMn2zN95Q==\" \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\">gantt\r\n    t\u00edtulo Cronograma de Desarrollo de Producto\r\n    formato  YYYY-MM-DD\r\n    secci\u00f3n Fase de Planificaci\u00f3n\r\n    An\u00e1lisis de Requisitos     :2026-01-01, 30d\r\n    Dise\u00f1o de Interfaz de Usuario       :2026-02-01, 20d\r\n    secci\u00f3n Fase de Desarrollo\r\n    Desarrollo Backend     :2026-02-15, 45d\r\n    Desarrollo Frontend     :2026-03-01, 40d\r\n    secci\u00f3n Fase de Pruebas\r\n    Pruebas de Calidad       :2026-04-15, 20d\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1UEFqAzEMvBfyBz0gC5vNpofe2iyBHgKhkEOOqu0NJo5FJfvS3\/QBPZQ+YT8Wr52SpqHCB0kzI2m8Rx\/C5A5ShOEzREewZPK0ZzwiaAOdEWQml4BUbZh0VIGKoic+YiCAXYpqva66rgBilLLDt4cVisk6h972VmFuF9KjHz6cFSsj4cW8xZQHkhGCh6Zu7qt6lt4U5rUuis6KGb7yIc8+GO7xfcy3EpEtAfyWNlna\/EhvLrr4Os+++HxCdTBeX0+bLabQLvQNeZV+K\/xhz\/Pu9t\/dG47mFaWg52LsL9FZjfraSJtXJyMn2zN95Q==\" \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            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptj8EKwjAQRO+C\/7AfYKGm1YM3pRQ8CFXqwWNolhpMN5psBf\/etFWp4pLTztuZSS2JeTqBMKzZIBTOqrZiyPCOxl4bJIZSN2g04cApyZhb10gGOIWJdrsoywbNY8XaEhRGEmmqoThL\/7o74K3VDjtHD2uS5uG17wRYiVgso3ge3gySWA38cRtKeF0TwJgSPSXe1Dtx3HcUupHVBUl18rfJfDGDdPEyyZ0l\/oMlfVb6m1Wi55\/P7def7VfbtA8KbZ8Lz2F+\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptj8EKwjAQRO+C\/7AfYKGm1YM3pRQ8CFXqwWNolhpMN5psBf\/etFWp4pLTztuZSS2JeTqBMKzZIBTOqrZiyPCOxl4bJIZSN2g04cApyZhb10gGOIWJdrsoywbNY8XaEhRGEmmqoThL\/7o74K3VDjtHD2uS5uG17wRYiVgso3ge3gySWA38cRtKeF0TwJgSPSXe1Dtx3HcUupHVBUl18rfJfDGDdPEyyZ0l\/oMlfVb6m1Wi55\/P7def7VfbtA8KbZ8Lz2F+\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>6.7 Gr\u00e1fico de Pastel<\/h3>\n<p><em>Caso de uso: Asignaci\u00f3n de recursos, an\u00e1lisis de distribuci\u00f3n de tiempo<br \/>\n<\/em><\/p>\n<p id=\"QgVNCJC\"><img alt=\"Gr\u00e1fico circular Mermaid en VPasCode que muestra la asignaci\u00f3n de tiempo de trabajo para Investigaci\u00f3n de Usuarios, Planificaci\u00f3n de Hoja de Ruta y An\u00e1lisis de Datos.\" class=\"alignnone size-full wp-image-20171\" decoding=\"async\" height=\"874\" loading=\"lazy\" sizes=\"auto, (max-width: 1914px) 100vw, 1914px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4acc1aa6f.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4acc1aa6f.png 1914w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4acc1aa6f-300x137.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4acc1aa6f-1024x468.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4acc1aa6f-768x351.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4acc1aa6f-1536x701.png 1536w\" width=\"1914\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpVzrEKwkAMgOFd8B1Cn0AFF7dCV1FaxTlcgxeay5W7OPj2nmc7mDFffsjMBMYmBI+YJrhxIGhFokPjqNsNlGnumRL0lAmT8w2c4HBcpI84BpzhKqjK+qy4W3AwnMhHGUt9JrLi+XuwX+sODaFVlHfm\/Jd20b0CqdUvarPKxTyl3+YDdjk0fQ==\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpVzrEKwkAMgOFd8B1Cn0AFF7dCV1FaxTlcgxeay5W7OPj2nmc7mDFffsjMBMYmBI+YJrhxIGhFokPjqNsNlGnumRL0lAmT8w2c4HBcpI84BpzhKqjK+qy4W3AwnMhHGUt9JrLi+XuwX+sODaFVlHfm\/Jd20b0CqdUvarPKxTyl3+YDdjk0fQ==\" 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 Mermaid 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\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpFjUsOglAMRecm7qFhBWDixJkJAxlJiC6gPiopgT7yWtyPa3AJbEy+oaPb9PTcjgmMrSG4KleCjoefQEnwYGo7P6eAL6z98QDjRJl8SI2rnXxqj4G9RnCB03nF8gaF3+x2rEG4+RqnWPSGMx2vdEG9sBdScF5GUiHHYOOaiVEgxRJnfbLprzJ8G1bWSZeire2bL\/Wub0lsaZ8\/t9PdwgIn8R\/9406G\" \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\">pie title Asignaci\u00f3n de Tiempo de Trabajo\r\n    \"Investigaci\u00f3n de Usuarios\" : 25\r\n    \"Planificaci\u00f3n de la Hoja de Ruta\" : 20\r\n    \"Reuniones con las Partes Interesadas\" : 15\r\n    \"An\u00e1lisis de Datos\" : 20\r\n    \"Documentaci\u00f3n\" : 10\r\n    \"Otros\" : 10\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpFjUsOglAMRecm7qFhBWDixJkJAxlJiC6gPiopgT7yWtyPa3AJbEy+oaPb9PTcjgmMrSG4KleCjoefQEnwYGo7P6eAL6z98QDjRJl8SI2rnXxqj4G9RnCB03nF8gaF3+x2rEG4+RqnWPSGMx2vdEG9sBdScF5GUiHHYOOaiVEgxRJnfbLprzJ8G1bWSZeire2bL\/Wub0lsaZ8\/t9PdwgIn8R\/9406G\" \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            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpVzrEKwkAMgOFd8B1Cn0AFF7dCV1FaxTlcgxeay5W7OPj2nmc7mDFffsjMBMYmBI+YJrhxIGhFokPjqNsNlGnumRL0lAmT8w2c4HBcpI84BpzhKqjK+qy4W3AwnMhHGUt9JrLi+XuwX+sODaFVlHfm\/Jd20b0CqdUvarPKxTyl3+YDdjk0fQ==\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpVzrEKwkAMgOFd8B1Cn0AFF7dCV1FaxTlcgxeay5W7OPj2nmc7mDFffsjMBMYmBI+YJrhxIGhFokPjqNsNlGnumRL0lAmT8w2c4HBcpI84BpzhKqjK+qy4W3AwnMhHGUt9JrLi+XuwX+sODaFVlHfm\/Jd20b0CqdUvarPKxTyl3+YDdjk0fQ==\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<hr\/>\n<h2>7. Revisi\u00f3n de Funciones Avanzadas: Estilos, Subgrafos e Interacci\u00f3n<\/h2>\n<h3>7.1 Subgrafos \u2013 Pensamiento Modular<\/h3>\n<p>Cuando los sistemas son complejos, utilice subgrafos para dividir diagramas grandes en bloques l\u00f3gicos.<\/p>\n<p id=\"vSPaiqV\"><img alt=\"Diagrama Mermaid en VPasCode que demuestra el uso de subgrafos para modularizar las capas de sistemas frontend y backend.\" class=\"alignnone size-full wp-image-20172\" decoding=\"async\" height=\"871\" loading=\"lazy\" sizes=\"auto, (max-width: 1911px) 100vw, 1911px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4afc4443b.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4afc4443b.png 1911w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4afc4443b-300x137.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4afc4443b-1024x467.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4afc4443b-768x350.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4afc4443b-1536x700.png 1536w\" width=\"1911\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIceLlUgCC4tKkdLCAW1F+XklqXopPYmVqEUQOBByjg1ITk0sUHAsKYhGiTtGhngrO+bkF+XmpeSUKPplJRYlFlVAFQEMgDDQbnBKTszEtcI52DPBUCE4tKkstQrLBJdolsSQxKbE4Fbupjgq6unYKzhCOM5jjAgB8Azbm\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIceLlUgCC4tKkdLCAW1F+XklqXopPYmVqEUQOBByjg1ITk0sUHAsKYhGiTtGhngrO+bkF+XmpeSUKPplJRYlFlVAFQEMgDDQbnBKTszEtcI52DPBUCE4tKkstQrLBJdolsSQxKbE4Fbupjgq6unYKzhCOM5jjAgB8Azbm\" 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 Mermaid 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\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIceLlUgCC4tKkdLCAW1F+XklqXopPYmVqEUQOBByjHQtyMpMTkzMPb85TCEpNTC6JRcg6RTtlJuVk5pekJicqpKQqOOfnFuTnpQINKlYI9YQqBBoKYaDZ6JSYnI1poXN0cGpRWWZKfpGCY4Ankl0u0U6JxakgW1wSS\/KLsRvuqKCra6fgDOE4gzkuAOikP9o=\" \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\">graph TB\r\n    subgraph FrontendLayer\r\n        A[Aplicaci\u00f3n React]\r\n        B[Biblioteca de Componentes UI]\r\n    end\r\n    \r\n    subgraph BackendLayer\r\n        C[Servidor API]\r\n        D[Base de Datos]\r\n    end\r\n    \r\n    A --&gt; C\r\n    C --&gt; D\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIceLlUgCC4tKkdLCAW1F+XklqXopPYmVqEUQOBByjHQtyMpMTkzMPb85TCEpNTC6JRcg6RTtlJuVk5pekJicqpKQqOOfnFuTnpQINKlYI9YQqBBoKYaDZ6JSYnI1poXN0cGpRWWZKfpGCY4Ankl0u0U6JxakgW1wSS\/KLsRvuqKCra6fgDOE4gzkuAOikP9o=\" \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            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIceLlUgCC4tKkdLCAW1F+XklqXopPYmVqEUQOBByjg1ITk0sUHAsKYhGiTtGhngrO+bkF+XmpeSUKPplJRYlFlVAFQEMgDDQbnBKTszEtcI52DPBUCE4tKkstQrLBJdolsSQxKbE4Fbupjgq6unYKzhCOM5jjAgB8Azbm\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIceLlUgCC4tKkdLCAW1F+XklqXopPYmVqEUQOBByjg1ITk0sUHAsKYhGiTtGhngrO+bkF+XmpeSUKPplJRYlFlVAFQEMgDDQbnBKTszEtcI52DPBUCE4tKkstQrLBJdolsSQxKbE4Fbupjgq6unYKzhCOM5jjAgB8Azbm\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>7.2 Estilos \u2013 Coherencia de Marca<\/h3>\n<p>Puede agregar estilos CSS a nodos espec\u00edficos utilizando la <code data-backticks=\"1\">style<\/code> palabra clave.<\/p>\n<p id=\"LvZAHxQ\"><img alt=\"Interfaz de VPasCode que muestra un diagrama Mermaid con estilos CSS personalizados aplicados a los nodos de Inicio, Procesamiento y Fin.\" class=\"alignnone size-full wp-image-20173\" decoding=\"async\" height=\"870\" loading=\"lazy\" sizes=\"auto, (max-width: 1914px) 100vw, 1914px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4b24cab24.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4b24cab24.png 1914w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4b24cab24-300x136.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4b24cab24-1024x465.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4b24cab24-768x349.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4b24cab24-1536x698.png 1536w\" width=\"1914\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIceHlUgACx+jgksSiklgFXV07BafogKL85NTi4sy89FiIvBNYwjnaNS8FKgIhi0sqc1IVHBXSMnNyrJTTLNN0ikuK8rNTrZSNjY2hbN3yzJSSDCuTggpkPU5QPUlJePQYoepxhulJS8KrBwA0v0JU\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIceHlUgACx+jgksSiklgFXV07BafogKL85NTi4sy89FiIvBNYwjnaNS8FKgIhi0sqc1IVHBXSMnNyrJTTLNN0ikuK8rNTrZSNjY2hbN3yzJSSDCuTggpkPU5QPUlJePQYoepxhulJS8KrBwA0v0JU\" 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 Mermaid 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\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIceHlUgACx2jPvMzkzPxYBV1dOwWn6ICi\/OTU4sTczNS8kvxYiBonsJxztFtmHlQEQhaXVOakKjgqpGXm5Fgpp1mm6RSXFOVnp1opGxsbQ9m65ZkpJRlWJgUVyHqcoHqSkvDoMULV4wzTk5aEVw8AgNpD4w==\" \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\">graph TD\r\n    A[Inicio] --&gt; B[Procesamiento]\r\n    B --&gt; C[Fin]\r\n    \r\n    style A fill:#f9f,stroke:#333,stroke-width:4px\r\n    style B fill:#bbf,stroke:#333,stroke-width:2px\r\n    style C fill:#bfb,stroke:#333,stroke-width:2px\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIceHlUgACx2jPvMzkzPxYBV1dOwWn6ICi\/OTU4sTczNS8kvxYiBonsJxztFtmHlQEQhaXVOakKjgqpGXm5Fgpp1mm6RSXFOVnp1opGxsbQ9m65ZkpJRlWJgUVyHqcoHqSkvDoMULV4wzTk5aEVw8AgNpD4w==\" \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            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIceHlUgACx+jgksSiklgFXV07BafogKL85NTi4sy89FiIvBNYwjnaNS8FKgIhi0sqc1IVHBXSMnNyrJTTLNN0ikuK8rNTrZSNjY2hbN3yzJSSDCuTggpkPU5QPUlJePQYoepxhulJS8KrBwA0v0JU\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFAIceHlUgACx+jgksSiklgFXV07BafogKL85NTi4sy89FiIvBNYwjnaNS8FKgIhi0sqc1IVHBXSMnNyrJTTLNN0ikuK8rNTrZSNjY2hbN3yzJSSDCuTggpkPU5QPUlJePQYoepxhulJS8KrBwA0v0JU\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>7.3 Eventos de Clic y Enlaces<\/h3>\n<p>Mejore la interactividad, convirtiendo los diagramas en documentos navegables.<\/p>\n<p id=\"mpjkdIG\"><img alt=\"C\u00f3digo de diagrama Mermaid en VPasCode que crea un enlace clicable desde Ver Documentos al Sitio Principal de Visual Paradigm.\" class=\"alignnone size-full wp-image-20185\" decoding=\"async\" height=\"873\" loading=\"lazy\" sizes=\"auto, (max-width: 1917px) 100vw, 1917px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d5280b7f7d.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d5280b7f7d.png 1917w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d5280b7f7d-300x137.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d5280b7f7d-1024x466.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d5280b7f7d-768x350.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d5280b7f7d-1536x699.png 1536w\" width=\"1917\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFDwCVLg5XKMDstMLVdwyU8ujlXQ1bWrcc7JTM5WKMlX8CrNLahRcALKF5cm5igEJBYlpmSm5yr4JmbmKQRnlqTGArUng1U7KmQUpaYpKGWUlBQUW+nrl5eX65WBtekWQLXpJefnKikoAQ3LLFHAaaQSAHIaNAU=\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFDwCVLg5XKMDstMLVdwyU8ujlXQ1bWrcc7JTM5WKMlX8CrNLahRcALKF5cm5igEJBYlpmSm5yr4JmbmKQRnlqTGArUng1U7KmQUpaYpKGWUlBQUW+nrl5eX65WBtekWQLXpJefnKikoAQ3LLFHAaaQSAHIaNAU=\" 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 Mermaid 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\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFjbEOgjAURXcT\/+GmO7A7mGAcHByIJiyE4aXU8iK0TVvswl\/5Cf6Y1bi73eHcc7QnN+J8wXZTd63yOFq5zMpEkvx6mh5FsV9PpAlyYglHnhBoiuRXHLorR7ZoPBvJjiYMCi2HJa8mgwPruc\/iz\/OOGqNXN4gxRhd2VZVSKh9fuHA\/uJR2FhBZwTmA\/3bxBgKzQxU=\" \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\">graph LR \r\nA[Ver Documentaci\u00f3n] --&gt;|Haga clic para saltar| B[Sitio Principal de Visual Paradigm] \r\nclick A href \"https:\/\/www.visual-paradigm.com\" \"Visitar Sitio Principal de Visual Paradigm\"\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFjbEOgjAURXcT\/+GmO7A7mGAcHByIJiyE4aXU8iK0TVvswl\/5Cf6Y1bi73eHcc7QnN+J8wXZTd63yOFq5zMpEkvx6mh5FsV9PpAlyYglHnhBoiuRXHLorR7ZoPBvJjiYMCi2HJa8mgwPruc\/iz\/OOGqNXN4gxRhd2VZVSKh9fuHA\/uJR2FhBZwTmA\/3bxBgKzQxU=\" \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            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFDwCVLg5XKMDstMLVdwyU8ujlXQ1bWrcc7JTM5WKMlX8CrNLahRcALKF5cm5igEJBYlpmSm5yr4JmbmKQRnlqTGArUng1U7KmQUpaYpKGWUlBQUW+nrl5eX65WBtekWQLXpJefnKikoAQ3LLFHAaaQSAHIaNAU=\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpLL0osyFDwCVLg5XKMDstMLVdwyU8ujlXQ1bWrcc7JTM5WKMlX8CrNLahRcALKF5cm5igEJBYlpmSm5yr4JmbmKQRnlqTGArUng1U7KmQUpaYpKGWUlBQUW+nrl5eX65WBtekWQLXpJefnKikoAQ3LLFHAaaQSAHIaNAU=\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<hr\/>\n<h2>8. Flujo de trabajo habilitado con IA: VP AI Chatbot + VPasCode en acci\u00f3n<\/h2>\n<p>Esta es la parte que m\u00e1s quiero compartir.<strong>Chatbot de IA de Visual Paradigm<\/strong> combinado con <strong>VPasCode<\/strong> ha cambiado por completo la forma en que creamos diagramas.<\/p>\n<h3>8.1 Ventajas principales<\/h3>\n<ol>\n<li>\n<p><strong>Generaci\u00f3n de lenguaje natural<\/strong>: Simplemente describa el requisito y la IA generar\u00e1 autom\u00e1ticamente el c\u00f3digo Mermaid.<\/p>\n<\/li>\n<li>\n<p><strong>Conversi\u00f3n bidireccional<\/strong>: Convierta diagramas de interfaz gr\u00e1fica existentes en c\u00f3digo, o renderice el c\u00f3digo en una interfaz gr\u00e1fica para ajustes finos.<\/p>\n<\/li>\n<li>\n<p><strong>Validaci\u00f3n inteligente<\/strong>: Detecta autom\u00e1ticamente errores de sintaxis y proporciona sugerencias de correcci\u00f3n.<\/p>\n<\/li>\n<li>\n<p><strong>Exportaci\u00f3n en m\u00faltiples formatos<\/strong>: Exportaci\u00f3n con un solo clic a PNG, SVG, PDF, conveniente para incrustar en presentaciones o informes.<\/p>\n<\/li>\n<\/ol>\n<h3>8.2 Demostraci\u00f3n pr\u00e1ctica del flujo de trabajo<\/h3>\n<p><strong>Paso 1: Describa los requisitos en lenguaje natural<\/strong><\/p>\n<blockquote>\n<p><em>Introdujo en el Chatbot de IA de VP:<\/em><br \/>\n&#8220;Necesito un diagrama de secuencia para un flujo de autenticaci\u00f3n de usuario OAuth2, que incluya Usuario, Aplicaci\u00f3n Cliente, Servidor de Autenticaci\u00f3n y Servidor de Recursos.&#8221;<\/p>\n<\/blockquote>\n<p><strong>Paso 2: La IA genera el c\u00f3digo inicial<\/strong><br \/>\n<em>La IA genera r\u00e1pidamente el siguiente c\u00f3digo Mermaid:<br \/>\n<\/em><\/p>\n<p id=\"dgYigOg\"><img alt=\"Diagrama de secuencia Mermaid que ilustra el flujo de autenticaci\u00f3n de usuario OAuth2 entre Usuario, Aplicaci\u00f3n Cliente, Servidor de Autenticaci\u00f3n y Servidor de Recursos.\" class=\"alignnone size-full wp-image-20184\" decoding=\"async\" height=\"711\" loading=\"lazy\" sizes=\"auto, (max-width: 878px) 100vw, 878px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d52427a8a6.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d52427a8a6.png 878w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d52427a8a6-300x243.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d52427a8a6-768x622.png 768w\" width=\"878\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqNkEsOgjAQhvcm3qEX8AIsTAy4MHFhfBxgUicwEds6HSR6eisSKEiMLLrgf3x\/xuOtQqMxI8gZrvOZCp8DFtLkwIg6eeTvv2lJaGTl3Le0qqQ4IN+nYnv0tmKNsf5535jFctn1JmprczIhEfZ5+Zg6NTh7TNIgLdMThOwo0tsWIfSmJOpQ2Lqt30GOgwFx7doIskoZz4FKUPqpymjxHqVi0+gqtWf8PbqdqY72gubPZq3R+zgRlw+PG66y23SQmsKmKDf0TtMyEBhTuhtm5F0Jj8b0AvPava0=\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqNkEsOgjAQhvcm3qEX8AIsTAy4MHFhfBxgUicwEds6HSR6eisSKEiMLLrgf3x\/xuOtQqMxI8gZrvOZCp8DFtLkwIg6eeTvv2lJaGTl3Le0qqQ4IN+nYnv0tmKNsf5535jFctn1JmprczIhEfZ5+Zg6NTh7TNIgLdMThOwo0tsWIfSmJOpQ2Lqt30GOgwFx7doIskoZz4FKUPqpymjxHqVi0+gqtWf8PbqdqY72gubPZq3R+zgRlw+PG66y23SQmsKmKDf0TtMyEBhTuhtm5F0Jj8b0AvPava0=\" 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 Mermaid 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\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqdkUFqAzEMRfeF3sEXyAWyCAzNJotCaOgBhC0G0YnlyvYsepueIUeYi1WZuJ2S8bQkXhiD9PWf\/CO+Z\/QWtwStwPHxwegJIIksBfDJvMYMQjwvNCE8dYQ+4bx2QOnJsTQ5aQNZsMR+ue0FbZZYPC53sV1tNpPP2hy4U23Kzjg05PXN51fESMOpGEz9Kq6CXM2BnFjoQ0s\/M6qylc4rWGvzzDEJiAnDZ0se\/uCZNlmA2flWMOosK+g0C4IO4z8cvz9liz13Pap+ODlqeWGnG\/5FWRK\/ob8HYhSOCNbid6ZV75L6VRrNfmcs+xpAESxaO0gcZ4a11MbOL7JQC4U=\" \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\">sequenceDiagram\r\n    participant Usuario\r\n    participant AppCliente\r\n    participant ServidorAutenticacion\r\n    participant ServidorRecurso\r\n    \r\n    Usuario-&gt;&gt;AppCliente: Solicitud de inicio de sesi\u00f3n\r\n    AppCliente-&gt;&gt;ServidorAutenticacion: Solicitud de autorizaci\u00f3n\r\n    ServidorAutenticacion--&gt;&gt;Usuario: Mostrar p\u00e1gina de inicio de sesi\u00f3n\r\n    Usuario-&gt;&gt;ServidorAutenticacion: Ingresar credenciales\r\n    ServidorAutenticacion--&gt;&gt;AppCliente: Devolver c\u00f3digo de autorizaci\u00f3n\r\n    AppCliente-&gt;&gt;ServidorAutenticacion: Solicitar token\r\n    ServidorAutenticacion--&gt;&gt;AppCliente: Devolver token de acceso\r\n    AppCliente-&gt;&gt;ServidorRecurso: Solicitud de API con token\r\n    ServidorRecurso--&gt;&gt;AppCliente: Devolver datos\r\n    AppCliente--&gt;&gt;Usuario: Mostrar datos\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqdkUFqAzEMRfeF3sEXyAWyCAzNJotCaOgBhC0G0YnlyvYsepueIUeYi1WZuJ2S8bQkXhiD9PWf\/CO+Z\/QWtwStwPHxwegJIIksBfDJvMYMQjwvNCE8dYQ+4bx2QOnJsTQ5aQNZsMR+ue0FbZZYPC53sV1tNpPP2hy4U23Kzjg05PXN51fESMOpGEz9Kq6CXM2BnFjoQ0s\/M6qylc4rWGvzzDEJiAnDZ0se\/uCZNlmA2flWMOosK+g0C4IO4z8cvz9liz13Pap+ODlqeWGnG\/5FWRK\/ob8HYhSOCNbid6ZV75L6VRrNfmcs+xpAESxaO0gcZ4a11MbOL7JQC4U=\" \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            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqNkEsOgjAQhvcm3qEX8AIsTAy4MHFhfBxgUicwEds6HSR6eisSKEiMLLrgf3x\/xuOtQqMxI8gZrvOZCp8DFtLkwIg6eeTvv2lJaGTl3Le0qqQ4IN+nYnv0tmKNsf5535jFctn1JmprczIhEfZ5+Zg6NTh7TNIgLdMThOwo0tsWIfSmJOpQ2Lqt30GOgwFx7doIskoZz4FKUPqpymjxHqVi0+gqtWf8PbqdqY72gubPZq3R+zgRlw+PG66y23SQmsKmKDf0TtMyEBhTuhtm5F0Jj8b0AvPava0=\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqNkEsOgjAQhvcm3qEX8AIsTAy4MHFhfBxgUicwEds6HSR6eisSKEiMLLrgf3x\/xuOtQqMxI8gZrvOZCp8DFtLkwIg6eeTvv2lJaGTl3Le0qqQ4IN+nYnv0tmKNsf5535jFctn1JmprczIhEfZ5+Zg6NTh7TNIgLdMThOwo0tsWIfSmJOpQ2Lqt30GOgwFx7doIskoZz4FKUPqpymjxHqVi0+gqtWf8PbqdqY72gubPZq3R+zgRlw+PG66y23SQmsKmKDf0TtMyEBhTuhtm5F0Jj8b0AvPava0=\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>Paso 3: Optimizaci\u00f3n iterativa<\/strong><\/p>\n<blockquote>\n<p><em>Hago seguimiento:<\/em><br \/>\n\u201cPor favor, agrega una rama de manejo de errores para \u2018credenciales inv\u00e1lidas\u2019.\u201d<\/p>\n<\/blockquote>\n<p><em>La IA actualiza el c\u00f3digo, a\u00f1adiendo l\u00f3gica condicional.<\/em><\/p>\n<p><strong>Paso 4: Exportaci\u00f3n e integraci\u00f3n<\/strong><br \/>\nUsa VPasCode para exportar el c\u00f3digo final como un SVG de alta resoluci\u00f3n e incrustarlo en mi Documento de Requisitos del Producto (PRD). Mientras tanto, confirma el <code data-backticks=\"1\">.mmd<\/code> archivo fuente al repositorio de Git para asegurar que otros miembros del equipo puedan rastrearlo y modificarlo.<\/p>\n<h3>8.3 Caso integral: Flujo de trabajo de gesti\u00f3n de productos<\/h3>\n<p>Aqu\u00ed tienes un diagrama de flujo completo del ciclo de vida del producto generado con asistencia de IA:<\/p>\n<p id=\"UGlMfDd\"><img alt=\"Diagrama de flujo vertical que muestra las fases del ciclo de vida del producto: Descubrimiento, Planificaci\u00f3n, Ejecuci\u00f3n y Bucle de Retroalimentaci\u00f3n.\" class=\"alignnone size-full wp-image-20183\" decoding=\"async\" height=\"1621\" loading=\"lazy\" sizes=\"auto, (max-width: 387px) 100vw, 387px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d522c3d857.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d522c3d857.png 387w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d522c3d857-367x1536.png 367w\" width=\"387\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFkk9LAzEQxe+C3yGs4ElhFxSpB6H\/rbZSq56Ch+z2pQ1NkzVJq\/XTm03tmqrQnIa838y8TGZmWDknz63jI+KPXeWzcNERttBrmA1N6pCM58wied2i1WnSETMLODKBBTPF\/JWcn9+QFn2xMGSgHMxa4N1GKa1AtGlbL0s44cQapKmY3FgRY+2AdejY6FxiSTrgQnlaq28IaroNfhkfS6aUUDOa7KK\/tjuheJe2DZgDmWg2XbIyAroB6NHQ1QN4WwmDJZSLPfYC1fcehTbe2ydIixULqWcHPHY\/UKyqt9CkDv+67Ifyt\/SpNEK5+mERcRuIgbe5htRl5S9SB0G9o8+wrhrDKXlsRvJdkO\/pBBK+8wHLPWCa+8fRZBeRodZl7Pc+FBz6n5UShSMjOCOKeGDDQIy227GrE+mjoD\/QsA+f1dztSu6N\/CEQzf+9uo3Ez+ISLqS8PkHGLzk\/s87oBa5P0uzyqpHHCfWabHnO+QWymm\/kVyzNYv7nx+oGPEpIs0a+n1APbNcA2V6DNEuzL3IW\/E8=\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFkk9LAzEQxe+C3yGs4ElhFxSpB6H\/rbZSq56Ch+z2pQ1NkzVJq\/XTm03tmqrQnIa838y8TGZmWDknz63jI+KPXeWzcNERttBrmA1N6pCM58wied2i1WnSETMLODKBBTPF\/JWcn9+QFn2xMGSgHMxa4N1GKa1AtGlbL0s44cQapKmY3FgRY+2AdejY6FxiSTrgQnlaq28IaroNfhkfS6aUUDOa7KK\/tjuheJe2DZgDmWg2XbIyAroB6NHQ1QN4WwmDJZSLPfYC1fcehTbe2ydIixULqWcHPHY\/UKyqt9CkDv+67Ifyt\/SpNEK5+mERcRuIgbe5htRl5S9SB0G9o8+wrhrDKXlsRvJdkO\/pBBK+8wHLPWCa+8fRZBeRodZl7Pc+FBz6n5UShSMjOCOKeGDDQIy227GrE+mjoD\/QsA+f1dztSu6N\/CEQzf+9uo3Ez+ISLqS8PkHGLzk\/s87oBa5P0uzyqpHHCfWabHnO+QWymm\/kVyzNYv7nx+oGPEpIs0a+n1APbNcA2V6DNEuzL3IW\/E8=\" 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 Mermaid 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\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFk8tu2zAQRfcF+g+Es20ACWgQOIsCfsiJEycNiu6ILChqqExCkSofRp2\/6bLrfoJ\/LCT9opsA0Uqgzsy9lzNqDesfyc\/x508kPNbXbTqYouV6CWZFBzNmgTRApmC5rw12CMrpwcOmIj4jOldLsA5bxnH9T0W6A8NZox\/I6ek3MqaVcgaWaB2zhGtFvPXMoLZZl3FCJ3Sk1n8kWoxg14NDh0udcZPETekUBCrcCUrSG11L6NgWBdVsXv5Ldi+ZUqjaQ7B4ggL5xnwebJqkKjoxwAx51E8s8sY7lkFVgmZbP4YY+OWDfXcUbpagS3ofQht8Cd1qxp+lbj9wW\/0G7h1qdbBbPYWjN1Yvk8AVPQ4TedsbVC43c5XYeXBsmTFayvx65+njdXDqoQ7TWsV5uUDFXpxJbFiT4dcJv6ELpl7YZjU+iDQDaGJ4Ohh7LlMkA0EgtO5C+dsp3CSJBf0BXPcow91167\/OhIx5qEWibun3PkxhG11q+96m3Sb0Lmxa0IyzMGC9dGFdc+ouUaP3w7hVcL7\/SYhAKS9OoBRnQnyxIcwzXJwU5dn5sM4Ldru35YUQX6Hc88P6nBVlzu+nfxAQWUFRDuvjgt3d7gWgPBIoyqJ8BUOYLFU=\" \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\">graph TB\r\n    subgraph Discovery[\"Fase de Descubrimiento\"]\r\n        A[Investigaci\u00f3n de mercado] --&gt; B[Entrevistas con usuarios]\r\n        B --&gt; C[An\u00e1lisis competitivo]\r\n        C --&gt; D[Definici\u00f3n del problema]\r\n    end\r\n    \r\n    subgraph Planning[\"Fase de Planificaci\u00f3n\"]\r\n        D --&gt; E[Crear hoja de ruta]\r\n        E --&gt; F[Definir requisitos]\r\n        F --&gt; G[Priorizar backlog]\r\n    end\r\n    \r\n    subgraph Execution[\"Fase de Ejecuci\u00f3n\"]\r\n        G --&gt; H[Planificaci\u00f3n de sprints]\r\n        H --&gt; I[Desarrollo]\r\n        I --&gt; J[Pruebas y control de calidad]\r\n        J --&gt; K[Lanzamiento]\r\n    end\r\n    \r\n    subgraph Feedback[\"Bucle de retroalimentaci\u00f3n\"]\r\n        K --&gt; L[Recopilar m\u00e9tricas]\r\n        L --&gt; M[Opini\u00f3n de los usuarios]\r\n        M --&gt; N[Analizar resultados]\r\n        N --&gt; A\r\n    end\r\n    \r\n    style Discovery fill:#e1f5ff,stroke:#01579b\r\n    style Planning fill:#fff4e1,stroke:#9b7a01\r\n    style Execution fill:#e1ffe1,stroke:#019b01\r\n    style Feedback fill:#ffe1e1,stroke:#9b0101\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFk8tu2zAQRfcF+g+Es20ACWgQOIsCfsiJEycNiu6ILChqqExCkSofRp2\/6bLrfoJ\/LCT9opsA0Uqgzsy9lzNqDesfyc\/x508kPNbXbTqYouV6CWZFBzNmgTRApmC5rw12CMrpwcOmIj4jOldLsA5bxnH9T0W6A8NZox\/I6ek3MqaVcgaWaB2zhGtFvPXMoLZZl3FCJ3Sk1n8kWoxg14NDh0udcZPETekUBCrcCUrSG11L6NgWBdVsXv5Ldi+ZUqjaQ7B4ggL5xnwebJqkKjoxwAx51E8s8sY7lkFVgmZbP4YY+OWDfXcUbpagS3ofQht8Cd1qxp+lbj9wW\/0G7h1qdbBbPYWjN1Yvk8AVPQ4TedsbVC43c5XYeXBsmTFayvx65+njdXDqoQ7TWsV5uUDFXpxJbFiT4dcJv6ELpl7YZjU+iDQDaGJ4Ohh7LlMkA0EgtO5C+dsp3CSJBf0BXPcow91167\/OhIx5qEWibun3PkxhG11q+96m3Sb0Lmxa0IyzMGC9dGFdc+ouUaP3w7hVcL7\/SYhAKS9OoBRnQnyxIcwzXJwU5dn5sM4Ldru35YUQX6Hc88P6nBVlzu+nfxAQWUFRDuvjgt3d7gWgPBIoyqJ8BUOYLFU=\" \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            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFkk9LAzEQxe+C3yGs4ElhFxSpB6H\/rbZSq56Ch+z2pQ1NkzVJq\/XTm03tmqrQnIa838y8TGZmWDknz63jI+KPXeWzcNERttBrmA1N6pCM58wied2i1WnSETMLODKBBTPF\/JWcn9+QFn2xMGSgHMxa4N1GKa1AtGlbL0s44cQapKmY3FgRY+2AdejY6FxiSTrgQnlaq28IaroNfhkfS6aUUDOa7KK\/tjuheJe2DZgDmWg2XbIyAroB6NHQ1QN4WwmDJZSLPfYC1fcehTbe2ydIixULqWcHPHY\/UKyqt9CkDv+67Ifyt\/SpNEK5+mERcRuIgbe5htRl5S9SB0G9o8+wrhrDKXlsRvJdkO\/pBBK+8wHLPWCa+8fRZBeRodZl7Pc+FBz6n5UShSMjOCOKeGDDQIy227GrE+mjoD\/QsA+f1dztSu6N\/CEQzf+9uo3Ez+ISLqS8PkHGLzk\/s87oBa5P0uzyqpHHCfWabHnO+QWymm\/kVyzNYv7nx+oGPEpIs0a+n1APbNcA2V6DNEuzL3IW\/E8=\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFkk9LAzEQxe+C3yGs4ElhFxSpB6H\/rbZSq56Ch+z2pQ1NkzVJq\/XTm03tmqrQnIa838y8TGZmWDknz63jI+KPXeWzcNERttBrmA1N6pCM58wied2i1WnSETMLODKBBTPF\/JWcn9+QFn2xMGSgHMxa4N1GKa1AtGlbL0s44cQapKmY3FgRY+2AdejY6FxiSTrgQnlaq28IaroNfhkfS6aUUDOa7KK\/tjuheJe2DZgDmWg2XbIyAroB6NHQ1QN4WwmDJZSLPfYC1fcehTbe2ydIixULqWcHPHY\/UKyqt9CkDv+67Ifyt\/SpNEK5+mERcRuIgbe5htRl5S9SB0G9o8+wrhrDKXlsRvJdkO\/pBBK+8wHLPWCa+8fRZBeRodZl7Pc+FBz6n5UShSMjOCOKeGDDQIy227GrE+mjoD\/QsA+f1dztSu6N\/CEQzf+9uo3Ez+ISLqS8PkHGLzk\/s87oBa5P0uzyqpHHCfWabHnO+QWymm\/kVyzNYv7nx+oGPEpIs0a+n1APbNcA2V6DNEuzL3IW\/E8=\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>8.4 Consejos de uso<\/h3>\n<ul>\n<li>\n<p><strong>S\u00e9 espec\u00edfico<\/strong>: Cuanto m\u00e1s detallado sea tu solicitud a la IA (incluyendo nombres de nodos y tipos de relaciones), m\u00e1s preciso ser\u00e1 el c\u00f3digo generado.<\/p>\n<\/li>\n<li>\n<p><strong>Pasos peque\u00f1os<\/strong>: Genera primero el esqueleto y luego a\u00f1ade los detalles gradualmente.<\/p>\n<\/li>\n<li>\n<p><strong>Aprovecha las plantillas<\/strong>: VP tiene muchas plantillas est\u00e1ndar de la industria integradas que se pueden reutilizar directamente.<\/p>\n<\/li>\n<li>\n<p><strong>Validaci\u00f3n temprana<\/strong>: Permite que la IA verifique la legalidad de la sintaxis antes de realizar modificaciones a gran escala.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h2>9. Mejores pr\u00e1cticas: Consejos para evitar errores<\/h2>\n<p>Basado en mi experiencia, aqu\u00ed hay algunas recomendaciones:<\/p>\n<h3>9.1 Convenciones de nombres<\/h3>\n<ul>\n<li>\n<p><strong>IDs significativos<\/strong>: Intenta usar <code data-backticks=\"1\">Inicio<\/code>,\u00a0<code data-backticks=\"1\">Proceso<\/code>,\u00a0<code data-backticks=\"1\">Fin<\/code> en lugar de <code data-backticks=\"1\">A<\/code>,\u00a0<code data-backticks=\"1\">B<\/code>,\u00a0<code data-backticks=\"1\">C<\/code> para un mantenimiento m\u00e1s f\u00e1cil.<\/p>\n<\/li>\n<li>\n<p><strong>Etiquetas concisas<\/strong>: Mant\u00e9n el texto de los nodos breve; evita p\u00e1rrafos largos.<\/p>\n<\/li>\n<\/ul>\n<h3>9.2 Optimizaci\u00f3n del dise\u00f1o<\/h3>\n<ul>\n<li>\n<p><strong>Elige la direcci\u00f3n correcta<\/strong>: Usa <code data-backticks=\"1\">TD<\/code> para diagramas de flujo, <code data-backticks=\"1\">LR<\/code> para secuencias.<\/p>\n<\/li>\n<li>\n<p><strong>Reduce los cruces<\/strong>: Reduce el desorden de l\u00edneas ajustando el orden de los nodos o usando subgrafos.<\/p>\n<\/li>\n<li>\n<p><strong>Controla la complejidad<\/strong>: Si un diagrama \u00fanico supera los 20 nodos, considera dividirlo en varios subdiagramas o gr\u00e1ficos vinculados.<\/p>\n<\/li>\n<\/ul>\n<h3>9.3 Estrategia de Mantenimiento<\/h3>\n<ul>\n<li>\n<p><strong>Gesti\u00f3n de Git<\/strong>: Aseg\u00farese de incluir <code data-backticks=\"1\">.mmd<\/code> archivos en el control de versiones.<\/p>\n<\/li>\n<li>\n<p><strong>Contexto del Documento<\/strong>: Explique el contexto empresarial y el alcance del diagrama en los comentarios del c\u00f3digo.<\/p>\n<\/li>\n<li>\n<p><strong>Revisi\u00f3n Peri\u00f3dica<\/strong>: Verifique peri\u00f3dicamente si los diagramas siguen reflejando la realidad a medida que el producto evoluciona.<\/p>\n<\/li>\n<\/ul>\n<h3>9.4 Accesibilidad<\/h3>\n<ul>\n<li>\n<p><strong>Proporcione Texto Alternativo<\/strong>: Agregue descripciones de texto detalladas para los diagramas para ayudar a usuarios con discapacidad visual o lectores de texto.<\/p>\n<\/li>\n<li>\n<p><strong>Contraste de Color<\/strong>: Aseg\u00farese de que los colores del estilo tengan un contraste suficiente.<\/p>\n<\/li>\n<\/ul>\n<h3>9.5 Colaboraci\u00f3n del Equipo<\/h3>\n<ul>\n<li>\n<p><strong>Comparta el C\u00f3digo Fuente<\/strong>: No solo comparta im\u00e1genes; comparta los archivos fuente.<\/p>\n<\/li>\n<li>\n<p><strong>Estilo Unificado<\/strong>: Acuerde esquemas de colores y convenciones de nombres dentro del equipo.<\/p>\n<\/li>\n<li>\n<p><strong>Revisi\u00f3n de C\u00f3digo<\/strong>: Incluya los cambios de c\u00f3digo del diagrama en el proceso de revisi\u00f3n de PR.<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h2>10. Estudios de Caso Completos<\/h2>\n<h3>Caso 1: Flujo de Trabajo de Sprint \u00c1gil<\/h3>\n<p id=\"EIKoJTD\"><img alt=\"Diagrama Mermaid que ilustra el flujo de trabajo de Sprint \u00c1gil con las fases de Planificaci\u00f3n del Sprint, Trabajo Diario y Revisi\u00f3n y Retroalimentaci\u00f3n.\" class=\"alignnone size-full wp-image-20182\" decoding=\"async\" height=\"200\" loading=\"lazy\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51fe08330.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51fe08330.png 2560w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51fe08330-300x23.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51fe08330-1024x80.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51fe08330-768x60.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51fe08330-1536x120.png 1536w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51fe08330-2048x160.png 2048w\" width=\"2560\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFkjFPwzAQhXck\/sMpSGzdQCAGpLZJ07QMqEVisDq48SW16tiR4wb13+OcA3IrJDxd7nu+vHdJbXl7gLfN7Q340532NTW2rZXavSuutdQ1S8Iz\/DSSXdAPZ8o22Ev8ghkvj8rUO5hMXmHGss7JhjuErTNWYhddmZFkzuamaaQDZ8b3QW64GnWoRSiunKVcqvOnsUeWUAlDHfuZ0\/CUBbp1XItTG\/GUeMZS7FGZtkHtIpoRXXhrAiEEi+iCaM4+0IfT9T9Ww3WWjPu59w1nTew1p3lL76UxunN2WNeQJ5IsSVKwnLsDWlggir1fdKQoSLFiNL1rsXSyx4iviK9ZIXxUWZ2haFprehySd39HWNOV6UUqd1Z49V9AJZV6uStLfKyqWPb7kUaFeEAheKwYdxJw9SyeBP8GL8O1Dg==\" 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>Edite Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFkjFPwzAQhXck\/sMpSGzdQCAGpLZJ07QMqEVisDq48SW16tiR4wb13+OcA3IrJDxd7nu+vHdJbXl7gLfN7Q340532NTW2rZXavSuutdQ1S8Iz\/DSSXdAPZ8o22Ev8ghkvj8rUO5hMXmHGss7JhjuErTNWYhddmZFkzuamaaQDZ8b3QW64GnWoRSiunKVcqvOnsUeWUAlDHfuZ0\/CUBbp1XItTG\/GUeMZS7FGZtkHtIpoRXXhrAiEEi+iCaM4+0IfT9T9Ww3WWjPu59w1nTew1p3lL76UxunN2WNeQJ5IsSVKwnLsDWlggir1fdKQoSLFiNL1rsXSyx4iviK9ZIXxUWZ2haFprehySd39HWNOV6UUqd1Z49V9AJZV6uStLfKyqWPb7kUaFeEAheKwYdxJw9SyeBP8GL8O1Dg==\" 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>Edite Mermaid 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\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp9ks9OwzAMxu9IvENUzruBQByQtnb\/QUwDiUO0Q9q4xVuaVG421OfaI+zFyNJqhKGRU2T\/bH+fk4JE9cmel9dXzJ16mxY+8FYRartQQmvUBY+ON8wxExke9ppJUB0SrdrK4+nzJeywFsQGItsoU6xYr\/fEBnxYWyxdeIK1NYSiDooGnol5bMqKTAkWqAaWGc3cjNd0DRZ3JhjYlYKW7eVMeCJQNR+GNjx6J5GKtWEJCkITCo39zMTJ3WrvxyMiIBJPDHkCzg4ZpUyQHPrkqHXb7YPFh73EIsRGHhvzBW0hPXm+JPzYDL549NO0cTFLRigsQdt286GLse8\/cRpLU1ty++0cB8zEM1MnNTMVKsf87RngU4\/P+L\/QzENzPpUu6z8FsRdYG7rkce4L+r9s20bB2S9jOSr1eJNlcJfnIXZ6046QtyClCIl2eV06f5D3UnwDl9XY9g==\" \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\">graph LR\r\n    subgraph SprintPlanning[\"Planificaci\u00f3n del Sprint\"]\r\n        A[Revisar Backlog] --&gt; B[Estimar Historias]\r\n        B --&gt; C[Comprometerse con el Objetivo del Sprint]\r\n    end\r\n    \r\n    subgraph DailyWork[\"Trabajo Diario\"]\r\n        C --&gt; D[Reuni\u00f3n Diaria]\r\n        D --&gt; E[Desarrollo]\r\n        E --&gt; F[Revisi\u00f3n de C\u00f3digo]\r\n        F --&gt; G[Pruebas]\r\n    end\r\n    \r\n    subgraph Review[\"Revisi\u00f3n y Retroalimentaci\u00f3n\"]\r\n        G --&gt; H[Demostrar Trabajo]\r\n        H --&gt; I[Recopilar Retroalimentaci\u00f3n]\r\n        I --&gt; J[Retroalimentaci\u00f3n]\r\n        J --&gt; K[Identificar Mejoras]\r\n    end\r\n    \r\n    K --&gt; A\r\n    \r\n    style SprintPlanning fill:#cce5ff\r\n    style DailyWork fill:#d4edda\r\n    style Review fill:#f8d7da\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp9ks9OwzAMxu9IvENUzruBQByQtnb\/QUwDiUO0Q9q4xVuaVG421OfaI+zFyNJqhKGRU2T\/bH+fk4JE9cmel9dXzJ16mxY+8FYRartQQmvUBY+ON8wxExke9ppJUB0SrdrK4+nzJeywFsQGItsoU6xYr\/fEBnxYWyxdeIK1NYSiDooGnol5bMqKTAkWqAaWGc3cjNd0DRZ3JhjYlYKW7eVMeCJQNR+GNjx6J5GKtWEJCkITCo39zMTJ3WrvxyMiIBJPDHkCzg4ZpUyQHPrkqHXb7YPFh73EIsRGHhvzBW0hPXm+JPzYDL549NO0cTFLRigsQdt286GLse8\/cRpLU1ty++0cB8zEM1MnNTMVKsf87RngU4\/P+L\/QzENzPpUu6z8FsRdYG7rkce4L+r9s20bB2S9jOSr1eJNlcJfnIXZ6046QtyClCIl2eV06f5D3UnwDl9XY9g==\" \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            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFkjFPwzAQhXck\/sMpSGzdQCAGpLZJ07QMqEVisDq48SW16tiR4wb13+OcA3IrJDxd7nu+vHdJbXl7gLfN7Q340532NTW2rZXavSuutdQ1S8Iz\/DSSXdAPZ8o22Ev8ghkvj8rUO5hMXmHGss7JhjuErTNWYhddmZFkzuamaaQDZ8b3QW64GnWoRSiunKVcqvOnsUeWUAlDHfuZ0\/CUBbp1XItTG\/GUeMZS7FGZtkHtIpoRXXhrAiEEi+iCaM4+0IfT9T9Ww3WWjPu59w1nTew1p3lL76UxunN2WNeQJ5IsSVKwnLsDWlggir1fdKQoSLFiNL1rsXSyx4iviK9ZIXxUWZ2haFprehySd39HWNOV6UUqd1Z49V9AJZV6uStLfKyqWPb7kUaFeEAheKwYdxJw9SyeBP8GL8O1Dg==\" 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>Edite Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFkjFPwzAQhXck\/sMpSGzdQCAGpLZJ07QMqEVisDq48SW16tiR4wb13+OcA3IrJDxd7nu+vHdJbXl7gLfN7Q340532NTW2rZXavSuutdQ1S8Iz\/DSSXdAPZ8o22Ev8ghkvj8rUO5hMXmHGss7JhjuErTNWYhddmZFkzuamaaQDZ8b3QW64GnWoRSiunKVcqvOnsUeWUAlDHfuZ0\/CUBbp1XItTG\/GUeMZS7FGZtkHtIpoRXXhrAiEEi+iCaM4+0IfT9T9Ww3WWjPu59w1nTew1p3lL76UxunN2WNeQJ5IsSVKwnLsDWlggir1fdKQoSLFiNL1rsXSyx4iviK9ZIXxUWZ2haFprehySd39HWNOV6UUqd1Z49V9AJZV6uStLfKyqWPb7kUaFeEAheKwYdxJw9SyeBP8GL8O1Dg==\" 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>Edite Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>Caso 2: Descripci\u00f3n general de la arquitectura de microservicios<\/h3>\n<p id=\"mYEhBIm\"><img alt=\"Diagrama que muestra una arquitectura de microservicios con los servicios de API Gateway, Pedido, Pago, Usuario, Autenticaci\u00f3n y Notificaci\u00f3n conectados a la infraestructura.\" class=\"alignnone size-full wp-image-20181\" decoding=\"async\" height=\"629\" loading=\"lazy\" sizes=\"auto, (max-width: 1003px) 100vw, 1003px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51e7e8af8.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51e7e8af8.png 1003w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51e7e8af8-300x188.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51e7e8af8-768x482.png 768w\" width=\"1003\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1Uj1vgzAQ3Sv1PyC6pEPUbCEdKiVBQhlo0y9lsDrY5gyWKFS2acW\/r79QDXI9HL73no3v3tUCfzXJ2+H6KtHr2HLoFLoAuSt7wlvwyIejXZQDqe2p\/flUYAU\/eESp3ic+Sb3arOKCAsYT0FXR+15BfHMKEqUlp6KXPg3v2w+qQSZM4oB71weQCRHuSVSatDHCnvH4aer234jisVeccYoV7zsUJgvtf6WdOiawVGKgahCA0nkeVpgf0CrHChMs4TbAj5g2gFYvUHHpkpB9HmAAVIKUuAaXxV\/k\/EzW6wftjYOKi01NV2eAaeUMsO1ziOukAX3PlrB9ggPt1oJh48JHWUONIPdzaF2MArby5c8m1eRfiHkj1KiH+W9gE8bb9v6GsWq72YSSaQa9INtSABIK5s552S5jZJf9AijN6MY=\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1Uj1vgzAQ3Sv1PyC6pEPUbCEdKiVBQhlo0y9lsDrY5gyWKFS2acW\/r79QDXI9HL73no3v3tUCfzXJ2+H6KtHr2HLoFLoAuSt7wlvwyIejXZQDqe2p\/flUYAU\/eESp3ic+Sb3arOKCAsYT0FXR+15BfHMKEqUlp6KXPg3v2w+qQSZM4oB71weQCRHuSVSatDHCnvH4aer234jisVeccYoV7zsUJgvtf6WdOiawVGKgahCA0nkeVpgf0CrHChMs4TbAj5g2gFYvUHHpkpB9HmAAVIKUuAaXxV\/k\/EzW6wftjYOKi01NV2eAaeUMsO1ziOukAX3PlrB9ggPt1oJh48JHWUONIPdzaF2MArby5c8m1eRfiHkj1KiH+W9gE8bb9v6GsWq72YSSaQa9INtSABIK5s552S5jZJf9AijN6MY=\" 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 Mermaid 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\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFkr1uwjAQx\/dKfQcrXeiAygZ0qMSHhBhoaSlisBguzgVcpU7lDyoeqTOPwIvVdhzJRlT1kPj+97PvfHc7CV978j6+vSF2TSqOQtPmh2SD+cPifDrwatv4m68y+c4fGy3nM9D4DUea2T0JRhZot2YbGnmCA0Vx9b4VygNnqGi24EzWypu8VvGFI6P3dBU8pEAn2GQ5A8bPJxGRa3s+IdfKgLTXRcyLLC6gJRa8SJglHD9dVRIKdgnzXGte2hw0r0UCtg5rClT\/vH8uSglKS8O0kUgzb2MrQFyG6Zh2xqDQxZiCrtV95JwA2yPtuN\/5h7zZFyXuV4MG6aSuwJ1eoFDw8VduzSiQbvfJtrKRZhtvukYkgqt3IvjiNorfejFU81L2OTWi33oxrmqclAvtgWmYWxf6uuBLcRmspUIuiRZaoo8VRvNNSl5Vj3dlWfR7vRhpRzYAgz5DzGMg7WnAhoMyHw5+AeWO++0=\" \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\">graph TB\r\n    Client[Cliente Web\/M\u00f3vil]\r\n    \r\n    subgraph APIGateway[\"API Gateway\"]\r\n        GW[API Gateway]\r\n    end\r\n    \r\n    subgraph Services[\"Microservicios\"]\r\n        Auth[Servicio de Autenticaci\u00f3n]\r\n        User[Servicio de Usuarios]\r\n        Order[Servicio de Pedidos]\r\n        Payment[Servicio de Pagos]\r\n        Notification[Servicio de Notificaciones]\r\n    end\r\n    \r\n    subgraph Infrastructure[\"Infraestructura\"]\r\n        DB[(Base de Datos)]\r\n        Cache[(Cach\u00e9 Redis)]\r\n        Queue[Cola de Mensajes]\r\n    end\r\n    \r\n    Client --&gt; GW\r\n    GW --&gt; Auth\r\n    GW --&gt; User\r\n    GW --&gt; Order\r\n    Order --&gt; Payment\r\n    Order --&gt; Queue\r\n    Queue --&gt; Notification\r\n    \r\n    Auth --&gt; DB\r\n    User --&gt; DB\r\n    User --&gt; Cache\r\n    Order --&gt; DB\r\n    Payment --&gt; DB\r\n    \r\n    style APIGateway fill:#ffd700\r\n    style Services fill:#87ceeb\r\n    style Infrastructure fill:#98fb98\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFkr1uwjAQx\/dKfQcrXeiAygZ0qMSHhBhoaSlisBguzgVcpU7lDyoeqTOPwIvVdhzJRlT1kPj+97PvfHc7CV978j6+vSF2TSqOQtPmh2SD+cPifDrwatv4m68y+c4fGy3nM9D4DUea2T0JRhZot2YbGnmCA0Vx9b4VygNnqGi24EzWypu8VvGFI6P3dBU8pEAn2GQ5A8bPJxGRa3s+IdfKgLTXRcyLLC6gJRa8SJglHD9dVRIKdgnzXGte2hw0r0UCtg5rClT\/vH8uSglKS8O0kUgzb2MrQFyG6Zh2xqDQxZiCrtV95JwA2yPtuN\/5h7zZFyXuV4MG6aSuwJ1eoFDw8VduzSiQbvfJtrKRZhtvukYkgqt3IvjiNorfejFU81L2OTWi33oxrmqclAvtgWmYWxf6uuBLcRmspUIuiRZaoo8VRvNNSl5Vj3dlWfR7vRhpRzYAgz5DzGMg7WnAhoMyHw5+AeWO++0=\" \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            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1Uj1vgzAQ3Sv1PyC6pEPUbCEdKiVBQhlo0y9lsDrY5gyWKFS2acW\/r79QDXI9HL73no3v3tUCfzXJ2+H6KtHr2HLoFLoAuSt7wlvwyIejXZQDqe2p\/flUYAU\/eESp3ic+Sb3arOKCAsYT0FXR+15BfHMKEqUlp6KXPg3v2w+qQSZM4oB71weQCRHuSVSatDHCnvH4aer234jisVeccYoV7zsUJgvtf6WdOiawVGKgahCA0nkeVpgf0CrHChMs4TbAj5g2gFYvUHHpkpB9HmAAVIKUuAaXxV\/k\/EzW6wftjYOKi01NV2eAaeUMsO1ziOukAX3PlrB9ggPt1oJh48JHWUONIPdzaF2MArby5c8m1eRfiHkj1KiH+W9gE8bb9v6GsWq72YSSaQa9INtSABIK5s552S5jZJf9AijN6MY=\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1Uj1vgzAQ3Sv1PyC6pEPUbCEdKiVBQhlo0y9lsDrY5gyWKFS2acW\/r79QDXI9HL73no3v3tUCfzXJ2+H6KtHr2HLoFLoAuSt7wlvwyIejXZQDqe2p\/flUYAU\/eESp3ic+Sb3arOKCAsYT0FXR+15BfHMKEqUlp6KXPg3v2w+qQSZM4oB71weQCRHuSVSatDHCnvH4aer234jisVeccYoV7zsUJgvtf6WdOiawVGKgahCA0nkeVpgf0CrHChMs4TbAj5g2gFYvUHHpkpB9HmAAVIKUuAaXxV\/k\/EzW6wftjYOKi01NV2eAaeUMsO1ziOukAX3PlrB9ggPt1oJh48JHWUONIPdzaF2MArby5c8m1eRfiHkj1KiH+W9gE8bb9v6GsWq72YSSaQa9INtSABIK5s552S5jZJf9AijN6MY=\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>Caso 3: \u00c1rbol de decisiones para la priorizaci\u00f3n de funciones<\/h3>\n<p id=\"qKbzBOw\"><img alt=\"Diagrama de \u00e1rbol de decisiones para la priorizaci\u00f3n de funciones que eval\u00faa el impacto, la viabilidad, los recursos y la alineaci\u00f3n.\" class=\"alignnone size-full wp-image-20179\" decoding=\"async\" height=\"1168\" loading=\"lazy\" sizes=\"auto, (max-width: 831px) 100vw, 831px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51cdaa021.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51cdaa021.png 831w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51cdaa021-213x300.png 213w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51cdaa021-729x1024.png 729w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d51cdaa021-768x1079.png 768w\" width=\"831\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptkU1rwzAMhu+D\/QfBYLdCTh3dYZB0jA1GGWlvoQfVURNvTpw5SkpJ+9\/nfM4Z80W2Xz16LTkxWKSwe769Abu2jIabDZ3ghZArQxDSd0UlX3vdyYLF4unyKpMU3rICBV\/Ab3Yk0lwKVC1eyoNUks\/Xv9C7Pk1MSJ8kOOoDaAOt+GGkNpbcu6Z+x\/Z1FV0gaEIqdWUEgV+jVDhz67M3muGXsPmERqTRuIF7a6VZ87mgmVfQ0UPZFl03WzbIlEgBvpJJnlE+ziSYrBwgQPGldBL5cQysx+PMZN2btNUottMrCqNrioYIRzuMUGOcYbF3gc5ohEISOi9lTMY2taAaVWVf+f8Ap65tFfDHu5Hvbrs\/cpmSz4pgepJU6vFu5RGtPFcffq+Xj8flYXlw5aH5SY8fPO8H5ZXCnw==\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptkU1rwzAMhu+D\/QfBYLdCTh3dYZB0jA1GGWlvoQfVURNvTpw5SkpJ+9\/nfM4Z80W2Xz16LTkxWKSwe769Abu2jIabDZ3ghZArQxDSd0UlX3vdyYLF4unyKpMU3rICBV\/Ab3Yk0lwKVC1eyoNUks\/Xv9C7Pk1MSJ8kOOoDaAOt+GGkNpbcu6Z+x\/Z1FV0gaEIqdWUEgV+jVDhz67M3muGXsPmERqTRuIF7a6VZ87mgmVfQ0UPZFl03WzbIlEgBvpJJnlE+ziSYrBwgQPGldBL5cQysx+PMZN2btNUottMrCqNrioYIRzuMUGOcYbF3gc5ohEISOi9lTMY2taAaVWVf+f8Ap65tFfDHu5Hvbrs\/cpmSz4pgepJU6vFu5RGtPFcffq+Xj8flYXlw5aH5SY8fPO8H5ZXCnw==\" 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 Mermaid 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\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptkc9qwkAQxu+FvsNAz0JOFnsoJP4BoYio9BJ6mGzGOHabDbsbwUYfyGPpI\/hi3cRsjaV7WdjZ3\/fNfJNpLDawGt3fgTtLi9pWSyVZsC1TSAlmJe0QJmUu+PydHy\/\/Or+h13s+hNIqmH4UKKw6QFi9MiYsOcUUVueTyFng8S8T4bbDLGhLwsYLEhv8RA0KXB1hrlnpWuetaxw2AhNHciLpAFE1YlOonL2p69spldooc+wiMwVXakGGUItNPM13ZCxn2IwIe+eqrLJcqBvXqJHwTrXCsAol59RyY2M12vMpu04bedcuFaF4lyqLw\/MXpqwBQSK8sLFY9z02BWm8MR62GddWaZ1vUWi1ozh0V+KyKlAjkIS5xLwZvbReYOgbuNIuGJUbTkm7tN1uZekk\/s\/ZJ1SLQOjfPN68NvvsMsbuJfkWYc1SPj0MAqJB0K1f1t2W1+t+0k+65Tai33r6GAQ\/MqHYgA==\" \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\">graph TD\r\n    Start{Solicitud de Nueva Funci\u00f3n}\r\n    \r\n    Start --&gt;|Alto Impacto| A{Viabilidad T\u00e9cnica}\r\n    Start --&gt;|Bajo Impacto| Reject[Rechazar o Baja Prioridad]\r\n    \r\n    A --&gt;|Factible| B{Disponibilidad de Recursos}\r\n    A --&gt;|No Factible| Research[Investigaci\u00f3n y Prototipo]\r\n    \r\n    B --&gt;|Disponible| C{Alineaci\u00f3n Estrat\u00e9gica}\r\n    B --&gt;|No Disponible| Backlog[A\u00f1adir a la Lista de Espera]\r\n    \r\n    C --&gt;|Alineado| Approve[Aprobar para el Plan de Ruta]\r\n    C --&gt;|No Alineado| Reconsider[Reevaluar Prioridad]\r\n    \r\n    Research --&gt; A\r\n    Reconsider --&gt; Start\r\n    \r\n    style Approve fill:#90ee90\r\n    style Reject fill:#ff6b6b\r\n    style Backlog fill:#ffd700\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptkc9qwkAQxu+FvsNAz0JOFnsoJP4BoYio9BJ6mGzGOHabDbsbwUYfyGPpI\/hi3cRsjaV7WdjZ3\/fNfJNpLDawGt3fgTtLi9pWSyVZsC1TSAlmJe0QJmUu+PydHy\/\/Or+h13s+hNIqmH4UKKw6QFi9MiYsOcUUVueTyFng8S8T4bbDLGhLwsYLEhv8RA0KXB1hrlnpWuetaxw2AhNHciLpAFE1YlOonL2p69spldooc+wiMwVXakGGUItNPM13ZCxn2IwIe+eqrLJcqBvXqJHwTrXCsAol59RyY2M12vMpu04bedcuFaF4lyqLw\/MXpqwBQSK8sLFY9z02BWm8MR62GddWaZ1vUWi1ozh0V+KyKlAjkIS5xLwZvbReYOgbuNIuGJUbTkm7tN1uZekk\/s\/ZJ1SLQOjfPN68NvvsMsbuJfkWYc1SPj0MAqJB0K1f1t2W1+t+0k+65Tai33r6GAQ\/MqHYgA==\" \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            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptkU1rwzAMhu+D\/QfBYLdCTh3dYZB0jA1GGWlvoQfVURNvTpw5SkpJ+9\/nfM4Z80W2Xz16LTkxWKSwe769Abu2jIabDZ3ghZArQxDSd0UlX3vdyYLF4unyKpMU3rICBV\/Ab3Yk0lwKVC1eyoNUks\/Xv9C7Pk1MSJ8kOOoDaAOt+GGkNpbcu6Z+x\/Z1FV0gaEIqdWUEgV+jVDhz67M3muGXsPmERqTRuIF7a6VZ87mgmVfQ0UPZFl03WzbIlEgBvpJJnlE+ziSYrBwgQPGldBL5cQysx+PMZN2btNUottMrCqNrioYIRzuMUGOcYbF3gc5ohEISOi9lTMY2taAaVWVf+f8Ap65tFfDHu5Hvbrs\/cpmSz4pgepJU6vFu5RGtPFcffq+Xj8flYXlw5aH5SY8fPO8H5ZXCnw==\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNptkU1rwzAMhu+D\/QfBYLdCTh3dYZB0jA1GGWlvoQfVURNvTpw5SkpJ+9\/nfM4Z80W2Xz16LTkxWKSwe769Abu2jIabDZ3ghZArQxDSd0UlX3vdyYLF4unyKpMU3rICBV\/Ab3Yk0lwKVC1eyoNUks\/Xv9C7Pk1MSJ8kOOoDaAOt+GGkNpbcu6Z+x\/Z1FV0gaEIqdWUEgV+jVDhz67M3muGXsPmERqTRuIF7a6VZ87mgmVfQ0UPZFl03WzbIlEgBvpJJnlE+ziSYrBwgQPGldBL5cQysx+PMZN2btNUottMrCqNrioYIRzuMUGOcYbF3gc5ohEISOi9lTMY2taAaVWVf+f8Ap65tFfDHu5Hvbrs\/cpmSz4pgepJU6vFu5RGtPFcffq+Xj8flYXlw5aH5SY8fPO8H5ZXCnw==\" 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 Mermaid en VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<hr\/>\n<h2>\ud83d\udcdd Conclusi\u00f3n<\/h2>\n<p>A trav\u00e9s de este per\u00edodo de pr\u00e1ctica, creo que <strong><a href=\"https:\/\/www.visual-paradigm.com\/features\/mermaid-editor\/\">Mermaid<\/a> + <a href=\"https:\/\/ai-toolbox.visual-paradigm.com\/app\/chatbot\/\">Chatbot de IA de Visual Paradigm<\/a> + <a href=\"https:\/\/www.visual-paradigm.com\/features\/vpascode\/\">VPasCode<\/a><\/strong> es una soluci\u00f3n de \u00abDiagramas como C\u00f3digo\u00bb con gran potencial.<\/p>\n<ul>\n<li>\n<p><strong>Para Individuos<\/strong>: Reduce la barrera para dibujar, permiti\u00e9ndote centrarte en la l\u00f3gica en lugar del dise\u00f1o.<\/p>\n<\/li>\n<li>\n<p><strong>Para Equipos<\/strong>: Resuelve los problemas de sincronizaci\u00f3n de documentos y gesti\u00f3n de versiones, mejorando la eficiencia de la colaboraci\u00f3n.<\/p>\n<\/li>\n<li>\n<p><strong>Para Empresas<\/strong>: Logra la estructuraci\u00f3n y automatizaci\u00f3n de los activos de conocimiento, aline\u00e1ndose con los conceptos de DevOps y Agile.<\/p>\n<\/li>\n<\/ul>\n<p>Si a\u00fan tienes dificultades para actualizar los diagramas de arquitectura o deseas mejorar el profesionalismo y la mantenibilidad de la documentaci\u00f3n de tu producto, te recomiendo encarecidamente probar este flujo de trabajo.<\/p>\n<p>\u00a1Espero que esta informaci\u00f3n sea de ayuda! Si tienes preguntas espec\u00edficas sobre el uso, no dudes en comunicarte en cualquier momento.<\/p>\n<p class=\"\"><em>(Nota: Todo el c\u00f3digo Mermaid de este art\u00edculo se puede renderizar directamente en VPasCode que soporta Mermaid en Visual Paradigm.)<br \/>\n<\/em><\/p>\n<h2>Referencias<\/h2>\n<div class=\"sc-46jc02-0 fPzQAv\">\n<div class=\"sc-46jc02-1 gNJhWh\">\n<div id=\"editor\">\n<div>\n<div>\n<div>\n<div>\n<div>\n<div>\n<ol>\n<li><a href=\"https:\/\/updates.visual-paradigm.com\/releases\/ai-chart-generation-create-with-chatbot-edit-with-vpascode\/#content\"><strong>Generaci\u00f3n de gr\u00e1ficos con IA: Crea con el chatbot, edita con VPasCode<\/strong><\/a>: Notas de lanzamiento oficiales sobre el flujo de trabajo del generador de gr\u00e1ficos con IA, que permite la creaci\u00f3n de gr\u00e1ficos mediante chatbot y la edici\u00f3n directa en VPasCode para refinar datos y estilo.<\/li>\n<li><a href=\"https:\/\/blog.visual-paradigm.com\/fr\/from-code-to-clarity-a-beginners-guide-to-seamless-diagramming-with-vpascode-and-opendocs\/\"><strong>De c\u00f3digo a claridad: Una gu\u00eda para principiantes sobre diagramaci\u00f3n fluida con VPasCode y OpenDocs<\/strong><\/a>: Un tutorial (en franc\u00e9s) que cubre el flujo de trabajo de VPasCode a OpenDocs para enviar diagramas directamente a la documentaci\u00f3n, con ejemplos pr\u00e1cticos de PlantUML.<\/li>\n<li><a href=\"https:\/\/www.cnblogs.com\/uml-tool\/p\/19569737\/visual-paradigm-ai-chatbot-diagram-refinement#1\"><strong>Rese\u00f1a del producto: Visual Paradigm AI Chatbot \u2013 El \u201cacelerador de IA\u201d para la modelaci\u00f3n de desarrolladores<\/strong><\/a>: Una rese\u00f1a pr\u00e1ctica (en chino) que detalla c\u00f3mo el chatbot de IA genera diagramas de casos de uso UML a partir de indicaciones, maneja<code data-backticks=\"1\">&lt;&lt;include&gt;&gt;<\/code> y <code data-backticks=\"1\">&lt;&lt;extend&gt;&gt;<\/code> relaciones, y soporta el refinamiento conversacional iterativo.<\/li>\n<li><a href=\"https:\/\/www.vpascode.com\/\"><strong>VPasCode: Herramienta gratuita de texto a diagrama y editor de diagramas como c\u00f3digo<\/strong><\/a>: La p\u00e1gina oficial del producto para VPasCode, que destaca su soporte para PlantUML, Mermaid y Graphviz, junto con funciones impulsadas por IA como la correcci\u00f3n de errores de sintaxis y la traducci\u00f3n de diagramas.<\/li>\n<li><a href=\"https:\/\/www.vpascode.com\/tw\/docs\/vpascode-docs\/introduction-getting-started\/60-second-vpascode-quickstart-guide\/\"><strong>Gu\u00eda r\u00e1pida de VPasCode en 60 segundos<\/strong><\/a>: Una gu\u00eda r\u00e1pida que muestra c\u00f3mo crear, personalizar y compartir un diagrama en menos de un minuto utilizando la vista previa en tiempo real y las URL compartibles de VPasCode.<\/li>\n<li><a href=\"https:\/\/updates.visual-paradigm.com\/releases\/edit-sync-diagrams-ai-chatbot-opendocs-vpascode\/\"><strong>Gesti\u00f3n fluida del ciclo de vida de los diagramas: Edita y sincroniza diagramas generados por IA desde el chatbot de IA hasta OpenDocs a trav\u00e9s de VPasCode<\/strong><\/a>: Anuncio de un flujo de trabajo mejorado donde los usuarios pueden generar un diagrama con el chatbot de IA, documentarlo en OpenDocs y volver a editarlo a trav\u00e9s de VPasCode para un control total del ciclo de vida.<\/li>\n<li><a href=\"https:\/\/www.go-diagram.com\/mastering-data-flow-diagrams-a-hands-on-review-of-visual-paradigms-ai-powered-dfd-generator\/\"><strong>Dominando los diagramas de flujo de datos: Una rese\u00f1a pr\u00e1ctica del generador de DFD impulsado por IA de Visual Paradigm<\/strong><\/a>: Una rese\u00f1a de las capacidades de generaci\u00f3n de DFD del chatbot de IA, centr\u00e1ndose en los l\u00edmites del sistema y la integraci\u00f3n con VPasCode para una personalizaci\u00f3n instant\u00e1nea utilizando sintaxis de Graphviz.<\/li>\n<li><a href=\"https:\/\/www.vpascode.com\/whats-new-in-vpascode-launch-feature-roundup\/#content\"><strong>Novedades en VPasCode \u2013 Resumen de funciones de lanzamiento<\/strong><\/a>: Un resumen de funciones que detalla el soporte de m\u00faltiples sintaxis de VPasCode, la correcci\u00f3n de errores de c\u00f3digo con IA, la traducci\u00f3n con IA y su integraci\u00f3n con Visual Paradigm OpenDocs para la documentaci\u00f3n.<\/li>\n<li><a href=\"https:\/\/www.vpascode.com\/seamlessly-connect-diagrams-to-documentation-with-opendocs\/#content\"><strong>Conecta diagramas a la documentaci\u00f3n de forma fluida con OpenDocs<\/strong><\/a>: Un art\u00edculo que explica c\u00f3mo VPasCode act\u00faa como puente hacia OpenDocs, transformando diagramas est\u00e1ticos en activos de documentaci\u00f3n vivos y resolviendo el problema de la \u201crotura de documentaci\u00f3n\u201d.<\/li>\n<li><a href=\"https:\/\/www.cnblogs.com\/uml-tool\/p\/22514491\/DFD-top-down-decomposition-visual-paradigm-tool-with-ai-chatbot-vpascode-features#commentform#1\"><strong>Rese\u00f1a pr\u00e1ctica: Uso de la descomposici\u00f3n top-down de DFD asistida por IA con Visual Paradigm + VPasCode<\/strong><\/a>: La experiencia de un usuario (en chino) que utiliza el chatbot de IA como un \u201centrenador privado de DFD\u201d para la descomposici\u00f3n top-down, y usa VPasCode para editar y refinar los diagramas.<\/li>\n<li><a href=\"https:\/\/blog.51cto.com\/u_13102515\/14841078#1\"><strong>Rese\u00f1a en profundidad: VPasCode con Apache ECharts e IA \u2013 Di adi\u00f3s al arrastrar y soltar<\/strong><\/a>: Una rese\u00f1a de un desarrollador (en chino) que muestra c\u00f3mo VPasCode unifica los diagramas como c\u00f3digo con IA para generar paneles de ECharts y diagramas de PlantUML, junto con una gu\u00eda de 5 pasos para comenzar.<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"sc-afr2nh-0 sc-97fke2-1 jmpjbl hkyNvy\">\n<div class=\"sc-97fke2-2 geHObL\">\n<h3 id=\"packages\"><\/h3>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u2014\u2014 Compartir mejores pr\u00e1cticas con el chatbot de IA de Visual Paradigm + VPasCode Hola a todos, soy Angus. Como<\/p>\n","protected":false},"author":11,"featured_media":11365,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","footnotes":""},"categories":[117],"tags":[],"class_list":["post-11364","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vpascode"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>An\u00e1lisis en profundidad: Diagramas como c\u00f3digo con Mermaid utilizando VPasCode - Cibermedio<\/title>\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.cybermedian.com\/es\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"An\u00e1lisis en profundidad: Diagramas como c\u00f3digo con Mermaid utilizando VPasCode - Cibermedio\" \/>\n<meta property=\"og:description\" content=\"\u2014\u2014 Compartir mejores pr\u00e1cticas con el chatbot de IA de Visual Paradigm + VPasCode Hola a todos, soy Angus. Como\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cybermedian.com\/es\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/\" \/>\n<meta property=\"og:site_name\" content=\"Cibermedio\" \/>\n<meta property=\"article:published_time\" content=\"2026-08-25T07:50:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-03T15:26:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4f60c67dd.png\" \/><meta property=\"og:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4f60c67dd.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"572\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"curtis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4f60c67dd.png\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"curtis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.cybermedian.com\/es\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.cybermedian.com\/es\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/\"},\"author\":{\"name\":\"curtis\",\"@id\":\"https:\/\/www.cybermedian.com\/es\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"headline\":\"An\u00e1lisis en profundidad: Diagramas como c\u00f3digo con Mermaid utilizando VPasCode\",\"datePublished\":\"2026-08-25T07:50:31+00:00\",\"dateModified\":\"2026-09-03T15:26:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/es\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/\"},\"wordCount\":2686,\"image\":{\"@id\":\"https:\/\/www.cybermedian.com\/es\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cybermedian.com\/es\/wp-content\/uploads\/sites\/8\/2026\/08\/img_6a8d4f60c67dd.png\",\"articleSection\":[\"VPasCode\"],\"inLanguage\":\"es\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.cybermedian.com\/es\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/\",\"url\":\"https:\/\/www.cybermedian.com\/es\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/\",\"name\":\"An\u00e1lisis en profundidad: Diagramas como c\u00f3digo con Mermaid utilizando VPasCode - Cibermedio\",\"isPartOf\":{\"@id\":\"https:\/\/www.cybermedian.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/es\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.cybermedian.com\/es\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cybermedian.com\/es\/wp-content\/uploads\/sites\/8\/2026\/08\/img_6a8d4f60c67dd.png\",\"datePublished\":\"2026-08-25T07:50:31+00:00\",\"dateModified\":\"2026-09-03T15:26:01+00:00\",\"author\":{\"@id\":\"https:\/\/www.cybermedian.com\/es\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.cybermedian.com\/es\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.cybermedian.com\/es\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.cybermedian.com\/es\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/#primaryimage\",\"url\":\"https:\/\/www.cybermedian.com\/es\/wp-content\/uploads\/sites\/8\/2026\/08\/img_6a8d4f60c67dd.png\",\"contentUrl\":\"https:\/\/www.cybermedian.com\/es\/wp-content\/uploads\/sites\/8\/2026\/08\/img_6a8d4f60c67dd.png\",\"width\":1024,\"height\":572},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.cybermedian.com\/es\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.cybermedian.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"An\u00e1lisis en profundidad: Diagramas como c\u00f3digo con Mermaid utilizando VPasCode\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.cybermedian.com\/es\/#website\",\"url\":\"https:\/\/www.cybermedian.com\/es\/\",\"name\":\"Cibermedio\",\"description\":\"Aprendiendo una cosa nueva todos los d\u00edas\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.cybermedian.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.cybermedian.com\/es\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\",\"name\":\"curtis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.cybermedian.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"caption\":\"curtis\"},\"url\":\"https:\/\/www.cybermedian.com\/es\/author\/curtis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"An\u00e1lisis en profundidad: Diagramas como c\u00f3digo con Mermaid utilizando VPasCode - Cibermedio","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.cybermedian.com\/es\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/","og_locale":"es_ES","og_type":"article","og_title":"An\u00e1lisis en profundidad: Diagramas como c\u00f3digo con Mermaid utilizando VPasCode - Cibermedio","og_description":"\u2014\u2014 Compartir mejores pr\u00e1cticas con el chatbot de IA de Visual Paradigm + VPasCode Hola a todos, soy Angus. Como","og_url":"https:\/\/www.cybermedian.com\/es\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/","og_site_name":"Cibermedio","article_published_time":"2026-08-25T07:50:31+00:00","article_modified_time":"2026-09-03T15:26:01+00:00","og_image":[{"url":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4f60c67dd.png","type":"","width":"","height":""},{"width":1024,"height":572,"url":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4f60c67dd.png","type":"image\/png"}],"author":"curtis","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/08\/img_6a8d4f60c67dd.png","twitter_misc":{"Escrito por":"curtis","Tiempo de lectura":"12 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.cybermedian.com\/es\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/#article","isPartOf":{"@id":"https:\/\/www.cybermedian.com\/es\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/"},"author":{"name":"curtis","@id":"https:\/\/www.cybermedian.com\/es\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"headline":"An\u00e1lisis en profundidad: Diagramas como c\u00f3digo con Mermaid utilizando VPasCode","datePublished":"2026-08-25T07:50:31+00:00","dateModified":"2026-09-03T15:26:01+00:00","mainEntityOfPage":{"@id":"https:\/\/www.cybermedian.com\/es\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/"},"wordCount":2686,"image":{"@id":"https:\/\/www.cybermedian.com\/es\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cybermedian.com\/es\/wp-content\/uploads\/sites\/8\/2026\/08\/img_6a8d4f60c67dd.png","articleSection":["VPasCode"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/www.cybermedian.com\/es\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/","url":"https:\/\/www.cybermedian.com\/es\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/","name":"An\u00e1lisis en profundidad: Diagramas como c\u00f3digo con Mermaid utilizando VPasCode - Cibermedio","isPartOf":{"@id":"https:\/\/www.cybermedian.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.cybermedian.com\/es\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/#primaryimage"},"image":{"@id":"https:\/\/www.cybermedian.com\/es\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cybermedian.com\/es\/wp-content\/uploads\/sites\/8\/2026\/08\/img_6a8d4f60c67dd.png","datePublished":"2026-08-25T07:50:31+00:00","dateModified":"2026-09-03T15:26:01+00:00","author":{"@id":"https:\/\/www.cybermedian.com\/es\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"breadcrumb":{"@id":"https:\/\/www.cybermedian.com\/es\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.cybermedian.com\/es\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.cybermedian.com\/es\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/#primaryimage","url":"https:\/\/www.cybermedian.com\/es\/wp-content\/uploads\/sites\/8\/2026\/08\/img_6a8d4f60c67dd.png","contentUrl":"https:\/\/www.cybermedian.com\/es\/wp-content\/uploads\/sites\/8\/2026\/08\/img_6a8d4f60c67dd.png","width":1024,"height":572},{"@type":"BreadcrumbList","@id":"https:\/\/www.cybermedian.com\/es\/deep-dive-review-diagram-as-code-with-mermaid-using-vpascode\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.cybermedian.com\/es\/"},{"@type":"ListItem","position":2,"name":"An\u00e1lisis en profundidad: Diagramas como c\u00f3digo con Mermaid utilizando VPasCode"}]},{"@type":"WebSite","@id":"https:\/\/www.cybermedian.com\/es\/#website","url":"https:\/\/www.cybermedian.com\/es\/","name":"Cibermedio","description":"Aprendiendo una cosa nueva todos los d\u00edas","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.cybermedian.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.cybermedian.com\/es\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d","name":"curtis","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.cybermedian.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","caption":"curtis"},"url":"https:\/\/www.cybermedian.com\/es\/author\/curtis\/"}]}},"_links":{"self":[{"href":"https:\/\/www.cybermedian.com\/es\/wp-json\/wp\/v2\/posts\/11364","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cybermedian.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cybermedian.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/es\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/es\/wp-json\/wp\/v2\/comments?post=11364"}],"version-history":[{"count":0,"href":"https:\/\/www.cybermedian.com\/es\/wp-json\/wp\/v2\/posts\/11364\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/es\/wp-json\/wp\/v2\/media\/11365"}],"wp:attachment":[{"href":"https:\/\/www.cybermedian.com\/es\/wp-json\/wp\/v2\/media?parent=11364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cybermedian.com\/es\/wp-json\/wp\/v2\/categories?post=11364"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cybermedian.com\/es\/wp-json\/wp\/v2\/tags?post=11364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}