lavergnetho ,
@lavergnetho@fediscience.org avatar

Today I finally gave Mermaid.js a try, with it's online diagram editor and the direct inclusion in MarkDown.

What a life-changer for my documentation !

https://mermaid.live/

lavergnetho OP ,
@lavergnetho@fediscience.org avatar

Unfortunately I already ran into my first "bummer" with Mermaid.

The diagrams render nicely in the HTML version of the @ProjectJupyter , but we did not get the export to PDF (via HTML and pyppeteer) to work 😩 .

lavergnetho OP ,
@lavergnetho@fediscience.org avatar

The fastest "solution" is to use mermaid.live to save a .png of the diagram, and include the .png itself in the .

Works for HTML and exports nicely to PDF, but it slightly defeats the point of using for programmable diagrams...

mikewas ,
@mikewas@esq.social avatar

@lavergnetho

Mermaid.live is fantastic!

clementd ,
@clementd@framapiaf.org avatar

@lavergnetho It's awesome, but I wish it had better support for browser-less generation.

lavergnetho OP ,
@lavergnetho@fediscience.org avatar

@clementd You mean offline generation? Or from a LibreOffice doc, maybe?

So far I used it in the browser (exported the image) or in JupyterBook (rendered by the browser).

clementd ,
@clementd@framapiaf.org avatar

@lavergnetho I mean ahead of time generation (eg when building a website). mermaid-cli pulls a browser to generate images

clementd ,
@clementd@framapiaf.org avatar

@lavergnetho So it makes it heavy in a CI/CD pipeline for instance

lavergnetho OP ,
@lavergnetho@fediscience.org avatar

@clementd I see. Thanks for sharing this use case.

clementd ,
@clementd@framapiaf.org avatar

@lavergnetho For me it was a game changer in gitlab (and now GitHub) issues: the ability to easily use sequence diagrams when designing software as a team is♥️

lavergnetho OP ,
@lavergnetho@fediscience.org avatar

@clementd oh that's neat indeed!

What seems to be missing ATM is the possibility to give graph names and reuse these names in other graphs (as subgraphs). That would allow graphs to be reusable across different project, without copy-paste. But most probably not easy as it sounds.

lavergnetho OP ,
@lavergnetho@fediscience.org avatar

A simple diagram made with :

toddmedema ,
@toddmedema@techhub.social avatar

@lavergnetho this is not only directly fantastic, but with a quick Google, discover that my knowledge management tool of choice (Obsidian) supports inline Mermaid diagrams. Open Source Software for the win! https://www.reddit.com/r/ObsidianMD/comments/10jco4p/mermaid_tools_improved_mermaidjs_experience_in/

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • random
  • test
  • worldmews
  • mews
  • All magazines
    •