Le chatbot IA Visual Paradigm permet de créer un diagramme de contexte système C4 à partir d’une description en langage naturel d’une application, de ses utilisateurs et des systèmes externes avec lesquels elle interagit. Cependant, un diagramme généré par IA est le plus utile lorsqu’il reste modifiable et maintenable après sa génération.

Ce guide présente un flux de travail complet pour générer un diagramme de contexte de plateforme de livraison de nourriture en utilisant C4-PlantUML. Vous apprendrez comment passer d’un diagramme généré par IA à du code PlantUML modifiable, affiner le modèle dans VPasCode, puis continuer à l’éditer visuellement dans Visual Paradigm Online. Cette approche combine la rapidité de la modélisation assistée par IA, la flexibilité du diagramme en tant que code et la commodité d’un éditeur de diagrammes graphique.

Visual Paradigm propose un flux de travail pratique pour transformer une description d’architecture en langage naturel en un diagramme de contexte C4 modifiable :

1. Décrivez le système dans le chatbot IA Visual Paradigm.

   

2. Générez et examinez le diagramme de contexte système C4.

3. Ouvrez le résultat dans VPasCode en tant que C4-PlantUML.

   

4. Modifiez le diagramme en éditant le code PlantUML.

   

5. Optionnellement, envoyez le résultat à Visual Paradigm Online.

   

6. Modifiez le diagramme visuellement en utilisant l’éditeur de diagrammes par glisser-déposer.

Cela vous offre deux chemins d’édition :

• Édition basée sur le code : VPasCode et C4-PlantUML

• Édition basée sur une interface graphique : Éditeur de diagrammes Visual Paradigm Online

Le chatbot IA de Visual Paradigm prend en charge les diagrammes de contexte système C4, de conteneurs, de composants et de déploiement. Il peut également affiner un diagramme généré grâce à des commandes en langage naturel telles que l’ajout, la suppression, le renommage ou la reconnexion d’éléments.

1. Comprendre le diagramme de contexte C4

Un diagramme de contexte C4 est la vue de plus haut niveau d’un système logiciel. Il montre :

• Le système d’intérêt

• Utilisateurs humains et acteurs organisationnels

• Systèmes logiciels externes

• Relations importantes entre ces éléments

• Une brève description du fonctionnement de chaque relation

Il ne montre généralement pas les services internes, les bases de données, les classes, les API ou les détails d’infrastructure. Ceux-ci appartiennent aux diagrammes C4 de niveau inférieur.

Par exemple, un diagramme de contexte pour une plateforme de livraison de nourriture en ligne pourrait contenir :

• Client

• Gérant du restaurant

• Livreur

• Fournisseur de paiement

• Service de cartographie et de géolocalisation

• Service de notification

• Plateforme de livraison de repas

Le système central doit rester le point focal visuel. Les personnes et systèmes externes doivent être placés autour de lui.

2. Préparer un bon prompt pour l’IA

La qualité du diagramme généré dépend fortement de la description de l’architecture fournie au chatbot.

Un prompt utile précise :

• Le nom du système

• L’objectif du système

• Les personnes qui l’utilisent

• Les systèmes externes avec lesquels il communique

• Les relations entre eux

• Le niveau de diagramme C4 souhaité

• Le format de sortie souhaité

• Ce qui ne doit pas être inclus

Exemple de prompt

Créez un diagramme de contexte système C4 pour une plateforme de livraison de repas en ligne.

Système d'intérêt :
Plateforme de livraison de repas — permet aux clients de parcourir les restaurants, de passer des commandes, d'effectuer des paiements et de suivre les livraisons.

Personnes :
1. Client — parcourt les restaurants, passe des commandes, paie et suit la livraison.
2. Gestionnaire de restaurant — gère les menus, accepte les commandes et met à jour le statut des commandes.
3. Livreur — accepte les missions de livraison et met à jour l'avancement de la livraison.
4. Administrateur des opérations — surveille l'activité de la plateforme et gère les problèmes de support.

Systèmes externes :
1. Fournisseur de paiement — autorise et encaisse les paiements des clients.
2. Service de cartographie et de géolocalisation — fournit les adresses, les itinéraires et les lieux de livraison.
3. Service de notification — envoie des e-mails, des SMS et des notifications push.

