Cet article pour lancer une série consacrée à mon modeste voyage pour dev une appli utilisant assez intensivement les LLMs, sait-on jamais quelques leçons pourront servir à d’autres que moi.
C’est un collègue qui, lors d’un échange, me partage un magnifique schéma de son déploiement réseau (je me garderai bien de critiquer ses talents de dessinateur puisque personnellement je suis toujours bloqué à l’étape des bonhommes bâtons). Bouche bée comme lorsque mon médecin traitant m’envoi à la pharmacie avec quelques traits relevant plus de l’art minimaliste que d’une tentative de communication je me dis que ça serait rigolo de voir ce que ChatGPT peut en faire. Puis de voir si il est capable de reproduire le diagramme en SVG directement (puisque le SVG est un format texte – mmmm possible que ça ait bougé depuis Décembre l’année dernière mais le résultat tenait plus d’une boucherie que d’un diagramme) ou bien en mxGraphModel (format XML permettant la serialization des diagrammes pour draw.io/diagrams.net). Et c’est en l’envoyant à Claude que je découvre une lib que je trouve vraiment génial : mermaid.js
L’idée de Mermaid.js c’est de permettre de décrire un diagramme dans des formats simples de type markdown. Et cette librairie est assez complète puisqu’elle permet de générer une bonne vingtaine de diagrammes très différents allant des classiques FlowChart ou diagramme de classe jusqu’à des graphiques de Sankey ou des historiques de commit Git. Et les intégrations sont nombreuses : github, gitlab, confluence, vsStudio, … (voir plus).
ça y est c’est certain, mon SAAS va atteindre les 10k de MRR en 3 jours!. J’ai suffisamment séché devant Powerpoint/Ms Project/… en me demandant comment diable je vais faire pour générer le Gantt de la roadmap attendue par le copil pour savoir que ce genre de soft sont une vraie galère et que pouvoir faire simplement ceci (voir plus) :
gantt
title ma roadmap
dateFormat YYYY-MM-DD
section Gestion des utilisateurs
Social login avec AOL :a1, 2014-01-01, 3d
Social login avec FaceBook :after a1, 2d
section TODO list
Ajouter un TODO :2014-01-03, 2d
Passer le TODO à Done :4dc’est un véritable GAME CHANGER !!!! (oui oui je m’emballe dès fois)
En vrai les documentations produits / repos git sont truffées de diagramme de classes / schéma réseaux pas à jours et dont on a perdu le fichier source modifiable, ou de photos illisibles de tableaux blancs qu’un jour on a voulu re-créer sous forme numérique mais entretemps un mail plus important est arrivé et c’est la photo flou qui est restée dans le wiki d’entreprise. Je pense donc toujours que l’idée de ImageToDiagram est bonne :
à partir d’une image, recréer un diagramme dans un format simple clair et lisible qui sera simple à faire évoluer
Image d’origine
sortie SVG à partir de Mermaid
Mermaid est une lib puissante mais elle atteint vite ses limites lorsqu’on sort du cadre des types de diagrammes gérés (le diagramme d’architecture ne permet pour l’instant de réaliser que des architectures très simples). J’ai donc cherché une autre librairie (un peu moderne si possible) pour gérer des rendus plus complexes. Je n’ai malheureusement pas trouvé mon bonheur qui utiliserait du markdown et qui propose autant d’intégrations que mermaid. Mais D2lang m’a semblé un bon compromis en terme d’expressivité de la syntaxe et de richesse du contenu. Avec D2Lang il n’y a qu’une grammaire et les représentations de type diagramme de séquence ou de classe peuvent être intégrées dans un même rendu avec des éléments de flow et autre. Un autre point intéressant par rapport à mermaid c’est que le positionnement des éléments peut être indiqué grâce à l’opérateur near (voir ici), le résultat est l’obtention de diagramme beaucoup plus proches de ce qu’un utilisateur peut attendre (et potentiellement beaucoup plus fidèles à l’image d’origine en considérant notre use case).
D2Lang est une lib en Go et j’avais donc besoin d’un service permettant le rendu des diagrammes en un format image, si vous utilisez divers diagrammes dans votre quotidien, allez voir kroki! le principe du service est de permettre le rendu dans des formats images de diagrammes provenant de (très) nombreuses librairies. En regardant les librairies pour lesquelles ils peuvent fournir un rendu vous trouverez forcément une lib qui fait votre bonheur.
La référence pour moi pour la réalisation de schéma d’architecture ou autre reste draw.io (devenu diagrams.net). J’ai donc voulu le proposer aussi en format de sortie (et l’éditeur est facilement intégrable du côté front), mais je ne suis pas certain de l’intérêt et le format de donnée basé sur XML est beaucoup trop verbeux (ça coute cher en token), les résultats sont très complexes à influencer avec du prompting. Si les utilisateurs demandent plus de contrôle sur le positionnement des éléments que ne peuvent proposer mermaid.js ou d2Lang (et si il y a des utilisateurs) je pense que cela passera soit par excalidraw soit par un outil a développer.
Les types de diagrammes gérés pour l’instant dans l’application sont les suivants : diagrammes de séquence, de classes, d’entités et relations bdd, les flowchart, les mindmap, les gantt, les timeline sortent au format mermaid.js, et des diagrammes plus complexes du type architecture par D2lang.
Autre angle d’attaque : Le RAG.
Le format de sortie préféré des LLMs c’est le markdown puisqu’on a la capacité sur les interfaces web de traiter ce markdown pour avoir des rendus sympas (tableaux, mise en forme) et des fonctionnalités comme Claude Artefacts (L’aperçu sur un panneau latéral du code créé).
On a vu notamment avec Mistral OCR que l’état de l’art actuel c’est d’être capable de récupérer des PDF scannés en faisant la part des choses entre le texte, les tableaux et les images. Donc en proposant ImageToDiagram en API on peut envisager que les diagrammes présents dans une source de données soient traités comme du texte dans le process d’indexation (calcul des embeddings) et que le RAG permette dans la discussion d’afficher des graphiques, puis de poursuivre la conversation en demandant par exemple d’ajouter des données à jour dans le graphique.
Bon pour l’instant on n’a pas trop parlé IA générative mais c’était juste une introduction !
Et pour tester l’appli c’est par ici : https://imagetodiagram.com