marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-08 01:56:42 +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'} {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'} {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> <body>
<h1>info below</h1> <h1>info below</h1>
<div class="flex"> <div class="flex">
<div class="mermaid" style="width: 50%; height: 400px;"> <div class="mermaid2" style="width: 50%; height: 400px;">
graph TD graph TD
A[Christmas] ==> D A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
@@ -38,7 +38,7 @@ graph TD
class T TestSub class T TestSub
linkStyle 0,1 color:orange, stroke: orange; linkStyle 0,1 color:orange, stroke: orange;
</div> </div>
<div class="mermaid" style="width: 50%; height: 400px;"> <div class="mermaid2" style="width: 50%; height: 400px;">
flowchart TD flowchart TD
A[Christmas] ==> D A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
@@ -55,14 +55,13 @@ flowchart TD
class T TestSub class T TestSub
linkStyle 0,1 color:orange, stroke: orange; linkStyle 0,1 color:orange, stroke: orange;
</div> </div>
<div class="mermaid2" style="width: 50%; height: 20%;"> <div class="mermaid" style="width: 50%; height: 20%;">
flowchart TB graph TD
subgraph A C -->|fa:fa-car Car| F[fa:fa-car Car]
a -->b </div>
end <div class="mermaid" style="width: 50%; height: 20%;">
subgraph B flowchart TD
b C -->|fa:fa-car Car| F[fa:fa-car Car]
end
</div> </div>
<div class="mermaid2" style="width: 50%; height: 20%;"> <div class="mermaid2" style="width: 50%; height: 20%;">
%%{init: {"fontFamily": "arial2"}}%% %%{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) { if (getConfig().flowchart.htmlLabels) {
edgeData.labelType = 'html'; 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 { } else {
edgeData.labelType = 'text'; edgeData.labelType = 'text';
edgeData.label = edge.text.replace(common.lineBreakRegex, '\n'); edgeData.label = edge.text.replace(common.lineBreakRegex, '\n');