Relations :
- Le client utilise la plateforme de livraison de repas pour parcourir les restaurants, passer des commandes, effectuer des paiements et suivre les livraisons.
- Le gestionnaire de restaurant utilise la plateforme de livraison de repas pour gérer les menus et traiter les commandes.
- Le livreur utilise la plateforme de livraison de repas pour recevoir les missions de livraison et mettre à jour le statut de livraison.
- L'administrateur des opérations utilise la plateforme de livraison de repas pour surveiller les opérations et résoudre les problèmes.
- La plateforme de livraison de repas utilise le fournisseur de paiement pour autoriser et encaisser les paiements.
- La plateforme de livraison de repas utilise le service de cartographie et de géolocalisation pour calculer les itinéraires et suivre les positions.
- La plateforme de livraison de repas utilise le service de notification pour envoyer des notifications.

Générez un diagramme de contexte système C4 propre. Ne montrez pas les conteneurs internes, les composants, les bases de données, les classes ou l'infrastructure de déploiement. Utilisez des libellés de relations concis.

L’instruction explicite d’exclure les détails internes est importante. Sans elle, un générateur d’IA pourrait produire un diagramme mélangeant des informations de niveau contexte et de niveau conteneur.

3. Générer le diagramme dans le chatbot IA de Visual Paradigm

Ouvrez le chatbot IA de Visual Paradigm et démarrez une nouvelle conversation ou une nouvelle session de génération de diagramme.

Selon l’interface et l’édition d’abonnement, le chatbot peut proposer un sélecteur de type de diagramme. Sélectionnez :

• Modèle C4

• Diagramme de contexte système

Entrez ensuite le prompt.

Le flux de travail général du chatbot de Visual Paradigm est :

1. Décrivez le diagramme.

2. Laissez l’IA générer le modèle initial.

3. Examinez le résultat.

4. Affinez-le avec des commandes en langage naturel.

5. Exportez ou continuez à éditer dans un autre outil Visual Paradigm.

Examiner le premier résultat

Vérifier si le diagramme contient :

• Exactement un système central

• Toutes les personnes requises

• Tous les systèmes externes pertinents

• Directions des relations correctes

• Descriptions de relations concises

• Aucun service interne ou base de données inutile

• Nommage cohérent

• Mise en page lisible

Un diagramme généré est un point de départ, pas un substitut à un examen de l’architecture.

4. Affiner le diagramme par la conversation

Le chatbot peut modifier le diagramme en utilisant un langage courant.

Ajouter un élément

Ajouter un agent du service client qui utilise la plateforme de livraison de repas pour enquêter sur les problèmes des clients et traiter les remboursements.

Ajouter un système externe

Ajouter un service externe de détection de fraude utilisé par la plateforme de livraison de repas pour évaluer les paiements suspects.

Renommer un élément

Renommer « Service de notification » en « Service de messagerie et de notification ».

Modifier une relation

Modifier la relation entre le livreur et la plateforme de livraison de repas pour : « Reçoit les affectations de livraison et soumet des mises à jour du statut de livraison. »

Supprimer un élément

Supprimer l'administrateur des opérations du diagramme.

Améliorer la mise en page

Réorganiser le diagramme de sorte que les personnes apparaissent en haut, les systèmes externes en bas, et que la plateforme de livraison de repas reste au centre.

Simplifier le diagramme

Simplifier ceci en un diagramme de contexte de système C4 strict. Supprimer les détails d'implémentation, les bases de données, les API, les microservices et les composants internes.

Demander un examen de cohérence

Examiner le diagramme pour les relations manquantes, les étiquettes ambiguës, les systèmes en double et les éléments qui ne devraient pas figurer dans un diagramme de contexte C4.

La documentation du chatbot IA décrit cette approche itérative, y compris les commandes pour ajouter des passerelles de paiement, renommer des éléments, modifier des relations et refactoriser des diagrammes.

Partie 1 : Ouvrir le diagramme dans VPasCode pour l’édition de code

5. Utilisez « Ouvrir dans VPasCode » ou « Modifier dans VPasCode »

Après avoir généré et affiné le diagramme, utilisez l’action intitulée de manière similaire à :

