Dans cet article, je souhaite développer davantage cette capacité, car la création de diagrammes est rarement facile et souvent fastidieuse et frustrante.
L’aide d’un outil automatisé pourrait considérablement économiser du temps, des efforts et de la santé mentale ! Mais, ChatGPT n’est pas livré avec un manuel, et pour une IA, il est incertain de ce qu’il fait et ne sait pas car il en est à ses débuts.
Par conséquent, des articles comme celui-ci deviennent essentiels alors que nous développons régulièrement des connaissances sur l’utilisation efficace de cette incroyable ressource.
Avant de continuer, permettez-moi de préciser que ChatGPT ne pense pas qu’il puisse créer des diagrammes. Il se plaindra d’une erreur lorsqu’on lui demandera d’en faire une :
Figure 1 — ChatGPT ne peut pas créer de diagrammes
Cependant, c’est loin d’être le cas. La clé ici est de comprendre comment débloquer les capacités de création de diagrammes de ChatGPT.
Qu’est-ce que le script de la sirène ?
Comment ChatGPT dessine des diagrammes, c’est qu’il crée un script dans un langage appelé Mermaid.
Une fois créés, ces scripts peuvent être copiés et collés dans un éditeur, tel que https://mermaid.live/ ou https://mermaid-js.github.io/ un diagramme peut être enregistré dans un format d’image populaire tel que SVG ou PNG.
Avec ce que je vais vous montrer, vous n’aurez pas besoin d’une connaissance approfondie du script Mermaid.
Commencer
Comme je l’ai mentionné dans mon article précédent, il est essentiel de passer du temps à créer une question initiale complète, car cela définit le contexte pour le reste de la session ChatGPT.
Si vous voulez avoir une conversation qui porte ses fruits, alors pour continuer la métaphore, traitez votre question initiale comme si elle faisait germer une graine. Placez votre graine dans une boîte de questions fermées votre session cessera rapidement de croître.
Mais si vous placez la question initiale dans un endroit où il y a de nombreuses pistes à explorer, la conversation grandira et s’épanouira, vous permettant de tirer le meilleur parti de l’outil.
Dans cet article, je vais démontrer deux façons de créer des diagrammes. Le premier est celui où je donnerai à ChatGPT un début utile, et le second est celui où nous commencerons entièrement à partir de zéro.
Commençons donc par un exemple simple où j’ai créé un script Mermaid pour ChatGPT afin de préparer le terrain pour cette conversation. Notez que j’utilise un schéma de couleurs, donc le diagramme ressemble à la norme de modélisation C4.
Figure 2
Voici donc ce que j’ai copié dans l’invite ChatGPT pour lancer le processus :
organigramme TB subgraph Customer[Personal Banking Customer] h1[-Person-] : : :type d1[Un client de la banque, avec \na compte bancaire] : : :description end Customer:: :person subgraph BankingApp[Banking App] h2 [-Système logiciel-] : : :type d2[Permet aux clients de visualiser \n gérer leurs comptes \n et effectuer des paiements] : : :description end BankingApp:: :internalSystem subgraph BankingSystem[Système bancaire] h3[-Software System-] : : : type d3[Fournit tous les services \n pour gérer tous les clients, \n comptes, transactions, etc.] : : :description end BankingSystem:: :externalSystem %% Relations Client--Consulte les soldes des comptes \n et \n effectue des paiements \n en utilisant -->BankingApp BankingApp --Obtient des informations sur les comptes \n, \ n et effectue des \ n paiements à l'aide de-->BankingSystem % % Définitions des types d' éléments type trait - largeur : 0px, couleur :#fff, fill:transparent, font-size:12px classDef description trait - largeur: 0px, couleur: #fff, fill:transparent, font-size:13px
Ce que renvoie ChatGPT est un test pour voir s’il comprend le texte du diagramme, donc j’espère qu’il répondra avec un accusé de réception complet, comme ci-dessous.
Figure 3— Reconnaissance de ChatGPT que ce script de diagramme est celui d’un système bancaire.
Voyons maintenant si ChatGPT comprend à quoi ressemble un système bancaire. J’ai envoyé l’invite « Ajouter une banque à ce diagramme »:
Figure 4
Le texte renvoyé par ChatGPT a fait ce diagramme :
Figure 5
ChatGPT a intelligemment ajouté la banque établissant correctement une relation entre le client et le système bancaire. Ce niveau d’automatisation est la raison pour laquelle les gens utilisent cet outil.
Ajout de composants
Voyons maintenant comment ChatGPT se comporte avec deux autres ajouts. Mon invite était « ajouter une carte de crédit et magasiner »
Figure 6
ChatGPT renvoie le code Mermaid pour produire l’image suivante :
Figure 7
Une fois de plus, ChatGPT a ajouté les nouveaux composants, compris la relation entre eux et les a créés dans le style que j’avais initialement établi avec toutes les bonnes couleurs.
Voyons maintenant comment ChatGPT se comporte avec une question obscure : « Ajouter des carottes »
Figure 8
ChatGPT a déterminé une connexion logique entre les composants existants et le nouvel ajout car il renvoie un nouveau diagramme Mermaid avec le résumé suivant :
Figure 9
Figure 10
Modification des relations
ChatGPT a établi des relations parfaitement logiques, mais que se passe-t-il si ChatGPT a raté une connexion ? Comment en ajouter un ?
Pour créer une relation, soyez précis sur les composants impliqués et sur la nature de la relation. J’ai envoyé l’invite « Ajouter une relation entre le client et la carotte. La relation est achète ».
Figure 11
Le code renvoyé par ChatGPT a permis au script Mermaid de produire ce diagramme. Comme vous pouvez le voir, la nouvelle relation est en place.
Figure 12
Suppression de composants et de relations
Nous avons donc appris à créer des composants et à ajouter et mettre à jour des relations. La tâche suivante consiste à les supprimer, ce qui est simple.
Figure 13
La suppression d’un composant supprimera également les relations, ce qui ramènera le diagramme à l’aspect de la figure 7.
Modifications des détails
À présent, vous avez l’idée qu’apporter des modifications aux diagrammes dans ChatGPT est simple.
Il s’agit d’être sans ambiguïté sur ce que vous demandez à ChatGPT de faire. Cependant, je sais que la prochaine fois que vous créerez un diagramme, il se peut qu’il n’inclue pas des éléments dont ChatGPT saura rien, car il sera spécifique à votre organisation, processus ou circonstance dont le système d’IA n’est pas conscient.
Un bon exemple est : j’ai demandé à ChatGPT d' »ajouter un gestionnaire » :
Figure 14
… et ChatGPT a répondu ceci :
Figure 15
ChatGPT, sans contexte, a supposé que le rôle de gestionnaire est pour le système bancaire alors que le gestionnaire pourrait être le gestionnaire de la boutique ou toute autre relation, par exemple.
Alors pour corriger la description, mieux vaut être très précis. J’ai dit « modifier la description du responsable en « un responsable qui gère la boutique »:
Figure 16
… et ChatGPT a répondu comme suit :
Illustration 17
Création d’un diagramme de sirène à partir de zéro avec ChatGPT.
Dans l’exemple précédent, j’ai commencé un diagramme dans le script Mermaid, puis j’ai modifié le script à l’aide de ChatGPT.
Je vais maintenant montrer comment créer un diagramme à partir de zéro avec ChatGPT.
Encore une fois, il s’agit de formuler correctement la question initiale avant de pouvoir la développer de la myriade de façons que j’ai montrées précédemment.
Invite : créer un script de sirène d’un système bancaire où un client possède une carte bancaire et une application bancaire
Image 18
….ChatGPT répond avec ce texte pour construire un diagramme de séquence. Bien sûr, vous pouvez spécifier d’autres types de diagrammes mais uniquement à partir du répertoire de scripts Mermaid.
participant sequenceDiagram Participant client Participant carte bancaire Participant application bancaire Client bancaire->>Carte bancaire : Glisser/insérer la carte bancaire->>Banque : Envoyer les détails de la carte Banque ->>Carte bancaire : Autoriser la carte bancaire->>Client : Approuver ou refuser le client ->> Application bancaire : connexion à l'application bancaire->> Banque : demander des informations sur le compte Banque->> Application bancaire : envoyer des informations sur le compte Application bancaire->> Client : afficher les informations sur le compte Client->> Application bancaire : lancer une transaction >Banque : Demande d'autorisation Banque->>Application bancaire : Autoriser/Refuser Application bancaire->>Client : Approuver/Refuser
… qui construit cette image :
Image 19
Je vous laisse avec un dernier conseil : si vous n’aimez pas ce que vous avez demandé avec une étape, vous pouvez l’annuler en tapant « oublier la dernière étape »:
Figure 20
J’espère vraiment que vous apprécierez de créer de nombreux nouveaux diagrammes avec cette nouvelle compétence.
