sphinxcontrib-mermaid
sphinxcontrib-mermaid copied to clipboard
mgaitan
share the conflict with the other sphinx extensions
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>
This seems to be a common issue, faced in a few projects, including see here. I would suggest a bump on some help to solve this. This is also a conflict with jupyter_sphinx
@jacksonjos - this sounds like it was a manual chrome tools edit solution, did you find a way to modify the conf.py to solve it in the same way?
Here is a solution that works for me by injecting the code with an extension at the top.
FILE: conf.py
extensions.append('mermaid_custom_ext')
FILE: mermaid_custom_ext.py
"""
Cludge solution by Zlatko to issue
This extension injects the Mermaid.js code verbatim into the <head> section of each HTML page.
This approach involves using Sphinx's extension mechanism to programmatically modify the HTML output.
This is a custom Sphinx extension that uses the app object to add custom HTML to the <head> section.
We use the `html-page-context` event to modify the context of each HTML page before it is rendered,
allowing for the injection of custom scripts. The function `add_mermaid_js` adds the Mermaid.js
script tags to the HTML context.
"""
from sphinx.application import Sphinx
def add_mermaid_js(app: Sphinx, pagename: str, templatename: str, context: dict, doctree):
mermaid_script = r"""
<script src="https://unpkg.com/[email protected]/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
"""
if "metatags" in context:
context["metatags"] += mermaid_script
else:
context["metatags"] = mermaid_script
def setup(app: Sphinx):
app.connect("html-page-context", add_mermaid_js)
Thank you @zlatko-minev, now I can render my diagram, however, It seems to disable property mermaid_d3_zoom, do you have any idea on how to avoid this?
