There's a bug with mermaid rendering in reading view

[LouisPriss]

Steps to reproduce

My mermaid code:

flowchart LR
  A("1"):::sclass --> B("2"):::aclass
  B --> C("3"):::aclass
  C --> D("4"):::aclass
  D --> E("5"):::aclass
  E --> F("6"):::aclass
  classDef sclass fill:#7eabd0;
  classDef aclass fill:#8BA270;

or

flowchart
  subgraph abc
    B("1")
    C("2")
    D("3")
    E("4")
  end
  subgraph def
    B --> F("5")
    C --> F
    D --> F
    E --> F
    F --> G("6")
  end

Expected result

render correctly

Actual result

The bug will render a blank block (at the bottom left corner)

bug just appear in reading mode

or

Additionally, in the above two graphs, there are no arrows.
That’s because I switched from dark theme to light theme for getting a better screenshot, which led to another bug that the arrow will disappear (arrow will come back after I switch back to dark theme)

Environment

• Operating system:

  Windows 11 Pro 22H2 22623.891

• Debug info:

  SYSTEM INFO:
  Obsidian version: v1.0.3
  Installer version: v0.15.9
  Operating system: Windows 10 Pro 10.0.22623
  Login status: logged in
  Catalyst license: none
  Insider build toggle: off
  Live preview: on
  Legacy editor: off
  Base theme: dark
  Community theme: Minimal
  Snippets enabled: 1
  Restricted mode: on

RECOMMENDATIONS:
Custom theme and snippets: for cosmetic issues, please first try updating your theme and disabling your snippets. If still not fixed, please try to make the issue happen in the Sandbox Vault or disable community theme and snippets.

---

Additional information

[WhiteNoise]

Can’t reproduce the box by copy-pasting from the forum.

Search the forum for the arrow issue.

[LouisPriss]

Apologize for providing wrong example

flowchart LR
  A("&lt;&lt;Interface&gt;&gt;<br/>1"):::sclass --> B("&lt;&lt;Abstract&gt;&gt;<br/>2"):::aclass
  B --> C("&lt;&lt;Abstract&gt;&gt;<br/>3"):::aclass
  C --> D("&lt;&lt;Abstract&gt;&gt;<br/>4"):::aclass
  D --> E("&lt;&lt;Abstract&gt;&gt;<br/>5"):::aclass
  E --> F["&lt;&lt;Abstract&gt;&gt;<br/>6"]:::aclass
  classDef sclass fill:#7eabd0;
  classDef aclass fill:#8BA270;

This one could reproduce the bug

[LouisPriss]

and the second example I provided can show the bug

flowchart
  subgraph abc
    B("1")
    C("2")
    D("3")
    E("4")
  end
  subgraph def
    B --> F("5")
    C --> F
    D --> F
    E --> F
    F --> G("6")
  end

[LouisPriss]

A new example

flowchart LR
  subgraph sub
    direction RL
    C("3") <--> B("2")
  end
  A("1") <--> sub
  classDef subgraphstyle fill:transparent
  class sub subgraphstyle

the wierd block is at bottom left

[WhiteNoise]

works for me by copypasting from the forum. You are likely having some weird character in your text.

[CarolineMathieson]

There must be something odd about your set up because I get this when i paste that example code into a fresh vault.