Sujet sur Discussion Gestion:Tâches/Liste/69

Cette page affiche les modifications entre deux versions d’un message par Mattéo Delabre dans le sujet « Intégration d’une bibliothèque déclarative avec une couche d’abstraction en Wikicode » sur Discussion Gestion:Tâches/Liste/69. Vous pouvez voir d’autres versions de ce message sur sa page d’historique.
Ligne 35 : Ligne 35 :
Pour ce qui concerne spécifiquement Mermaid, il semblerait que ce soit une bibliothèque qui fonctionne uniquement côté client, ce qui imposerait de servir aux lecteurs les diagrammes sous forme de syntaxe Mermaid brute avec un script JS qui s’occupe de faire la transformation en SVG côté client. On avait déjà discuté d’un cas similaire précédemment et on était arrivés à la conclusion que ce n’était pas optimal que du JS soit nécessaire pour seulement voir les diagrammes.
Pour ce qui concerne spécifiquement Mermaid, il semblerait que ce soit une bibliothèque qui fonctionne uniquement côté client, ce qui imposerait de servir aux lecteurs les diagrammes sous forme de syntaxe Mermaid brute avec un script JS qui s’occupe de faire la transformation en SVG côté client. On avait déjà discuté d’un cas similaire précédemment et on était arrivés à la conclusion que ce n’était pas optimal que du JS soit nécessaire pour seulement voir les diagrammes.


Il y a bien [https://github.com/mermaid-js/mermaid-cli mermaid-cli] qui permet de convertir côté serveur la syntaxe Mermaid en SVG/PNG/PDF, mais (il faut bien se tenir) elle fonctionne en lançant sur le serveur une instance de Chromium, en chargeant la bibliothèque Mermaid dans ce navigateur et en exportant le résultat. Ça me semble loin d’être optimal, et je n’ai rien trouvé d’autre pour convertir du Mermaid côté serveur. Bien sûr, ce serait possible de développer notre propre solution pour faire cette conversion, ce qui serait sans nul doute utile à la communauté, mais ça va prendre pas mal de temps.
Il y a bien [https://github.com/mermaid-js/mermaid-cli mermaid-cli] qui permet de convertir côté serveur la syntaxe Mermaid en SVG/PNG/PDF, mais elle fonctionne en lançant sur le serveur une instance de Chromium, en chargeant la bibliothèque Mermaid dans ce navigateur et en exportant le résultat. Ça me semble loin d’être optimal, et je n’ai rien trouvé d’autre pour convertir du Mermaid côté serveur. Bien sûr, ce serait possible de développer notre propre solution pour faire cette conversion, ce qui serait sans nul doute utile à la communauté, mais ça va prendre pas mal de temps.


Sinon, il nous reste [https://www.graphviz.org/ GraphViz], mais je me demande dans quelle mesure GraphViz « laisse passer » le HTML qu’on mettrait dans les nœuds/en étiquette des flèches, c’est quelque chose qu’il faut tester.
Sinon, il nous reste [https://www.graphviz.org/ GraphViz], mais le support de cette bibliothèque pour le HTML est pour le moins limité. Cela peut se comprendre puisqu’il devient d’autant plus difficile de calculer les dimensions externes d’une boîte (nécessaires pour savoir où placer chaque boîte) que le nombre de fonctionnalités HTML supportées croît. Finalement, pour supporter tout HTML, GraphViz aurait à réimplémenter tout un moteur de rendu HTML d’un navigateur, ce qui nous rapproche de la solution ''mermaid-cli''.
 
Voici quelques ressources intéressantes relatives à GraphViz :
 
* [http://www.graphviz.org/doc/info/shapes.html#html Sous-ensemble de HTML supporté par GraphViz]
* [http://melp.nl/2013/08/flow-charts-in-code-enter-graphviz-and-the-dot-language/ Exemples de flowcharts avec GraphViz]
* [https://www.graphviz.org/doc/info/attrs.html#a:stylesheet Attributs disponibles pour les nœuds et flèches (voir aussi annexes A, B C du guide du langage DOT)]
* [https://graphviz.gitlab.io/_pages/pdf/dotguide.pdf Guide du langage DOT]
* [http://www.graphviz.org/documentation/ Documentation générale de GraphViz]
Si on voulait reproduire ton exemple fait avec Mermaid, voici ce que ça pourrait donner :
[[Fichier:Exemple_de_flowchart_utilisant_GraphViz.png|frameless|right|upright=0.8]]<pre>
digraph {
    node[color="#9370DB", fillcolor="#ECECFF", fontname="Liberation Sans"];
    edge[fontname="Liberation Sans", color="#333333", arrowsize=.7];
 
    node[shape="box", style="filled"]; A;
    node[shape="box", style="rounded, filled"]; B; C;
    node[group="G1"]; A; B;
 
    A[label="Boîte 1"];
    B[label="Boîte 2", group="G1"];
    C[label="Boîte 3", group="G1"];
 
    A -> C [
        headlabel=<<TABLE BGCOLOR="#ECECFF" BORDER="0" CELLPADDING="0"><TR><TD>Non</TD></TR></TABLE>>,
        labeldistance=7, labelangle=0
    ];
 
    B -> C;
 
    subgraph cluster1 {
        label="1";
        style="filled";
        color="#AAAA33";
        fillcolor="#FFFFDE";
 
        A -> B [
            headlabel=<<TABLE BGCOLOR="#ECECFF" BORDER="0" CELLPADDING="0"><TR><TD>Oui</TD></TR></TABLE>>,
            labeldistance=2, labelangle=0
        ];
    }
}
</pre>
 
Avec GraphViz, il n’est pas aisé de contrôler l’agencement des différentes boîtes, ce qui est lié au compromis qui est fait entre l’approche de Draw.io où tout le positionnement est fait à la main et l’approche déclarative où le positionnement est calculé par un algorithme.
Récupérée de « https://wikimedi.ca/wiki/Sujet:Vmyispc5x9ftgunz »