Refactor fontawesome icon usage. #6282

saurabhg772244 · 2025-02-14T11:32:31Z

📑 Summary

FontAwesome icons can now be embedded as SVG when the FontAwesome icon pack is registered in the Mermaid configuration. Otherwise, the icon will still be rendered using FontAwesome CSS (<i> tag).
Updated styles to properly set fill color and positioning for registered SVG icons. No extra styles are needed for FontAwesome CSS-based icons, as they inherit styles from FontAwesome.
Only the flowchart diagram supports registered FontAwesome icons.

See mermaid-js/mermaid-cli#474

📏 Design Decisions

When text contains a FontAwesome icon reference:

Check if the FontAwesome icon pack is registered in the Mermaid configuration.
If the icon is registered, replace it with a stringified SVG representation.
If the icon is not found, fallback to rendering it with FontAwesome CSS (<i> tag with the appropriate class).

Update to styles.

We had a style defined that adds fill to all path elements inside node class. Now we are overriding this style to have fill: currentColor also reverting stroke and stroke-width to default

📋 Tasks

Make sure you

📖 have read the contribution guidelines
💻 have added necessary unit/e2e tests.
📓 have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
🦋 If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. Changesets that add features should be minor and those that fix bugs should be patch. Please prefix changeset messages with feat:, fix:, or chore:.

…rk with i tag

changeset-bot · 2025-02-14T11:32:35Z

🦋 Changeset detected

Latest commit: a31adc6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
mermaid	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

netlify · 2025-02-14T11:33:15Z

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	`a31adc6`
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/67c1bcb528911e0008826f23
😎 Deploy Preview	https://deploy-preview-6282--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

pkg-pr-new · 2025-02-14T11:33:57Z

Open in Stackblitz

npm i https://pkg.pr.new/mermaid-js/mermaid@6282

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/mermaid-zenuml@6282

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/layout-elk@6282

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/parser@6282

commit: a31adc6

saurabhg772244 · 2025-02-14T11:34:20Z

Note: Some e2e tests are failing as they were using fontawesome icon in them but the test file was not importing fontawesome cdn

codecov · 2025-02-14T11:35:44Z

Codecov Report

Attention: Patch coverage is 0% with 80 lines in your changes missing coverage. Please review.

Project coverage is 3.88%. Comparing base (0518e9c) to head (a31adc6).
Report is 87 commits behind head on develop.

Files with missing lines	Patch %	Lines
packages/mermaid/src/rendering-util/createText.ts	0.00%	20 Missing ⚠️
packages/mermaid/src/dagre-wrapper/nodes.js	0.00%	15 Missing ⚠️
packages/mermaid/src/dagre-wrapper/clusters.js	0.00%	10 Missing ⚠️
packages/mermaid/src/dagre-wrapper/edges.js	0.00%	6 Missing ⚠️
packages/mermaid/src/dagre-wrapper/shapes/util.js	0.00%	6 Missing ⚠️
packages/mermaid/src/rendering-util/icons.ts	0.00%	6 Missing ⚠️
packages/mermaid/src/dagre-wrapper/createLabel.js	0.00%	3 Missing ⚠️
packages/mermaid/src/dagre-wrapper/index.js	0.00%	3 Missing ⚠️
packages/mermaid/src/diagrams/block/styles.ts	0.00%	2 Missing ⚠️
packages/mermaid/src/diagrams/class/styles.js	0.00%	2 Missing ⚠️
... and 4 more

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #6282      +/-   ##
==========================================
- Coverage     4.46%   3.88%   -0.59%     
==========================================
  Files          384     399      +15     
  Lines        54262   42085   -12177     
  Branches       623     639      +16     
==========================================
- Hits          2425    1635     -790     
+ Misses       51837   40450   -11387

