D2 (outil de diagrammes textuels) prend désormais en charge le rendu ASCII

 (d2lang.com)
4 points par GN⁺ 2025-08-20 | 1 commentaires | Partager sur WhatsApp
  • Dans la version 0.7.1 de D2, une fonctionnalité de rendu des diagrammes textuels en ASCII a été ajoutée
  • Il est possible d’utiliser de simples diagrammes ASCII dans les commentaires de code pour expliquer le flux d’une fonction ou d’une classe
  • Par défaut, le rendu utilise des caractères Unicode, mais un drapeau d’option permet de choisir l’ASCII standard
  • Cette fonctionnalité est en phase alpha et ne prend pas encore en charge certains styles, caractères spéciaux et certaines formes
  • Il est possible d’essayer directement le rendu ASCII dans le D2 Playground et l’extension Vim

Présentation du rendu ASCII de D2

À partir de la dernière version de D2 (0.7.1), une fonction de sortie ASCII pour les diagrammes textuels a été ajoutée.
Les fichiers de sortie avec l’extension .txt sont automatiquement rendus avec le moteur ASCII.
Un exemple est visible dans l’extension Vim de D2 : en ouvrant un fichier .d2 et via la fenêtre de prévisualisation, il est possible de voir en temps réel l’état du diagramme ASCII à chaque sauvegarde.

Utilisation pour la documentation du code

Les diagrammes ASCII sont particulièrement pratiques lorsqu’ils sont insérés dans les commentaires du code source

  • Ajouter un petit diagramme à côté d’une fonction ou d’une classe permet de faciliter la compréhension du code de façon plus intuitive qu’une simple explication du flux
  • Dans l’extension Vim, il est possible d’écrire du code D2 puis de convertir immédiatement une sélection en diagramme ASCII

Choix entre Unicode et ASCII standard

Le rendu ASCII par défaut utilise des caractères Unicode de dessin de cadres, pour un résultat plus esthétique

  • Si vous souhaitez une portabilité maximale, vous pouvez aussi effectuer le rendu avec des caractères ASCII classiques via le drapeau d’option --ascii-mode=standard

Limites actuelles

Cette fonctionnalité de rendu ASCII est en phase alpha

  • Il peut encore exister de nombreux cas limites, pistes d’amélioration et bugs
  • Les utilisateurs sont encouragés à soumettre des rapports de bug ou des retours sur le site

Principales limitations

  • Styles non pris en charge
    • Les animations, polices, etc. n’ont pas de sens en ASCII
    • Une prise en charge limitée de certains styles, comme les couleurs de terminal, pourrait être étudiée à l’avenir
    • Les thèmes ne sont pas pris en charge non plus
    • double-border, multiple, etc. figurent dans la liste des améliorations prévues
  • Espacement irrégulier
    • Lors de la conversion en ASCII, la disposition des boîtes peut devenir plus irrégulière qu’en SVG
  • Éléments impossibles à rendre
    • La prise en charge des textes spéciaux comme Markdown, Latex et le code n’est pas encore implémentée
    • Les images et icônes, les classes UML, les tables SQL, etc. ne peuvent pas être rendues
    • Il reste à décider si ces éléments seront supprimés ou affichés sous forme de placeholders
  • Certaines formes ne sont pas prises en charge
    • Les formes courbes comme les nuages ou les cercles se représentent mal en ASCII
    • Ces formes sont remplacées par des rectangles, avec une petite icône ajoutée en haut à gauche pour distinguer leur type

Essayer par vous-même

Cette fonctionnalité est disponible immédiatement dans le D2 Playground

  • Vous pouvez ouvrir le bloc de code fourni et tester vous-même le rendu ASCII

À lire aussi

