feat: Support Iconify Icons

[sidharthv96]

📑 Summary

Adds support for Iconify in mermaid.
Currently, only Architecture diagram has support, but it will be extended to others soon.

📏 Design Decisions

Instead of creating and maintaining a different Icon pack format for mermaid, adopting Iconify allows the users to enable support for the 200,000+ icons available in iconify.

📋 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:.

[changeset-bot]

🦋 Changeset detected

Latest commit: e44cdbd

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

This PR includes changesets to release 2 packages

Name	Type
mermaid	Minor
@mermaid-js/parser	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]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	e44cdbd
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/66d5cac9bd78980007563a87
😎 Deploy Preview	https://deploy-preview-5793--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.

[codecov]

Codecov Report

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

Project coverage is 5.01%. Comparing base (6acbd97) to head (e44cdbd).
Report is 21 commits behind head on develop.

Files with missing lines	Patch %	Lines
packages/mermaid/src/rendering-util/icons.ts	0.00%	100 Missing ⚠️
...aid/src/diagrams/architecture/architectureIcons.ts	0.00%	43 Missing ⚠️
...kages/mermaid/src/diagrams/architecture/svgDraw.ts	0.00%	12 Missing ⚠️
.../src/diagrams/architecture/architectureRenderer.ts	0.00%	8 Missing ⚠️
...kages/mermaid/src/docs/.vitepress/theme/mermaid.ts	0.00%	7 Missing ⚠️
packages/mermaid/src/mermaid.ts	0.00%	3 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #5793      +/-   ##
==========================================
- Coverage     5.02%   5.01%   -0.01%     
==========================================
  Files          336     337       +1     
  Lines        48061   48085      +24     
  Branches       575     550      -25     
==========================================
  Hits          2413    2413              
- Misses       45648   45672      +24     

Flag	Coverage Δ
unit	5.01% <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/mermaid.ts	0.00% <0.00%> (ø)
...kages/mermaid/src/docs/.vitepress/theme/mermaid.ts	0.00% <0.00%> (ø)
.../src/diagrams/architecture/architectureRenderer.ts	0.00% <0.00%> (ø)
...kages/mermaid/src/diagrams/architecture/svgDraw.ts	0.00% <0.00%> (ø)
...aid/src/diagrams/architecture/architectureIcons.ts	0.00% <0.00%> (ø)
packages/mermaid/src/rendering-util/icons.ts	0.00% <0.00%> (ø)

... and 1 file with indirect coverage changes

[argos-ci]

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

Build	Status	Details	Updated (UTC)
default (Inspect)	👍 Changes approved	1 added	Sep 2, 2024, 2:32 PM

[sidharthv96]

Currently we're adding a new function, but, what if we pass promises that resolve to JSON to mermaid.initialize?

This would allow us to avoid the following issue. But, it'll mean mermaid.initialize will have to return a promise, so it'll be a breaking change. So maybe for v12?

import mermaid from 'CDN/mermaid.esm.mjs';

// You have to call `initialize` with startOnLoad:false before calling `registerIconPacks`,
// to prevent mermaid from starting before the icons are loaded
mermaid.initialize({
  startOnLoad: false,
  logLevel: 0,
});
const logos = await fetch('https://unpkg.com/@iconify-json/logos/icons.json');
mermaid.registerIconPacks(await logos.json());
mermaid.init();

Proposed solution, where mermaid waits internally for all the promises to be resolved, before rendering.

import mermaid from 'CDN/mermaid.esm.mjs';
const logos = fetch('https://unpkg.com/@iconify-json/logos/icons.json').then(res => res.json());
mermaid.initialize({
  startOnLoad: true,
  logLevel: 0,
  iconPacks: [ logos ]
});

[ashishjain0512]

LGTM, tested by checking out locally.

[ashishjain0512]

Currently we're adding a new function, but, what if we pass promises that resolve to JSON to mermaid.initialize?

This would allow us to avoid the following issue. But, it'll mean mermaid.initialize will have to return a promise, so it'll be a breaking change. So maybe for v12?

import mermaid from 'CDN/mermaid.esm.mjs';

// You have to call `initialize` with startOnLoad:false before calling `registerIconPacks`,
// to prevent mermaid from starting before the icons are loaded
mermaid.initialize({
  startOnLoad: false,
  logLevel: 0,
});
const logos = await fetch('https://unpkg.com/@iconify-json/logos/icons.json');
mermaid.registerIconPacks(await logos.json());
mermaid.init();

Proposed solution, where mermaid waits internally for all the promises to be resolved, before rendering.

import mermaid from 'CDN/mermaid.esm.mjs';
const logos = fetch('https://unpkg.com/@iconify-json/logos/icons.json').then(res => res.json());
mermaid.initialize({
  startOnLoad: true,
  logLevel: 0,
  iconPacks: [ logos ]
});

I like the proposed unified approach. @knsv what do you think?