D2 : un nouveau langage déclaratif pour convertir du texte en diagrammes,

Il prend en charge les extraits de code et la syntaxe Markdown

Le 31 août 2022 à 22:10, par Bill Fassinou

17PARTAGES

D2 (Declarative Diagramming) est un langage dédié à un domaine (domain-specific language -DSL). C'est un langage déclaratif permettant de générer des diagrammes à partir d'un texte. Développé par une entreprise américaine appelée Terrastruct, D2 est actuellement en version alpha. Pendant cette période, il sera uniquement hébergé sur Terrastruct, qui fournit l'environnement de développement intégré. L'entreprise a déclaré qu'une fois que D2 aura atteint la première version stable, il publiera et continuera son développement en open source et rendra les options locales disponibles.

Terrastruct explique que D2 a été conçu dans un seul but : faire de la création de diagrammes une expérience agréable pour les ingénieurs. Alors pourquoi D2 ? Selon l'entreprise, de nombreux outils peuvent prétendre le faire pour des diagrammes simple, mais les choses se compliquent dès que vous arrivez à des diagrammes même légèrement complexes. Il estime que la plupart des outils de création de diagrammes existants sont des outils de conception, et non des outils de développement. Ils offrent un canevas vierge et une barre d'outils de glisser-déposer, et traitent le flux de travail prévu comme un processus de conception.

Cependant, Terrastruct pense que les ingénieurs ne sont pas des concepteurs visuels, et le manque de capacité à architecturer spatialement un système ne devrait pas bloquer la création d'une documentation précieuse. « Chaque glisser-déposer ne devrait pas nécessiter de planification, et les mises à jour ne devraient pas être un exercice frustrant de déplacement et de redimensionnement pour faire de la place à la nouvelle pièce. Le diagramme déclaratif élimine cette friction », explique-t-il. En somme, D2 est présenté comme un outil de création de diagrammes conçu pour visualiser l'architecture logicielle. Voici quelques-unes de caractéristiques :

D2 vous permet d'éditer des diagrammes avec du texte ou une interface graphique, avec des changements synchronisés entre les deux ;
D2 supporte les icônes personnalisées ;
D2 n'a pas de types de diagrammes. Dans d'autres outils, vous spécifiez "ceci est un diagramme de classe", ou "ceci est un diagramme d'état". L'un des objectifs de la conception de D2 est d'avoir une syntaxe minimale avec laquelle vous composez. Terrastruct explique qu'elle évite la mode "DSL dans un DSL" qui consiste à déclarer des diagrammes spéciaux et à avoir une syntaxe spéciale pour chacun ;
Terrastruct note que D2 est plus lent à compiler, car les algorithmes de mise en page sont lourds en recherche heuristique sur les règles. Pour créer des diagrammes de classes dans D2, vous créez des objets comme n'importe quels autres et leur donnez une forme : classe ;
D2 supporte actuellement moins de types de diagrammes. Si vous avez besoin de faire des camemberts, des "diagrammes de temps" ou des cartes heuristiques, il faudra du temps, si jamais Terrastruct le prend en charge. L'entreprise a déclaré qu'elle se concentre sur les diagrammes d'architecture logicielle ;
D2 supporte les extraits de code et le texte Markdown ;
D2 supporte entièrement les diagrammes de classe UML.

Exemple de déclaration en D2 et de formes

Code :

Sélectionner tout

x -> y: hello world

Ceci déclare une connexion entre deux formes, "x" et "y", avec l'étiquette, "hello world". Le résultat obtenu est le suivant (image) :

Vous pouvez également utiliser des points-virgules pour définir plusieurs formes sur la même ligne :

Code :

Sélectionner tout

SQLite; Cassandra

Par défaut, l'étiquette d'une forme est la même que la clé de la forme. Mais si vous voulez qu'elle soit différente, attribuez une nouvelle étiquette comme suit :

Code :

Sélectionner tout

pg: PostgreSQL

Par défaut, le type d'une forme est rectangle. Pour spécifier autre chose, fournissez la forme du champ :

Code :

Sélectionner tout

1
2
3
4
pg: PostgreSQL
Cloud: my cloud
Cloud.shape: cloud
SQLite; Cassandra

Le résultat obtenu est le suivant (image) :

Réaliser des connexions avec le langage D2

Les connexions définissent les relations entre les formes. Les traits d'union/flèches entre les formes définissent une connexion. Si vous faites référence à une forme non déclarée dans une connexion, elle est créée. Il existe 4 façons valides de définir une connexion, notamment avec les symboles : "--" , "->", "<-" et "<->". En outre, les étiquettes de connexion peuvent être définies de la manière suivante :

