Article

Prompts de diagrammes avec ChatGPT et AIPRM (PlantUML, Mermaid, etc.)

6 sept. 2022 4 min de lecture

Écouter en version balado

Quatre champs pour que ChatGPT arrête de deviner · 2:25 · voix synthétiques, script rédigé avec l’IA

Transcription

Sylvie : Vous demandez à ChatGPT un diagramme de séquence, et vous recevez une syntaxe un peu au hasard. C'était du PlantUML ? Du Mermaid ? Autre chose ?

Thierry : Ah, ce fil de discussion-là, je le connais. On finit par se battre avec les crochets.

Sylvie : Antoine en a eu assez aussi. Sa solution : un gabarit de prompt, utilisé avec l'extension de navigateur AIPRM, qui verrouille quatre champs. Le type de diagramme, le type d'éléments, l'objectif et l'outil de dessin. Une fois ces champs fixés, le modèle arrête de deviner.

Thierry : Donc moins un prompt malin qu'un formulaire à remplir.

Sylvie : C'est ça. Et on n'a même pas besoin d'AIPRM : on peut coller les quatre lignes dans ChatGPT et changer les valeurs. Son exemple demande un diagramme de séquence entre un frontend React, un backend FastAPI, un cache Redis et une base MongoDB, en PlantUML.

Thierry : Qu'est-ce qu'il montre, ce diagramme ?

Sylvie : Une requête utilisateur qui traverse la pile, avec deux branches. En cas de cache hit, FastAPI interroge Redis, trouve la donnée et répond directement. En cas de cache miss, il va chercher dans MongoDB, enregistre le résultat dans Redis, puis répond. La page donne le même scénario en PlantUML et en Mermaid.

Thierry : Et si mon équipe utilise plutôt Draw.io ou Lucidchart ?

Sylvie : Ce sont des outils où l'on dessine sur un canevas. Antoine propose donc de générer d'abord du PlantUML ou du Mermaid. Ensuite, soit on exporte en SVG ou en PNG pour l'importer comme calque de base, soit on demande à ChatGPT une liste numérotée de lignes de vie et de messages, qu'on refait avec des formes.

Thierry : Mieux qu'une page blanche, en fait.

Sylvie : Exactement, c'est l'idée : éviter le syndrome de la page blanche tout en gardant un diagramme modifiable.

Thierry : Il y a des pièges ?

Sylvie : Quelques-uns. Les modèles mélangent parfois les branches de cache avec la syntaxe de base de données, donc on rend toujours le diagramme en local avant de publier. Et il conseille de copier les quatre lignes du gabarit dans le README du dépôt, pour ne pas dépendre d'une version d'extension.

Thierry : Et puis un diagramme en texte, ça se compare très bien dans git.

Sylvie : Voilà pourquoi il le recommande pour les revues d'architecture réglementées. L'article complet a le gabarit, les deux listings et le schéma du cache.

Prompts de diagrammes avec ChatGPT et AIPRM (PlantUML, Mermaid, etc.)

Table des matières

J’en avais assez des fils ChatGPT « dessine un diagramme de séquence » qui renvoient une syntaxe à moitié au hasard. AIPRM^[1] garde le gabarit dans le navigateur ; je verrouille quatre champs — type, éléments, objectif, outil — et le modèle arrête de deviner entre PlantUML, Mermaid ou des notes pour Draw.io. Voir aussi le billet plugin D2C OpenAI.

1. Gabarit de prompt AIPRM (à copier et adapter)

Une ligne par dimension. Collez le bloc dans ChatGPT (avec ou sans AIPRM) et modifiez les valeurs entre crochets.

[DIAGRAM TYPE] - Sequence | Use Case | Class | Activity | Component | State | Object | Deployment | Timing | Network | Wireframe | Archimate | Gantt | MindMap | WBS | JSON | YAML

[ELEMENT TYPE] - Actors | Messages | Objects | Classes | Interfaces | Components | States | Nodes | Edges | Links | Frames | Constraints | Entities | Relationships | Tasks | Events | Modules

[PURPOSE] - Communication | Planning | Design | Analysis | Modeling | Documentation | Implementation | Testing | Debugging
(optionnel : précisez la stack ou le scénario, ex. « Communication : frontend React server — backend FastAPI — cache Redis — base MongoDB »)

