Rendering complex Mermaid.js flowchart diagrams causes text inside nodes to be cut

PHAredes commented 9 months ago

I tried to use this diagram here:

graph LR

  subgraph lv0[lv0]
  direction LR
    RW[Rosary Warden]
    WoS[Weight of Sin]
  end

  lv0 -->|lv1| Re[Retribution]

  Re --->|lv2| RP[Relentless Power]
  RP -->|lv3| SS[Sacred Steel]

  lv0 -->|lv1| BP[Blood Pact]
  BP --->|lv2| De[Determination]
  BP --->|lv2| CoA[Covenant of Atonement]
  BP -->|lv1| G[Reaper Rosary]
  G -->|lv1| MS[Mystic Striker]
  G -->|lv2| BS[Blessed Steel]

  lv0 -->|lv1| CW[Crimson Warmonger]
  BS -->|lv3| RprP[Reaper Prayer]
  CW -->|lv2| CC[Crimson Cleaver]
  CC -->|lv2| K[Weight of Justice]
  CC --->|lv3| N[Crimson Glaive]

graph LR

  subgraph lv0[lv0]
  direction LR
    RW[Rosary Warden]
    WoS[Weight of Sin]
  end

  lv0 -->|lv1| Re[Retribution]

  Re --->|lv2| RP[Relentless Power]
  RP -->|lv3| SS[Sacred Steel]

  lv0 -->|lv1| BP[Blood Pact]
  BP --->|lv2| De[Determination]
  BP --->|lv2| CoA[Covenant of Atonement]
  BP -->|lv1| G[Reaper Rosary]
  G -->|lv1| MS[Mystic Striker]
  G -->|lv2| BS[Blessed Steel]

  lv0 -->|lv1| CW[Crimson Warmonger]
  BS -->|lv3| RprP[Reaper Prayer]
  CW -->|lv2| CC[Crimson Cleaver]
  CC -->|lv2| K[Weight of Justice]
  CC --->|lv3| N[Crimson Glaive]

Although it renders as intended on mermaid.live and Github I wasn't able to make nodes to acommodate its text on Nextra. I tried to change font size (both for each node and as a class), used frontmatter config, remake nodes positioning, etc.

Nextra Nextra