mgaitan/sphinxcontrib-mermaid

share the conflict with the other sphinx extensions

Lu-Yi-Hsun opened this issue · 9 comments

nbsphinx and sphinxcontrib-mermaid are conflict

sphinxcontrib-mermaid need https://unpkg.com/mermaid/dist/mermaid.min.js

nbsphinx need https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js

put together not work

Same here. When compiling a site with mermaid diagrams and notebook files, the mermaid pseudo-code is not interpreted into a diagram.
Included extensions are nbsphinx and sphinxcontrib.mermaid.

does anybody know how to fix this? is there any way to initialize mermaid from requirejs ?

A temporary workaround seems to be to use the command line tool instead of the raw HTML.
Set mermaid_output_format="png" or mermaid_output_format="svg" while having the mermaid CLI installed.

I had to deal with the same conflict between nbsphinx and sphinxcontrib.mermaid today.
My solution was as follows:

In a html I had nbsphinx javascript being loaded before mermaid javascript.
I edited the code to invert the order of loading and it worked! =D

So, I edited from this:

<script crossorigin="anonymous" integrity="sha256-Ae2Vz/4ePdIu6ZyI/5ZGsYnb+m0JlOmKPjt6XZ9JJkA=" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js"></script>
<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>

To this:

<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
<script crossorigin="anonymous" integrity="sha256-Ae2Vz/4ePdIu6ZyI/5ZGsYnb+m0JlOmKPjt6XZ9JJkA=" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js"></script>