• Ouvrir dans VPasCode

• Modifier dans VPasCode

• Ouvrir le code

• Générer le code pour l’édition

L’intitulé exact du bouton peut varier selon l’interface actuelle.

Cela transfère le code du diagramme dans VPasCode, où vous pouvez éditer le diagramme sous forme de texte tout en visualisant un aperçu rendu en direct. Visual Paradigm décrit VPasCode comme un éditeur de diagrammes en tant que code basé sur le navigateur, prenant en charge PlantUML, les modèles C4, Mermaid, Graphviz et d’autres formats de syntaxe.

Le code généré doit utiliser C4-PlantUML, généralement avec :

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
...
@enduml

Le script généré peut utiliser une URL d’inclusion différente ou une version de bibliothèque prise en charge en interne. Conservez l’inclusion générée par VPasCode sauf si vous avez une raison spécifique de la modifier.

6. Comprendre la structure C4-PlantUML

Un diagramme de contexte C4-PlantUML typique contient ces parties :

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

LAYOUT_LEFT_RIGHT()

Person(customer, "Client", "Passe des commandes de nourriture et suit les livraisons.")
System(platform, "Plateforme de livraison de nourriture", "Permet aux clients de commander de la nourriture et de suivre les livraisons.")
System_Ext(payment, "Fournisseur de paiement", "Autorise et encaisse les paiements.")

Rel(customer, platform, "Passe des commandes et suit les livraisons")
Rel(platform, payment, "Autorise et encaisse les paiements")

@enduml

Types d’éléments principaux

Le premier argument est l’identifiant interne. Le second est le nom d’affichage. Le troisième est la description.

7. Modifier le diagramme dans VPasCode

VPasCode affiche normalement :

• Le code source dans un volet d’édition

• Le diagramme rendu dans un volet d’aperçu

• Actions pour exporter, partager, copier ou ouvrir le résultat dans un autre produit Visual Paradigm

VPasCode fournit un rendu en direct et prend en charge l’édition directe du code. Il peut également détecter les formats de diagramme pris en charge lorsque le code est collé dans l’éditeur.

Exemple : code C4-PlantUML amélioré

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

title Plateforme de Livraison de Repas — Contexte du Système

LAYOUT_LEFT_RIGHT()
SHOW_LEGEND()

Person(customer, "Client",
  "Parcourt les restaurants, passe des commandes, paie et suit les livraisons.")

Person(restaurantManager, "Gérant du Restaurant",
  "Gère les menus, accepte les commandes et met à jour le statut des commandes.")

Person(deliveryDriver, "Livreur",
  "Reçoit les affectations de livraison et met à jour l'avancement de la livraison.")

Person(operationsAdmin, "Administrateur des Opérations",
  "Surveille les opérations de la plateforme et gère les problèmes de support.")

System(platform, "Plateforme de Livraison de Repas",
  "Permet la commande de repas, le paiement, la gestion des restaurants et le suivi des livraisons.")

System_Ext(paymentProvider, "Fournisseur de Paiement",
  "Autorise et encaisse les paiements des clients.")

System_Ext(mapService, "Service de Cartes et de Géolocalisation",
  "Fournit les adresses, les itinéraires et les données de localisation.")

System_Ext(notificationService, "Service de Notification",
  "Envoie des e-mails, des SMS et des notifications push.")

Rel(customer, platform,
  "Parcourt les restaurants, passe des commandes, paie et suit les livraisons")

Rel(restaurantManager, platform,
  "Gère les menus et traite les commandes des restaurants")

Rel(deliveryDriver, platform,
  "Reçoit les missions de livraison et soumet le statut de livraison")

Rel(operationsAdmin, platform,
  "Surveille les opérations et gère les problèmes de support")

Rel(platform, paymentProvider,
  "Autorise et encaisse les paiements")

Rel(platform, mapService,
  "Calcule les itinéraires et suit les lieux de livraison")

Rel(platform, notificationService,
  "Envoie des notifications de commande, de paiement et de livraison")

@enduml

8. Apporter des modifications courantes au niveau du code

Changer le nom du système

System(platform, "Plateforme de Livraison de Repas",
  "Coordonne la commande et la livraison de repas.")