Code :

Sélectionner tout

Read Replica 1 -- Read Replica 2: Kept in sync

Il est important de noter que les connexions doivent faire référence à la clé d'une forme, et non à son étiquette

Code :

Sélectionner tout

1
2
3
4
5
6
7
8
be: Backend
fe: Frontend

# This would create new shapes
Backend -> Frontend

# This would define a connection over existing labels
be -> fe

Exemple

Code :

Sélectionner tout

1
2
3
4
5
6
7
8
Write Replica Canada <-> Write Replica Australia

Read Replica <- Master

x -- y

super long shape id here --\
  -> super long shape id even longer here

Terrastruct associe D2 et une interface graphique

D2 permet de créer des diagrammes à partir de texte, mais Terrastruct propose aussi une interface graphique avec des formes préconstruites. Bien que D2 soit une fonctionnalité remarquable, l'entreprise ne la voit pas remplacer entièrement l'interface graphique. « Nous aimons utiliser le clavier pour piloter nos machines, mais parfois la souris est l'outil le plus approprié, comme lorsque nous faisons défiler un site Web, que nous pinçons pour zoomer ou que nous redimensionnons un objet pour qu'il soit parfait. Terrastruct vous offre l'interface la plus optimisée pour la création de diagrammes », a-t-il déclaré.

Ainsi, vous avez la possibilité de passer de l'éditeur de texte à l'interface graphique de manière transparente. L'interface graphique, contrairement aux lignes de texte, permet un balayage facile et un retour visuel rapide. « Nous avons l'intention de continuer à tirer parti de ces avantages pour vous offrir l'expérience de diagramme la plus fluide », explique l'entreprise. Par exemple, vous pouvez utiliser votre souris pour double-cliquer sur une zone problématique, au lieu de parcourir des centaines de lignes pour la trouver. Choisissez une couleur de manière interactive au lieu de taper le code hexadécimal.

En outre, vous pouvez cliquer et faire glisser une boîte de sélection pour supprimer certaines entités obsolètes au lieu de rechercher les lignes exactes où elles sont définies. Tout est bidirectionnel, de sorte que tout ce que vous faites sur l'interface graphique est répercuté dans vos déclarations.

Feuille de route

D2 est actuellement en version alpha avec un ensemble minimal de fonctionnalités pour être utile. Terrastruct a déclaré qu'il continue de travailler pour l'enrichir de fonctionnalités et d'intégrations dans l'application. L'entreprise prévoit d'ajouter les fonctionnalités suivantes :

pour les relations entre tables SQL, les connexions doivent pointer vers la ligne exacte ;
fractionnement d'un seul diagramme D2 en plusieurs fichiers qui peuvent être importés et réutilisés ;
intégrer des métriques et des variables dynamiques dans le texte (par exemple, $vars.aws.cpu) ;
support du développement local ;
diagrammes de séquence ;
transpilation à partir de Mermaid, Graphviz et PlantUML ;
ouvrir le code source ;
prise en charge des connexions courbes ;
personnalisation et création de thèmes ;
fonctions LSP, par exemple liste autocomplète de formes, choix d'objets à partir de la portée, etc. ;
classes pour agréger les styles ;
raccourcis clavier sur le sélecteur d'icônes ;
etc.

D2 est semblable à d'autres outils comme Mermaid et PlantUML. Mermaid est un outil de création de diagrammes et de graphiques basé sur JavaScript qui utilise des définitions de texte inspirées de Markdown et un moteur de rendu pour créer et modifier des diagrammes complexes. L'objectif principal de Mermaid est d'aider la documentation à rattraper le développement. Mermaid permet aux utilisateurs de créer des diagrammes facilement modifiables, qui peuvent également être intégrés aux scripts de production (et autres morceaux de code). Mermaid est un outil open source.

De son côté, PlantUML est un outil open source permettant aux utilisateurs de créer des diagrammes à partir d'une description textuelle. PlantUML vous permet de dessiner à peu près n'importe quel diagramme architectural dont vous avez besoin lors de la conception d'un système. Outre les diagrammes UML, il prend en charge plusieurs autres formats liés au développement de logiciels (Archimate, BPMN, C4, Gantt chart et WBD), ainsi que la visualisation de fichiers JSON et YAML. D2 est jeune, contrairement à Mermaid et PlantUML qui sont des produits bien établis. Il reste à savoir si D2 pourra les concurrencer à l'avenir.

Source : D2

Et vous ?