marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-04 08:06:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

#1724 Adding fontawesome to edge labels

Browse Source
This commit is contained in:
Knut Sveidqvist
2020-10-15 19:29:37 +02:00
parent 4ae61ad35a
commit d8da24804f
4 changed files with 32 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
cypress/integration/rendering/flowchart-v2.spec.js
View File

@@ -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'}
);
});
});

9
cypress/integration/rendering/flowchart.spec.js
View File

@@ -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'}
);
});
});

19
cypress/platform/knsv.html
View File

@@ -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 @@ graph TD
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 @@ flowchart TD
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"}}%%

5
src/diagrams/flowchart/flowRenderer.js
View File

@@ -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');