Merge branch 'master' into develop

docs/Setup.md

@@ -2,10 +2,12 @@
 
 ## mermaidAPI
 
-This is the api to be used when optionally handling the integration with the web page, instead of using the default integration provided by mermaid.js.
+Edit this Page[![N|Solid][2]][1]
 
-The core of this api is the [**render**][1] function which, given a graph
-definition, renders a graph/diagram and returns it as an svg element.
+This is the API to be used when optionally handling the integration with the web page, instead of using the default integration provided by mermaid.js.
+
+The core of this api is the [**render**][3] function which, given a graph
+definition as text, renders the graph/diagram and returns an svg element for the graph.
 
 It is is then up to the user of the API to make use of the svg, either insert it somewhere in the page or do something completely different.
 
@@ -111,15 +113,9 @@ Note: modifies options in-place
 
 -   `conf`  the base currentConfig to reset to (default: current siteConfig ) (optional, default `getSiteConfig()`)
 
-## mermaid.API Functions
+## render
 
-- `mermaidAPI.initialize` is a call to the mermaid API, that targets `config` and changes the before the diagram is rendered.
-
-**Notes**: `Config` is a variable that contains various configurable elements that can alter how the rendered SVG Diagram/Chart will look like.
-
-- `mermaidAPI.render` is function that renders a graph/diagram in svg format, from a chart definition inside `<div>` tags. 
-
-Usage example below.
+Function that renders an svg with a graph from a chart definition. Usage example below.
 
 ```js
 mermaidAPI.initialize({
@@ -133,6 +129,7 @@ mermaidAPI.initialize({
      mermaidAPI.render('id1',graphDefinition,cb);
  });
 ```
+
 ### Parameters
 
 -   `id`  the id of the element to be rendered
@@ -142,8 +139,9 @@ mermaidAPI.initialize({
     provided a hidden div will be inserted in the body of the page instead. The element will be removed when rendering is
     completed.
 
+## 
 
-## mermaidAPI config Default Values:
+## mermaidAPI configuration defaults
 
 ```html
 <script>
@@ -204,4 +202,8 @@ mermaidAPI.initialize({
 </script>
 ```
 
-[1]: Setup.md?id=render
+[1]: https://github.com/mermaid-js/mermaid/blob/develop/src/mermaidAPI.js
+
+[2]: img/GitHub-Mark-32px.png
+
+[3]: Setup.md?id=render

docs/Tutorials.md

@@ -32,3 +32,35 @@ https://codepen.io/janzeteachesit/pen/OWWZKN
 ## Mermaid with Text Area
 
 https://codepen.io/Ryuno-Ki/pen/LNxwgR
+
+## Python Integration with mermaid-js
+Here's an example of python integration with mermaid-js which uses the mermaid.ink service. 
+This is also working with colab and jupyter lab notebooks.
+
+```python
+import base64
+
+graphbytes = graph.encode("ascii")
+
+graph = """
+graph LR;
+    A--> B & C & D;
+    B--> A & E;
+    C--> A & E;
+    D--> A & E;
+    E--> B & C & D;
+"""
+
+base64_bytes = base64.b64encode(graphbytes)
+base64_string = base64_bytes.decode("ascii")
+
+import requests, io
+from PIL import Image
+import matplotlib.pyplot as plt
+
+img = Image.open(io.BytesIO(requests.get('https://mermaid.ink/img/' + base64_string).content))
+plt.imshow(img)
+```
+**Output**
+
+![image](img/python-mermaid-integration.png)

docs/index.html

@@ -7,7 +7,7 @@
   <meta name="description" content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
-  <link rel="stylesheet" href="theme.css">  <script src="//cdn.jsdelivr.net/npm/mermaid@8.8.3/dist/mermaid.min.js"></script>
+  <link rel="stylesheet" href="theme.css">  <script src="//cdn.jsdelivr.net/npm/mermaid@8.8.4/dist/mermaid.min.js"></script>
   <!-- <script src="http://localhost:9000/mermaid.js"></script> -->
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "8.8.3",
+  "version": "8.8.4",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "main": "dist/mermaid.core.js",
   "keywords": [