Fix bug where arguments in YAML file did not work any longer (#82)

fralau · Aug 9, 2023 · 6834087 · 6834087
1 parent 73b261e
commit 6834087
Show file tree

Hide file tree

Showing 10 changed files with 181 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 1.0.7, 2023-08-09
+
+Fixed: Arguments of config file not taken into consideration,
+    for mermaid.js version > 10 (#82)
 
 ## 1.0.5, 2023-07-29
 

diff --git a/README.md b/README.md
@@ -12,6 +12,7 @@ descriptions into [Mermaid](https://mermaid-js.github.io/mermaid) graphs
 (flow charts, sequence diagrams, pie charts, etc.).
 
 * **See the [mkdocs-mermaid2 documentation on Read The Docs](https://mkdocs-mermaid2.readthedocs.io).**
+* See the [package on Pypi](https://pypi.org/project/mkdocs-mermaid2-plugin/).
 * View the [general Mkdocs documentation](https://www.mkdocs.org/)
 
 

diff --git a/mermaid2/plugin.py b/mermaid2/plugin.py
@@ -248,28 +248,35 @@ def on_post_page(self, output_content, config, page, **kwargs):
         if mermaids:
             info("Page '%s': found %s diagrams, adding scripts" % 
                     (page_name, mermaids))
+            # insertion of the <script> tag, with the initialization arguments
+            new_tag = soup.new_tag("script")
+            js_code = [] # the code lines
             if not self.extra_mermaid_lib:
                 # if no extra library mentioned,
                 # add the <SCRIPT> tag needed for mermaid
                 info("Adding call to script for version"
                      f"{self.mermaid_version}.")
-                new_tag = BeautifulSoup(self.mermaid_script, 'html.parser')
-                soup.body.append(new_tag)
-                # info(new_tag)
-            # insertion of the <script> tag, with the initialization arguments
+                if self.mermaid_major_version < 10:
+                    # <script src="...">
+                    new_tag['src'] = self.mermaid_lib
+                else:
+                    # <script type="module">
+                    # import mermaid from ...
+                    new_tag['type'] = "module"
+                    js_code.append('import mermaid from "%s";' 
+                                   % self.mermaid_lib)
             # (self.mermaid_args), as found in the config file.
-            new_tag = soup.new_tag("script")
             if self.activate_custom_loader:
                 # if the superfences extension is present, use the specific loader
                 self.mermaid_args['startOnLoad'] = False
                 js_args =  pyjs.dumps(self.mermaid_args) 
-                new_tag.string = "window.mermaidConfig = {default: %s}" % js_args
+                js_code.append("window.mermaidConfig = {default: %s};" %
+                               js_args)
             else:
+                # normal case
                 js_args =  pyjs.dumps(self.mermaid_args) 
-                if self.mermaid_major_version >= 10:
-                    new_tag.string="mermaidAPI.initialize(%s);" % js_args
-                else:
-                    new_tag.string="mermaid.initialize(%s);" % js_args
-
+                js_code.append("mermaid.initialize(%s);" % js_args)
+            # merge the code lines into a string:
+            new_tag.string = "\n".join(js_code)
             soup.body.append(new_tag)
         return str(soup)
diff --git a/mermaid2/util.py b/mermaid2/util.py
@@ -5,6 +5,7 @@
 import requests
 import logging
 from packaging.version import Version
+
 import mkdocs
 
 

diff --git a/test/simple_format/docs/index.md b/test/simple_format/docs/index.md
@@ -0,0 +1,39 @@
+# Mermaid test (simple, with formatting of diagrams)
+
+## Mermaid usual
+This is a test of Mermaid:
+
+```mermaid
+graph TD
+    hello --> world
+    world --> world2
+```
+
+> If you don't see a graph here, it's broken.
+
+## Git Graph
+This is a test of Git Graph: 
+
+```mermaid
+gitGraph
+    commit
+    commit
+    branch develop
+    checkout develop
+    commit
+    commit
+    checkout main
+    merge develop
+    commit
+    commit
+```
+
+
+## Normal fences
+This is usual fenced code (with no highlighting)
+
+```python
+for page in pages:
+    page.read()
+```
+
diff --git a/test/simple_format/docs/js/extra.js b/test/simple_format/docs/js/extra.js
@@ -0,0 +1,31 @@
+// js/extra.js
+function myMermaidCallbackFunction(id) {
+    var d = new Date();
+    var now = d.toLocaleTimeString();
+    console.log('Hello, this is myMermaidCallbackFunction', id, now);
+  }
+
+
+// import uml from "./uml"
+
+// (() => {
+//   const onReady = function(fn) {
+//     if (document.addEventListener) {
+//       document.addEventListener("DOMContentLoaded", fn)
+//       document.addEventListener("DOMContentSwitch", fn)
+//     } else {
+//       document.attachEvent("onreadystatechange", () => {
+//         if (document.readyState === "interactive") {
+//           fn()
+//         }
+//       })
+//     }
+//   }
+
+//   onReady(() => {
+
+//     if (typeof mermaid !== "undefined") {
+//       uml("mermaid")
+//     }
+//   })
+// })()
diff --git a/test/simple_format/docs/second.md b/test/simple_format/docs/second.md
@@ -0,0 +1,25 @@
+# Second page
+Testing special cases
+
+## Wrong diagram
+
+```mermaid
+graph FG
+A[Client] 
+```
+
+## Correct
+
+```mermaid
+graph TD
+A[Client] --> B[Load Balancer]
+```
+
+## Other
+
+```mermaid
+graph TD
+  A[Client] --> B[Load Balancer]
+  B --> C[Server01]
+  B --> D[Server02]
+```
diff --git a/test/simple_format/mkdocs.yml b/test/simple_format/mkdocs.yml
@@ -0,0 +1,25 @@
+site_name: Mermaid test (simple, with formatting)
+site_description: Test for mermaid
+docs_dir: docs # indispensable or readthedocs will fail
+theme: readthedocs # you may want to try windmill?
+
+
+nav:
+  - Main: index.md
+  - Second: second.md
+
+plugins:
+  - search
+  - mermaid2:
+      version: '10.1.0'
+      arguments:
+        theme: 'dark'
+        themeVariables:
+          primaryColor: '#BB2528'
+          primaryTextColor: '#fff'
+          primaryBorderColor: '#7C0000'
+          lineColor: '#F8B229'
+          secondaryColor: '#006100'
+          tertiaryColor: '#fff'
+
+
diff --git a/webdoc/docs/index.md b/webdoc/docs/index.md
@@ -192,11 +192,11 @@ plugins:
         arguments:
           theme: 'dark'
           themeVariables:
-            primaryColor: '#BB2528',
-            primaryTextColor: '#fff',
-            primaryBorderColor: '#7C0000',
-            lineColor: '#F8B229',
-            secondaryColor: '#006100',
+            primaryColor: '#BB2528'
+            primaryTextColor: '#fff'
+            primaryBorderColor: '#7C0000'
+            lineColor: '#F8B229'
+            secondaryColor: '#006100'
             tertiaryColor: '#fff'
 ```
 The result would be as follows, for the diagrams above:
@@ -205,8 +205,9 @@ The result would be as follows, for the diagrams above:
 
 ![](img/custom_colors2.png)
 
-!!! Warning
-    This works currently only with versions of Mermaid.js < 10.
+!!! Tip
+    As of mkdocs-mermaid2 version 1.0.7, this works also with versions of Mermaid.js >= 10. 
+
 
 
 ### Specifying the version of the Mermaid library

diff --git a/webdoc/docs/troubleshooting.md b/webdoc/docs/troubleshooting.md
@@ -102,6 +102,35 @@ Check the version of the javascript mermaid library you are using (it's indicate
 in the error message; as a last resort, check in the html page). 
 You can [change the library version if needed](../#specifying-the-version-of-the-mermaid-library).
 
+
+### The arguments in the config file (color, etc.) do not work
+
+For example, the following specification ([see description](../#other-themes)) does not work:
+
+```yaml
+plugins:
+  - search
+  - mermaid2:
+      version: '10.1.0'
+      arguments:
+        theme: 'dark'
+        themeVariables:
+          primaryColor: '#BB2528'
+          primaryTextColor: '#fff'
+          primaryBorderColor: '#7C0000'
+          lineColor: '#F8B229'
+          secondaryColor: '#006100'
+          tertiaryColor: '#fff'
+```
+
+Due to the change of javascript library format as of mermaid.js ***as ofs 
+version 10.0**, this did not work any more (but it worked for lower versions).
+
+This was fixed in version 1.0.7 of the mkdocs-mermaid2 library
+([see github issue for a full description](https://github.com/mermaid-js/mermaid/issues/4672)).
+
+**Upgrade mkdocs-mermaid2 to the most recent version.**
+
 ### What if nothing worked?
 
 1. Check the [test cases](https://github.com/fralau/mkdocs-mermaid2-plugin/tree/1ab72b5c6a5acf35cc702b7d85019b08678a52e2/test) on the github repository