[Suggestion] Intégrer Mermaid, qui permet de faire des graphes à partir de Markdown

Un truc pratique à faire dans un tuto mais toujours un peu compliqué, c’est d’ajouter des graphiques (diagrammes de décision, etc).

C’est là qu’on pourrait ajouter Mermaid, qui permet de créer des graphes directement à partir du Markdown (cf les démos).

Avantages

• C’est prévu pour s’intégrer dans le markdown donc dans le site.
• C’est libre (licence MIT).
• C’est un JS à intégrer : aucune surcharge pour le serveur.
• Les graphes seront versionnés comme tout texte.
• Les designs des graphes seront cohérent à travers tout le site.

Inconvénients

• C’est du JS, donc (relativement) lourd pour le client. J’imagine que le transfert des fichiers JS eux-même est compensé par le fait qu’il n’y a plus d’images de graphes à charger. On peut imaginer un flag sur les tutos qui en ont besoin pour éviter de le charger partout.
• Je ne sais pas s’il est facile à intégrer à notre markdown custom.

Qu’en pensez-vous ?

Je trouve l’idée d’avoir nos graphes dans du Markdown géniale.

Je ne sais pas s’il y a autre chose que Mermaid qui permet de faire ça, mais il faudrait préciser que le fichier js de mermaid est assez lourd . 824Ko pour la version minifiée (pour info le Js custom du site pèse 141Ko et Mathjax 62Ko). Mais ce n’est pas si grave non plus en considérant qu’une fois dans les assets sont mis en cache et que le site est dispo en http2.

Donc en principe je suis ok pour que ce soit intégré.

Salut,

C’est intéressant, mais effectivement c’est étonnament lourd pour une bibliothèque en JS (800 Kio minifié). On ne peut pas mettre ça sur toutes les pages.

Pour moi, il faudrait rajouter un élément de Markdown personalisé (pourquoi pas un “pseudo” bloc de code ```mermaid … ``` ?) et le complier vers un <div class=mermaid>…</div>. Une fois dans le navigateur, on devrait pouvoir faire un simple document.querySelectorAll('.mermaid') pour savoir si il y a besoin de mermaid ou pas. Pas besoin de flag

(Notez qu’il faudrait faire un truc similaire pour MathJAX et que c’est pas encore le cas)

(Grillé par firm1, je poste quand-même)

Si ça n’est mis que sur les pages qui contiennent les graphes en question, pourquoi pas ? Comme ça on ne pénalise pas les auteurs qui utilisent autre chose.

Il y a peut-être moyen de l’exporter en SVG, cela permettrai d’avoir une page performantes pour ceux qui la consulte. Peut-être.

Je précise qu’un autre avantage de ce genre de solution, c’est que ça aide pas mal les auteurs (ce dont on a besoin) en demandant très peu de développement (parce que si c’est compliqué on ne le fera jamais). Quitte à optimiser dans un second temps.

Si j’en crois cet exemple il suffirait de trouver une combine pour isoler les « sources » des graphes dans un bloc <div class="mermaid">…</div> et de laisser le JS passer dessus. Ce qui est donc 100 % compatible avec la solution de motet-a (je ne sais pas si tu avais regardé cette intégration avant de la proposer ?).

Apparemment il y a des équivalents pour gérer le dot, mais apparemment c’est encore plus lourd… enfin, je n’ai pas cherché très longtemps, non plus.

« Gérer le dot » ?

Pour intégré le langage DOT.

Ah je pensais que c’était plus connu que ça. Le langage dot (http://graphviz.org/). Pour faire des graphes, c’est génial, et il existe apparemment des solutions en JS pour générer des graphs à partir de dot.

Ah ben, grillé.

Ha oui, j’avais utilisé GraphViz il y a fort longtemps. Cela dit, j’ai l’impression que ce n’est pas les mêmes domaines d’application :

• DOT me semble « limité » aux graphes au sens mathématique du terme, mais permet d’aller très loin avec ;
• Mermaid gère des graphes, mais aussi diagrammes de séquences, GANTT, diagrammes de classe et rendus de diagrammes Git à partir de « commandes ».

PS : Mermaid a aussi un mode CLI qui permet de générer des SVG.

L’idée a été abandonnée ?

Car elle me semblait intéressante.

Arrivera avec zmd logiquement, c’est à dire v27 si on a le temps d’intégrer le truc, sinon dès que c’est fait.

Mais oui c’est une chose qui n’est pas du tout abandonnée. C’est juste que passer à py3 + passer à zmd c’est prioritaire pour l’instant.

Effectivement, ça me parait bien plus important.

Cette suggestion est intégrable à zmarkdown en quelques minutes, un peu plus compliqué pour le latex parce qu’il faudra sauver les svg au bon endroit.