Support fo Icon Pack in Mermaid Diagrams in Obsidian

Help
1

Hi Team,

I’m trying to configure Mermaid diagrams in Obsidian to include AWS-related icons, similar to the examples shown in the Mermaid ecosystem documentation:
:link: Architecture Diagrams Documentation (v11.1.0+) | Mermaid

Specifically, I want to use icon packs (like AWS or cloud architecture icons) within my Mermaid diagrams in Obsidian. From what I understand, this feature requires support for custom icon packs using JavaScript and configuration in Mermaid’s themeVariables or config.

I couldn’t find any native option or existing Obsidian plugin that supports adding external icon packs to Mermaid diagrams (e.g., like the @mermaid-js/mermaid-chart wrapper). Could you clarify:

  1. Is there any plugin or method to enable AWS icon support in Mermaid within Obsidian?
  2. If not, is there a way to inject custom JavaScript (e.g., to load icon packs) for use in Mermaid renderings?
  3. Is this something that can be accomplished with a custom plugin, or should I file a feature request to the Mermaid or Obsidian teams directly?

If writing a script is required, I’d appreciate some guidance or examples for integrating custom icons or the @mermaid-js/mermaid-chart toolchain into the Obsidian environment.

Thanks in advance for your help and any recommendations you can share!

2

@moderators
if possible could you please check

3

I’ve found a workaround.

  1. First, mermaid api has to be made accessible for use within js (eg, within dataviewjs blocks). This requires to write a minimal plugin.
  2. A snippet of code must be run to load the icon pack. This can be written inside a dataviewjs (or as part of the minimal plugin, if you prefer, but using dataviewjs allows you to experiment with it from inside Obsidian)
  3. You need to know the names of the loaded icons (eg: aws-cognito, github-icon, etc) in order to use them in a mermaid block . You can list all of them with a little snippet, but the listing can be huge.
  4. You can use those icons only as part of a architecture-beta diagram, AFAIK

Example

architecture-beta
    service auth(logos:aws-cognito)[Auth]
    service GH(logos:github-icon)[Git] 
    GH:R -- L:auth

image
image359×168 6.63 KB

1. Minimal plugin to expose mermaid API

Put the following two files inside .obsidian/plugins/mermaid-expose:

main.js

// This is main.js
const { Plugin, loadMermaid } = require("obsidian");

module.exports = class MermaidExposePlugin extends Plugin {
  async onload() {
    try {
      const mermaid = await loadMermaid();
      window.mermaid = mermaid;
      console.log("✅ Mermaid API is now available at window.mermaid");
    } catch (e) {
      console.error("❌ Failed to load Mermaid:", e);
    }
  }
};

manifest.json

{
  "id": "mermaid-expose",
  "name": "Expose Mermaid",
  "version": "1.0.0",
  "minAppVersion": "0.12.0",
  "description": "Exposes Mermaid API to the global window object.",
  "author": "doesnt matter",
  "authorUrl": "",
  "isDesktopOnly": true
}

Then reload Obsidian and activate this plugin (listed under installed Community Plugins)

2. Load an icon pack from dataviewjs

Add this snippet to a note:

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

This will load the logos icon pack

3. Get the icon names

Run this code in the javascript console, or go to https://icon-sets.iconify.design/logos/

const icons = await fetch("https://unpkg.com/@iconify-json/logos@1/icons.json")
                   .then(r => r.json());
Object.keys(icons.icons);