Aller au contenu
← Tous les articles
Article

ComfyUI-UML : des diagrammes sous forme de nœuds et d’images

Écouter en version balado

Des diagrammes sous forme de nœuds ComfyUI · 2:20 · voix synthétiques, script rédigé avec l’IA

Transcription

Sylvie : Et si, dans ton workflow d'images, un diagramme n'était pas une capture d'écran mais un texte que tu peux relire, modifier et régénérer ?

Thierry : Comme une recette plutôt qu'une photo du gâteau.

Sylvie : Exactement. Antoine a construit ComfyUI-UML, un nœud personnalisé pour ComfyUI. Du texte entre, et il en sort une image, un fichier et un lien à partager.

Thierry : Quel genre de texte ? Un format spécial ?

Sylvie : Du Mermaid ou du PlantUML, les langages de diagrammes les plus courants. Le README annonce 28 types de diagrammes via un service appelé Kroki, avec les formats de sortie validés selon le type. Comme la source reste dans le workflow, on peut la relire, la comparer et la relancer.

Thierry : Et le dessin, il se fait où ?

Sylvie : Par défaut, le nœud envoie la source à un service Kroki en ligne. Pour travailler hors ligne, ou sur une architecture sensible, le dépôt documente aussi des chemins locaux avec Mermaid et Graphviz.

Thierry : On dit que les modèles de langage savent écrire ces diagrammes. C'est géré ?

Sylvie : Oui, en option. Un modèle entoure souvent son diagramme d'explications. Le nœud normalise plusieurs formes de réponse, extrait le bloc de code et privilégie celui qui correspond au type choisi. Mais un modèle n'est pas obligatoire.

Thierry : Et comment l'image arrive dans ComfyUI ?

Sylvie : Pour une image classique, le code l'ouvre avec Pillow, la convertit en RGB, ramène les valeurs entre zéro et un, et construit un tenseur que ComfyUI comprend. Pour le SVG, il tente une conversion CairoSVG pour l'aperçu, et le fichier est conservé dans tous les cas.

Thierry : Donc on a un aperçu et le vrai fichier.

Sylvie : Oui, plus une adresse de visualisation si on veut partager le résultat.

Thierry : Comment l'essayer ?

Sylvie : On l'installe avec la commande comfy node install, on redémarre ComfyUI, puis on ouvre le workflow d'exemple uml single diagram only. Deux nœuds seulement : un nœud de diagramme qui alimente un aperçu. Il y a aussi des exemples Mermaid, PlantUML et Ollama.

Thierry : On commence petit, puis on enrichit.

Sylvie : C'est ça. Le diagramme devient un nœud de plus dans le workflow. L'article complet a le schéma et les liens vers le code du nœud.

Workflow de diagramme ComfyUI-UML tiré du README
Table des matières

ComfyUI devient intéressant au-delà de la génération d’images lorsqu’un résultat intermédiaire peut circuler entre des nœuds. ComfyUI-UML applique ce principe aux diagrammes : du texte entre, puis une image, un fichier et un lien peuvent en sortir.

1. Garder le code dans le workflow

Une capture se modifie mal. Une source Mermaid ou PlantUML se relit, se compare et se régénère. Le nœud conserve cette source dans le workflow plutôt que de ne laisser qu’une image sans explication.

Le README annonce 28 types de diagrammes Kroki, avec une validation des formats selon le type. Cela ne signifie pas que tous les moteurs acceptent tous les formats.

flowchart TD
  T["Texte ou sortie LLM facultative"] --> N["Normaliser la source"]
  N --> U["Nœud UMLDiagram"]
  U --> K["Rendu web Kroki"]
  U --> L["Mermaid / Graphviz locaux facultatifs"]
  K --> O["Image, fichier et URL"]
  L --> O
  O --> P["PreviewImage ou Diagram Viewer URL"]

Ce schéma décrit les rôles des nœuds. Un LLM n’est pas nécessaire.

2. Nettoyer la réponse d’un modèle

nodes/uml_diagram.py[1] normalise plusieurs formes de réponse et extrait les blocs de code. Si le type est connu, il privilégie un bloc correspondant. C’est utile lorsqu’un modèle ajoute des explications autour de Mermaid.

Extraire un bloc ne valide toutefois pas sa syntaxe. Le moteur de rendu doit encore accepter le diagramme.

3. Passer des octets à une image ComfyUI

Pour une image matricielle, le code utilise Pillow, convertit en RGB, ramène les valeurs entre zéro et un, puis construit un tenseur [1, H, W, 3].

Le SVG suit un autre chemin. Le code tente une conversion CairoSVG pour l’aperçu. Sans conversion réussie, une sortie non matricielle peut conserver son fichier tout en renvoyant un petit tenseur de remplacement. Le fichier sauvegardé et l’aperçu ne sont donc pas la même chose.

4. Commencer simplement

comfy node install comfyui-uml

Après un redémarrage, commencer par uml_single_diagram_only.json : UMLDiagram → PreviewImage. Ajouter le visualiseur lorsque le rendu fonctionne. Le dépôt fournit aussi des exemples Mermaid, PlantUML et Ollama.

Le backend web transmet la source au service Kroki choisi. Pour travailler hors ligne ou sur une architecture sensible, les chemins Mermaid et Graphviz locaux sont documentés. Mermaid local exige ses dépendances JavaScript, et l’aperçu SVG peut nécessiter CairoSVG.

5. Sources

Références

  1. antoinebou12. (). nodes/uml_diagram.py. [Source file or documentation] github.com.
  2. antoinebou12. (). ComfyUI-UML. [Software repository] github.com.
  3. antoinebou12. (). Exemples de workflows. [Source file or documentation] github.com.

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