Merge pull request #1731 from mermaid-js/1724_fontawesome_edge_labels

#1724 Adding fontawesome to edge labels
mermaid-js · Oct 15, 2020 · 8e342e1 · 8e342e1
2 parents 1ade6cd + d8da248
commit 8e342e1
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 11 deletions.
diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -346,5 +346,15 @@ flowchart TD
       {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
     );
   });
+  it('61: fontawesome icons in edge labels', () => {
+    imgSnapshotTest(
+      `
+      flowchart TD
+        C -->|fa:fa-car Car| F[fa:fa-car Car]
+      `,
+      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+    );
+  });
+
 
 });
diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
@@ -787,5 +787,14 @@ describe('Flowchart', () => {
       {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
     );
   });
+  it('61: fontawesome icons in edge labels', () => {
+    imgSnapshotTest(
+      `
+graph TD
+  C -->|fa:fa-car Car| F[fa:fa-car Car]
+      `,
+      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+    );
+  });
 
 });
diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
@@ -22,7 +22,7 @@
   <body>
     <h1>info below</h1>
     <div class="flex">
-      <div class="mermaid" style="width: 50%; height: 400px;">
+      <div class="mermaid2" style="width: 50%; height: 400px;">
 graph TD
   A[Christmas] ==> D
   A[Christmas] -->|Get money| B(Go shopping)
@@ -38,7 +38,7 @@ <h1>info below</h1>
   class T TestSub
   linkStyle 0,1 color:orange, stroke: orange;
       </div>
-      <div class="mermaid" style="width: 50%; height: 400px;">
+      <div class="mermaid2" style="width: 50%; height: 400px;">
 flowchart TD
   A[Christmas] ==> D
   A[Christmas] -->|Get money| B(Go shopping)
@@ -55,14 +55,13 @@ <h1>info below</h1>
   class T TestSub
   linkStyle 0,1 color:orange, stroke: orange;
       </div>
-      <div class="mermaid2" style="width: 50%; height: 20%;">
-        flowchart TB
-subgraph A
-a -->b
-end
-subgraph B
-b
-end
+      <div class="mermaid" style="width: 50%; height: 20%;">
+graph TD
+  C -->|fa:fa-car Car| F[fa:fa-car Car]
+      </div>
+      <div class="mermaid" style="width: 50%; height: 20%;">
+flowchart TD
+  C -->|fa:fa-car Car| F[fa:fa-car Car]
       </div>
       <div class="mermaid2" style="width: 50%; height: 20%;">
         %%{init: {"fontFamily": "arial2"}}%%

diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js
@@ -230,7 +230,10 @@ export const addEdges = function(edges, g) {
 
       if (getConfig().flowchart.htmlLabels) {
         edgeData.labelType = 'html';
-        edgeData.label = `<span id="L-${linkId}" class="edgeLabel L-${linkNameStart}' L-${linkNameEnd}">${edge.text}</span>`;
+        edgeData.label = `<span id="L-${linkId}" class="edgeLabel L-${linkNameStart}' L-${linkNameEnd}">${edge.text.replace(
+          /fa[lrsb]?:fa-[\w-]+/g,
+          s => `<i class='${s.replace(':', ' ')}'></i>`
+        )}</span>`;
       } else {
         edgeData.labelType = 'text';
         edgeData.label = edge.text.replace(common.lineBreakRegex, '\n');