Hello! It looks like text isn’t being rendered in mermaid code inside markdown files.
I just made a new markdown note and pasted in this code:
### History of X
```mermaid
graph TB
A1[asdgf] --> B1;
B1 --> C1;
A2 --> B1;
\```
It makes the skeleton, but replaces the text with … ornamental underscores? Placeholder-scores? Here’s the image:
Any ideas?
No issue here (DT 3.9.7 on macOS 14.6.1):
Convert the file to HTML in DT, load that in your favorite browser and check its developer console – any error messages?
Yes, it works in DT as well. Did you post the complete MD you’re experiencing issues with or just a part?
What does your HTML look like, for example for “A2”:
And do you use a custom CSS with your MD files? What font is used for the <span class="nodeLabel"> element? Here, I see
font-family: "trebuchet ms",verdana,arial,sans-serif;
What version of DEVONthink and operating system are you running?
Hello! Sorry for this delay. Just out of hospital … for 3rd time in 3 weeks.
Now, for your questions.
Yes, that’s the whole DT record: just those 7 lines of text.
Here is what Safari reveals from the HTML conversion of the MD file:
I am using this custom CSS with my MD files, which tries to imitate the “Minimal” theme in Obsidian:
CSH_min.css.zip (3.5 KB)
Also, as an experiment, I just now cleared the “Style Sheet” field in Preferences > Files > Markdown. And the result is that this is now the way DT renders my mermaid code:
My Preferences > Files > Markdown settings:
Ahoy Jim! I am running DT 3.9.7 on macOS 12.7.1
Something weird is happening: You activate Prism.js, but it’s not included in your HTML. Your MD is not really rendered at all, except for the heading. That makes no sense.
And in your preferences, the custom CSS (CHS_...) is not set, although it’s included in your HTML.
Either your preferences are not what you think they are or the screenshots had not been taken at the same time. Or something else is off.
Try restarting DT and/or your computer.
And try removing the indentation. For some reason, Mermaid is not processing your input. In the online examples I found, the diagram code is not indented.
You are right, the Preferences image was a later screenshot—after I emptied the Style Sheet field. I removed it just in case it was having some effect.
I’ve now tried these to no avail:
My current output is now, incredibly, this:
And I’m more confused than ever.
Do you have a default JavaScript set in the Markdown settings?
A screenshot of Preferences > Web might be useful. In addition, did you already try to empty the cache? See DEVONthink 3 > Empty Cache.
No. Should I?
Cache emptied. Restarted. Fresh test results:
And here is that screenshot of Preferences > Web:
I can’t believe it went from missing text to complete failure right in the middle of this troubleshooting. I’m completely baffled.
No. just trying to piece things together, especially as I’m seeing no issue.
To me, it looks as if Mermaid is either not loaded correctly from the CDN or it’s not executed.
Can you please
Thanks
Hello! Sorry again for the delay. OK, here is what I used as my markdown:
## Hello
### Testing
\```mermaid
graph LR;
A-→B;
A-→C;
B-→D;
C-→D;
\```
I converted it to html, opened it in Safari, and here is what you didn’t ask for: the Sources view:
Something else you didn’t ask for—how it’s rendered:
And finally, here is the Console view (JavaScript Console actually) that you did ask for, after I reloaded:
Here the rendered HTML includes an SVG section like so:
Everything points to the Mermaid JavaScript code not being run. Which I can’t really tell you more than that. You could set breakpoints in Safari’s tool’s “Sources” tab for “load” to see what’s happening (or maybe not happening).
See here: Event Breakpoints | WebKit
And what about Safari preferences?
Under “Security” you must have JavaScript turned on!
You could also turn off your custom CSS in DT’s preferences. And why is there an error message about a favicon.ico? It shouldn’t happen in a simple MD file. Do you have any plug-ins installed in Safari? Or something on your machine that might interfere with Safari (Adblocker, whatever)?
Very simple test with a stupid MD file:
<script>
window.addEventListener("load", e => {
window.alert("Document loaded");
})
</script>
If you switch to preview, an alert should be displayed. And if you convert that MD document to HTML and open it in Safari, the same thing should happen.
But all this is not really a DT issue, in my opinion. Something somewhere in your setup or your prefs is causing the problems. You could try to run DT as another user and see what that gives.
Hello, @chrillek, and thanks so much yet again for your frequent detailed and knowledgeable help and patience with my delays. Here is my sad update:
Interestingly, I downloaded the latest DT Pro and installed it on my other computer, a Mac Mini 2018 (macOS 12.7.5) and it’s doing the same damned thing:
I’m totally, totally dumbfounded. What’s strange is that Mermaid worked inside DT Pro before, in a time that seems long, long ago. Then the names went missing, and finally all graphical rendering disappeared.
Should I manually download some kind of Javascript thing and put its path in that text field (in Preferences > Files > Markdown > JavaScript)?
Thanks again.
This works as expected over here:
Screenshots of Preferences > Web and of Preferences > Files > Markdown might be useful. Is there anything that might block network traffic (e.g. Little Snitch or your firewall settings)? Is DEVONthink 3 installed in the folder /Applications?
As @cgrunenberg stepped in, you should continue to discuss that with him. I am out of ideas anyway. It still seems that DT is not executing the JavaScript, perhaps not even loading it, in your case.
@cgrunenberg: I don’t think that Little Snitch or something like that is involved here as the script clearly loads in the browser (no error message). Little Snitch should prevent it being loaded not only in DT, but also in browsers.
