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: 4077088

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/layout-elk@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/parser@6282

commit: 4077088

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.87%. Comparing base (59b4006) to head (4077088).
Report is 55 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     3.87%   3.87%   -0.01%     
==========================================
  Files          412     413       +1     
  Lines        43134   43175      +41     
  Branches       664     665       +1     
==========================================
  Hits          1672    1672              
- Misses       41462   41503      +41

Flag	Coverage Δ
unit	`3.87% <0.00%> (-0.01%)`	⬇️

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%> (-0.11%)`	⬇️
packages/mermaid/src/diagrams/kanban/styles.ts	`2.04% <0.00%> (-0.09%)`	⬇️
...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

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

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 approved	16 changed, 353 added, 343 removed	Apr 19, 2025, 1:00 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 <[email protected]>

netlify · 2025-04-15T03:16:08Z

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	`4077088`
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/68039bec1f35b80008e09370
😎 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.

This reverts commit b0b76ef.

sidharthv96 · 2025-04-19T12:56:24Z

Verified the snapshots after 867484a, everything looked good.

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.

Sign in 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 g.yxqyang.asia-mermaid:mermaid-js/mermaid into …

6a81a90

…saurabh/refactor-fontawesome-icon-usage

Merge branch 'saurabh/refactor-fontawesome-icon-usage' of g.yxqyang.asia-…

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.

Sign in 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 <[email protected]>

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 <[email protected]>

Update cypress/platform/viewer.js

06877dc

Co-authored-by: Alois Klink <[email protected]>

[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

Merge branch 'develop' into saurabh/refactor-fontawesome-icon-usage

24f23ef

sidharthv96 self-assigned this Apr 15, 2025

sidharthv96 and others added 5 commits April 18, 2025 12:39

Merge branch 'develop' into saurabh/refactor-fontawesome-icon-usage

53e89d9

temp: Remove tests to check if cypress passes

b0b76ef

test: fix flowchart width in test

5ea7088

Revert "temp: Remove tests to check if cypress passes"

867484a

This reverts commit b0b76ef.

test: Tweak flowchart tests

4077088

sidharthv96 merged commit 1c1d7d0 into develop Apr 20, 2025
24 of 25 checks passed

sidharthv96 deleted the saurabh/refactor-fontawesome-icon-usage branch April 20, 2025 08:04

sidharthv96 added the Sponsored by MermaidChart label Apr 28, 2025

github-actions bot mentioned this pull request Jun 17, 2025

Version Packages #6660

Merged

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

Uh oh!

Refactor fontawesome icon usage. #6282

Refactor fontawesome icon usage. #6282

Uh oh!

Conversation

saurabhg772244 commented Feb 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📑 Summary

📏 Design Decisions

When text contains a FontAwesome icon reference:

Update to styles.

📋 Tasks

Uh oh!

changeset-bot bot commented Feb 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

netlify bot commented Feb 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for mermaid-js ready!

Uh oh!

pkg-pr-new bot commented Feb 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

saurabhg772244 commented Feb 14, 2025

Uh oh!

codecov bot commented Feb 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

sidharthv96 commented Feb 15, 2025

Uh oh!

argos-ci bot commented Feb 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment was marked as resolved.

Uh oh!

Uh oh!

This comment was marked as resolved.

Uh oh!

aloisklink left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

aloisklink Feb 26, 2025

Choose a reason for hiding this comment

Uh oh!

sidharthv96 Feb 26, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sidharthv96 Feb 26, 2025

Choose a reason for hiding this comment

Uh oh!

netlify bot commented Apr 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for mermaid-js ready!

Uh oh!

sidharthv96 commented Apr 19, 2025

Uh oh!

Uh oh!

Uh oh!

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

netlify bot commented Apr 15, 2025 •

edited

Loading