Mermaid: arrows/marks not showing

skewty · August 3, 2022, 7:25pm

This is still an issue in v0.15.9 on my system. The upstream bug you linked is very old (Mar 25, 2020) so waiting on upstream may not be so wise if the shadow root workaround reported as slidevjs/slidev#564 will work in Obsidian as well. Has the dev team tried this work-around?

WhiteNoise · August 3, 2022, 7:54pm

That workaround can’t be used in Obsidian.

Ooker · August 11, 2022, 7:55am

I notice that if you use the popup window the arrows disappear, while the main window does not
Main window:
Popup window:

Rex_07 · August 26, 2022, 2:48am

Someone in Usage of duplicate IDs across diagrams has potential to break some diagrams said :
“found that if create my own loader that wraps each diagram in a shadow DOM, I no longer get non-unique ID problems as the individual diagrams no longer are shared.”
I don’t know if this is a direction that Obsidian can use shadow DOM to fix the problem? It really bothered me for a long time…

WhiteNoise · August 26, 2022, 10:56am

Again, That workaround can’t be used in Obsidian.

GLight · November 29, 2022, 4:23pm

Facing the same problem.
Is there a workaround for the arrow missing issue?

GLight · November 29, 2022, 4:44pm

in

github.com/mermaid-js/mermaid

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

opened 06:28AM - 26 Mar 20 UTC

facelessuser

Type: Bug / Error Status: Approved Graph: Sequence Graph: Flow Graph: Class Graph: Git Graph: State Graph: Pie Chart

**Describe the bug** Class and State Diagrams all share `<def>` elements with t…he same `id` instead of making them unique. If given two diagrams that share `<def>` elements with the same `id`, and the first gets hidden, it can affect all other diagrams that share the same `<def>` ids. In this example, notice that when the Class Diagram is hidden, the State Diagram underneath loses its arrows. ![wDLLe3E7Zu](https://user-images.githubusercontent.com/1055125/77615806-d5b9fc00-6ef5-11ea-862a-16a9e9658882.gif) This is because both the State Diagram and the Class Diagram define `<def>` elements that use the exact same id. Below is an example of the `<dev>` id that is generated in these SVGs. It is not unique like other diagrams generate. It would be expected to have `dependencyEnd<some_number>`, but instead all Class and State Diagrams use the exact same id. ``` <marker id="dependencyEnd" refX="19" refY="7" markerWidth="20" markerHeight="28" orient="auto"><path d="M 19,7 L9,13 L14,7 L9,1 Z"></path></marker> ``` This only works as long as the first doesn't get hidden (the only ID that the browser cares about, as IDs are required to be unique). I imagine stylesheets would also have to get cleaned up as they are currently using things like: ```scss #dependencyStart { @include composition; } #dependencyEnd { @include composition; } ``` You could maybe get away with something like: ```scss [id^="dependencyEnd] { @include composition; } ``` On a side note, using IDs in general like this could mistakenly break things in a site if a user happens to use the same ID in their document. At the very least, it may make sense to kind of namespace the ids to reduce the chance of a user accidentally using the same ID `__mermaid_dependencyEnd<number>`. Something to think about. **Expected behavior** All `<dev>` elements should be generated with unique ids. **Screenshots** See above **Desktop (please complete the following information):** Not OS or Browser specific - Mermaid Version: 8.4.8

some people said that this issue is fixed (and tested in Obsidian?)

And it seems that it will be fixed in:

github.com/mermaid-js/mermaid

Theming of lineColor using directives spills over into subsequent diagrams

opened 06:28AM - 27 Jan 21 UTC

knsv

Topic: Styling Status: Approved Topic: Platform

When setting the line color in a page this affects the styling of the arrowheads…, the markers in svg. These ids are not properly contained within each svg. This results in the subsequent diagrams linking to the arrowhead definitions highest up in the page. This can easily be reproduced by the example below: ![image](https://user-images.githubusercontent.com/5837277/105951773-dd47b580-6070-11eb-869d-fd7a49d007b6.png) ```html <html> <head> </head> <body> <h1>Example</h1> <div class="mermaid"> %%{init:{"theme":"base", "themeVariables": {"lineColor":"red"}}}%% flowchart LR subgraph red A --> B end </div> <div class="mermaid"> %%{init:{"theme":"base", "themeVariables": {"lineColor":"blue"}}}%% flowchart LR subgraph black A --> B end </div> <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js"></script> <script> mermaid.initialize({ }); function callback(){alert('It worked');} </script> </body> </html> ```

I’m not very familiar with the developing work flow. Does it mean that we can see this issue being fixed in Obsidian very soon?

WhiteNoise · November 29, 2022, 5:06pm

This “fix” hasn’t even been merged by them yet.

We never comment about timing questions.
The libraries are updated regularly a few months after a new stable release is made upstream.

felix · February 1, 2023, 10:19am

Is this fixed? I encountered following bug:

Steps to reproduce

Paste the following mermaid code block into a note:

graph LR
	A <--> B

Expected result

Actual result

Environment

Operating system: MacOS 13.0.1 Ventura
Obsidian: 1.19

Or should i open a new thread for this?

CarolineMathieson · February 4, 2023, 10:59am

I see the same thing, two way arrows only showing one arrow.

tobei · February 23, 2023, 7:59am

Plus if i’m if the page is in reading mode when you open obsidian, it will display numbers (from “autonumber”) and arrow marks correctly, but from the moment you first toggle between reading and editing mode they never appear back in reading mode anymore.

felix · February 25, 2023, 3:32pm

this seems to be fixed with version 1.1.15
Screenshot 2023-02-25 at 16.29.19

WhiteNoise · February 25, 2023, 3:35pm

it’s not.

ZHDI · March 17, 2023, 8:55am

here is another issue, in the default dark mode, and runs in macos13.2.1 with m1pro mac, obsidian is the latest version(1.1.16), when i use flow codes:

sequenceDiagram
    autonumber
    Student->>Admin: Can I enrol this semester?

here is a color mistake:

you can see the arrow head is here but shows in dark, i think that could be a simple issue that can be fixed soon.

and here is the light mode screenshot:

hope fixed in next version!

yett · April 30, 2023, 2:49am

Such a weird bug. I’m opening the same note in two tabs, in one pane the arrows appear and in the other pane they don’t.

RedTony · May 11, 2023, 4:42pm

Hope this would help some body.

I was able to tweak arrows color and some other colors as well with CSS snippets:

#arrowhead path {
    fill: #DADADA !important;
    stroke: #DADADA !important;
}

.loopLine {
    stroke: #DADADA !important;
}

.labelBox {
    stroke: #DADADA !important;
    fill: #2e2e2e !important;
}

.loopText, .loopText>tspan {
    fill: #DADADA !important;
}

But it looks like you would have to play with developer tools for every item you want to change.

MarkGotLasagna · May 19, 2023, 10:42pm

This worked for me (arrows show up in PDF):

After editing your file, enter the reading mode by using the dedicated shortcut Ctrl+E.
Scroll down to a section of the document that doesn’t show the mermaid graph on screen.
Open the command palette by using the dedicated shortcut Ctrl+P and search to export the current file to a PDF.

arch linux with Obsidian v.1.2.8, picom (compositor), i3 (wm)

tkalpha · May 24, 2023, 10:28am

The workaround provided by @MarkGotLasagna does not work for me.

Result

Arrows missed in the reading view of the editor and exported PDFs.

Steps to reproduce

flowchart LR;
	M[ ]-->|编写|A[.tex源文档]-->|输入|B[LaTeX引擎]-->|输出|C[PDF/DVI文件]-->|发布|N[ ]
	B-.->|前一次编译|D[.toc目录文件]
	D-.->|再次编译|B

Environment

Windows 10 21H2 & Ubuntu Mate 20.04
Obsidian verison: 1.3.3

BunkerD · June 11, 2023, 12:13am

To me, its seems like there’s a pretty easy dirty fix.

As I understand it, the problem is due to the use of repeated id’s for the connector endings. So, when a connector is using marker-end="url(#flowchart-pointEnd)", it points to the first DOM element with the id #flowchart-pointEnd.

As a result, if there is a Mermaid graph in a previous inactive tab, or in the source view while we’re in reading view, it’s the pointers defined here that are used… And they are not displayed because they are within a DOM Element affected by display: none.

Sure, the better solution would be to have Mermaid using unique IDs. But in the meanwhile, a dirty yet functional trick is to to put a version of these pointers in the DOM somewhere before any other possible Mermaid-produced SVG, and not within tab contents (subjected to display: none).

I tried inserting this at the beginning of the <body>, and for what I’ve seen, it works:

<svg style="height:0" fill="currentcolor">
  <marker id="flowchart-pointEnd" class="marker flowchart" viewBox="0 0 10 10" refX="10" refY="5"
    markerUnits="userSpaceOnUse" markerWidth="12" markerHeight="12" orient="auto">
    <path d="M 0 0 L 10 5 L 0 10 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path>
  </marker>
  <marker id="flowchart-pointStart" class="marker flowchart" viewBox="0 0 10 10" refX="0" refY="5"
    markerUnits="userSpaceOnUse" markerWidth="12" markerHeight="12" orient="auto">
    <path d="M 0 5 L 10 10 L 10 0 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path>
  </marker>
  <marker id="flowchart-circleEnd" class="marker flowchart" viewBox="0 0 10 10" refX="11" refY="5"
    markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto">
    <circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></circle>
  </marker>
  <marker id="flowchart-circleStart" class="marker flowchart" viewBox="0 0 10 10" refX="-1" refY="5"
    markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto">
    <circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></circle>
  </marker>
  <marker id="flowchart-crossEnd" class="marker cross flowchart" viewBox="0 0 11 11" refX="12" refY="5.2"
    markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto">
    <path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"></path>
  </marker>
  <marker id="flowchart-crossStart" class="marker cross flowchart" viewBox="0 0 11 11" refX="-1" refY="5.2"
    markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto">
    <path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"></path>
  </marker>
</svg>

While waiting for a solution from either the Obsidian or Mermaid devs, I don’t know if an Obsidian plugin could handle that. It would have to be able to edit the resulting DOM of the application.