J’utilise Graphviz depuis un moment — même pour des notes — car la représentation en graphe permet de synthétiser facilement des notions complexes :
- relation de dépendances
- séquence de processus
- …
Mais il me manquait une manière de pouvoir les créer de manière rapide, c’est-à-dire avec une syntaxe adaptée à la prise de note, et pouvoir éditer le résultat en temps réel. Or créer une syntaxe est quelque chose que je sais faire, et voir le résultat en temps réel est possible grâce à viz.js qui a recompilé Graphviz en javascript à l’aide d’Emscripten, et permet donc de le faire tourner dans le navigateur.
Il ne reste donc plus qu’à assembler tout ça, pour faire tourner un petit éditeur de graphe. J’ai choisi de ne représenter que des tables, et d’utiliser l’indentation pour marquer la relation au parent : (si vous souhaitez en profiter en pleine page, c’est ici que ça se passe)
La démo
Exécution du script
Les librairies étant relativement lourdes (+2Mo), elles ne sont pas chargées automatiquement avec la page. Je vous laisse cliquer sur le bouton pour les charger et lancer la mise à jour.
Vous pouvez édite le texte ci-dessus pour mettre à jour le graphe de la partie droite directement. Les nœuds sont représentés à l’aide des HTML Like label de graphviz, il est donc possible d’utiliser de la couleur, ou des balises de mises en formes qui seront reprises dans le graphe final. Tout ce qui est saisi est transformé dans le navigateur, et aucune donnée ne transite sur le réseau.
Avec les boutons d’export, cela me suffit pour produire un petit schéma rapidement, ou ensuite le retravailler le fichier dot correspondant si j’ai besoin d’aller plus loin…
Le code
Il est écrit en OCaml et compilé en javascript (c’est pour ça qu’il s’exécute dans la page). Vous pouvez télécharger une version hors ligne à exécuter en local ci-dessous :
Télécharger
la commande make html permet de régénérer les sources.