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 #JupyterBook documentation !

https://mermaid.live/

Online FlowChart & Diagrams Editor - Mermaid Live Editor

Simplify documentation and avoid heavy tools. Open source Visio Alternative. Commonly used for explaining your code! Mermaid is a simple markdown-like script language for generating charts from text via javascript.

A simple diagram made with #Mermaid:
@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/

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

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

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

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

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

@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).

@lavergnetho I mean ahead of time generation (eg when building a website). mermaid-cli pulls a browser to generate images
@lavergnetho So it makes it heavy in a CI/CD pipeline for instance
@clementd I see. Thanks for sharing this use case.
@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♥️

@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

Mermaid.live is fantastic!