search

mgaitan / sphinxcontrib-mermaid

Mermaid diagrams in yours sphinx powered docs
http://sphinxcontrib-mermaid-demo.readthedocs.io/en/latest/
Other
338 stars 96 forks source link

share the conflict with the other sphinx extensions #74

Open Lu-Yi-Hsun opened 3 years ago

Lu-Yi-Hsun commented 3 years ago

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

martindevora commented 3 years ago

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.

mgaitan commented 3 years ago

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

AdamGagorik commented 2 years ago

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.

jacksonjos commented 2 years ago

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>
zlatko-minev commented 9 months ago

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?

zlatko-minev commented 9 months ago

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/mermaid@10.2.0/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)
TsukiZombina commented 8 months ago

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?

zlatko-minev commented 8 months ago

No, I have the same issue, I didn't try to solve it

kg17492 commented 5 months ago

nbsphinx_requirejs_path = "" in conf.py worked for me. It disables loading require.js according to nbsphinx Documents, but nbsphinx also works well while just displaying .jpynb in sphinx.