ChatGPT pour créer des diagrammes

Utilisation de ChatGPT pour créer des diagrammes système 

Intéressé par les Mindmaps -  lisez notre article de blog sur l’utilisation de plantUML avec ChatGPT pour créer de superbes Mindmaps

La popularité de ChatGPT ne cesse de croître et il est maintenant utilisé dans un large éventail d’applications. En tant qu’architecte logiciel, j’ai eu l’occasion d’explorer les capacités de ChatGPT pour une utilisation dans le domaine financier, en particulier pour la gestion de patrimoine.

Photo de Christina @ wocintechchat.com sur Unsplash

Je voulais confirmer si ChatGPT pouvait générer des diagrammes pour une explication de cas d’utilisation et analyser plusieurs facteurs en même temps.

Alors, je me suis connecté à chat.openai.com et voici ma conversation

Étape 1 : Définissons le cas d’utilisation

J’aurais pu définir mon propre cas d’utilisation, mais je voulais tester tous les aspects de ChatGPT, alors je lui ai demandé d’en définir un pour moi.

Utiliser la définition de cas

Étape 2 : Définissons un modèle de données pour le cas d’utilisation

Cela me semble bien, commençons par définir le modèle de données – j’ai donc demandé à ChatGPT de le faire et c’est ce que j’ai obtenu

définition du modèle de données

Cela semble à peu près correct, voyons ce qu’il peut faire pour les diagrammes. Je voulais approfondir un peu le modèle de données, donc ma prochaine invite était

Invite : ChatGPT : Je peux décrire la structure du modèle de données dans un format tabulaire en utilisant le démarquage.describe the data model in more detail or tabular format using markdown

Structure de données

C’est un bon début. Ensuite, j’ai demandé à définir des relations

Étape 3 : Définissons les relations — Diagramme des relations d’entité

Invite : c’est parfait, je voudrais décrire les relations dans un diagramme de sirène, pouvez-vous me donner le code de démarquage pour faire cela
ChatGPT : je m’excuse, mais en tant que modèle textuel, je ne suis pas en mesure de générer des diagrammes de sirène ou tout autre schéma visuel. Cependant, je peux vous donner un exemple de la façon dont les relations pourraient être représentées dans la syntaxe Mermaid :

syntaxe sirène pour les relations de données

Et en copiant ceci dans un éditeur de démarquage inclus dans les balises {mermaid}, j’ai obtenu

modèle de données en sirène

Super, on arrive à quelque chose.

J’ai un diagramme de classes / diagramme entité-relation. Voyons ce qui est possible d’autre

Étape 4 : Diagramme de séquence

Ensuite, j’ai essayé de faire des invites hypothétiques pour vérifier les réponses. Ma première intention était de créer un diagramme de séquence

Invite : comment une transaction d’achat d’un actif aurait-elle un impact sur les tableaux mentionnés ci-dessus, je voudrais décrire cela sous la forme d’un diagramme de séquence. Pouvez-vous m’aider à décrire le diagramme au format markdown pour la sirène
ChatGPT : Bien sûr, uneBuytransaction aurait un impact sur les tableaux suivants :

Assettable : la current_valuede l’actif serait mise à jour pour refléter la valeur marchande actuelle de l’actif
Portfoliotable : la current_valuedu portefeuille serait mise à jour pour refléter le nouvel actif et sa valeur de marché, et la asset_allocationserait mise à jour pour refléter le nouvel actif.
Transactiontable : une nouvelle transaction serait ajoutée avec les détails de la transaction tels que le type de transaction, la date de la transaction, l’asset_id et le portfolio_id

Voici un exemple de la façon dont le processus pourrait être représenté dans un diagramme de séquence Mermaid :

diagramme de séquence pour une transaction d’achat

et la copie est dans un éditeur de démarquage

diagramme de séquençage

Impressionant. Mais je n’ai pas encore fini

Étape 5 : Diagramme de transition d’état

Permettez-moi de poser une question sur un State Transitiondiagramme