Ajouter une nouvelle personne

Person(customerSupport, "Agent du Service Client",
  "Enquête sur les problèmes des clients et traite les remboursements.")

Rel(customerSupport, platform,
  "Enquête sur les problèmes et gère les remboursements")

Ajouter un nouveau système externe

System_Ext(fraudService, "Service de Détection de Fraude",
  "Évalue les activités de paiement suspectes.")

Rel(platform, fraudService,
  "Vérifie les transactions de paiement pour les risques de fraude")

Changer la direction de la relation

Rel(paymentProvider, platform,
  "Retourne les résultats d'autorisation de paiement et de règlement")

Utilisez la direction de la relation pour représenter la dépendance ou l’interaction principale. Si la direction n’est pas architecturalement importante, choisissez une convention cohérente et appliquez-la tout au long du diagramme.

Changer la mise en page

C4-PlantUML prend en charge des indications de mise en page telles que :

LAYOUT_LEFT_RIGHT()

ou :

LAYOUT_TOP_DOWN()

Vous pouvez également influencer le placement avec des indications de direction :

Lay_R(client, plateforme)
Lay_D(plateforme, fournisseurDePaiement)

Utilisez les indications de mise en page avec parcimonie. Trop de contraintes manuelles peuvent rendre le diagramme plus difficile à maintenir.

9. Utilisez l’assistance IA de VPasCode

Certaines éditions de VPasCode offrent une modification de diagrammes assistée par IA et une correction d’erreurs de code. L’outil peut accepter des instructions telles que :

Ajoutez un service externe de détection de fraude entre la plateforme et le fournisseur de paiement.

ou :

Corrigez l'erreur de syntaxe PlantUML et conservez la structure actuelle du diagramme.

VPasCode est également documenté comme prenant en charge la modification de diagrammes assistée par IA, le diagnostic d’erreurs et les fonctionnalités de traduction, bien que la disponibilité puisse dépendre de l’édition ou de l’abonnement.

10. Validez le diagramme PlantUML

Avant d’envoyer le diagramme à Visual Paradigm Online, validez à la fois la syntaxe et l’architecture.

Liste de vérification de la syntaxe

• Le script commence par @startuml.

• Le script se termine par @enduml.

• La bibliothèque C4-PlantUML est incluse.

• Chaque relation fait référence à des identifiants existants.

• Les identifiants ne contiennent ni espaces ni ponctuation susceptibles de rompre la syntaxe.

• Les guillemets sont équilibrés.

• Les descriptions ne sont pas excessivement longues.

• L’aperçu s’affiche sans erreurs.

Liste de vérification de la modélisation C4

• Il y a un système d’intérêt clairement identifié.

• Les utilisateurs sont modélisés comme des personnes, et non comme des systèmes logiciels.

• Les applications externes sont modélisées comme des systèmes externes.

• Les conteneurs internes ne sont pas inclus dans un diagramme de contexte.

• Les relations décrivent des interactions significatives.

• Le diagramme est compréhensible sans lire le code source.

• La terminologie correspond à la documentation d’architecture du projet.

Exemple d’un élément de diagramme de contexte indésirable

Container(api, "API de commande", "Java", "Traite les commandes")
ContainerDb(database, "Base de données de commandes", "PostgreSQL", "Stocke les commandes")

Ce sont des éléments de niveau conteneur. Ils appartiennent à un diagramme de conteneurs C4, et non normalement à un diagramme de contexte système.

Partie 2 : Envoyer le diagramme vers Visual Paradigm Online

11. Utilisez « Modifier dans VP Online » ou « Modifier dans le diagramme VP Online »

Une fois la version du code correcte, sélectionnez l’action intitulée de manière similaire à :

• Modifier dans VP Online

• Modifier dans le diagramme VP Online

• Ouvrir en ligne

• Exporter vers VP Online

L’intitulé exact peut varier selon la version de l’interface.

L’écosystème de Visual Paradigm est conçu pour déplacer les diagrammes générés du chatbot IA vers VPasCode pour un affinage au niveau du code, puis vers Visual Paradigm Online pour une édition traditionnelle de diagrammes.

L’éditeur de diagrammes en ligne est utile lorsque vous devez :

