Mermaid flow chart is not showing text

[JanKinable]

Installed product versions

• Visual Studio 2017
• This extension: 1.12236

Description

When using Mermaid flow chart the nodes are rendered but no textual visualization is present.

I use this snippet

graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D

Loading

and getting this output (missing text)

[rambotech]

Same here.

[rambotech]

@JanKinable I didn't realize that this was the same problem I was dealing with before while writing an open source project, and found a solution for it. You need to add two specific files to the root folder of your working directory (that is, the git clone point ) for the project. I think they can also reside in the same folder as the solution file.

• md-styles.css
• md-template.html

You can copy these two files from this repository.

The problem has to do with some browser behavior (WIndows) which mermaid uses to render. The problem appears in Visual Studio because it uses those libraries, and inherits the problem.

The text may not be the perfect size you want, but it will render.

[BOT-Man-JL]

dup with #92 😅 @JanKinable @rambotech
I also have the same problem... and try to fix it in #163

[GHosaPhat]

Thanks for the tip, @rambotech

I hadn't worked with Mermaid before, so when I first tried some and noticed the lack of all the details, I was pretty disappointed. Now that I've put the HTML file in my %userprofile% directory, it seems to be working as expected. The CSS file isn't quite as important when Markdown Editor is actually being used since it (according to the documentation) uses an "internal stylesheet", but since I didn't have a copy of it anywhere I could find, I went ahead and dropped a copy of that in my %userprofile% directory as well.

This brings up a possible enhancement to the installation routine: Drop copies of both md-styles.css and md-template.html into the %userprofile% directory.

Another "option" that might be useful as well would be to add a configuration option to point to an "external" md-template.html. In my case, I'd like to be able to store both of these files on a network share and access them from there. Obviously, neither of these suggestions are critical - especially now that you've pointed me to the files so I could download them - but they would be nice QoL enhancements.

---

EDIT

I just installed the latest CI build (1.12.253) and it appears that the option to point to an "external" md-template.html file is already available:

Reading through the documentation on the VSIX Gallery site, it appears that this behaves the same way as the md-styles.css file:

You can provide your own HTML template by dropping a file with the name md-template.html in the same or parent folder to the markdown file. If not found, it will search %userprofile%.

Just make sure to include the [content] token in the template. And the [title] token is optional if you need a title.

So, again, you can put a "standard" copy of this md-template.html locally in your %userprofile% folder, save a copy in the project, or point to another existing file somewhere else. While I can't confirm or deny it, I'd guess that, if none of these options are available, just like with the md-styles.css, there's an "internal" version built into the extension as well.

I tested by copying the local copy to my network share, then renaming the local copy, setting the path for the md-template.html in Visual Studio, and then bringing up the same Markdown file. Everything looked the same (including the issues I reported elsewhere with syntax highlighting).

[rambotech]

@GHosaPhat: putting the files in the user folder solved the issue. Thank you for this.