Invite : le compte aura-t-il des états tels que nouveau, fermé, actif, inactif, etc. ? Je voudrais représenter les états dans un diagramme d’état en utilisant la sirène. Pouvez-vous aider à décrire le diagramme au format
Markdown ChatGPT : Il est courant que les comptes financiers aient différents états, tels que nouveau, fermé, actif et inactif, pour refléter l’état actuel du compte.

newcompte serait celui qui vient d’être ouvert et est en attente de financement ou de vérification.
activecompte serait celui qui est actuellement ouvert et utilisé pour les transactions.
inactivecompte serait celui qui n’est pas utilisé actuellement mais qui n’a pas été fermé.
closedcompte serait celui qui a été fermé par le client ou l’institution financière, et ne peut plus être utilisé pour les transactions.
Pendingstate peut être utilisé pour indiquer que le compte est en cours d’examen ou en attente de vérification.
SuspendedL’état peut être utilisé pour indiquer que le compte a été temporairement suspendu, par exemple, en raison d’une activité suspecte ou du non-respect des conditions générales.
FrozenL’état peut être utilisé pour indiquer que le compte a été gelé, par exemple, en raison d’un litige ou d’une action réglementaire.
Expiredstate peut être utilisé pour indiquer que le compte a atteint sa date d’expiration et n’est plus utilisé.

voici un exemple de la façon dont les états d’un compte pourraient être représentés dans un diagramme d’état Mermaid :

Diagramme de séquençage

Il semble que ce format est plus ancien et peut se casser en raison de dépendances cycliques. J’ai donc demandé à ChatGPT d’améliorer cela

Invite : pouvez-vous essayer de donner la syntaxe de démarquage du diagramme d’état dans un nouveau format en utilisant[*]
ChatGPT : Bien sûr, voici un exemple de la façon dont un diagramme d’état pour le composant de gestion de compte d’un système de gestion de patrimoine pourrait être représenté dans Mermaid en utilisant le nouveau format avec[*]:

représentation sirène du diagramme d’état

Représentation de l’éditeur Markdown

représentation de la démarque

Ce diagramme montre les différents états d’un compte et les transitions possibles entre eux.

  • L’état initial est [*]qui dénote l’état de départ.
  • Le compte peut passer d’ Newun état à Activel’autre en l’activant.
  • Le compte peut passer d’ Newun état à Closedl’autre en le fermant.
  • Le compte peut passer d’ Activeun état à Inactivel’autre en le désactivant.
  • Le compte peut passer d’ Activeun état à Closedl’autre en le fermant.
  • Le compte peut passer d’ Inactiveun état à Activel’autre en l’activant.
  • Le compte peut passer d’ Inactiveun état à Closedl’autre en le fermant.

Maintenant, nous arrivons quelque part. Étendons cela davantage pour inclure d’autres États également

Invite : veuillez également inclure les états expiré, gelé et autres états pertinents
ChatGPT : bien sûr, voici un exemple de la manière dont un diagramme d’état pour le composant de gestion de compte d’un système de gestion de patrimoine pourrait être représenté dans Mermaid, y compris des états supplémentaires tels que ExpiredFrozen, etc. :

Description :
Ce diagramme montre les différents états d’un compte et les transitions possibles entre eux.

L’état initial est [*]qui dénote l’état de départ.
Le compte peut passer d’ Newun état à Activel’autre en l’activant.
Le compte peut passer d’ Newun état à Closedl’autre en le fermant.
Le compte peut passer d’ Activeun état à Inactivel’autre en le désactivant.
Le compte peut passer d’ Activeun état à Frozenl’autre en le gelant.
Le compte peut passer d’ Activeun état à Closedl’autre en le fermant.
Le compte peut passer d’ Inactiveun état à Activel’autre en l’activant.
Le compte peut passer d’ Inactiveun état à Frozenl’autre en le gelant.
Le compte peut passer deInactiveétat à Closedétat en le fermant.
Le compte peut passer d’ Frozenun état à Activel’autre en le dégelant.
Le compte peut passer d’ Frozenun état à Closedl’autre en le fermant.
Le compte peut passer d’ Closedun état à Expiredl’autre si le compte a expiré.

diagramme d’état étendu

Et représentation schématique

