diff options
Diffstat (limited to 'content/Informatique/2020-12-05-graphviz_en_js.rst')
| -rwxr-xr-x | content/Informatique/2020-12-05-graphviz_en_js.rst | 187 |
1 files changed, 187 insertions, 0 deletions
diff --git a/content/Informatique/2020-12-05-graphviz_en_js.rst b/content/Informatique/2020-12-05-graphviz_en_js.rst new file mode 100755 index 0000000..8b2e70a --- /dev/null +++ b/content/Informatique/2020-12-05-graphviz_en_js.rst @@ -0,0 +1,187 @@ +.. -*- mode: rst -*- +.. -*- coding: utf-8 -*- + +=========================== +Prise de note avec graphviz +=========================== + +:date: 2020-12-06 +:tags: graphviz, javascript +:summary: |summary| + +.. default-role:: literal + +.. |summary| replace:: + + + 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. Mais c'est compliqué et long à saisir, du coup, j'ai choisi de me + faire un petit outil pour me faciliter la vie… + +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. + + +.. _viz.js: http://viz-js.com/ +.. _emscripten: https://fr.wikipedia.org/wiki/Emscripten + +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`_) + +.. _ici que ça se passe: {filename}/pages/graph-editor.html + +La démo +------- + +.. raw:: html + + <style> + #app {width: 100%; height: 100%; overflow: hidden; position: relative;} + #panes {display: flex; width: 100%; height: 100%; overflow: auto;} + #output svg, #output object { top: 0; left: 0; width: 100%; height: 100%; } + .flex-child {flex: 1;} + .vcenter {display: table-cell; vertical-align: middle} + #overlay { + display: table; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 99; + color: white; + text-align: center; + } + </style> + + <div id="app" disabled="true"> + <button id="dot_output">Export DOT</button> + <button id="png_output">Export PNG</button> + <div id="panes"> + <textarea id="editor" class="flex-child"> + g1 + Nom + - + propriété 1 <-> g2:2 + propriété 2 + + g2 + Autre + - + propriété 1 + encore une autre <i>entrée</i> + autre champ -> g1:3 retour + + g3 + Dernier élément + - + ligne 2 + ligne 3 + </textarea> + <div id="graph" class="flex-child"> + <div id="output"> + <div id="svg"><object data="{static}/resources/viz.js/example.svg" type="image/svg+xml"></object></div> + <div id="error"></div> + </div> + </div> + </div> + <div id="overlay"> + </div> + </div> + + +.. admonition:: Exécution du script + :class: hint + :name: note + + 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. + + .. raw:: html + + <div style="text-align:center; width:100%; position:relative;"> + <button type="button" id="load_button">Activer</button> + </div> + + <script type="text/javascript"> + async function getScript(url){ + var script = document.createElement('script'); + + promise = new Promise((res, rej) => { + script.addEventListener('load', () => { + res(script); + }) + }); + + script.setAttribute('type', 'text/javascript'); + script.setAttribute('src', url); + if(document.body == null) { + document.head.appendChild(script); + } else { + document.body.appendChild(script); + } + return promise; + } + var load_button = document.getElementById('load_button'); + + load_button.onclick = async function() { + var note = document.getElementById('note'); + note.remove(); + var s1 = getScript("/resources/viz.js/viz.js"); + var s2 = getScript("/resources/viz.js/full.render.js"); + var s3 = getScript("/resources/viz.js/download.js"); + var s4 = getScript("/resources/viz.js/convert.js"); + await Promise.all([s1, s2, s3, s4]); + generator.load(); + var overlay = document.getElementById("overlay"); + overlay.remove(); + return false; + } + </script> + + + +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. + + +.. _HTML Like label: https://www.graphviz.org/doc/info/shapes.html#html + +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 : + +.. figure:: {static}/images/package-x-generic.png + :alt: get the file + :align: center + :target: {static}/resources/viz.js/graphviz.zip + + Télécharger + +la commande `make html` permet de régénérer les sources. |