![\"Flux](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/09\/img_6aacd7d64dbf5.png\")
<\/p>\nLe chatbot IA Visual Paradigm permet de cr\u00e9er un diagramme de contexte syst\u00e8me C4 \u00e0 partir d’une description en langage naturel d’une application, de ses utilisateurs et des syst\u00e8mes externes avec lesquels elle interagit. Cependant, un diagramme g\u00e9n\u00e9r\u00e9 par IA est le plus utile lorsqu’il reste modifiable et maintenable apr\u00e8s sa g\u00e9n\u00e9ration.<\/p>\n
Ce guide pr\u00e9sente un flux de travail complet pour g\u00e9n\u00e9rer un diagramme de contexte de plateforme de livraison de nourriture en utilisant C4-PlantUML. Vous apprendrez comment passer d’un diagramme g\u00e9n\u00e9r\u00e9 par IA \u00e0 du code PlantUML modifiable, affiner le mod\u00e8le dans VPasCode, puis continuer \u00e0 l’\u00e9diter visuellement dans Visual Paradigm Online. Cette approche combine la rapidit\u00e9 de la mod\u00e9lisation assist\u00e9e par IA, la flexibilit\u00e9 du diagramme en tant que code et la commodit\u00e9 d’un \u00e9diteur de diagrammes graphique.<\/p>\n
<\/p>\n
Visual Paradigm propose un flux de travail pratique pour transformer une description d’architecture en langage naturel en un diagramme de contexte C4 modifiable :<\/p>\n
D\u00e9crivez le syst\u00e8me dans le chatbot IA Visual Paradigm.<\/p>\n
![\"Le](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/09\/img_6aacd32cad84d.png\")
<\/p>\n<\/li>\n
G\u00e9n\u00e9rez et examinez le diagramme de contexte syst\u00e8me C4.<\/p>\n<\/li>\n
Ouvrez le r\u00e9sultat dans VPasCode en tant que C4-PlantUML.<\/p>\n
![\"Le](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/09\/img_6aacd349bc71b.png\")
<\/p>\n<\/li>\n
Modifiez le diagramme en \u00e9ditant le code PlantUML.<\/p>\n
![\"Interface](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/09\/img_6aacd35c46b64.png\")
<\/p>\n<\/li>\n
Optionnellement, envoyez le r\u00e9sultat \u00e0 Visual Paradigm Online.<\/p>\n
![\"Interface](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/09\/img_6aacd36bb1156.png\")
<\/p>\n<\/li>\n
Modifiez le diagramme visuellement en utilisant l’\u00e9diteur de diagrammes par glisser-d\u00e9poser.<\/p>\n<\/li>\n<\/ol>\n
Cela vous offre deux chemins d’\u00e9dition :<\/p>\n
\u00c9dition bas\u00e9e sur le code :<\/strong> VPasCode et C4-PlantUML<\/p>\n<\/li>\n \u00c9dition bas\u00e9e sur une interface graphique :<\/strong> \u00c9diteur de diagrammes Visual Paradigm Online<\/p>\n<\/li>\n<\/ul>\n Le chatbot IA de Visual Paradigm prend en charge les diagrammes de contexte syst\u00e8me C4, de conteneurs, de composants et de d\u00e9ploiement. Il peut \u00e9galement affiner un diagramme g\u00e9n\u00e9r\u00e9 gr\u00e2ce \u00e0 des commandes en langage naturel telles que l’ajout, la suppression, le renommage ou la reconnexion d’\u00e9l\u00e9ments.<\/p>\n Un diagramme de contexte C4 est la vue de plus haut niveau d’un syst\u00e8me logiciel. Il montre :<\/p>\n Le syst\u00e8me d’int\u00e9r\u00eat<\/strong><\/p>\n<\/li>\n Utilisateurs humains et acteurs organisationnels<\/p>\n<\/li>\n Syst\u00e8mes logiciels externes<\/p>\n<\/li>\n Relations importantes entre ces \u00e9l\u00e9ments<\/p>\n<\/li>\n Une br\u00e8ve description du fonctionnement de chaque relation<\/p>\n<\/li>\n<\/ul>\n Il ne montre g\u00e9n\u00e9ralement pas les services internes, les bases de donn\u00e9es, les classes, les API ou les d\u00e9tails d’infrastructure. Ceux-ci appartiennent aux diagrammes C4 de niveau inf\u00e9rieur.<\/p>\n Par exemple, un diagramme de contexte pour une plateforme de livraison de nourriture en ligne pourrait contenir :<\/p>\n Client<\/p>\n<\/li>\n G\u00e9rant du restaurant<\/p>\n<\/li>\n Livreur<\/p>\n<\/li>\n Fournisseur de paiement<\/p>\n<\/li>\n Service de cartographie et de g\u00e9olocalisation<\/p>\n<\/li>\n Service de notification<\/p>\n<\/li>\n Plateforme de livraison de repas<\/p>\n<\/li>\n<\/ul>\n Le syst\u00e8me central doit rester le point focal visuel. Les personnes et syst\u00e8mes externes doivent \u00eatre plac\u00e9s autour de lui.<\/p>\n La qualit\u00e9 du diagramme g\u00e9n\u00e9r\u00e9 d\u00e9pend fortement de la description de l’architecture fournie au chatbot.<\/p>\n Un prompt utile pr\u00e9cise :<\/p>\n Le nom du syst\u00e8me<\/p>\n<\/li>\n L’objectif du syst\u00e8me<\/p>\n<\/li>\n Les personnes qui l’utilisent<\/p>\n<\/li>\n Les syst\u00e8mes externes avec lesquels il communique<\/p>\n<\/li>\n Les relations entre eux<\/p>\n<\/li>\n Le niveau de diagramme C4 souhait\u00e9<\/p>\n<\/li>\n Le format de sortie souhait\u00e9<\/p>\n<\/li>\n Ce qui ne doit pas \u00eatre inclus<\/p>\n<\/li>\n<\/ul>\n L’instruction explicite d’exclure les d\u00e9tails internes est importante. Sans elle, un g\u00e9n\u00e9rateur d’IA pourrait produire un diagramme m\u00e9langeant des informations de niveau contexte et de niveau conteneur.<\/p>\n Ouvrez le chatbot IA de Visual Paradigm et d\u00e9marrez une nouvelle conversation ou une nouvelle session de g\u00e9n\u00e9ration de diagramme.<\/p>\n Selon l’interface et l’\u00e9dition d’abonnement, le chatbot peut proposer un s\u00e9lecteur de type de diagramme. S\u00e9lectionnez :<\/p>\n Mod\u00e8le C4<\/strong><\/p>\n<\/li>\n Diagramme de contexte syst\u00e8me<\/strong><\/p>\n<\/li>\n<\/ul>\n Entrez ensuite le prompt.<\/p>\n Le flux de travail g\u00e9n\u00e9ral du chatbot de Visual Paradigm est :<\/p>\n D\u00e9crivez le diagramme.<\/p>\n<\/li>\n Laissez l’IA g\u00e9n\u00e9rer le mod\u00e8le initial.<\/p>\n<\/li>\n Examinez le r\u00e9sultat.<\/p>\n<\/li>\n Affinez-le avec des commandes en langage naturel.<\/p>\n<\/li>\n Exportez ou continuez \u00e0 \u00e9diter dans un autre outil Visual Paradigm.<\/p>\n<\/li>\n<\/ol>\n V\u00e9rifier si le diagramme contient :<\/p>\n Exactement un syst\u00e8me central<\/p>\n<\/li>\n Toutes les personnes requises<\/p>\n<\/li>\n Tous les syst\u00e8mes externes pertinents<\/p>\n<\/li>\n Directions des relations correctes<\/p>\n<\/li>\n Descriptions de relations concises<\/p>\n<\/li>\n Aucun service interne ou base de donn\u00e9es inutile<\/p>\n<\/li>\n Nommage coh\u00e9rent<\/p>\n<\/li>\n Mise en page lisible<\/p>\n<\/li>\n<\/ul>\n Un diagramme g\u00e9n\u00e9r\u00e9 est un point de d\u00e9part, pas un substitut \u00e0 un examen de l’architecture.<\/p>\n Le chatbot peut modifier le diagramme en utilisant un langage courant.<\/p>\n La documentation du chatbot IA d\u00e9crit cette approche it\u00e9rative, y compris les commandes pour ajouter des passerelles de paiement, renommer des \u00e9l\u00e9ments, modifier des relations et refactoriser des diagrammes.<\/p>\n Apr\u00e8s avoir g\u00e9n\u00e9r\u00e9 et affin\u00e9 le diagramme, utilisez l’action intitul\u00e9e de mani\u00e8re similaire \u00e0 :<\/p>\n Ouvrir dans VPasCode<\/strong><\/p>\n<\/li>\n Modifier dans VPasCode<\/strong><\/p>\n<\/li>\n Ouvrir le code<\/strong><\/p>\n<\/li>\n G\u00e9n\u00e9rer le code pour l’\u00e9dition<\/strong><\/p>\n<\/li>\n<\/ul>\n L’intitul\u00e9 exact du bouton peut varier selon l’interface actuelle.<\/p>\n Cela transf\u00e8re le code du diagramme dans VPasCode, o\u00f9 vous pouvez \u00e9diter le diagramme sous forme de texte tout en visualisant un aper\u00e7u rendu en direct. Visual Paradigm d\u00e9crit VPasCode comme un \u00e9diteur de diagrammes en tant que code bas\u00e9 sur le navigateur, prenant en charge PlantUML, les mod\u00e8les C4, Mermaid, Graphviz et d’autres formats de syntaxe.<\/p>\n Le code g\u00e9n\u00e9r\u00e9 doit utiliser C4-PlantUML, g\u00e9n\u00e9ralement avec :<\/p>\n1. Comprendre le diagramme de contexte C4<\/h2>\n
\n
\n
2. Pr\u00e9parer un bon prompt pour l’IA<\/h2>\n
\n
Exemple de prompt<\/h3>\n
Cr\u00e9ez un diagramme de contexte syst\u00e8me C4 pour une plateforme de livraison de repas en ligne.\n\nSyst\u00e8me d'int\u00e9r\u00eat :\nPlateforme de livraison de repas \u2014 permet aux clients de parcourir les restaurants, de passer des commandes, d'effectuer des paiements et de suivre les livraisons.\n\nPersonnes :\n1. Client \u2014 parcourt les restaurants, passe des commandes, paie et suit la livraison.\n2. Gestionnaire de restaurant \u2014 g\u00e8re les menus, accepte les commandes et met \u00e0 jour le statut des commandes.\n3. Livreur \u2014 accepte les missions de livraison et met \u00e0 jour l'avancement de la livraison.\n4. Administrateur des op\u00e9rations \u2014 surveille l'activit\u00e9 de la plateforme et g\u00e8re les probl\u00e8mes de support.\n\nSyst\u00e8mes externes :\n1. Fournisseur de paiement \u2014 autorise et encaisse les paiements des clients.\n2. Service de cartographie et de g\u00e9olocalisation \u2014 fournit les adresses, les itin\u00e9raires et les lieux de livraison.\n3. Service de notification \u2014 envoie des e-mails, des SMS et des notifications push.\n\nRelations :\n- Le client utilise la plateforme de livraison de repas pour parcourir les restaurants, passer des commandes, effectuer des paiements et suivre les livraisons.\n- Le gestionnaire de restaurant utilise la plateforme de livraison de repas pour g\u00e9rer les menus et traiter les commandes.\n- Le livreur utilise la plateforme de livraison de repas pour recevoir les missions de livraison et mettre \u00e0 jour le statut de livraison.\n- L'administrateur des op\u00e9rations utilise la plateforme de livraison de repas pour surveiller les op\u00e9rations et r\u00e9soudre les probl\u00e8mes.\n- La plateforme de livraison de repas utilise le fournisseur de paiement pour autoriser et encaisser les paiements.\n- La plateforme de livraison de repas utilise le service de cartographie et de g\u00e9olocalisation pour calculer les itin\u00e9raires et suivre les positions.\n- La plateforme de livraison de repas utilise le service de notification pour envoyer des notifications.\n\nG\u00e9n\u00e9rez un diagramme de contexte syst\u00e8me C4 propre. Ne montrez pas les conteneurs internes, les composants, les bases de donn\u00e9es, les classes ou l'infrastructure de d\u00e9ploiement. Utilisez des libell\u00e9s de relations concis.\n<\/code><\/pre>\n3. G\u00e9n\u00e9rer le diagramme dans le chatbot IA de Visual Paradigm<\/h2>\n
\n
\n
Examiner le premier r\u00e9sultat<\/h3>\n
\n
4. Affiner le diagramme par la conversation<\/h2>\n
Ajouter un \u00e9l\u00e9ment<\/h3>\n
Ajouter un agent du service client qui utilise la plateforme de livraison de repas pour enqu\u00eater sur les probl\u00e8mes des clients et traiter les remboursements.\r\n<\/code><\/pre>\nAjouter un syst\u00e8me externe<\/h3>\n
Ajouter un service externe de d\u00e9tection de fraude utilis\u00e9 par la plateforme de livraison de repas pour \u00e9valuer les paiements suspects.\r\n<\/code><\/pre>\nRenommer un \u00e9l\u00e9ment<\/h3>\n
Renommer \u00ab Service de notification \u00bb en \u00ab Service de messagerie et de notification \u00bb.\r\n<\/code><\/pre>\nModifier une relation<\/h3>\n
Modifier la relation entre le livreur et la plateforme de livraison de repas pour : \u00ab Re\u00e7oit les affectations de livraison et soumet des mises \u00e0 jour du statut de livraison. \u00bb\r\n<\/code><\/pre>\nSupprimer un \u00e9l\u00e9ment<\/h3>\n
Supprimer l'administrateur des op\u00e9rations du diagramme.\r\n<\/code><\/pre>\nAm\u00e9liorer la mise en page<\/h3>\n
R\u00e9organiser le diagramme de sorte que les personnes apparaissent en haut, les syst\u00e8mes externes en bas, et que la plateforme de livraison de repas reste au centre.\r\n<\/code><\/pre>\nSimplifier le diagramme<\/h3>\n
Simplifier ceci en un diagramme de contexte de syst\u00e8me C4 strict. Supprimer les d\u00e9tails d'impl\u00e9mentation, les bases de donn\u00e9es, les API, les microservices et les composants internes.\r\n<\/code><\/pre>\nDemander un examen de coh\u00e9rence<\/h3>\n
Examiner le diagramme pour les relations manquantes, les \u00e9tiquettes ambigu\u00ebs, les syst\u00e8mes en double et les \u00e9l\u00e9ments qui ne devraient pas figurer dans un diagramme de contexte C4.\r\n<\/code><\/pre>\nPartie 1 : Ouvrir le diagramme dans VPasCode pour l’\u00e9dition de code<\/h1>\n
5. Utilisez \u00ab Ouvrir dans VPasCode \u00bb ou \u00ab Modifier dans VPasCode \u00bb<\/h2>\n
\n
\n\nPlantUML<\/span>
\n
\n