Merge pull request #27 from mermaid-js/develop

sync

cypress/platform/current.html

@@ -74,15 +74,22 @@ stateDiagram-v2
   A --> D: asd123
       </div>
       </div>
-      %%{init: {'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
       <div class="mermaid" style="width: 50%; height: 20%;">
-        %%{init: {'theme': 'dark'}}%%
-
-        flowchart TB
-        subgraph apa
-          a --> A %% comment
-          a --> a{apa} %% comment
-        end
+        %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
+        graph TD
+          A[Christmas] -->|Get money| B(Go shopping)
+          B --> C{Let me think}
+          B --> G[/Another/]
+          C ==>|One| D[Laptop]
+          C -->|Two| E[iPhone]
+          C -->|Three| F[fa:fa-car Car]
+          subgraph section
+            C
+            D
+            E
+            F
+            G
+          end
       </div>
       <div class="mermaid2" style="width: 50%; height: 20%;">
 graph TD
@@ -106,7 +113,7 @@ Note over Bob,Alice: Looks back
           // console.error('Mermaid error: ', err);
         };
       mermaid.initialize({
-        theme: 'forest',
+        // theme: 'forest',
         // themeVariables:{primaryColor: '#ff0000'},
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',

docs/index.html

@@ -8,8 +8,8 @@
   <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.6.4/dist/mermaid.min.js"></script> -->
-  <script src="http://localhost:9000/mermaid.js"></script>
+  <script src="//cdn.jsdelivr.net/npm/mermaid@8.6.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(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

docs/theming.md

@@ -152,10 +152,9 @@ Variables derived from the ones above:
 | name      | Default value | Description |
 
 
-**Here is an example of overriding `primaryColor` and giving everything a ifferent look, using `%%init%%`.
+**Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`.
 ```
-mermaid
-%%{init: {'theme':'base', 'themeVariables': {primaryColor: '#ff0000'}}%%
+%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
         graph TD
           A[Christmas] -->|Get money| B(Go shopping)
           B --> C{Let me think}
@@ -171,6 +170,48 @@ mermaid
             G
           end
 ```
+
+Thsi got a bit to dark and bit to colorful. With some easy steps this can be fixed:
+
+* Make the primary color a little lighter
+* set the teriary color to a redish shade as well
+* make the edge label background differ from the subgraph by setting the edgeLabelBackground
+
+```
+%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%%
+        graph TD
+          A[Christmas] -->|Get money| B(Go shopping)
+          B --> C{Let me think}
+          B --> G[/Another/]
+          C ==>|One| D[Laptop]
+          C -->|Two| E[iPhone]
+          C -->|Three| F[fa:fa-car Car]
+          subgraph section
+            C
+            D
+            E
+            F
+            G
+          end
+```
+```mermaid
+%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%%
+        graph TD
+          A[Christmas] -->|Get money| B(Go shopping)
+          B --> C{Let me think}
+          B --> G[/Another/]
+          C ==>|One| D[Laptop]
+          C -->|Two| E[iPhone]
+          C -->|Three| F[fa:fa-car Car]
+          subgraph section
+            C
+            D
+            E
+            F
+            G
+          end
+```
+
 The Theming Engine does not admit color codes and will only accept proper color values. Color Names is not supported so for instance, the color value 'red' will not work, but '#ff0000' will work.
 
 # Common theming activities

src/config.js

@@ -154,7 +154,7 @@ export const addDirective = directive => {
  *
  **Notes :
  (default: current siteConfig ) (optional, default `getSiteConfig()`)
- * @param conf - the base currentConfig to reset to (default: current siteConfig )
+ * @param conf  the base currentConfig to reset to (default: current siteConfig ) (optional, default `getSiteConfig()`)
  */
 export const reset = () => {
   // Replace current config with siteConfig