Manuel d'alchimie du code
Héberger ton entreprise ou ton OBNL avec Yunohost
Comment créer des diagrammes et des graphes avec le langage DOT et Graphviz ?
Le langage DOT, développé en parallèle avec le logiciel Graphviz, permet de décrire des graphes et diagrammes sous forme textuelle simple pour générer des visualisations automatiques. Ce tutoriel présente la syntaxe de base de DOT, l’utilisation de Graphviz pour générer les images, et des exemples pratiques pour documenter des architectures système, des flux de données ou des relations entre entités.
J’utilise le langage DOT pour visualiser des graphes dans mes documents. C’est un langage qui a été développé en parallèle avec le logiciel de génération de visualisation de graphes Graphviz.
Le langage DOT est différent de Tikz ou D3 parce qu’il permet de définir ce que tu veux voir . Il favorise la description plutôt que de déterminer la position de chaque élément de manière précise. C’est un langage basé sur les données, ou les décisions d’agencement se prennent avec des algorithmes.
Tu ne contrôles donc pas vraiment la sortie. Par contre, tu as une garantie que le graphe va être cohérent avec ce que tu as saisi en entrée.
Le langage DOT permet de créer deux types de graphes:
-
des graphes orientés (avec des flèches)
-
des graphes non orientés (avec des arêtes).
Voici un exemple de graphe orienté:
Voici le code DOT pour définir ce graphe.
digraph {
label="Guide de dépannage"
bgcolor="beige"
rankdir="LR";
subgraph {
node [margin=0 fontcolor=black style=filled shape=""]
a [label="Au secours ?", fillcolor="red"]
b [label="Met à jour ton système", fillcolor="yellow"]
c [label="Redémarre ton ordinateur", fillcolor="green"]
d [label="Supprime tous les plugins inutiles", fillcolor="yellow"]
e [label="Met à jour ton navigateur", fillcolor="green"]
a -> b [label="ton ordi ?"]
b -> c
c -> a
a -> d [label="un site web ?"]
d -> e
e -> a
}
}
Mais ça ne s’arrête pas là ! On peut aussi créer toutes sortes de diagrammes avec ce logiciel-là !
DOT permet de définir des formats de tableau, des organigrammes et plusieurs autres structures.
Voici un exemple simple de graphe formé de deux tableaux:
Voici le code pour définir ces tableaux.
digraph {
tableau1 [shape=record,
label="Enregistrement|{<f0>étiquette 1|<f1>étiquette 2|<f2>étiquette 3}|description"]
tableau2 [shape=record,
label="Enregistrement|{<f0>étiquette 4|<f1>étiquette 5|<f2>étiquette 6}|description"]
tableau1 -> tableau2
}Tu peux découvrir DOT sur le site officiel de Graphviz. C’est un logiciel libre. Il est intégré
à de nombreux éditeurs tels que Visual Studio Code, à travers une extension. Tu peux aussi utiliser l’éditeur en ligne Edotor.
Tu pourras aussi trouver de nombreux exemples via les moteurs de recherche. C’est un outil qui a fait ses preuves dans le domaine technique et académique.
Tu ne t’en doutes probablement pas, mais plusieurs des logiciels que tu utilises qui travaillent avec des graphes se servent de Graphviz !
La grande évasion — Migration vers les logiciels libres — à partir de 1 200 $