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

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

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é.

+1 -0

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)

Édité par motet-a

+3 -0
Auteur du sujet

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.

Breizh zo ma bro, hag ihuel eo ma c’halon geti. Da viken. – L’oiseau imaginaire : ZzxŷxzZ

+0 -0

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é.

Édité par Morlaer

Breizh zo ma bro, hag ihuel eo ma c’halon geti. Da viken. – L’oiseau imaginaire : ZzxŷxzZ

+1 -0
Auteur du sujet

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.

Édité par SpaceFox

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

Car elle me semblait intéressante.

ache.one                                                            🦊

+0 -0

Équipe technique

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.

+1 -0

Effectivement, ça me parait bien plus important. ^^

ache.one                                                            🦊

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte