mermaid-js / mermaid-cli

Command line tool for the Mermaid library
MIT License
2.52k stars 238 forks source link

How to add additional icon packs for architecture diagrams #764

Open fizyk opened 1 month ago

fizyk commented 1 month ago

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 commented 3 weeks ago

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