#989 Added font styling classes to diagrams lacking then

.vscode/settings.json

@@ -4,5 +4,5 @@
   "typescript.validate.enable": false,
   "javascript.validate.enable": false,
   "editor.formatOnSave": false,
-  "standard.enable": true
+  "editor.snippetSuggestions": "top"
 }

cypress/integration/rendering/gitGraph.spec.js

@@ -6,12 +6,6 @@ describe('Sequencediagram', () => {
     imgSnapshotTest(
       `
     gitGraph:
-      options
-      {
-          "nodeSpacing": 150,
-          "nodeRadius": 10
-      }
-      end
       commit
       branch newbranch
       checkout newbranch
@@ -20,9 +14,8 @@ describe('Sequencediagram', () => {
       checkout master
       commit
       commit
-      merge newbranch
+      merge newbranch`,
-      `,
+      { logLevel: 0 }
-      {}
     );
   });
 });

cypress/platform/e2e.html

@@ -3,10 +3,10 @@
     <script src="/e2e.js"></script>
     <link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet">
     <style>
-      .mermaid {
+      body {
         /* font-family: 'Mansalva', cursive;
         font-family: 'Mansalva', cursive; */
-        /* font-family: 'trebuchet ms', verdana, arial; */
+        font-family: 'times';
       }
       /* .mermaid-main-font {
         font-family: "trebuchet ms", verdana, arial;

docs/mermaidAPI.md

@@ -63,6 +63,10 @@ theme , the CSS style sheet
  "themeCSS": ".node rect { fill: red; }"
 </pre>
 
+## fontFamily
+
+**fontFamily** The font to be used for the rendered diagrams. Default value is \\"trebuchet ms\\", verdana, arial;
+
 ## logLevel
 
 This option decides the amount of logging to be used.

docs/stateDiagram.md

@@ -189,7 +189,7 @@ It is possible to specify a fork in the diagram using <<fork>> <&
 
 Sometimes nothing says it better then a postit note. That is also the case in state diagrams.
 
-Here you canb choose to put the onte to the right or to the left of a node.
+Here you can't choose to put the onte to the right or to the left of a node.
 
 ```
     stateDiagram
@@ -216,6 +216,25 @@ Here you canb choose to put the onte to the right or to the left of a node.
 ## Concurrency
 
 As in plantUml you can specify concurrency using the -- symbol.
+```
+    stateDiagram
+        [*] --> Active
+
+        state Active {
+            [*] --> NumLockOff
+            NumLockOff --> NumLockOn : EvNumLockPressed
+            NumLockOn --> NumLockOff : EvNumLockPressed
+            --
+            [*] --> CapsLockOff
+            CapsLockOff --> CapsLockOn : EvCapsLockPressed
+            CapsLockOn --> CapsLockOff : EvCapsLockPressed
+            --
+            [*] --> ScrollLockOff
+            ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
+            ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
+        }
+```
+
 
 ```mermaid
     stateDiagram

src/diagrams/git/gitGraphRenderer.js

@@ -303,7 +303,7 @@ export const draw = function(txt, id, ver) {
     const parser = gitGraphParser.parser;
     parser.yy = db;
 
-    logger.debug('in gitgraph renderer', txt, id, ver);
+    logger.debug('in gitgraph renderer', txt + '\n', 'id:', id, ver);
     // Parse the graph definition
     parser.parse(txt + '\n');
 

src/diagrams/pie/pieRenderer.js

@@ -110,6 +110,7 @@ export const draw = (txt, id, ver) => {
         return 'translate(' + arcGenerator.centroid(d) + ')';
       })
       .style('text-anchor', 'middle')
+      .attr('class', 'slice')
       .style('font-size', 17);
 
     svg

src/mermaidAPI.js

@@ -95,6 +95,7 @@ const config = {
    */
   theme: 'default',
   themeCSS: undefined,
+
   /**
    * **fontFamily** The font to be used for the rendered diagrams. Default value is \"trebuchet ms\", verdana, arial;
    */

src/themes/gantt.scss

@@ -56,6 +56,10 @@
   stroke: $gridColor;
   opacity: 0.3;
   shape-rendering: crispEdges;
+  text {
+    font-family: 'trebuchet ms', verdana, arial;
+    font-family: var(--mermaid-font-family);
+  }
 }
 
 .grid path {

src/themes/git.scss

@@ -3,4 +3,6 @@
 .branch-label {
   fill: lightgrey;
   color: lightgrey;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
 }

src/themes/pie.scss

@@ -2,4 +2,10 @@
   text-anchor: middle;
   font-size: 25px;
   fill: $taskTextDarkColor;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
+}
+.slice {
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
 }