Mermaid integration showing arrow tips - it shouldn't!

Steps to reproduce

  1. Create new note.
  2. Copy the following mermaid diagram code:
flowchart LR
A --- B

Did you follow the troubleshooting guide? [Y/N]

Y

Expected result

A line between A and B without arrow tips. It’s called an “open link” by Mermaid.
I cant share the link to the Mermaid documentation.
Marmaid Documentation → “Syntax” → “Flowchart” → “An open link”

Actual result

I see a link between A and B with an arrow head pointing towards B.
The rendered diagram is identical to the following code, it shouldn’t.

flowchart LR
A --> B

Environment

SYSTEM INFO:
Obsidian version: v1.8.9
Installer version: v1.6.7
Operating system: Windows 11 Home 10.0.26100
Login status: logged in
Language: en
Catalyst license: none
Insider build toggle: off
Live preview: on
Base theme: adapt to system
Community theme: none
Snippets enabled: 0
Restricted mode: on

RECOMMENDATIONS:
none


Additional information

Expected result (screenshot from Mermaid.js documentation)

Actual result in Obsidian:

6 Likes

I’m also seeing this bug, on v1.8.10.

There was a change in how Obsidian renders mermaid fairly recently (not sure exact version) that seems to have brought this bug. It was the change that caused the nodes to have purple outlines.

This could be a Mermaid (v 11.4.1) bug: Link --- show arrow but have to be without · Issue #6289 · mermaid-js/mermaid · GitHub :woman_shrugging:
(Obsidian updated Mermaid to Mermaid v11.4.1. with the release of Obsidian 1.8.5 :blush: )

3 Likes

This seems to be fixed in mermaid (now up to version 11.10.1).

This bug is still present in Obsidian Version 1.9.12.

Mermaid graphs that have undirected edges should appear as a line rather than have an arrow

repo:

graph
	A((A)) --- B((B))

Expected:
two nodes with a single line between them

Actual
image

I’m not allowed to include the link to the doc but it is in Mermaid js org → syntax → flowchart → “An open link”

should work with both graph and flowchart and does not

Steps to reproduce

Add the following mermaid code block:

```mermaid
graph TD
    A --- B
```

Did you follow the troubleshooting guide? [Y/N]

Yes

Expected result

Note that the arrow from A to C has no arrow head. (from Mermaid.live)

Actual result

Additional information

This issue (#6289) has been marked as fixed on Mermaid as of three weeks ago from the date of this post and is present in the latest release ([email protected], commit efe218a)

Environment

SYSTEM INFO:
Obsidian version: 1.12.7
Installer version: 1.12.4
Operating system: Windows 11 Pro 10.0.26200
Login status: not logged in
Language: en-GB
Insider build toggle: off
Live preview: on
Base theme: dark
Community theme: none
Snippets enabled: 0
Restricted mode: off
Plugins installed: 3
Plugins enabled: 3
1: Iconize v2.14.7
2: Export Image plugin v2.4.4
3: Code Styler v1.1.7

RECOMMENDATIONS:
Community plugins: for bugs, please first try updating all your plugins to latest. If still not fixed, please try to make the issue happen in the Sandbox Vault or disable community plugins.


will be fixed in v1.13.0. ETA unknown.

3 Likes

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.