• Déplacer des formes manuellement

• Redimensionner des éléments

• Ajuster les connecteurs

• Changer les couleurs et les polices

• Ajouter des notes ou des annotations

• Ajouter un titre ou une légende

• Appliquer un formatage de présentation

• Aligner précisément les éléments du diagramme

• Préparez le diagramme pour le partage ou l’exportation

12. Modifiez le diagramme en utilisant l’interface graphique de Visual Paradigm Online

Une fois le diagramme ouvert dans Visual Paradigm Online :

Déplacez les éléments

Faites glisser les personnes et les systèmes externes dans une disposition claire autour du système central.

Une disposition courante est :

• Les personnes à gauche ou en haut

• Le système principal au centre

• Les systèmes externes à droite ou en bas

Modifier le texte

Double-cliquez sur un élément ou sélectionnez son panneau de spécification pour modifier :

• Nom

• Description

• Stéréotype

• Étiquette de relation

Gardez les noms courts et les descriptions informatives.

Modifier les relations

Sélectionnez un connecteur pour :

• Changer sa direction

• Modifier l’étiquette de relation

• Reconnectez-le à un autre élément

• Ajuster son itinéraire

• Changer le style ou l’apparence de la ligne

Ajouter des éléments

Utilisez la palette du diagramme pour ajouter :

• Personne

• Personne externe

• Système

• Système externe

• Relation

• Note

• Limite

Ajoutez uniquement les éléments qui appartiennent au niveau du contexte.

Appliquer la mise en forme

Vous pouvez améliorer la lisibilité en ajustant :

• Taille de la police

• Couleur de remplissage

• Couleur de la bordure

• Épaisseur de la ligne

• Taille de la forme

• Alignement

• Espacement

• Routage des connecteurs

Évitez d’utiliser la couleur comme seul moyen de communiquer un sens. Utilisez également des étiquettes claires.

13. Disposition de présentation recommandée

Un diagramme de contexte épuré pourrait utiliser cette disposition :

Pour les diagrammes plus grands :

• Gardez le système principal au centre.

• Groupez les personnes d’un côté.

• Groupez les systèmes logiciels externes de l’autre côté.

• Évitez les croisements de lignes de relation.

• Gardez les étiquettes de relation horizontales autant que possible.

• Utilisez des étiquettes courtes plutôt que des paragraphes.

• Laissez suffisamment d’espace blanc autour du système central.

Partie 3 : Choisir entre l’édition par code et l’édition par interface graphique

VPasCode prend en charge les modèles C4 via PlantUML et offre un aperçu en direct, tandis que Visual Paradigm Online propose un flux de travail traditionnel d’édition de diagrammes visuels.

Partie 4 : Flux de travail recommandé de bout en bout

Flux de travail rapide

1. Ouvrez le chatbot IA de Visual Paradigm.

2. Choisissez le diagramme de contexte système C4.

3. Décrivez le système, les utilisateurs et les systèmes externes.

4. Générez le diagramme.

5. Demandez au chatbot de supprimer les détails d’implémentation internes.

6. Vérifiez les noms, les relations et la portée.

7. Sélectionnez Ouvrir dans VPasCode.

8. Éditez la source C4-PlantUML.

9. Rendez et validez le résultat.

10. Sélectionnez Modifier dans VP Online.

11. Affinez la mise en page et l’apparence à l’aide de l’interface graphique.

12. Exportez ou partagez le diagramme final.

Répartition recommandée des responsabilités

Utilisez le Chatbot IA pour :

• Création du premier brouillon

• Exploration des alternatives d’architecture

• Ajout ou suppression de participants

• Réécriture des descriptions de relations

• Revue du diagramme pour détecter les omissions

Utilisez VPasCode pour :

• Renommage de nombreux éléments

• Réutilisation du code de diagramme

• Application d’une syntaxe cohérente

• Gestion du code dans le contrôle de version

• Appliquer des modifications structurelles réutilisables

• Correction des directives de mise en page

• Générer une source de vérité basée sur du texte

Utilisez Visual Paradigm Online pour :

• Positionnement visuel final

• Mise en forme pour la présentation

• Ajustement manuel des connecteurs

• Ajout de notes et d’annotations

