Skip to content

Different output when using Mermaid web graph generator and using JavaScript #7220

@Oliverzhc

Description

@Oliverzhc

Description

When I'm using the same Mermaid code in html page by importing from https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.esm.min.mjs and in https://develop.git.mermaid.live/, the output graph is different

Steps to reproduce

1: Use this Mermaid code:

config:
layout: elk

flowchart LR
subgraph Parking [Parking]
ParkingPlanning(["ParkingPlanning"])
ParkApp(["ParkApp"])
IuniApp(["IuniApp"])
ParkDr(["ParkDr"])
ParkControl(["ParkControl"])
end
subgraph Driving [Driving]
DrivingAssist(["DrivingAssist"])
DrivingApps(["DrivingApps"])
LocalizationMapping(["LocalizationMapping"])
DrivingControl(["DrivingControl"])
DrivingPlanning(["DrivingPlanning"])
end
subgraph Perception [Perception]
PerceptionApp(["PerceptionApp"])
PredictionApp(["PredictionApp"])
end
subgraph Common [Common]
NoReceiver(["NoReceiver"])
DataloopApp(["DataloopApp"])
Ipc(["Ipc"])
AsEvaluatorApp(["AsEvaluatorApp"])
AvpApp(["AvpApp"])
SensorManagerApp(["SensorManagerApp"])
J3Gw(["J3Gw"])
NoSender(["NoSender"])
StateManager(["StateManager"])
SystemManagerApp(["SystemManagerApp"])
ImoParams(["ImoParams"])
end
Perception(["Perception"]) ---> Common(["Common"])

Perception(["Perception"]) ---> Driving(["Driving"])

Driving(["Driving"]) ---> Common(["Common"])

Common(["Common"]) ---> Driving(["Driving"])

Common(["Common"]) ---> Parking(["Parking"])

Parking(["Parking"]) ---> Common(["Common"])

Common(["Common"]) ---> Perception(["Perception"])

Parking(["Parking"]) ---> Perception(["Perception"])

Driving(["Driving"]) ---> Perception(["Perception"])

Perception(["Perception"]) ---> Parking(["Parking"])
2: Paste it in https://develop.git.mermaid.live/.
3: Use example code at https://docs.mermaidchart.com/mermaid-oss/intro/getting-started.html

Screenshots

Live editor result:
Image

html result:

Image

Code Sample


Setup

  • Mermaid version: 11.12.2
  • Browser and Version: [Chrome]

Suggested Solutions

If I'm importing mermaid@10, and using flowchart-elk instead of config, it can render similar result as in Live editor

Additional Context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: TriageNeeds to be verified, categorized, etcType: Bug / ErrorSomething isn't working or is incorrect

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions