is possible to use mermaid beta diagrams (architecture-beta)?

[Standard-IO]

I'm trying to use mermaid Architecture Diagrams (architecture-beta) but I just got the

UnknownDiagramError: No diagram type detected matching given configuration for text: architecture-beta

is possible to use it?

I'm currently using the next versions

    "@docusaurus/core": "3.5.2"
    "@docusaurus/preset-classic": "3.5.2",
    "@docusaurus/theme-mermaid": "^3.5.2",

[slorber]

This feature is Mermaid 11.1+ (https://mermaid.js.org/syntax/architecture)

Our dependency is "mermaid": "^10.4.0",, so no you can't use Mermaid 11.1+ features yet.

However the list of v11 breaking changes is small:
https://github.com/mermaid-js/mermaid/releases/tag/v11.0.0

It is likely that we could add support for v11 simply by updating our semver range and allowing to use v11 versions. It probably doesn't require a Docusaurus breaking change (ie waiting for Docusaurus v4). Will see if I can get it working.

[slorber]

Seems to work fine:

PR: #10510

[Standard-IO]

That's great.

[evolutioned]

This would be useful. Could you provide some guidance on how to enable this in our projects?

[slorber]

If you want to use V11 you have to force the resolution to v11 using your package manager features (for example Yarn resolutions)

Otherwise you'll have to wait for the Docusaurus v3.6 release coming in the next few weeks.

[evolutioned]

Thank you. We can wait and upgrade to 3.6.

[RRQM]

Please support Mermaid 11.1 as soon as possible, I really need some of the features it includes. thank you

[slorber]

https://docusaurus.io/blog/releases/3.6#mermaid

[RRQM]

Thank you for your reply. I have completed the upgrade and wish Docusaurus continued success.

[wgordon17]

It definitely seems like I'm able to utilize the new architecture diagrams, however I can't figure out how to register additional icons (https://mermaid.js.org/config/icons.html). Has anyone had luck with this?

[slorber]

We don't provide an "official way" of doing that, but calling mermaid.registerIconPacks in a Docusaurus client module should work. Alternatively, you can try to swizzle the @theme/Mermaid component and put that here.

[wgordon17]

I'm good with no official way for that 👍 Tried using a client module, didn't seem to work so well. I'll give swizzling a try, thanks!

[slorber]

What didn't work exactly

Show me your attempt using docusaurus.new and I'll tell you what you did wrong. I can't help without an error message or something more concrete.

[wgordon17]

(It took me wayyy to long to figure out why stackblitz.com wouldn't work for me! Had to disable uBlock...anyway...)

Here's my project https://stackblitz.com/edit/github-havqfqht?file=src%2Fscripts%2Fmermaid_icons.js,docs%2Fintro.md,docusaurus.config.js

It's not an error message that I can see, it's just that instead of the intended logo, it loads as a ? (which means that the logo pack just isn't getting registered).

I appreciate the help!

[wgordon17]

Oh, well f-me! Why is it working now?!

Ok, for clarity...and anyone else that happens to stumble on this later...

docusaurus.config.js

...
  themes: ['@docusaurus/theme-mermaid'],
  markdown: {
    mermaid: true,
  },
  clientModules: [require.resolve('./src/scripts/mermaid_icons.js')],
...

src/scripts/mermaid_icons.js

import mermaid from 'mermaid';
import { icons } from '@iconify-json/logos';
mermaid.registerIconPacks([
  {
    name: icons.prefix, // To use the prefix defined in the icon pack
    icons,
  },
]);

And then this works!

```mermaid
architecture-beta
    group api(logos:aws)[API]

    service db(logos:aws-rds)[Database] in api
    service disk1(disk)[Storage] in api
    service disk2(disk)[Storage] in api
    service server(logos:aws-ec2)[Server] in api

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

Thanks all the same @slorber!