• Préparation d’un diagramme pour les parties prenantes

Partie 5 : Exemple de conversation d’affinement

Demande initiale

Créez un diagramme de contexte système C4 pour une plateforme de livraison de repas.

Affinement 1

Ajoutez le Client, le Gestionnaire de restaurant, le Livreur et l'Administrateur des opérations en tant que personnes.

Affinement 2

Ajoutez le Fournisseur de paiement, le Service de cartes et de géolocalisation, et le Service de notification en tant que systèmes externes.

Affinement 3

Supprimez toutes les bases de données, API, microservices, conteneurs et détails d'implémentation. Cela doit rester un diagramme de contexte système C4 de niveau 1.

Affinement 4

Réécrivez toutes les étiquettes de relation sous forme de phrases verbales concises et gardez-les sous 10 mots si possible.

Affinement 5

Vérifiez le diagramme pour les relations manquantes et la terminologie incohérente. Gardez « Plateforme de livraison de repas » comme seul système d'intérêt.

Affinement 6

Générez le diagramme en C4-PlantUML et mettez-le à disposition pour édition dans VPasCode.

Partie 6 : Dépannage

Le diagramme contient trop de détails

Demandez :

Simplifiez ceci en un diagramme de contexte système C4 strict. Supprimez les conteneurs, les composants, les bases de données, les API et les noms de technologies.

Le diagramme a trop de lignes qui se croisent

Dans VPasCode :

• Essayez LAYOUT_LEFT_RIGHT() ou LAYOUT_TOP_DOWN().

• Ajoutez des Lay_ directives.

• Raccourcir les libellés des relations.

• Réduire le nombre de relations affichées.

• Déplacer la version finale vers VP Online pour un positionnement manuel.

L’aperçu PlantUML affiche une erreur

Vérifier :

• L’inclusion de la bibliothèque C4

• Virgules manquantes

• Parenthèses non fermées

• Identifiants mal orthographiés

• Relations faisant référence à des éléments non définis

• Guillemets déséquilibrés

• Noms d’éléments incorrects

Une relation doit faire référence à des identifiants qui ont déjà été déclarés, par exemple :

Person(customer, "Client", "Passe des commandes")
System(platform, "Plateforme de livraison de nourriture", "Traite les commandes")

Rel(customer, platform, "Passe des commandes")

La version graphique diffère de la version code

Traitez les deux versions comme des représentations d’édition distinctes après la conversion. Prenez une décision délibérée quant à celle qui fait autorité :

• Utilisez VPasCode comme source de vérité si le diagramme doit être maintenu en tant que code.

• Utilisez Visual Paradigm Online comme source de vérité si les parties prenantes doivent l’ajuster fréquemment visuellement.

Évitez d’apporter des modifications non liées dans les deux endroits sans les synchroniser.

Le diagramme généré utilise le mauvais niveau C4

Demandez au chatbot :

Régénérez ceci uniquement en tant que diagramme de contexte système C4. Affichez les personnes, le système d'intérêt et les systèmes logiciels externes. N'affichez pas les conteneurs ni les composants.

Liste de contrôle finale de la qualité

Avant de publier le diagramme, confirmez que :

• Le diagramme possède un titre clair.

• Le système d’intérêt est évident.

• Les personnes et les systèmes externes sont correctement classés.

• Les relations portent des libellés significatifs.

• Aucun détail d’implémentation interne n’a fuité vers la vue de contexte.

• Les noms utilisent une terminologie cohérente.

• Le diagramme est lisible au zoom normal.

• Les lignes de relation ne masquent pas les formes ou les libellés.

• La source PlantUML s’affiche correctement.

• La version VP Online correspond à l’architecture approuvée.

• Le diagramme final a été examiné par une personne familiarisée avec le système.

Le flux de travail le plus efficace consiste à utiliser le Chatbot IA pour une modélisation rapide, VPasCode pour une édition précise et reproductible de C4-PlantUML, et Visual Paradigm Online pour un affinage visuel final. Cela combine la génération conversationnelle, la maintenabilité du diagramme en tant que code et l’édition de présentation basée sur une interface graphique en un seul processus.

Cette publication est également disponible en Deutsch, English : liste des langues séparées par une virgule, Español : dernière langue.