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

SpaceFox commented 7 years ago

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.

Retours du topic :

Le JS associé est assez lourd (~800 ko minifié) donc il ne doit être activé (par détection auto) que lorsque nécessaire.
Il y aurait moyen de faire une v2 qui pré-génèrerait des SVG.

Sujet : https://zestedesavoir.com/forums/sujet/9491/suggestion-integrer-mermaid-qui-permet-de-faire-des-graphes-a-partir-de-markdown/ Envoyé depuis Zeste de Savoir

artragis commented 7 years ago

C'est plutôt un truc à gérer côté zmarkdown. il y a déjà une issue à ce propos. https://github.com/zestedesavoir/zmarkdown/issues/171

SpaceFox commented 7 years ago

Les deux, non ?

Le 11 oct. 2017 4:14 PM, "artragis" notifications@github.com a écrit :

C'est plutôt un truc à gérer côté zmarkdown. il y a déjà une issue à ce propos.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/zestedesavoir/zds-site/issues/4715#issuecomment-335824664, or mute the thread https://github.com/notifications/unsubscribe-auth/AFhKnPZVqe8g3ABQNjctfGLEBTcAu6KEks5srM1RgaJpZM4P1iHX .

artragis commented 7 years ago

Non, zmd génère un svg et basta, faut "juste" coder le plugin qui prend un code mermaid et te sort un svg inliné.

SpaceFox commented 7 years ago

Alors attention, on ne parle pas de la même intégration.

Le SVG inliné craché par markdown, c'est la version « avancée ». Si c'est plus simple, on a peut-être tout intérêt à faire la version simple, à savoir : les blocs Mermaid sont conservés à l'identique et entourés d'un <div class="mermaid">…</div> et on passe le Mermaid-JS dessus. Cf https://mermaidjs.github.io/usage.html

Le jeu dans cette proposition, c'est vraiment de proposer l'outil aux auteurs le plus simplement possible en terme de dev.

artragis commented 7 years ago

Le SVG inliné craché par markdown, c'est la version « avancée ».

avec zmd c'est la version "naturelle". et ça évite d'avoir un proco à 100% pour générer les diagrammes à chaque fois, surtout dans les pages dont l'arbre dom est déjà bien touffu.

SpaceFox commented 7 years ago

Je ne sais pas : je dis surtout qu'il faut faire attention à ne pas laisser ce genre d'idée en plan parce qu'on essaie de faire une intégration « plus efficace ».

artragis commented 7 years ago

Le temps de développement sera le même ou presque (en fait le principal delta viendra du fait qu'avec la génération du svg côté serveur on va surtout permettre d'exporter le tout en latex donc faut l'intégrer à rebber).

L'utilisation de mermaid dans notre site avec la solution "on place le div class=mermaid" n'est pas si évident car il faut modifier pythonzmd pour creer un exception spécial mermaid, puis réintégrer cette modif ici puis se demander ce qu'on va faire pour les pdf.

Avec l'intégration zmd, on l'intègre dans zmd et basta. C'est le boulot de zmd de gérer le markdown de zds après tout.

SpaceFox commented 7 years ago

Ha, c'est parce que j'ai oublié qu'on a un MD spécial qui commente toute forme de HTML qu'on essaie de lui faire ingérer – ici ça nous complique en effet sérieusement la vie.

Le 11 octobre 2017 à 16:32, artragis notifications@github.com a écrit :

Le temps de développement sera le même ou presque (en fait le principal delta viendra du fait qu'avec la génération du svg côté serveur on va surtout permettre d'exporter le tout en latex donc faut l'intégrer à rebber).

L'utilisation de mermaid dans notre site avec la solution "on place le div class=mermaid" n'est pas si évident car il faut modifier pythonzmd pour creer un exception spécial mermaid, puis réintégrer cette modif ici puis se demander ce qu'on va faire pour les pdf.

Avec l'intégration zmd, on l'intègre dans zmd et basta. C'est le boulot de zmd de gérer le markdown de zds après tout.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/zestedesavoir/zds-site/issues/4715#issuecomment-335830572, or mute the thread https://github.com/notifications/unsubscribe-auth/AFhKnJ1ZG_3DMwpeP8pIYEn9grWxhgrfks5srNFzgaJpZM4P1iHX .

artragis commented 7 years ago

PS: ajoutons que logiquement le plan d'attaque c'est

v26 <=> py3 + quelques débug v27 <=> zmd + quelques debug v28 <=> reprise des gros chantiers fonctionnels (ping @sandhose @gcodeur)

nils-van-zuijlen commented 6 years ago

Certes, l'implémentation back de mermaid doit se faire dans zmd, mais il faudrait avoir un éditeur qui permette d'intégrer facilement des graphes mermaid. Sinon, il ne sera presque jamais utilisé.

artragis commented 6 years ago

oui comme je le disais dans ma chronique. Comme la v28 est sensé amener une nouvelle interface de rédaction ça sera sûrement le moment.

artragis commented 5 years ago

Pour l'instant c'est en pause à cause d'un problème de CI qui passe pas. @vhf avait proposé un moyen d'améliorer la lib remark-mermaid pour qu'elle soit intégrable dans zmarkdown mais aux dernières nouvelles travis échoue pour des raisons inconnues.

zestedesavoir / zds-site

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