Graph vs. Flowchart: Different Colors and Layout for Identical Diagrams

[EmnaBarbouch]

Description

When using identical diagram syntax, graph LR and flowchart LR produce visually different results both in node fill color and vertical layout/spacing.
This is unexpected because flowchart is the newer alias for graph and both should render identically.

Steps to reproduce

1. Open the mermaid live editor or a local HTML test page
2. Render the following with graph LR:

graph LR
  A[提交申请 熊大] --> B[主管审批 光头强]
  B --> C[SA审批 阿美]
  ...

Loading

3. Render the exact same diagram replacing graph LR with flowchart LR
4. Compare output side by side

Screenshots

Code Sample

graph LR
    A[提交申请\n熊大] --> B[主管审批\n光头强]
    B --> C[SA审批\n阿美]
    B --> D[DBA审批\n强子]
    C --> E[SA确认\n阿美]
    D --> F[DBA确认\n强子]
    E --> G[SA执行1\n强子]
    E --> H[SA执行2\n强子]
    F --> I[DBA执行1\n强子]
    F --> J[DBA执行2\n强子]
    F --> K[DBA执行3\n强子]
    F --> L[DBA执行4\n强子]
    G --> M[负责人审批\n强子]
    H --> M
    I --> M
    J --> M
    K --> M
    L --> M
    M --> N[负责人确认\n梁静茹]
    N --> O[结束]
    O --> A 
flowchart LR
    A[提交申请\n熊大] --> B[主管审批\n光头强]
    B --> C[SA审批\n阿美]
    B --> D[DBA审批\n强子]
    C --> E[SA确认\n阿美]
    D --> F[DBA确认\n强子]
    E --> G[SA执行1\n强子]
    E --> H[SA执行2\n强子]
    F --> I[DBA执行1\n强子]
    F --> J[DBA执行2\n强子]
    F --> K[DBA执行3\n强子]
    F --> L[DBA执行4\n强子]
    G --> M[负责人审批\n强子]
    H --> M
    I --> M
    J --> M
    K --> M
    L --> M
    M --> N[负责人确认\n梁静茹]
    N --> O[结束]
    O --> A

Setup

• Mermaid.js version: 11.13.0
• Browser: Microsoft Edge
• OS: Windows 11

Suggested Solutions

### Option 1 — CSS vendor prefix fix
Add -webkit- prefixes for CSS properties that Edge may not
handle consistently:

**### Option 2 — Force consistent color theming** 
Ensure `graph` and `flowchart` both reference the same theme variables instead of separate color definitions:
```javascript
// packages/mermaid/src/diagrams/flowchart/flowRenderer.js
// Align node fill color to use the same CSS variable as graph:
const nodeStyle = `fill:${conf.nodeBkg || 'var(--node-bg-color)'}`;

### Option 3 — Browser detection + normalization
Add Edge-specific rendering normalization in the mermaid initialization config:

// mermaid.initialize()
mermaid.initialize({
  startOnLoad: true,
  flowchart: {
    useMaxWidth: true,
    htmlLabels: true,
    curve: 'basis'   // more stable across browsers than 'linear'
  },
  theme: 'default'
});

Additional Context

This was discovered while running the local flowchart test page at localhost:9000/flowchart.html, which compares graph vs flowchart output for the same complex multi-node diagram.

[EmnaBarbouch]

Hi team

I confirmed the bug locally on localhost:9000/flowchart.html reproduced consistently on both Microsoft Edge and Chrome.

The issue likely lives in flowRenderer.js vs flowRenderer-v2.js since they seem to use different color references for graph and flowchart.

Happy to test any fix or provide more screenshots if needed

[EmnaBarbouch]

Reopening/closing was accidental. The bug is still present and unresolved.