#1874 #1865 Fix for rgression issue

cypress/integration/other/configuration.spec.js

@@ -96,5 +96,13 @@ describe('Configuration', () => {
         .should('exist')
         .and('include', 'url(http://localhost');
     });
+    it('should not taint the initial configuration when using multiple directives', () => {
+      const url = 'http://localhost:9000/regression/issue-1874.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+
+      cy.get('svg');
+      cy.percySnapshot();
+    });
   });
 });

cypress/platform/knsv.html

@@ -18,7 +18,7 @@
         display: none;
       }
       .mermaid svg {
-        font-size: 36px !important;
+        font-size: 12px !important;
       }
     </style>
   </head>
@@ -94,18 +94,45 @@ flowchart TD
       C <-...-> E4
       C ======> E5
       </div>
-      <div class="mermaid2" style="width: 50%; height: 20%;">
+      <div class="mermaid" style="width: 50%; height: 20%;">
-graph TD
+    graph TB
-      L1 --- L2
+      A
-      L2 --- C
+      B
-      M1 ---> C
+      subgraph foo[Foo SubGraph]
-      R1 .-> R2
+        C
-      R2 <.-> C
+        D
-      C -->|Label 1| E1
+      end
-      C -- Label 2 ---> E2
+      subgraph bar[Bar SubGraph]
-      C ----> E3
+        E
-      C -----> E4
+        F
-      C ======> E5
+      end
+      G
+
+      A-->B
+      B-->C
+      C-->D
+      B-->D
+      D-->E
+      E-->A
+      E-->F
+      F-->D
+      F-->G
+      B-->G
+      G-->D
+
+      style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
+      style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
+      </div>
+      <div class="mermaid" style="width: 50%; height: 20%;">
+ %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
+flowchart LR
+subgraph A
+    a --> b
+end
+subgraph B
+    i -->f
+end
+A --> B
       </div>
 
 

src/diagrams/flowchart/styles.js

@@ -69,9 +69,9 @@ const getStyles = options =>
   .cluster span {
     color: ${options.titleColor};
   }
-  .cluster div {
+  // .cluster div {
-    color: ${options.titleColor};
+  //   color: ${options.titleColor};
-  }
+  // }
 
   div.mermaidTooltip {
     position: absolute;