La plupart des diagrammes techniques sont créés selon l’une de ces deux approches extrêmes : les moteurs d’auto-layout ou les outils de positionnement absolu. Les outils d’auto-layout comme Mermaid, Graphviz et D2 vous permettent de déclarer des entités et des connexions, mais c’est le logiciel qui décide de leur emplacement [1]. À l’inverse, des outils comme Figma, Excalidraw et draw.io offrent un contrôle total sur le placement, mais chaque modification d’un diagramme complexe nécessite un déplacement manuel et fastidieux des éléments [1].
Reladraw propose un juste milieu. Il s’agit d’un langage textuel pour les diagrammes où vous décrivez l’emplacement des éléments à l’aide de termes relatifs plutôt que de coordonnées [1]. Au lieu de deviner comment un algorithme rendra un flux ou de faire glisser manuellement des boîtes sur un canevas, vous définissez l’agencement en langage clair [S1, S3].
Fonctionnement du placement relatif
Dans reladraw, chaque position est définie par rapport à un autre élément [1]. Le langage ne contient aucune coordonnée, sous aucune forme [3]. À la place, vous utilisez des instructions directionnelles pour lier les nœuds entre eux [2].
Par exemple, un nœud peut être placé above (au-dessus), below (en dessous), left of (à gauche de) ou right of (à droite de) un autre nœud [2]. Vous pouvez également utiliser des directions combinées, comme above-left of, ou utiliser level with pour s’assurer que deux éléments partagent une ligne centrale [2]. Pour gérer des groupements plus complexes, vous pouvez placer un élément right of A and B, ce qui l’aligne par rapport à la boîte englobant les deux éléments [2].
Les distances dans reladraw sont gérées comme des écarts minimaux plutôt que comme des mesures exactes [3]. Un écart n’est jamais un nombre précis ; au lieu de cela, les éléments se retrouvent aussi proches que les instructions le permettent [3]. Si vous placez un nœud between (entre) deux autres, il les écarte exactement de ce qui est nécessaire pour s’insérer [3]. Si ce nœud central est supprimé, les éléments restants se rapprochent automatiquement [3].
Améliorer la création de diagrammes par les agents IA
Les outils de diagramme traditionnels créent un « angle mort » pour les agents IA. Lorsqu’un agent génère du code Mermaid, il devine une mise en page qu’un algorithme fixera plus tard [1]. L’agent ne peut pas voir le SVG résultant, ce qui signifie qu’il doit rendre l’image et l’examiner pour trouver des erreurs, créant ainsi un processus d’aller-retour lent [3].
Avec les outils basés sur les pixels, le problème est différent. Un agent doit reconstruire l’image entière à partir d’une liste de nombres avant de pouvoir décider quelles coordonnées modifier pour déplacer un seul service [1].
Reladraw résout ce problème en intégrant l’agencement directement dans le fichier source sous forme de phrases [1]. Cela permet à un agent de :
- Confirmer l’intention en relisant la source pour vérifier qu’une base de données est
under(sous) une API [S1, S3]. - Modifier l’image en éditant simplement la phrase qui définit une position [1].
- Éviter d’avoir à interpréter des systèmes de coordonnées complexes [1].
Cependant, comme l’outil résout le rendu final à partir de ces instructions, un agent ne peut pas confirmer certains résultats par le texte seul [3]. Il ne peut pas savoir si une chaîne de texte longue a débordé de son nœud ou si deux clusters ancrés indépendamment se chevauchent sans un rendu visuel ou un rapport de diagnostic [3].
Syntaxe et implémentation
Reladraw utilise un format simple d’une instruction par ligne, sans imbrication ni indentation significative [3]. Cela garantit qu’aucune ligne ne dépend de la position d’une autre [1].
Les éléments clés de la syntaxe incluent :
- Nœuds : Définis par
node name "text"[2]. Les noms avec des points (ex:server.docker) indiquent un nœud enfant, à condition que le parent soit déclaré au préalable [2]. - Arêtes : Les connexions sont définies à l’aide de flèches, comme
edge a -> b[2]. Vous pouvez spécifier la courbe de la ligne en utilisantfrom: right to: left[2]. - Stylisation : L’apparence est gérée via un mot-clé
styleou entre crochets après le texte, permettant des couleurs, des tailles et des formes personnalisées commerectangle,documentoudatabase[2].
Pour utiliser reladraw, vous pouvez écrire un fichier .reladraw et le rendre en SVG autonome via la commande reladraw diagram.reladraw -o diagram.svg [3]. Pour ceux qui utilisent des assistants IA comme Claude Code, Cursor ou Copilot, une compétence d’agent spécifique peut être installée via npx skills add reladraw/reladraw -g pour enseigner la syntaxe du langage au modèle [1].
Si vous souhaitez expérimenter le langage sans rien installer, vous pouvez essayer le playground reladraw dans votre navigateur pour voir les mises en page se recalculer en temps réel pendant que vous éditez la source [S1, S2].