Flag	Coverage Δ
unit	`3.88% <0.00%> (-0.59%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
packages/mermaid/src/diagrams/globalStyles.ts	`0.00% <0.00%> (ø)`
packages/mermaid/src/diagrams/block/styles.ts	`0.00% <0.00%> (ø)`
packages/mermaid/src/diagrams/class/styles.js	`0.00% <0.00%> (ø)`
packages/mermaid/src/diagrams/flowchart/styles.ts	`2.22% <0.00%> (+2.22%)`	⬆️
packages/mermaid/src/diagrams/kanban/styles.ts	`2.04% <0.00%> (+2.04%)`	⬆️
...ckages/mermaid/src/diagrams/user-journey/styles.js	`0.00% <0.00%> (ø)`
packages/mermaid/src/dagre-wrapper/createLabel.js	`0.00% <0.00%> (ø)`
packages/mermaid/src/dagre-wrapper/index.js	`0.00% <0.00%> (ø)`
packages/mermaid/src/dagre-wrapper/edges.js	`0.00% <0.00%> (ø)`
packages/mermaid/src/dagre-wrapper/shapes/util.js	`0.00% <0.00%> (ø)`
... and 4 more

... and 377 files with indirect coverage changes

sidharthv96 · 2025-02-15T16:04:05Z

This increases the size of our bundle significantly!

…saurabh/refactor-fontawesome-icon-usage

argos-ci · 2025-02-19T06:13:06Z

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	⚠️ Changes detected (Review)	14 changed, 465 added, 455 removed	Feb 28, 2025, 1:52 PM

packages/mermaid/src/rendering-util/createText.ts

…saurabh/refactor-fontawesome-icon-usage

…mermaid:mermaid-js/mermaid into saurabh/refactor-fontawesome-icon-usage

aloisklink

I've still got two things in the E2E tests that I'm a bit uncomfortable with, but it's non-blocking, so if you and/or Sid feel it's better to leave them how it is, I'm happy!

Since adding FontAwesome to cypress/platform/viewer.js is causing ~500 changed E2E screenshot changes (and two tests to fail, see comment below), do you think it's worth making a separate PR for this?

I'm mainly asking @sidharthv96 here, since I don't really know how @argos-ci works, but it might make it easier to review the changes!

cypress/platform/viewer.js

packages/mermaid/src/docs/syntax/flowchart.md

cypress/platform/e2e.html

aloisklink · 2025-02-26T09:34:08Z

cypress/platform/viewer.js

+    await loadFontAwesomeCSS();
+    await Promise.all(Array.from(document.fonts, (font) => font.load()));


issue(blocking):

This change now causes the following E2E tests to fail

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

Lines 82 to 124 in 1d9c2aa

it('7: should render a flowchart when useMaxWidth is true (default)', () => {

renderGraph(

`flowchart TD

A[Christmas] -->|Get money| B(Go shopping)

B --> C{Let me think}

C -->|One| D[Laptop]

C -->|Two| E[iPhone]

C -->|Three| F[fa:fa-car Car]

`,

{ flowchart: { useMaxWidth: true } }

);

cy.get('svg').should((svg) => {

expect(svg).to.have.attr('width', '100%');

// expect(svg).to.have.attr('height');

// use within because the absolute value can be slightly different depending on the environment ±5%

// const height = parseFloat(svg.attr('height'));

// expect(height).to.be.within(446 * 0.95, 446 * 1.05);

const style = svg.attr('style');

expect(style).to.match(/^max-width: [\d.]+px;$/);

const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));

expect(maxWidthValue).to.be.within(417 * 0.95, 417 * 1.05);

});

});

it('8: should render a flowchart when useMaxWidth is false', () => {

renderGraph(

`flowchart TD

A[Christmas] -->|Get money| B(Go shopping)

B --> C{Let me think}

C -->|One| D[Laptop]

C -->|Two| E[iPhone]

C -->|Three| F[fa:fa-car Car]

