Mermaid: arrows/marks not showing

[ndruid]

Steps to reproduce

Create a mermaid erDiagram:

erDiagram
	FOO ||--|{ BAR :baz

Switch to Preview
Diagram looks good

Switch back to edit
Open new tab next to in preview mode (ctrl-click the edit button)
Accents on the diagram dissappear
Close other tab
Accents re-appear

Expected result

Accents should always be there

Actual result

They are not

Environment

• Operating system: Ubuntu 18.04
• Obsidian version: 0.8.15

---

[WhiteNoise]

Possibly a weird upstream bug.

[WhiteNoise]

Usage of duplicate IDs across diagrams has potential to break some diagrams

[bobbelz]

Steps to reproduce

1. Use the following mermaid sequence diagram:

sequenceDiagram
	participant User
	participant Service
	User ->> Service: yo do dis ding
	Service-->>User: gotshu
	User -->> Service: wassupp

1. Toggle to Preview, notice the arrowheads are displaying
2. Toggle back to Edit, then open Preview to the side
3. Notice the arrowheads are gone

Expected result

To see the arrowheads in the preview even with split mode.

Actual result

Arrowheads are not displayed.

Environment

• Operating system: Win 10
• Obsidian version: 0.12.12

---

Additional information

In split view:

With only Preview on:

While the screenshot is with custom CSS, I tried also without and it had no effect.

[Clemens]

Steps to reproduce

1. create note
2. add mermaid code block like this:

```mermaid
classDiagram
	Klasse o-- Klasse2 : Aggregation
\```

(ignore the backslash)
3. export as pdf

Expected result

pdf with the mermaid graph with the correct arrow types

Actual result

any arrow type will be removed

Environment

• Operating system:
  Windows 10
• Obsidian version:
  0.11.13

---

[WhiteNoise]

Usage of duplicate IDs across diagrams has potential to break some diagrams

[chumido]

Hello. Can you guide me how to fix this? I can’t get it.

[Hamster151]

Steps to reproduce

1. Create following diagram

sequenceDiagram
Alice->>Bob: Hello!
Bob-->>Alice: Hello back!

2. Export to PDF and open.

Expected result

Arrows should be visible in PDF.

Actual result

Arrows are cut off

In Obisidian, everything looks good

PDF Export settings:

Environment

• Operating system: Windows 10
• Obsidian version: v0.12.15

[Mizu]

Steps to reproduce

1. Add the following mermaid chart to a note:

```mermaid
flowchart
	step1[Some Step Here]
	step2[Another Step Here]

	step1 --> step2
```

2. Toggle between reading mode and editing mode until the arrow heads disappear. You may also need to go into and out editing the block with live preview. It will periodically no longer render the directional arrow heads between steps.

Expected result

It always renders the arrow heads.

Actual result

Sometimes it will not render the arrow heads.

Environment

• Operating system: Pop! OS (Linux)

• Debug info:

SYSTEM INFO:
	Obsidian version: v0.13.14
	Installer version: v0.13.14
	Login status: logged in
	Catalyst license: none
	Insider build toggle: off
	Live preview: on
	Legacy editor: off
	Base theme: dark
	Community theme: none
	Snippets enabled: 0
	Safe mode: off
	Plugins installed: 0
	Plugins enabled: 0

RECOMMENDATIONS:
	none

[Mizu]

@WhiteNoise FWIW, I did search but this thread didn’t show up.

[Mizu]

Also, this is likely not an upstream bug, or if it is it has since been patched. When copying the graph into https://mermaid.live it has no issues rendering the arrow heads, and even in Obsidian it periodically can render them just fine. See above repro steps for potential causes.

I suspect one of the scenarios when loading in Obsidian does not properly initiate the graph.

[Coookie]

In my case, when I turn the “use legacy editor” button on, the “mermaid arrow” show well in “reading view”. In the contrary, those arrows all disappeared.

I think that is a incompatibility problem between new editor mode and plugin.
In other Apps, like “Typora”, did not have this “mermaid arrow” issue.

[yplvivua]

Steps to reproduce

Paste the following mermaid code block into a vault:

classDiagram
	A "1" *-- "many" B

Toggle between Preview and Live Preview modes.

Expected result

The aggregation mark in the UML diagram is shown in Preview mode.

Actual result

The aggregation mark in the UML diagram is not shown in Preview mode.

Environment

• Operating system: Windows 10

• Debug info:

SYSTEM INFO:
Obsidian version: v0.14.15
Installer version: v0.13.31
Operating system: Windows 10 Enterprise 10.0.19044
Login status: not logged in
Insider build toggle: on
Live preview: on
Legacy editor: off
Base theme: dark
Community theme: none
Snippets enabled: 0
Safe mode: on

RECOMMENDATIONS:
none

---

Additional information

[yplvivua]

If you open two copies of the same note side by side, then as long as at least one of them is Live Preview, both will have the correct rendering. Not really a workaround, but can be a useful fact for debugging.

[Dampfwatze]

Since I am not allowed, to open a new and clean thread, I will just line up with everybody and post my findings inhere, because otherwise they would just get wiped out by some moderator:

To bring a bit of clearance into this discussion, I conducted a little experiment, testing all mermaid graph types, that have some sort of arrow head:

I tested every type in the internal preview and exported to PDF, since this is the way I submit my work to the Professors at University. This table only shows the result, when the Preview failed to show the arrows, but it shows some strange behavior in conjunction with other parts of obsidian (See Strange preview behavior)

Surprisingly, the graph type actually works correctly, but since this is the one, which is kind of deprecated from mermaid side, it is only a partial remedy! Every new feature like subgraphs are introduced into flowchart instead!

Result

Markdown	Preview	PDF
```mermaid flowchart LR A--> B ```
```mermaid graph LR A--> B ```
```mermaid classDiagram direction LR A --|> B ```
```mermaid sequenceDiagram A->>+B: Test ```
```mermaid stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*] ```
```mermaid erDiagram CUSTOMER }|..|{ ADDRESS : has ```
```mermaid requirementDiagram requirement test_req { id: 1 text: the test text. risk: high verifymethod: test } element test_entity { type: simulation } test_entity - satisfies -> test_req ```

Quickly reproduce

`flowchart`
```mermaid
flowchart LR
	A--> B
```

`graph`
```mermaid
graph LR
	A--> B
```

`classDiagram`
```mermaid
classDiagram
	direction LR
	A --|> B
```

`sequenceDiagram`
```mermaid
sequenceDiagram
    A->>+B: Test
```

`stateDiagram`
```mermaid
stateDiagram-v2
	direction LR
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
```

`erDiagram`
```mermaid
erDiagram
	CUSTOMER }|..|{ DELIVERY-ADDRESS : has
```

`requirementDiagram`
```mermaid
requirementDiagram
    requirement test_req {
	    id: 1
	    text: the test text.
	    risk: high
	    verifymethod: test
    }
    element test_entity {
	    type: simulation
    }
    test_entity - satisfies -> test_req
```

Environment

SYSTEM INFO:
	Obsidian version: v0.14.15
	Installer version: v0.14.15
	Operating system: Windows 10 Pro 10.0.19044
	Login status: not logged in
	Insider build toggle: off
	Live preview: on
	Legacy editor: off
	Base theme: dark
	Community theme: none
	Snippets enabled: 0
	Safe mode: on

RECOMMENDATIONS:
	none

---

Strange preview behavior

In short: The Editor view works correctly. Whenever a mermaid graph with specific type is shown in the preview and a graph with that same type is shown correctly in the editor (meaning with arrow heads and it is not being edited), the preview also renders arrow heads!

For better understanding, a few examples (To express that the types of the graphs are the only important thing here, I used different documents for boths view panes):

Legacy editor

When switching to the legacy editor, the preview actually renders the arrow heads correctly, but when you try to export it to PDF, it still does not work! And for me, this is the actual game breaker, because I cannot share my work!

[heavenru]

it’s usefull, it works, many tks

[taglia]

Thank you for all the work, I have to agree with @Dampfwatze though: being able to export the correct chart to PDF is important. In most cases, using a different Markdown editor to generate the PDF is fine, but that is only workable if the rest of the document is vanilla Markdown (i.e., not using any Obsidian-specific plugins).

[jarbochov]

I am experiencing the same thing. It doesn’t seem to be related to plugins. Diagrams render properly on the Mermaid live editor. Not sure what’s going on.

[BarryPorter13]

Sounds like a font problem. Obsidian changed the font it uses by default and many of the fons don’t have ligatures. try changing the fonts used for this display.

[WhiteNoise]

this is not a font problem. This is an upstream mermaid problem. I linked the issue in one my previous posts.