TypeError: id of clusterDb.keys is not a function

[abroa01]

Description

Mermaid v11.12.0 throws a TypeError when rendering simple flowchart diagrams due to an undefined clusterDb.keys function. This affects all flowchart diagrams, not just those containing actual clusters or subgraphs.

Environment

• Mermaid Version: 11.12.0 (also reproduced in 11.9.0)
• Browser: Mobile Safari (iOS 18.6) via Cordova
• Node.js: v22.x (Meteor 3.x environment)
• Platform: iOS mobile app (Cordova/PhoneGap)
• Import Method: Dynamic ES6 import (await import('mermaid'))

Error Details

TypeError: id of clusterDb.keys is not a function. (In 'id of clusterDb.keys()', 'id of clusterDb.keys' is undefined)

Stack Trace:

@http://localhost:12992/__cordova/packages/modules.js:38261:17
@http://localhost:12992/__cordova/packages/modules.js:38603:31
asyncGeneratorStep@http://localhost:12992/__cordova/packages/modules.js:37990:28
_next@http://localhost:12992/__cordova/packages/modules.js:38008:35
@http://localhost:12992/__cordova/packages/modules.js:38013:18
Promise@[native code]
@http://localhost:12992/__cordova/packages/modules.js:38005:27
@http://localhost:12992/__cordova/packages/modules.js:38607:7

Reproduction Code

Simple Flowchart (Fails)

const mermaid = await import('mermaid');
const code = `flowchart TD
    A[Sky] --> B[Cliffs]
    B --> C[Waterfall]
    C --> D[Water Pool / Mist]
    B --> E[Vegetation]
    E --> F[Plants & Flowers]`;

const parseResult = await mermaid.default.parse(code); // SUCCESS
console.log(parseResult); // {diagramType: "flowchart-v2", config: {}}

const result = await mermaid.default.render('diagram-id', code); // FAILS

Another Example (Also Fails)

const code = `graph TD
    A[Flower Bed] --> B[Pink Flowers]
    B --> C[Purple Flowers]
    A --> D[Yellow Flowers]
    A --> E[Green Foliage]
    A --> F[Background Shrubs]`;

// Same issue - parse succeeds, render fails

Expected Behavior

The mermaid.default.render() method should successfully generate SVG output for valid flowchart syntax, just like it did in Mermaid v10.x.

Actual Behavior

• parse() succeeds and returns {diagramType: "flowchart-v2", config: {}}
• render() immediately fails with TypeError: id of clusterDb.keys is not a function
• The error occurs before any actual rendering - it's an internal initialization issue

Additional Context

What Works:

• Mermaid v10.9.1: Same code works perfectly
• Mermaid Live Editor: The syntax renders correctly online
• Parse phase: Always succeeds in v11.12.0

What Doesn't Work:

• Any flowchart rendering in v11.12.0, regardless of complexity
• Both graph and flowchart syntax
• Simple diagrams without any clusters or subgraphs

Root Cause Analysis

The error suggests that Mermaid v11's internal clusterDb object is not properly initialized. The clusterDb.keys property should be a function but is undefined, causing the TypeError when the rendering engine tries to call it.

This appears to be a regression introduced in v11's architecture rewrite, where the internal database objects for managing diagram state aren't properly initialized.

Workaround

Downgrading to Mermaid v10.9.1 resolves the issue completely:

npm install mermaid@^10.9.1

Impact

This is a blocking issue that prevents any flowchart diagrams from rendering in applications using Mermaid v11.12.0, particularly affecting:

• Mobile applications (Cordova/PhoneGap)
• Applications using dynamic imports
• Any production apps that upgraded from v10 to v11

Steps to reproduce

Steps to Reproduce (you need to have cordova app)

1. Install Mermaid v11.12.0: npm install mermaid@^11.12.0
2. Import mermaid dynamically: const mermaid = await import('mermaid')
3. Parse any simple flowchart (succeeds)
4. Try to render the same flowchart (fails with clusterDb.keys error)

Screenshots

Code Sample

Setup

• Mermaid version:
• Browser and Version: [Chrome, Edge, Firefox]

Suggested Solutions

Proposed Fix

The clusterDb object needs proper initialization in the v11 rendering pipeline to ensure the .keys property is defined as a function before being called.

Additional Context

No response

[abroa01]

Check the issue here - https://github.com/bluehive-health/bluehive-ai/issues/944

[abroa01]

#7104 PR for this issue