`,

{ flowchart: { useMaxWidth: false } }

);

cy.get('svg').should((svg) => {

// const height = parseFloat(svg.attr('height'));

const width = parseFloat(svg.attr('width'));

// use within because the absolute value can be slightly different depending on the environment ±5%

// expect(height).to.be.within(446 * 0.95, 446 * 1.05);

expect(width).to.be.within(417 * 0.95, 417 * 1.05);

expect(svg).to.not.have.attr('style');

});

});

We could remove the fa:fa-car icon? Or update the widths to the new value.

The change in the images seems to be the /rendering prefix in the test name. Please fix that as well.

packages/mermaid/src/docs/syntax/flowchart.md

packages/mermaid/src/rendering-util/createText.spec.ts

packages/mermaid/src/diagrams/kanban/styles.ts

sidharthv96 · 2025-02-26T12:49:02Z

cypress/platform/viewer.js

+    await loadFontAwesomeCSS();
+    await Promise.all(Array.from(document.fonts, (font) => font.load()));


The change in the images seems to be the /rendering prefix in the test name. Please fix that as well.

Co-authored-by: Alois Klink <alois@aloisklink.com>

saurabhg772244 added 3 commits February 14, 2025 16:32

embed free font awesome svg instead of i tag. pro icons will still wo…

302ba72

…rk with i tag

update styles so that proper fill is applied to icons

33e5694

added changeset

d63d3bf

saurabhg772244 requested review from knsv, sidharthv96 and aloisklink February 14, 2025 11:32

saurabhg772244 added 2 commits February 18, 2025 19:53

removed font awesome packages and used registered icons instead

a81c318

Merge branch 'develop' of https://github.com/mermaid-js/mermaid into …

8857e77

…saurabh/refactor-fontawesome-icon-usage

This comment was marked as resolved.

# to view

Updated docs, added visual regression test

16573d9

github-advanced-security bot found potential problems Feb 21, 2025

View reviewed changes

packages/mermaid/src/rendering-util/createText.ts Fixed Show fixed Hide fixed

saurabhg772244 added 4 commits February 21, 2025 23:00

Merge branch 'develop' of github.heygears.com-mermaid:mermaid-js/mermaid into …

6a81a90

…saurabh/refactor-fontawesome-icon-usage

Merge branch 'saurabh/refactor-fontawesome-icon-usage' of github.heygears.com-…

a89e001

…mermaid:mermaid-js/mermaid into saurabh/refactor-fontawesome-icon-usage

fix lock file

83a6e69

fix pnpm lock and use promise.all to speed up icon replacement

2fb7bc2

saurabhg772244 requested a review from aloisklink February 21, 2025 18:16

This comment was marked as resolved.

# to view

saurabhg772244 added 2 commits February 25, 2025 18:25

Code refactor and updated docs

e045e0b

Convert Font Awesome loading from HTML to JS

b0c1460

saurabhg772244 requested a review from aloisklink February 26, 2025 07:47

aloisklink requested changes Feb 26, 2025

View reviewed changes

sidharthv96 requested changes Feb 26, 2025

View reviewed changes

Update packages/mermaid/src/docs/syntax/flowchart.md

1be1e34

Co-authored-by: Alois Klink <alois@aloisklink.com>

saurabhg772244 and others added 4 commits February 26, 2025 18:47

Update packages/mermaid/src/docs/syntax/flowchart.md

050fbd9

Co-authored-by: Alois Klink <alois@aloisklink.com>

Update cypress/platform/viewer.js

06877dc

Co-authored-by: Alois Klink <alois@aloisklink.com>

[autofix.ci] apply automated fixes

f60ecfc

Updated docs and e2e test case

a31adc6

saurabhg772244 requested review from sidharthv96 and aloisklink March 3, 2025 11:06

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor fontawesome icon usage. #6282

Refactor fontawesome icon usage. #6282

saurabhg772244 commented Feb 14, 2025 •

edited

Loading

changeset-bot bot commented Feb 14, 2025 •

edited

Loading

netlify bot commented Feb 14, 2025 •

edited

Loading

pkg-pr-new bot commented Feb 14, 2025 •

edited

Loading

saurabhg772244 commented Feb 14, 2025

codecov bot commented Feb 14, 2025 •

edited

Loading

sidharthv96 commented Feb 15, 2025

argos-ci bot commented Feb 19, 2025 •

edited

Loading

This comment was marked as resolved.

This comment was marked as resolved.

aloisklink left a comment

aloisklink Feb 26, 2025

sidharthv96 Feb 26, 2025

sidharthv96 Feb 26, 2025

		await loadFontAwesomeCSS();
		await Promise.all(Array.from(document.fonts, (font) => font.load()));

	it('7: should render a flowchart when useMaxWidth is true (default)', () => {
	renderGraph(
	`flowchart TD
	A[Christmas] -->\|Get money\| B(Go shopping)
	B --> C{Let me think}
	C -->\|One\| D[Laptop]
	C -->\|Two\| E[iPhone]
	C -->\|Three\| F[fa:fa-car Car]
	`,
	{ flowchart: { useMaxWidth: true } }
	);
	cy.get('svg').should((svg) => {
	expect(svg).to.have.attr('width', '100%');
	// expect(svg).to.have.attr('height');
	// use within because the absolute value can be slightly different depending on the environment ±5%
	// const height = parseFloat(svg.attr('height'));
	// expect(height).to.be.within(446 * 0.95, 446 * 1.05);
	const style = svg.attr('style');
	expect(style).to.match(/^max-width: [\d.]+px;$/);
	const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
	expect(maxWidthValue).to.be.within(417 * 0.95, 417 * 1.05);
	});
	});
	it('8: should render a flowchart when useMaxWidth is false', () => {
	renderGraph(
	`flowchart TD
	A[Christmas] -->\|Get money\| B(Go shopping)
	B --> C{Let me think}
	C -->\|One\| D[Laptop]
	C -->\|Two\| E[iPhone]
	C -->\|Three\| F[fa:fa-car Car]
	`,
	{ flowchart: { useMaxWidth: false } }
	);
	cy.get('svg').should((svg) => {
	// const height = parseFloat(svg.attr('height'));
	const width = parseFloat(svg.attr('width'));
	// use within because the absolute value can be slightly different depending on the environment ±5%
	// expect(height).to.be.within(446 * 0.95, 446 * 1.05);
	expect(width).to.be.within(417 * 0.95, 417 * 1.05);
	expect(svg).to.not.have.attr('style');
	});
	});

Refactor fontawesome icon usage. #6282

Are you sure you want to change the base?

Refactor fontawesome icon usage. #6282

Conversation

saurabhg772244 commented Feb 14, 2025 • edited Loading

📑 Summary

📏 Design Decisions

When text contains a FontAwesome icon reference:

Update to styles.

📋 Tasks

changeset-bot bot commented Feb 14, 2025 • edited Loading

🦋 Changeset detected

netlify bot commented Feb 14, 2025 • edited Loading

✅ Deploy Preview for mermaid-js ready!

pkg-pr-new bot commented Feb 14, 2025 • edited Loading

saurabhg772244 commented Feb 14, 2025

codecov bot commented Feb 14, 2025 • edited Loading

Codecov Report

sidharthv96 commented Feb 15, 2025

argos-ci bot commented Feb 19, 2025 • edited Loading

This comment was marked as resolved.

This comment was marked as resolved.

aloisklink left a comment

Choose a reason for hiding this comment

aloisklink Feb 26, 2025

Choose a reason for hiding this comment

sidharthv96 Feb 26, 2025

Choose a reason for hiding this comment

sidharthv96 Feb 26, 2025

Choose a reason for hiding this comment

saurabhg772244 commented Feb 14, 2025 •

edited

Loading

changeset-bot bot commented Feb 14, 2025 •

edited

Loading

netlify bot commented Feb 14, 2025 •

edited

Loading

pkg-pr-new bot commented Feb 14, 2025 •

edited

Loading

codecov bot commented Feb 14, 2025 •

edited

Loading

argos-ci bot commented Feb 19, 2025 •

edited

Loading