cypress/platform/knsv.html

@@ -68,13 +68,36 @@ stateDiagram-v2
     Finished --> [*]
       </div>
 <div class="mermaid" style="width: 100%; height: 20%;">
-stateDiagram-v2
+    %%{init:{
-state "Long state name" as NotShooting {
+"themeVariables": {
-  a-->b
+    "transitionColor":"red",
+    "labelColor":"yellow",
+    "transitionLabelColor":"blue",
+    "stateBkg":"green",
+    "compositeBackground":"pink",
+    "altBackground":"purple",
+    "clusterTitleBackground":"blue",
+    "compositeBorder":"red"
+}}}%%
+stateDiagram
+    state CompositeState {
+        state AnotherCompositeState {
+        AnotherState --> YetANotherState:a label
+    }
 }
 
 </div>
       <div class="mermaid2" style="width: 100%; height: 20%;">
+    %%{init:{
+"themeVariables": {
+    "transitionColor":"red",
+    "labelColor":"yellow",
+    "transitionLabelColor":"blue",
+    "stateBkg":"green",
+    "compositeBackground":"pink",
+    "altBackground":"purple",
+    "clusterTitleBackground":"blue"
+}}}%%
 stateDiagram-v2
     [*] --> Off
     Off --> On
@@ -214,7 +237,7 @@ style N stroke:#0000ff,fill:#ccccff,color:#0000ff
           // console.error('Mermaid error: ', err);
         };
       mermaid.initialize({
-        theme: 'neutral',
+        theme: 'base',
         arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,

src/diagrams/state/styles.js

@@ -1,5 +1,10 @@
 const getStyles = options =>
-  `g.stateGroup text {
+  `
+defs #statediagram-barbEnd {
+    fill: ${options.transitionColor};
+    stroke: ${options.transitionColor};
+  }
+g.stateGroup text {
   fill: ${options.nodeBorder};
   stroke: none;
   font-size: 10px;
@@ -26,7 +31,7 @@ g.stateGroup line {
 }
 
 .transition {
-  stroke: ${options.lineColor};
+  stroke: ${options.transitionColor};
   stroke-width: 1;
   fill: none;
 }
@@ -64,10 +69,10 @@ g.stateGroup line {
   opacity: 0.5;
 }
 .edgeLabel .label text {
-  fill: ${options.tertiaryTextColor};
+  fill: ${options.transitionLabelColor || options.tertiaryTextColor};
 }
 .label div .edgeLabel {
-  color: ${options.tertiaryTextColor};
+  color: ${options.transitionLabelColor || options.tertiaryTextColor};
 }
 
 .stateLabel text {
@@ -86,13 +91,13 @@ g.stateGroup line {
   stroke-width: 1.5
 }
 .end-state-inner {
-  fill: ${options.background};
+  fill: ${options.compositeBackground || options.background};
   // stroke: ${options.background};
   stroke-width: 1.5
 }
 
 .node rect {
-  fill: ${options.mainBkg};
+  fill: ${options.stateBkg || options.mainBkg};
   stroke: ${options.nodeBorder};
   stroke-width: 1px;
 }
@@ -106,13 +111,13 @@ g.stateGroup line {
 }
 
 .statediagram-cluster rect {
-  fill: ${options.mainBkg};
+  fill: ${options.clusterTitleBackground};
-  stroke: ${options.nodeBorder};
+  stroke: ${options.compositeBorder || options.nodeBorder};
   stroke-width: 1px;
 }
 
 .cluster-label, .nodeLabel {
-  color: ${options.textColor};
+  color: ${options.labelColor};
 }
 
 .statediagram-cluster rect.outer {
@@ -128,10 +133,10 @@ g.stateGroup line {
   ry: 5px;
 }
 .statediagram-cluster.statediagram-cluster .inner {
-  fill: ${options.background};
+  fill: ${options.compositeBackground || options.background};
 }
 .statediagram-cluster.statediagram-cluster-alt .inner {
-  fill: #e0e0e0;
+  fill: ${options.altBackground ? options.altBackground : '#efefef'};
 }
 
 .statediagram-cluster .inner {
@@ -174,6 +179,9 @@ g.stateGroup line {
 .statediagram-note .nodeLabel {
   color: ${options.noteTextColor};
 }
+.statediagram .edgeLabel {
+  color: red; // ${options.noteTextColor};
+}
 
 #dependencyStart, #dependencyEnd {
   fill: ${options.lineColor};

src/themes/theme-base.js

@@ -108,10 +108,18 @@ class Theme {
     this.taskTextClickableColor = this.taskTextClickableColor || '#003163';
 
     /* state colors */
-    this.labelColor = this.labelColor || this.primaryTextColor;
+    this.transitionColor = this.transitionColor || this.lineColor;
+    this.transitionLabelColor = this.labelColor || this.textColor;
+    this.labelColor = this.labelColor || this.textColor || this.primaryTextColor;
+    this.stateBkg = this.stateBkg || this.mainBkg;
+    this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
     this.altBackground = this.altBackground || this.tertiaryColor;
+    this.clusterTitleBackground = this.clusterTitleBackground || this.mainBkg;
+    this.compositeBorder = this.compositeBorder || this.nodeBorder;
+
     this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
     this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
+    this.transitionColor = this.transitionColor || this.lineColor;
 
     /* class */
     this.classText = this.classText || this.textColor;