C’est génial. Vraiment impressionnant sur ce qui peut être réalisé avec ChatGPT et Mermaid

Je suis ensuite passé à la description et à la construction de plus de diagrammes en utilisant le modèle C4 et je les ajouterai à un post de suivi

Intéressé par les Mindmaps -  lisez notre article de blog sur l’utilisation de plantUML avec ChatGPT pour créer de superbes Mindmaps

Dans la continuité de mon post précédent , je voulais me concentrer sur le modèle de diagramme C4 . Pour empêcher ChatGPT de s’écarter de l’intention, j’ai commencé par une invite ci-dessous

Invite : À l’avenir, je souhaite que vous agissiez en tant qu’architecte logiciel et que vous construisiez des diagrammes C4 à l’aide de mermaid.js. Conservez les réponses à la syntaxe de démarquage et gardez toujours à l’esprit les aspects fonctionnels et non fonctionnels du logiciel, y compris, mais sans s’y limiter, l’évolutivité, la disponibilité, la redondance, la conteneurisation, la sécurité et la reprise après sinistre.
ChatGPT : Bien sûr, en tant qu’architecte logiciel, je peux vous aider à créer des diagrammes C4 à l’aide de Mermaid.js qui prennent en compte les aspects fonctionnels et non fonctionnels tels que l’évolutivité, la disponibilité, la redondance, la conteneurisation, la sécurité et la reprise après sinistre.

Les diagrammes C4 sont un moyen de représenter l’architecture d’un système logiciel, et il est divisé en quatre niveaux principaux :

  • Niveau de contexte, qui représente les facteurs externes qui interagissent avec le système
  • Niveau conteneur, qui représente les unités de déploiement et leurs dépendances
  • Niveau composant, qui représente les différents composants du système
  • Niveau de code, qui représente les détails de mise en œuvre du système

Bon, commençons

Le diagramme de contexte

Invite : Commençons par créer un diagramme de contexte des services dans Wealth Management
ChatGPT : Bien sûr, voici un exemple de diagramme de contexte au format Mermaid pour un système de gestion de patrimoine :

diagramme de contexte

et dans l’éditeur de démarquage

diagramme de contexte

Ce diagramme montre les principaux acteurs qui interagissent avec le système de gestion de patrimoine et les principaux services fournis par le système.

  • Le Userinteragit avec les Account Management ServicePortfolio Management ServiceAsset Management Serviceet Transaction Management Service.
  • Le Financial Institutioninteragit également avec les Account Management ServicePortfolio Management ServiceAsset Management Serviceet Transaction Management Service.
  • Le Marketinteragit avec le Market Data Service.

Ce diagramme donne un aperçu des principales interactions entre les acteurs et les services, et il pourrait être utile pour comprendre l’architecture de haut niveau du système.

Le diagramme du conteneur

Ça a l’air bien jusqu’à présent. Ensuite, construisons un diagramme au niveau du conteneur pour l’un des services

Invite : Prenons le service Portfolio et décomposons-le en créant un diagramme de conteneur pour ses sous-fonctionnalités
ChatGPT : Bien sûr, voici un exemple de diagramme de conteneur au format Mermaid pour le service de gestion de portefeuille d’un système de gestion de patrimoine :

Diagramme de conteneur

et diagramme de démarque

Ce diagramme montre les conteneurs qui composent le service de gestion de portefeuille et leurs dépendances.

  • Le Portfolio Management APIest le point d’entrée permettant aux utilisateurs et aux autres systèmes d’interagir avec le service.
  • Le Portfolio Management Workerest chargé d’effectuer des tâches en arrière-plan, comme la mise à jour du portefeuille en fonction des évolutions du marché.
  • Le Portfolio Management Databasestocke les données relatives aux portefeuilles, comme les actifs détenus dans chaque portefeuille, leur valeur actuelle, etc.
  • Le Load Balancerdistribue le trafic entrant entre les instances de Portfolio Management APIs’exécutant dans le Kubernetes Cluster.
  • Le Kubernetes Clusterest responsable de la gestion de la mise à l’échelle, de la disponibilité et du déploiement des conteneurs.

Le diagramme des composants

