Updated rendering test

cypress/integration/rendering/flowchart-v2.spec.js

@@ -362,7 +362,7 @@ flowchart TD
       {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
     );
   });
-  it('60: handle styling for all node shapes', () => {
+  it('60: handle styling for all node shapes - v2', () => {
     imgSnapshotTest(
       `
       flowchart LR
@@ -371,8 +371,8 @@ flowchart TD
       E[(red text)] -->|default style| F((blue text))
       G>red text] -->|default style| H{blue text}
       I{{red text}} -->|default style| J[/blue text/]
-      K[\red text\] -->|default style| L[/blue text\]
+      K[\ red text\] -->|default style| L[/blue text\]
-      M[\red text/] -->|default style| N[blue text]
+      M[\ red text/] -->|default style| N[blue text]
       linkStyle default color:Sienna;
       style A stroke:#ff0000,fill:#ffcccc,color:#ff0000
       style B stroke:#0000ff,fill:#ccccff,color:#0000ff

cypress/integration/rendering/flowchart.spec.js

@@ -1,7 +1,7 @@
 /* eslint-env jest */
 import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
-describe('Flowchart', () => {
+describe('Graph', () => {
   it('1: should render a simple flowchart no htmlLabels', () => {
     imgSnapshotTest(
       `graph TD
@@ -796,8 +796,6 @@ describe('Flowchart', () => {
       E[(red text)] -->|default style| F((blue text))
       G>red text] -->|default style| H{blue text}
       I{{red text}} -->|default style| J[/blue text/]
-      K[\red text\] -->|default style| L[/blue text\]
-      M[\red text/] -->|default style| N[blue text]
       linkStyle default color:Sienna;
       style A stroke:#ff0000,fill:#ffcccc,color:#ff0000
       style B stroke:#0000ff,fill:#ccccff,color:#0000ff
@@ -809,10 +807,6 @@ describe('Flowchart', () => {
       style H stroke:#0000ff,fill:#ccccff,color:#0000ff
       style I stroke:#ff0000,fill:#ffcccc,color:#ff0000
       style J stroke:#0000ff,fill:#ccccff,color:#0000ff
-      style K stroke:#ff0000,fill:#ffcccc,color:#ff0000
-      style L stroke:#0000ff,fill:#ccccff,color:#0000ff
-      style M stroke:#ff0000,fill:#ffcccc,color:#ff0000
-      style N stroke:#0000ff,fill:#ccccff,color:#0000ff
       `,
       {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
     );
@@ -826,5 +820,67 @@ graph TD
       {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
     );
   });
+  it('62: fontawesome icons in edge labels', () => {
+    imgSnapshotTest(
+      `
+    graph TB
+      subgraph bar[Bar]
+        F
+      end
+      style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
+      `,
+      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+    );
+  });
+  it('63: fontawesome icons in edge labels', () => {
+    imgSnapshotTest(
+      `
+    graph TB
+      A
+      B
+      subgraph foo[Foo SubGraph]
+        C
+        D
+      end
+      subgraph bar[Bar SubGraph]
+        E
+        F
+      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
+      `,
+      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+    );
+  });
+  it('64: fontawesome icons in edge labels', () => {
+    imgSnapshotTest(
+      `
+    %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
+    flowchart LR
+    subgraph A
+        a --> b
+    end
+    subgraph B
+        i -->f
+    end
+    A --> B
+      `,
+      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+    );
+  });
 
 });

cypress/platform/knsv.html

@@ -95,51 +95,31 @@ flowchart TD
       C ======> E5
       </div>
       <div class="mermaid" style="width: 50%; height: 21%;">
-    flowchart TB
-      A
-      B
-      subgraph foo[Foo SubGraph]
-        C
-        D
-      end
-      subgraph bar[Bar SubGraph]
-        E
-        F
-      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%;">
-    flowchart TB
-      subgraph bar[Bar]
-        F
-      end
-      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[red text] -->|default style| B(blue text)
-    a --> b
+C([red text]) -->|default style| D[[blue text]]
-end
+E[(red text)] -->|default style| F((blue text))
-subgraph B
+G>red text] -->|default style| H{blue text}
-    i -->f
+I{{red text}} -->|default style| J[/blue text/]
-end
+K[
-A --> B
+ed text] -->|default style| L[/blue text]
+M[
+ed text/] -->|default style| N[blue text]
+linkStyle default color:Sienna;
+style A stroke:#ff0000,fill:#ffcccc,color:#ff0000
+style B stroke:#0000ff,fill:#ccccff,color:#0000ff
+style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
+style D stroke:#0000ff,fill:#ccccff,color:#0000ff
+style E stroke:#ff0000,fill:#ffcccc,color:#ff0000
+style F stroke:#0000ff,fill:#ccccff,color:#0000ff
+style G stroke:#ff0000,fill:#ffcccc,color:#ff0000
+style H stroke:#0000ff,fill:#ccccff,color:#0000ff
+style I stroke:#ff0000,fill:#ffcccc,color:#ff0000
+style J stroke:#0000ff,fill:#ccccff,color:#0000ff
+style K stroke:#ff0000,fill:#ffcccc,color:#ff0000
+style L stroke:#0000ff,fill:#ccccff,color:#0000ff
+style M stroke:#ff0000,fill:#ffcccc,color:#ff0000
+style N stroke:#0000ff,fill:#ccccff,color:#0000ff
       </div>