Merge branch 'develop' into feature/1531_ERD_attributes

README.md

@@ -20,12 +20,12 @@ Mermaid addresses this problem by cutting the time, effort and tooling that is r
 The text definitions for Mermaid diagrams allows for it to be updated easily, it can also be made part of production scripts (and other pieces of code).
 So less time needs be spent on documenting, as a separate and laborious task. <br/>
 Even non-programmers can create diagrams through the [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor).<br/>
-[Tutorials](./docs/getting-started/Tutorials.md) has video tutorials.
-Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/overview/integrations.md).
+[Tutorials](./docs/Tutorials.md) has video tutorials.
+Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/integrations.md).
 
-For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/overview/n00b-overview.md) and [Usage](./docs/getting-started/usage.md).
+For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/n00b-overview.md) and [Usage](./docs/usage.md).
 
-🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [Changelog](./docs/tutorials-and-community/CHANGELOG.md)
+🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [Changelog](./docs/CHANGELOG.md)
 
 <!-- </Main description> -->
 

docs/README.md

@@ -23,13 +23,13 @@ With Mermaid less time needs to be spent on making diagrams, as a separate docum
 
 > Mermaid is a Diagramming tool for everyone. 
 
-Even non-programmers can create diagrams through the [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor), Visit the [Tutorials Page](https://github.com/mermaid-js/mermaid/blob/develop/docs/getting-started/Tutorials.md) for the Live Editor video tutorials.
+Even non-programmers can create diagrams through the [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor), Visit the [Tutorials Page](https://github.com/mermaid-js/mermaid/blob/develop/docs/Tutorials.md) for the Live Editor video tutorials.
 
-Want to see what can be built with mermaid, or what applications already support it? Read the [Integrations and Usages for Mermaid](overview/integrations.md).
+Want to see what can be built with mermaid, or what applications already support it? Read the [Integrations and Usages for Mermaid](./integrations.md).
 
-For a more detailed introduction to Mermaid and some of it's more basic uses, look to the [Beginner's Guide](overview/n00b-overview.md) and [Usage](getting-started/usage.md).
+For a more detailed introduction to Mermaid and some of it's more basic uses, look to the [Beginner's Guide](./n00b-overview.md) and [Usage](./usage.md).
 
-🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/docs/tutorials-and-community/development.md) | 📜 [Version Log](tutorials-and-community/CHANGELOG.md)
+🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/docs/development.md) | 📜 [Version Log](./CHANGELOG.md)
 
 > 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866).
 
@@ -154,9 +154,10 @@ journey
 ![Journey diagram](img/user-journey.png)
 
 # Installation
-## In depth guides and examples can be found in [Getting Started](getting-started/n00b-gettingStarted.md) and [Usage](getting-started/usage.md).
 
-## It would also be helpful to learn more about mermaid's [Syntax](diagrams-and-syntax-and-examples/n00b-syntaxReference.md).
+**In depth guides and examples can be found in [Getting Started](./n00b-gettingStarted.md) and [Usage](./usage.md).**
+
+**It would also be helpful to learn more about mermaid's [Syntax](./n00b-syntaxReference.md).**
 
 ### CDN
 
@@ -172,7 +173,7 @@ Alternatively, you can also adjust the version number in the page itself.
 
 Latest Version: [https://unpkg.com/browse/mermaid@8.8.0/](https://unpkg.com/browse/mermaid@8.8.0/)
 
-## Incorporating mermaid to a website
+## Mermaid on a website
 To support mermaid on your website, all you have to do is add Mermaid’s JavaScript package
 
 ```
@@ -188,14 +189,14 @@ To support mermaid on your website, all you have to do is add Mermaid’s JavaSc
 
 ```
 
-## To deploy mermaid without a bundler, one can insert a `script` tag with an absolute address and a `mermaidAPI` call into the HTML like so:
+**To deploy mermaid without a bundler, one can insert a `script` tag with an absolute address and a `mermaidAPI` call into the HTML like so:**
 ```html
 <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
 <script>mermaid.initialize({startOnLoad:true});</script>
 ```
-## Doing so will command the mermaid parser to look for the `<div>` tags with `class="mermaid"` in your HTML Document. From these tags mermaid will try to read the diagram/chart definitons and render them as svg charts.
+**Doing so will command the mermaid parser to look for the `<div>` tags with `class="mermaid"` in your HTML Document. From these tags mermaid will try to read the diagram/chart definitons and render them as svg charts.**
 
-## Examples can be found in [Getting Started](getting-started/n00b-gettingStarted.md)
+## Examples can be found in [Getting Started](./n00b-gettingStarted.md)
 
 # Sibling projects
 - [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor)

docs/flowchart.md

@@ -161,18 +161,14 @@ graph LR
 ```
 
 ### A hexagon node
-{% raw %}
 ```
 graph LR
     id1{{This is the text in the box}}
 ```
-{% endraw %}
 
 ```mermaid
-{% raw %}
 graph LR
     id1{{This is the text in the box}}
-{% endraw %}
 ```
 
 ### Parallelogram

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.7.0/dist/mermaid.min.js"></script>
+  <link rel="stylesheet" href="theme.css">  <script src="//cdn.jsdelivr.net/npm/mermaid@8.8.2/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.2",
+  "version": "8.8.3",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "main": "dist/mermaid.core.js",
   "keywords": [
@@ -16,7 +16,7 @@
     "build:development": "webpack --progress --colors",
     "build:production": "yarn build:development -p --config webpack.config.prod.babel.js",
     "build": "yarn build:development && yarn build:production",
-    "postbuild": "documentation build src/mermaidAPI.js src/config.js --shallow -f md --markdown-toc false | sed '1i---\\nsort: 3\\ntitle: Configurations\\n---\\n' > docs/getting-started/Setup.md",
+    "postbuild": "documentation build src/mermaidAPI.js src/config.js --shallow -f md --markdown-toc false > docs/Setup.md",
     "build:watch": "yarn build --watch",
     "minify": "minify ./dist/mermaid.js > ./dist/mermaid.min.js",
     "release": "yarn build",

src/themes/theme-base.js

@@ -64,9 +64,8 @@ class Theme {
     this.defaultLinkColor = this.defaultLinkColor || this.lineColor;
     this.titleColor = this.titleColor || this.tertiaryTextColor;
     this.edgeLabelBackground =
-      this.edgeLabelBackground || this.darkMode
-        ? darken(this.secondaryColor, 30)
-        : this.secondaryColor;
+      this.edgeLabelBackground ||
+      (this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);
     this.nodeTextColor = this.nodeTextColor || this.primaryTextColor;
     /* Sequence Diagram variables */