Invite : Créons ensuite le diagramme au niveau des composants pour l’API de gestion de portefeuille avec tous les détails pertinents
ChatGPT : Voici un exemple de diagramme de composants au format Mermaid pour l’API de gestion de portefeuille

et le diagramme de sirène correspondant

Diagramme de composants pour l’API de gestion de portefeuille

et voici la description

Ce diagramme montre les différents composants qui composent l’API Portfolio Management et leurs dépendances.

  • Le API Gatewaycomposant de l’API de gestion de portefeuille est le point d’entrée pour les demandes entrantes.
  • Le Authenticationcomposant est responsable de l’authentification des utilisateurs.
  • Le Authorizationcomposant est chargé de vérifier les droits d’accès des utilisateurs.
  • Le Request Validatorcomposant est responsable de la validation des requêtes entrantes.
  • Le Business Logiccomposant est responsable du traitement des demandes et de l’exécution de la logique métier.
  • Le Response Formattercomposant se charge de formater les réponses avant de les renvoyer aux clients.
  • Le Portfolio Servicecomposant est responsable de l’exécution des opérations liées à la gestion des portefeuilles telles que la création, la lecture, la mise à jour et la suppression des portefeuilles, et il communique avec le Portfolio Management Databasepour conserver les données relatives aux portefeuilles.

Cela a l’air génial. La plupart des détails correspondent à ma compréhension. Essayons de construire la même chose pour Portfolio Management Worker

Invite : pouvons-nous faire la même chose pour le conteneur Portfolio Management Worker
ChatGPT : Bien sûr, voici un exemple de diagramme de composants au format Mermaid pour le conteneur Portfolio Management Worker d’un système de gestion de patrimoine :

et le schéma de la sirène

Diagramme des composants pour PM Worker

Ce diagramme montre les composants qui composent le conteneur Portfolio Management Worker et leurs dépendances.

  • Le Task Schedulercomposant est responsable de la planification des tâches de fond de mise à jour des portefeuilles.
  • Le Portfolio Updatercomposant est responsable de la mise à jour des portefeuilles en fonction des évolutions du marché, il communique avec le Market Data Servicepour obtenir les dernières données du marché.
  • Le Market Data Servicecomposant est chargé de fournir les données de marché pour la mise à jour du portefeuille.
  • Le Portfolio Servicecomposant est responsable de l’exécution des opérations liées à la gestion des portefeuilles telles que la création, la lecture, la mise à jour et la suppression des portefeuilles, et il communique avec le Portfolio Management Databasepour conserver les données relatives aux portefeuilles.

Le diagramme de code

Faisons le dernier bit et créons également le diagramme de code pourPortfolio Management API

Invite : Pouvez-vous également faire le diagramme de code pour l’API de gestion de portefeuille
ChatGPT ? Bien sûr, voici un exemple de diagramme de code au format Mermaid pour l’API de gestion de portefeuille d’un système de gestion de patrimoine :

Cependant, lorsque j’essaie de le créer dans l’éditeur de démarquage avec Mermaid.js, il ne parvient pas à indiquer les dépendances cycliques. Tout ce que nous devons faire ici, supprimez-les, comme indiqué ci-dessous

Graphique de code corrigé

et le schéma de la sirène

Packages de code de l’API de gestion de portefeuille

Ce diagramme montre les différents packages qui composent l’API Portfolio Management et leurs dépendances.

  • Le apipackage est le point d’entrée de l’application, il définit les routes, et le middleware.
  • Le authpackage est responsable de l’authentification et de l’autorisation des requêtes.
  • Le configpaquet est responsable du chargement des fichiers de configuration.
  • Le controllerscolis se charge de traiter les demandes et d’appeler les services.
  • Le errorspackage définit les erreurs personnalisées.
  • Le middlewarepackage est chargé de fournir un middleware pour les requêtes telles que la gestion du CORS, la validation des requêtes, etc.
  • Le modelspackage définit les modèles ORM pour les entités de la base de données.
  • Le servicespackage est responsable de l’exécution de la logique métier et de la communication avec la base de données.
  • Le utilspackage fournit des fonctions utilitaires
Retour en haut