[DIAGRAMMING TOOL] - PlantUML | Mermaid | Draw.io | Lucidchart | Creately | Gliffy

1.1. Exemple : diagramme de séquence pour une API avec cache

[DIAGRAM TYPE] - Sequence
[ELEMENT TYPE] - Messages
[PURPOSE] - Communication Frontend React Server - Backend FastAPI - Cache Redis - Database MongoDB
[DIAGRAMMING TOOL] - PlantUML

2. Lien public AIPRM

Prompt publié dans la bibliothèque AIPRM : lien LinkedIn^[2]. Utilisez-le comme point de départ, puis affinez [PURPOSE] et [DIAGRAMMING TOOL] selon votre stack et vos livrables.

3. Les diagrammes de séquence en bref

Les diagrammes de séquence UML montrent les messages échangés dans le temps entre composants. Ils servent à l’onboarding, aux revues de conception et à documenter un parcours requête (surtout quand un cache ou une base est sur le chemin critique).

4. Communication front–back avec mise en cache

L’illustration ci-dessous : une requête utilisateur traverse un front React et un back FastAPI, avec Redis comme cache et MongoDB comme source de vérité. Les extraits de code incluent une branche cache hit et une cache miss.

Communication front-back avec cache

5. PlantUML (hit et miss)

@startuml
actor User
participant "ReactServer" as RS
participant "FastAPIServer" as API
participant "RedisCache" as R
database "MongoDB" as M

User -> RS: Sends Request
RS -> API: Forwards Request

alt Cache hit
  API -> R: Check Cache
  R --> API: Found Data
  API -> RS: Sends Response from Cache
  RS -> User: Returns Response from Cache
else Cache miss
  API -> R: Get Data from Cache
  R --> API: Data Not Found
  API -> M: Get Data from DB
  M --> API: Returns Data
  API -> R: Save Data in Cache
  R --> API: Data Saved
  API -> RS: Sends Response
  RS -> User: Returns Response
end
@enduml

6. Mermaid (hit et miss)

sequenceDiagram
    actor User
    participant ReactServer
    participant FastAPIServer
    participant RedisCache
    participant MongoDB

    User->>ReactServer: Sends Request
    ReactServer->>FastAPIServer: Forwards Request

    alt Cache hit
        FastAPIServer->>RedisCache: Check Cache
        RedisCache-->>FastAPIServer: Found Data
        FastAPIServer->>ReactServer: Sends Response from Cache
        ReactServer->>User: Returns Response from Cache
    else Cache miss
        FastAPIServer->>RedisCache: Get Data from Cache
        RedisCache-->>FastAPIServer: Data Not Found
        FastAPIServer->>MongoDB: Get Data from DB
        MongoDB-->>FastAPIServer: Returns Data
        FastAPIServer->>RedisCache: Save Data in Cache
        RedisCache-->>FastAPIServer: Data Saved
        FastAPIServer->>ReactServer: Sends Response
        ReactServer->>User: Returns Response
    end

7. Draw.io, Lucidchart, Creately et Gliffy

Ce sont des outils orientés canevas. Souvent le plus rapide est de faire générer PlantUML ou Mermaid dans ChatGPT, puis :

Exporter depuis un serveur ou la CLI PlantUML en SVG ou PNG et importer ce graphique comme calque de base, ou
Demander à ChatGPT (avec le gabarit) une liste numérotée des lifelines et des messages, et les reproduire avec les formes et connecteurs de l’outil.

Vous évitez la page blanche tout en gardant la main sur le style et les annotations.

8. Bilan

Une fois le gabarit en quatre lignes dans AIPRM, la demande de diagramme ressemble à remplir un formulaire plutôt qu’à négocier avec le modèle. Je retouche toujours la sortie — mais le premier jet arrive souvent dans le bon langage (PlantUML, Mermaid ou liste pour un outil graphique).

Références

AIPRM. (6 septembre 2022). [Web page] www.aiprm.com.
lien LinkedIn. (6 septembre 2022). [Web page] lnkd.in.

Les références utilisent la date de publication de cet article.