Mermaid

[tombackstrom]

Hey,

Jupyter Lab >= 4.1 supports Mermaid diagrams natively and it would be nice to enable that support in Jupyter Books. I've studied the documentation both for JupyterBook, Sphinx, Myst and Mermaid, but I just can't get the hang of it.
I have installed sphinxcontrib-mermaid on my local system and in _config.yml I've added

sphinx:
  extensions:
    - sphinxcontrib.mermaid

What else would I have to do?

Any ideas?

[agoose77]

I wrote my thesis using that extension, so it does work. What you might need to be aware of is that the sphinx ecosystem use directive syntax, I.e ```{mermaid}!

I'm out of office right now, but ping me if this doesn't help!

[tombackstrom]

I realize that I should've given more background. I can write mermaid-diagrams in the individual JupyterLab notebooks within the book, and while in Jupyter, they are displayed correctly. But when compiling to the book jb build ., it does not recognize mermaid and complains WARNING: Pygments lexer name 'mermaid' is not known.
The book that I'm working on can be found here https://speechprocessingbook.aalto.fi/index.html

[agoose77]

Yes; JupyterLab has settled on the ```mermaid syntax, whereas Sphinx uses a mermaid directive (```{mermaid}). We may add a specific code-fence transformation to jupyterlab-myst to accomodate this if needs be, but in the EB/Sphinx world you should use

```{mermaid}
my-diagram
```

The JupyterLab-MyST extension should render this just fine.

[chrisjsewell]

Note this was "solved" in myst-parser with the myst_fence_as_directive config option: executablebooks/MyST-Parser#742

[rowanc1]

@agoose77 this was also addressed in mystmd here: executablebooks/mystmd@fee1eea Upgrading to the latest mystmd packages in jupyterlab-myst should fix the problem there if it isn't already.