ID of flowchart subgraph SVG element breaks other scripts

[mkuo-notion]

Description

A flowchart subgraph is rendered as an SVG <g> elements with the subgraph title as the ID of the element. Because DOM IDs are accessible as a global, this can interfere with/break scripts.

For example

flowchart TD
    subgraph Buffer
        Foo
    end

produces an SVG <g> element with id="Buffer" for the subgraph.

This can break code like

if (Buffer !== undefined) {
  Buffer.doSomething()
}

I realize that in this example, we could also check that typeof Buffer.doSomething === "function", but this check is being done in third party code.

Steps to reproduce

1. User mermaid to render the following graph

flowchart TD
    subgraph Buffer
        Foo
    end

2. Create a script that checks for a global and conditionally calls a method if that global exists

if (Buffer !== undefined) {
  Buffer.doSomething()
}

Screenshots

No response

Code Sample

No response

Setup

• Mermaid version: 10.5.0
• Browser and Version: all

Suggested Solutions

• Similar to Give markers unique id's per graph #4825, give nodes unique ID's per graph

Additional Context

No response