Le langage DOT pour visualiser des graphes

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é:
Une visualisation de graphe avec Graphviz. Un graphe orienté et cyclique.

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:

Une visualisation de graphe avec Graphviz. Un 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 !

Articles connexes

DéconstruIT ⛏️🧱

Mastermind techno rebelle

Un accompagnement de six mois pour enfin réaliser tes projets technos tout en développant ton autonomie.

Libérons ensemble ton entreprise, ta clientèle et toi de l’oppression numérique.

Travaillons de manière durable et alignée sur tes valeurs dans un environnement sécuritaire, intime et engagé.

Tout en ayant bien du fun !