Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to add additional icon packs for architecture diagrams #764

Closed
fizyk opened this issue Oct 11, 2024 · 1 comment · Fixed by #827
Closed

How to add additional icon packs for architecture diagrams #764

fizyk opened this issue Oct 11, 2024 · 1 comment · Fixed by #827

Comments

@fizyk
Copy link

fizyk commented Oct 11, 2024

Hello,

We wanted to start using the new architecture diagrams introduced in mermaid 11.1 https://mermaid.js.org/syntax/architecture.html

And would love to use also the additional icon packs the documentation mentions, however I can't seem to find a way to initialise mermaid for mermaid cli with the additional configuration for icon packs?

The AWS example from the mermaid is showing us question marks by default
image

@MarkFischer
Copy link

I was looking for the exact same thing. I was able to hack this together by manually editing the node_modules/@mermaid-js/mermaid-cli/src/index.js file. Inside of async function renderMermaid right after mermaid is initialized and the diagrams are registered (lines I added are prefixed with +):

      const { mermaid, zenuml, elkLayouts } = /** @type {GlobalThisWithMermaid & typeof globalThis} */ (globalThis)

      await mermaid.registerExternalDiagrams([zenuml])

+     mermaid.registerIconPacks([
+      {
+         name: 'logos',
+         loader: () =>
+           fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
+       },
+     ]);

Obviously not a great solution, but I did get it to work with the same default AWS diagram from https://mermaid.js.org/syntax/architecture.html#icons

@ynaka81 ynaka81 mentioned this issue Jan 11, 2025
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants