skewty
August 3, 2022, 7:25pm
23
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?
That workaround can’t be used in Obsidian.
1 Like
Ooker
August 11, 2022, 7:55am
25
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
26
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…
Again, That workaround can’t be used in Obsidian.
GLight
November 29, 2022, 4:23pm
28
Facing the same problem.
Is there a workaround for the arrow missing issue?
GLight
November 29, 2022, 4:44pm
29
in
opened 06:28AM - 26 Mar 20 UTC
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.

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:
opened 06:28AM - 27 Jan 21 UTC
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:

```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?
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.
1 Like
felix
February 1, 2023, 10:19am
34
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
Or should i open a new thread for this?
I see the same thing, two way arrows only showing one arrow.
tobei
February 23, 2023, 7:59am
37
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
38
this seems to be fixed with version 1.1.15
ZHDI
March 17, 2023, 8:55am
40
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!
1 Like