- D2 est un langage de script textuel permettant de créer des diagrammes, en offrant une approche pour générer automatiquement des visuels à partir de code
- L’utilisateur définit les nœuds et les relations avec une syntaxe simple, puis le moteur de mise en page automatique les dispose visuellement
- Chaque extrait de code dans la documentation peut être exécuté et modifié directement dans le Playground, ce qui permet de vérifier immédiatement le résultat
- Toutefois, il existe une exception : certains exemples utilisant
import ne s’exécutent pas immédiatement dans le Playground
- C’est un outil utile pour les développeurs afin d’améliorer l’automatisation de la documentation visuelle et l’efficacité de la collaboration
Présentation de D2
- D2 est un langage de script déclaratif qui permet d’écrire des diagrammes sous forme de code, avec la capacité de définir des structures complexes en texte puis de les visualiser automatiquement
- L’utilisateur décrit les nœuds, les arêtes, les groupes, etc., avec une syntaxe simple
- Le résultat est automatiquement agencé, avec la possibilité d’appliquer divers styles
- Ce langage est avantageux pour le contrôle de version et la collaboration, et peut être facilement intégré dans les revues de code ou les pipelines d’automatisation documentaire
Fonctionnalités du Playground
- Chaque extrait de code de la documentation D2 offre une fonction interactive permettant de l’ouvrir, le modifier et l’exécuter directement dans le Playground
- En survolant un extrait avec la souris, le lien vers le Playground s’active
- Cela permet d’ajuster le diagramme en temps réel et d’en vérifier visuellement le résultat
- Toutefois, les extraits utilisant des instructions
import ont une limite : comme ils nécessitent des ressources externes, ils ne s’exécutent pas instantanément dans le Playground
Intérêt et usages
- D2 prend en charge l’automatisation de la documentation visuelle, ce qui permet de gérer la conception de systèmes ou les flux de données en même temps que le code
- En permettant aux développeurs et aux designers de définir les diagrammes dans un même langage, il améliore l’efficacité de la collaboration
- Il est considéré dans l’écosystème open source comme un outil favorisant la standardisation de la création de diagrammes basée sur le code
1 commentaires
Commentaires sur Hacker News
En tant que co-créateur de D2, il réfléchit en ce moment à des idées pour étendre les fonctionnalités d’animation
il a publié la discussion associée dans GitHub Discussion et aimerait avoir des retours
il utilise surtout mermaid, mais se demande si D2 pourrait offrir une interface plus flexible
il aimerait aussi savoir s’il est prévu d’ajouter des fonctions d’appel d’outils connectées aux LLM ou une interface conviviale comme MCP
c’était appréciable de ne pas avoir à se battre avec le moteur même lors du rendu de nombreux objets
en revanche, la documentation de sdk/d2lib lui a semblé insuffisante au début, ce qui l’a conduit à quelques tâtonnements
mais il ne pense pas que des animations sophistiquées soient indispensables. Quand il faut mettre quelque chose en avant, un simple changement de couleur lui paraît plus intuitif
en revanche, voir tout le diagramme bouger à cause d’un changement de texte pourrait être distrayant
il aimerait aussi une prise en charge officielle des diagrammes Swimlane
Il essaie d’envelopper des outils comme D2 ou Penrose avec Python pour faire du diagram scripting piloté par les données
mais la plupart des outils déclaratifs ne prennent pas en charge un workflow « declare, then tweak », ce qui est contraignant
Penrose est facile à modifier, mais le résultat reste aléatoire et imprévisible
ce n’est pas faisable avec le moteur open source, mais la fonction Freehand permet quelques ajustements
Il se demandait jusqu’à quel point la syntaxe de D2 pouvait être reproduite dans un langage de programmation généraliste
en Python, à cause des limites de la surcharge d’opérateurs, il est difficile d’obtenir exactement le même DSL, mais on peut tenter quelque chose d’approchant avec la surcharge d’opérateurs sur les chaînes
a <- b | "edge"mais il plaisante en disant que si quelqu’un l’utilise vraiment, il reviendra le hanter comme un fantôme
"x" --> "y" | "hello world"mais il vaut mieux ne pas en abuser
x >> y << "label"on peut également construire un modèle objet dans une classe Diagram et lui brancher un moteur de rendu
En tant qu’auteur principal du projet mgmt, il manipule souvent des DAG
il a besoin de diagrammes visuellement stables avec des transitions animées lors de l’ajout ou de la suppression de nœuds et d’arêtes
Graphviz est gênant car le layout bouge d’un instantané à l’autre
Le mode Sketch et les fonctions interactives de D2 sont vraiment utiles
grâce aux info-bulles et aux liens, l’utilité des diagrammes augmente fortement
Il utilise D2 depuis longtemps et le recommande activement en interne
mais le coût de la licence entreprise est trop élevé, donc il ne l’utilise que pour un usage personnel
la licence TALA coûte 3 000 dollars par an, et même l’offre personnelle à 120 dollars lui semble lourde
il estime que la fonctionnalité consistant à donner à un LLM un Helm chart ou une description système pour générer automatiquement des diagrammes est révolutionnaire
La récente prise en charge du rendu ASCII de D2 a fait parler d’elle
la discussion associée se poursuit dans ce billet précédent
D2 existe depuis assez longtemps, mais il reste malgré tout moins connu que mermaid
sur le plan fonctionnel, il lui est largement supérieur et il aimerait que davantage de gens le découvrent
Sur leur plateforme IA zo.computer, ils ont adopté D2 comme outil de génération de diagrammes
il est plus expressif que mermaid et convient donc mieux à la visualisation basée sur l’IA
D2 est excellent, mais il lui manque une différenciation décisive face à PlantUML ou mermaid
beaucoup attendent encore la « killer app du code de diagramme »
le fait de ne pas avoir besoin d’une installation npm est aussi apprécié
en revanche, mermaid s’intègre très bien avec Obsidian et d’autres outils