mermaid

Rendering icons in mermaid architecture diagram

I am using the example in the official documentation to render icons in an architecture diagram, this is the expected output

enter image description here

However, when I use the live editor icons will not render

enter image description here

Also tried to run the cli with the same result. Am I doing something wrong?

Thanks in advance

Solution

  • As mentioned in the documentation, Architecture diagram only supports the following icons: cloud, database, disk, internet, server.

    You have to register icons following steps defined here: https://mermaid.js.org/config/icons.html

    Mermaid live editor seems to not support loading icons, so you may need to run your renderer.

    For example:

    <html>
  <body>
    <pre class="mermaid">
        architecture-beta
            group api(logos:aws-lambda)[API]

            service db(logos:aws-aurora)[Database] in api
            service disk1(logos:aws-glacier)[Storage] in api
            service disk2(logos:aws-s3)[Storage] in api
            service server(logos:aws-ec2)[Server] in api

            db:L -- R:server
            disk1:T -- B:server
            disk2:T -- B:db

    </pre>


    <script type="module">
      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
      mermaid.initialize({ startOnLoad: true });
      
      // copy-pasta from the documentation
      mermaid.registerIconPacks([
        {
          name: 'logos',
          loader: () =>
            fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
        },
      ]);

    </script>
  </body>
</html>