1 commentaires

 
GN⁺ 2025-08-20
Commentaires Hacker News

  • Bonjour à tous, les développeurs. Je voulais partager la nouvelle fonctionnalité ajoutée ce matin. C’est encore au stade alpha, et il y a déjà une issue GitHub ouverte. Si vous voulez passer le billet de blog et aller voir directement, c’est visible ici. Un exemple un peu plus grand est aussi disponible à ce lien

    • Dans le playground, c’était rendu en texte noir sur fond noir, donc j’ai cru que ça ne marchait pas. C’est probablement parce que j’ai activé le mode sombre. Les autres renderers fonctionnent bien, mais l’ASCII est invisible
    • Je me demande si, dans le TFA, cela signifie simplement que c’est réduit à partir d’ELK. Est-ce qu’il faut configurer ELK explicitement pour utiliser cette fonctionnalité, ou bien est-ce que cela s’active automatiquement quand on exporte en .txt ? J’utilise déjà ELK pour mes diagrammes D2 la plupart du temps

  • Je me demande où est la valeur par rapport à mermaid. J’aime bien le design et la manière dont cela fonctionne, mais je voudrais savoir s’il y a une raison concrète de quitter mermaid. Je trouve aussi que ce type d’outil manque généralement de fonctions pour ajuster manuellement la position et la taille des boîtes avec des valeurs x/y dans les résultats générés automatiquement

    • Cela dépend de ce que vous valorisez. Pour certaines personnes, les deux points que vous avez mentionnés suffisent, et pour d’autres comme nous, le fait de pouvoir rendre du SVG en CLI sans avoir besoin d’un navigateur chromium est important (voir ce cas). Cela ne montre pas toutes les différences, mais il existe aussi un site de comparaison rapide. Et je ne veux pas faire la promotion d’un produit payant, mais si vous avez besoin d’un réglage manual permettant de fixer la position et la taille, l’IDE le propose

  • Même si la syntaxe de D2 est très séduisante, j’ai davantage utilisé Mermaid jusqu’ici à cause de son tooling. Mais cette fonctionnalité est vraiment nouvelle à grande échelle, et je n’ai jamais rien vu de tel dans Mermaid. Le lien avec asciiflow.com est aussi très bien trouvé

  • J’aime bien la fonction de conversion depuis l’ASCII. En revanche, je me demande comment récupérer la source D2 d’origine lorsqu’il faut mettre à jour le diagramme

  • J’ai toujours préféré D2 à mermaid, mais à mon avis le grid layout devient pratiquement inutilisable à cause du problème suivant (issue liée). S’il faut régler soi-même les unités en pixels, cela revient à annuler la raison d’être de ce type d’outil

    • Merci ! C’est bon à savoir. Ce sera pris en compte dans la 0.7.2 (la prochaine release)

  • J’ai maintenu et partagé plusieurs fois une liste d’outils browser-based de text-to-diagram. Ce que j’ai appris récemment, c’est que la version en ligne de D2 ne fonctionne pas uniquement dans le navigateur : un serveur backend génère les diagrammes. Je me demande si D2 peut fonctionner entièrement côté client (dans le navigateur), et si l’extension mentionnée dans ce billet fonctionne aussi hors ligne

    • C’est désormais possible ! (depuis une semaine) Si vous regardez l’onglet réseau du playground D2, vous verrez qu’il fonctionne avec d2.js, un wrapper autour du port wasm de D2. Ce n’est pas encore officiellement lancé, mais une annonce séparée est prévue bientôt
    • ~~Je voulais demander si je pouvais voir la liste~~ Édition : je l’ai déjà trouvée ! Merci

  • J’aimerais qu’il y ait un repository Python officiel. J’aimerais l’utiliser dans un notebook, mais actuellement je suis contraint de passer par databricks, ce qui est peu pratique

  • Le rendu est vraiment très beau. J’avais aussi vu le billet précédent sur la prise en charge de C4 ! Je vais probablement regarder ça bientôt, car j’aurai besoin de modélisation C4

  • Fonctionnalité vraiment géniale. Je n’avais jamais entendu parler de D2, mais j’aime énormément le fait qu’on puisse créer des diagrammes directement dans le terminal tout en obtenant un rendu élégant. Je compte l’essayer très vite

    • D2 prend déjà en charge la mise à jour live de .svg via un serveur HTTP en temps réel. Si vous ouvrez le navigateur et vim côte à côte, vous pouvez aussi voir les mises à jour en direct. J’ai découvert D2 il y a un an, et depuis je l’utilise pour tous mes diagrammes
    • En général, j’utilise Moondraw pour les diagrammes ASCII, mais si vous êtes déjà dans un environnement vim, cet outil est bien meilleur

  • L’extension vim a des fonctionnalités vraiment incroyables

    • En revanche, c’est étrange et un peu dommage qu’elle soit écrite en vimscript