Add new initialization

README.rst

@@ -151,11 +151,7 @@ Config values
 
 ``mermaid_version``
 
-  The version of mermaid that will be used to parse ``raw`` output in HTML files. This should match a version available on https://unpkg.com/browse/mermaid/.  The default is ``"11.2.0"``.
-
-``mermaid_init_js``
-
-  Mermaid initialization code. Default to ``"mermaid.initialize({startOnLoad:false});"``.
+  The version of mermaid that will be used to parse ``raw`` output in HTML files. This should match a version available on https://www.jsdelivr.com/package/npm/mermaid.  The default is ``"11.2.0"``.
 
 .. versionchanged:: 0.7
     The init code doesn't include the `<script>` tag anymore. It's automatically added at build time.
@@ -178,7 +174,10 @@ Config values
 
 ``mermaid_init_js``
 
-  Mermaid initialization code. Default to ``"mermaid.initialize({startOnLoad:false});"``.
+  Mermaid initialization code. The Default initialization is set to
+
+    mermaid.initialize({ startOnLoad: true})
+
 
 .. versionchanged:: 0.7
     The init code doesn't include the `<script>` tag anymore. It's automatically added at build time.

sphinxcontrib/mermaid.py

@@ -296,24 +296,24 @@ def _render_mm_html_raw(
     self, node, code, options, prefix="mermaid", imgcls=None, alt=None
 ):
     if "align" in node and "zoom_id" in node:
-        tag_template = """<div align="{align}" id="{zoom_id}" class="mermaid align-{align}">
+        tag_template = """<pre align="{align}" id="{zoom_id}" class="mermaid align-{align}">
             {code}
-        </div>
+        </pre>
         """
     elif "align" in node and "zoom_id" not in node:
-        tag_template = """<div align="{align}" class="mermaid align-{align}">
+        tag_template = """<pre align="{align}" class="mermaid align-{align}">
             {code}
-        </div>
+        </pre>
         """
     elif "align" not in node and "zoom_id" in node:
-        tag_template = """<div id="{zoom_id}" class="mermaid">
+        tag_template = """<pre id="{zoom_id}" class="mermaid">
             {code}
-        </div>
+        </pre>
         """
     else:
-        tag_template = """<div class="mermaid">
+        tag_template = """<pre class="mermaid">
             {code}
-        </div>"""
+        </pre>"""
 
     self.body.append(
         tag_template.format(align=node.get("align"), zoom_id=node.get("zoom_id"), code=self.encode(code))
@@ -355,12 +355,12 @@ def render_mm_html(self, node, code, options, prefix="mermaid", imgcls=None, alt
         else:
             if "align" in node:
                 self.body.append(
-                    '<div align="%s" class="align-%s">' % (node["align"], node["align"])
+                    '<pre align="%s" class="align-%s">' % (node["align"], node["align"])
                 )
 
             self.body.append(f'<img src="{fname}" alt="{alt}" {imgcss}/>\n')
             if "align" in node:
-                self.body.append("</div>\n")
+                self.body.append("</pre>\n")
 
     raise nodes.SkipNode
 
@@ -581,4 +581,4 @@ def setup(app):
     app.add_config_value("mermaid_d3_zoom", False, "html")
     app.connect("html-page-context", install_js)
 
-    return {"version": sphinx.__display_version__, "parallel_read_safe": True}
+    return {"version": sphinx.__display_version__, "parallel_read_safe": True}

tests/roots/test-markdown/index.md

@@ -1,7 +1,7 @@
 # Hi from Markdown!
 
 ```{mermaid}
-
+:align: center
     sequenceDiagram
       participant Alice
       participant Bob

tests/test_html.py

@@ -22,12 +22,12 @@ def test_html_raw(index):
     )
     assert '<script type="module">import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11.2.0/dist/mermaid.esm.min.mjs";import elkLayouts from "https://cdn.jsdelivr.net/npm/@mermaid-js/layout-elk@0.1.4/dist/mermaid-layout-elk.esm.min.mjs";mermaid.registerLayoutLoaders(elkLayouts);mermaid.initialize({startOnLoad:false});</script>' in index
     assert (
-        """<div class="mermaid">
+        """<pre class="mermaid">
             sequenceDiagram
    participant Alice
    participant Bob
    Alice-&gt;John: Hello John, how are you?
-        </div>"""
+        </pre>"""
         in index
     )
 
@@ -40,13 +40,13 @@ def test_html_zoom_option(index, app):
     assert "svg.call(zoom);" in zoom_page
 
     # the first diagram has no id
-    assert '<div class="mermaid">\n            sequenceDiagram' in zoom_page
+    assert '<pre class="mermaid">\n            sequenceDiagram' in zoom_page
 
     # the second has id and its loaded in the zooming code.
-    div_id = re.findall(
-        r'<div id="(id\-[a-fA-F0-9-]+)" class="mermaid">\n\s+flowchart TD', zoom_page
+    pre_id = re.findall(
+        r'<pre id="(id\-[a-fA-F0-9-]+)" class="mermaid">\n\s+flowchart TD', zoom_page
     )
-    assert f'var svgs = d3.selectAll(".mermaid#{div_id[0]} svg")' in zoom_page
+    assert f'var svgs = d3.selectAll(".mermaid#{pre_id[0]} svg")' in zoom_page
 
 
 @pytest.mark.sphinx("html", testroot="basic", confoverrides={"mermaid_d3_zoom": True})
@@ -127,11 +127,11 @@ def test_html_raw_from_markdown(index):
     assert '<script type="module">import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@11.2.0/dist/mermaid.esm.min.mjs";import elkLayouts from "https://cdn.jsdelivr.net/npm/@mermaid-js/layout-elk@0.1.4/dist/mermaid-layout-elk.esm.min.mjs";mermaid.registerLayoutLoaders(elkLayouts);mermaid.initialize({startOnLoad:false});</script>' in index
     assert (
         """
-<div class="mermaid">
+<pre align="center" class="mermaid align-center">
                 sequenceDiagram
       participant Alice
       participant Bob
       Alice-&gt;John: Hello John, how are you?
-        </div>"""
+        </pre>"""
         in index
     )