![\"Flujo](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/09\/img_6aacd7d64dbf5.png\")
<\/p>\nEl Chatbot de IA de Visual Paradigm permite crear un Diagrama de Contexto de Sistema C4 a partir de una descripci\u00f3n en lenguaje natural de una aplicaci\u00f3n, sus usuarios y los sistemas externos con los que interact\u00faa. Sin embargo, un diagrama generado por IA es m\u00e1s \u00fatil cuando permanece editable y mantenible despu\u00e9s de su generaci\u00f3n.<\/p>\n
Esta gu\u00eda demuestra un flujo de trabajo de extremo a extremo para generar un diagrama de contexto de una Plataforma de Entrega de Comida utilizando C4-PlantUML. Aprender\u00e1 c\u00f3mo pasar de un diagrama generado por IA a c\u00f3digo PlantUML editable, refinar el modelo en VPasCode y continuar edit\u00e1ndolo visualmente en Visual Paradigm Online. El enfoque combina la velocidad del modelado asistido por IA con la flexibilidad del diagrama como c\u00f3digo y la comodidad de un editor de diagramas gr\u00e1ficos.<\/p>\n
<\/p>\n
Visual Paradigm proporciona un flujo de trabajo pr\u00e1ctico para convertir una descripci\u00f3n de arquitectura en lenguaje natural en un Diagrama de Contexto C4 editable:<\/p>\n
Describa el sistema en el Chatbot de IA de Visual Paradigm.<\/p>\n
![\"El](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/09\/img_6aacd32cad84d.png\")
<\/p>\n<\/li>\n
Genere y revise el Diagrama de Contexto de Sistema C4.<\/p>\n<\/li>\n
Abra el resultado en VPasCode como C4-PlantUML.<\/p>\n
![\"El](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/09\/img_6aacd349bc71b.png\")
<\/p>\n<\/li>\n
Modifique el diagrama editando el c\u00f3digo PlantUML.<\/p>\n
![\"Interfaz](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/09\/img_6aacd35c46b64.png\")
<\/p>\n<\/li>\n
Opcionalmente, env\u00ede el resultado a Visual Paradigm Online.<\/p>\n
![\"Interfaz](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/09\/img_6aacd36bb1156.png\")
<\/p>\n<\/li>\n
Modifique el diagrama visualmente utilizando el editor de diagramas de arrastrar y soltar.<\/p>\n<\/li>\n<\/ol>\n
Esto le ofrece dos rutas de edici\u00f3n:<\/p>\n
Edici\u00f3n basada en c\u00f3digo:<\/strong> VPasCode y C4-PlantUML<\/p>\n<\/li>\n Edici\u00f3n basada en interfaz gr\u00e1fica:<\/strong> Editor de Diagramas de Visual Paradigm Online<\/p>\n<\/li>\n<\/ul>\n El Chatbot de IA de Visual Paradigm admite diagramas de Contexto de Sistema, Contenedor, Componente y Despliegue C4. Tambi\u00e9n puede refinar un diagrama generado mediante comandos en lenguaje natural, como agregar, eliminar, renombrar o reconectar elementos.<\/p>\n Un Diagrama de Contexto C4 es la vista de nivel m\u00e1s alto de un sistema de software. Muestra:<\/p>\n Elsistema de inter\u00e9s<\/strong><\/p>\n<\/li>\n Usuarios humanos y actores organizacionales<\/p>\n<\/li>\n Sistemas de software externos<\/p>\n<\/li>\n Relaciones importantes entre estos elementos<\/p>\n<\/li>\n Una breve descripci\u00f3n de c\u00f3mo funciona cada relaci\u00f3n<\/p>\n<\/li>\n<\/ul>\n Normalmente no muestra servicios internos, bases de datos, clases, APIs o detalles de infraestructura. Estos pertenecen a diagramas C4 de niveles inferiores.<\/p>\n Por ejemplo, un diagrama de contexto para una plataforma de entrega de comida en l\u00ednea podr\u00eda contener:<\/p>\n Cliente<\/p>\n<\/li>\n Gerente del Restaurante<\/p>\n<\/li>\n Repartidor<\/p>\n<\/li>\n Proveedor de Pagos<\/p>\n<\/li>\n Servicio de Mapas y Geolocalizaci\u00f3n<\/p>\n<\/li>\n Servicio de Notificaciones<\/p>\n<\/li>\n Plataforma de Entrega de Comida<\/p>\n<\/li>\n<\/ul>\n El sistema central debe permanecer como el foco visual. Las personas y sistemas externos deben colocarse a su alrededor.<\/p>\n La calidad del diagrama generado depende en gran medida de la descripci\u00f3n de la arquitectura proporcionada al chatbot.<\/p>\n Un prompt \u00fatil especifica:<\/p>\n El nombre del sistema<\/p>\n<\/li>\n El prop\u00f3sito del sistema<\/p>\n<\/li>\n Las personas que lo utilizan<\/p>\n<\/li>\n Los sistemas externos con los que se comunica<\/p>\n<\/li>\n Las relaciones entre ellos<\/p>\n<\/li>\n El nivel de diagrama C4 deseado<\/p>\n<\/li>\n El formato de salida deseado<\/p>\n<\/li>\n Lo que no debe incluirse<\/p>\n<\/li>\n<\/ul>\n La instrucci\u00f3n expl\u00edcita de excluir detalles internos es importante. Sin ella, un generador de IA podr\u00eda producir un diagrama que mezcle informaci\u00f3n de nivel de contexto y de nivel de contenedor.<\/p>\n Abra el Chatbot de IA de Visual Paradigm e inicie una nueva conversaci\u00f3n o sesi\u00f3n de generaci\u00f3n de diagramas.<\/p>\n Dependiendo de la interfaz y la edici\u00f3n de suscripci\u00f3n, el chatbot puede proporcionar un selector de tipo de diagrama. Seleccione:<\/p>\n Modelo C4<\/strong><\/p>\n<\/li>\n Diagrama de Contexto de Sistema<\/strong><\/p>\n<\/li>\n<\/ul>\n Luego ingrese el prompt.<\/p>\n El flujo de trabajo general del chatbot de Visual Paradigm es:<\/p>\n Describa el diagrama.<\/p>\n<\/li>\n Permita que la IA genere el modelo inicial.<\/p>\n<\/li>\n Revise el resultado.<\/p>\n<\/li>\n Ref\u00ednelo con comandos en lenguaje natural.<\/p>\n<\/li>\n Exporte o contin\u00fae editando en otra herramienta de Visual Paradigm.<\/p>\n<\/li>\n<\/ol>\n Verifique si el diagrama contiene:<\/p>\n Exactamente un sistema central<\/p>\n<\/li>\n Todas las personas requeridas<\/p>\n<\/li>\n Todos los sistemas externos relevantes<\/p>\n<\/li>\n Direcciones de relaci\u00f3n correctas<\/p>\n<\/li>\n Descripciones de relaci\u00f3n concisas<\/p>\n<\/li>\n Sin servicios internos ni bases de datos innecesarios<\/p>\n<\/li>\n Nomenclatura consistente<\/p>\n<\/li>\n Dise\u00f1o legible<\/p>\n<\/li>\n<\/ul>\n Un diagrama generado es un punto de partida, no un sustituto de la revisi\u00f3n de arquitectura.<\/p>\n El chatbot puede modificar el diagrama utilizando lenguaje cotidiano.<\/p>\n La documentaci\u00f3n del Chatbot de IA describe este enfoque iterativo, incluidos comandos para agregar pasarelas de pago, renombrar elementos, cambiar relaciones y refactorizar diagramas.<\/p>\n Despu\u00e9s de generar y refinar el diagrama, use la acci\u00f3n etiquetada de manera similar a:<\/p>\n Abrir en VPasCode<\/strong><\/p>\n<\/li>\n Editar en VPasCode<\/strong><\/p>\n<\/li>\n Abrir c\u00f3digo<\/strong><\/p>\n<\/li>\n Generar c\u00f3digo para edici\u00f3n<\/strong><\/p>\n<\/li>\n<\/ul>\n La etiqueta exacta del bot\u00f3n puede variar seg\u00fan la interfaz actual.<\/p>\n Esto transfiere el c\u00f3digo del diagrama a VPasCode, donde puede editar el diagrama como texto mientras visualiza una vista previa renderizada en vivo. Visual Paradigm describe VPasCode como un editor de diagramas como c\u00f3digo basado en navegador que admite PlantUML, modelos C4, Mermaid, Graphviz y otros formatos de sintaxis.<\/p>\n El c\u00f3digo generado debe usar C4-PlantUML, t\u00edpicamente con:<\/p>\n1. Comprender el Diagrama de Contexto C4<\/h2>\n
\n
\n
2. Prepare un buen prompt para IA<\/h2>\n
\n
Ejemplo de prompt<\/h3>\n
Cree un Diagrama de Contexto de Sistema C4 para una plataforma de entrega de comida en l\u00ednea.\n\nSistema de inter\u00e9s:\nPlataforma de Entrega de Comida \u2014 permite a los clientes navegar por restaurantes, realizar pedidos, efectuar pagos y rastrear entregas.\n\nPersonas:\n1. Cliente \u2014 navega por restaurantes, realiza pedidos, paga y rastrea la entrega.\n2. Gerente de Restaurante \u2014 gestiona men\u00fas, acepta pedidos y actualiza el estado del pedido.\n3. Repartidor \u2014 acepta trabajos de entrega y actualiza el progreso de la entrega.\n4. Administrador de Operaciones \u2014 monitorea la actividad de la plataforma y resuelve problemas de soporte.\n\nSistemas externos:\n1. Proveedor de Pagos \u2014 autoriza y captura los pagos de los clientes.\n2. Servicio de Mapas y Geolocalizaci\u00f3n \u2014 proporciona direcciones, rutas y ubicaciones de entrega.\n3. Servicio de Notificaciones \u2014 env\u00eda correos electr\u00f3nicos, SMS y notificaciones push.\n\nRelaciones:\n- El Cliente utiliza la Plataforma de Entrega de Comida para navegar por restaurantes, realizar pedidos, efectuar pagos y rastrear entregas.\n- El Gerente de Restaurante utiliza la Plataforma de Entrega de Comida para gestionar men\u00fas y procesar pedidos.\n- El Repartidor utiliza la Plataforma de Entrega de Comida para recibir trabajos de entrega y actualizar el estado de la entrega.\n- El Administrador de Operaciones utiliza la Plataforma de Entrega de Comida para monitorear operaciones y resolver problemas.\n- La Plataforma de Entrega de Comida utiliza el Proveedor de Pagos para autorizar y capturar pagos.\n- La Plataforma de Entrega de Comida utiliza el Servicio de Mapas y Geolocalizaci\u00f3n para calcular rutas y rastrear ubicaciones.\n- La Plataforma de Entrega de Comida utiliza el Servicio de Notificaciones para enviar notificaciones.\n\nGenere un Diagrama de Contexto de Sistema C4 limpio. No muestre contenedores internos, componentes, bases de datos, clases ni infraestructura de implementaci\u00f3n. Utilice etiquetas de relaci\u00f3n concisas.\n<\/code><\/pre>\n3. Genere el diagrama en el Chatbot de IA de Visual Paradigm<\/h2>\n
\n
\n
Revise el primer resultado<\/h3>\n
\n
4. Refine el diagrama mediante conversaci\u00f3n<\/h2>\n
A\u00f1ada un elemento<\/h3>\n
A\u00f1ada un Agente de Atenci\u00f3n al Cliente que utilice la Plataforma de Entrega de Comida para investigar incidencias de los clientes y gestionar devoluciones.\r\n<\/code><\/pre>\nA\u00f1ada un sistema externo<\/h3>\n
A\u00f1ada un Servicio Externo de Detecci\u00f3n de Fraude utilizado por la Plataforma de Entrega de Comida para evaluar pagos sospechosos.\r\n<\/code><\/pre>\nRenombrar un elemento<\/h3>\n
Renombrar \"Servicio de Notificaci\u00f3n\" a \"Servicio de Mensajer\u00eda y Notificaci\u00f3n\".\r\n<\/code><\/pre>\nCambiar una relaci\u00f3n<\/h3>\n
Cambie la relaci\u00f3n entre el Repartidor y la Plataforma de Entrega de Comida a:\r\n\"Recibe asignaciones de entrega y env\u00eda actualizaciones del estado de la entrega\".\r\n<\/code><\/pre>\nEliminar un elemento<\/h3>\n
Elimine al Administrador de Operaciones del diagrama.\r\n<\/code><\/pre>\nMejore el dise\u00f1o<\/h3>\n
Reorganice el diagrama de modo que las personas aparezcan en la parte superior, los sistemas externos en la parte inferior y la Plataforma de Entrega de Comida permanezca centrada.\r\n<\/code><\/pre>\nSimplifique el diagrama<\/h3>\n
Simplifique esto en un Diagrama de Contexto de Sistema C4 estricto. Elimine detalles de implementaci\u00f3n, bases de datos, APIs, microservicios y componentes internos.\r\n<\/code><\/pre>\nSolicite una revisi\u00f3n de consistencia<\/h3>\n
Revise el diagramo en busca de relaciones faltantes, etiquetas ambiguas, sistemas duplicados y elementos que no pertenecen a un Diagrama de Contexto C4.\r\n<\/code><\/pre>\nParte 1: Abrir el diagrama en VPasCode para la edici\u00f3n de c\u00f3digo<\/h1>\n
5. Use “Abrir en VPasCode” o “Editar en VPasCode”<\/h2>\n
\n
\n\nPlantUML<\/span>
\n
\n