Flowcharts do not work in native IE11

[chris5287]

When using native IE11, flowcharts do not render correctly (missing text, small diagrams)

[knsv]

Ok, thanks for reporting. Will take a look.

[chris5287]

Any updates?

[knsv]

Sorry, for the slow response. I am currently very busy in another project.

It seems IE11 requires some xml info in the elements in the foreign objects tag. One can configure to use non foreign objects though.

xmlns="http://www.w3.org/1999/xhtml"

Not sure if thats all though.

[knsv]

Fixing this by updating the non-html labels. The non-html labels are improved with with background covering the edge for edge labels and possibility to use br to do row breaks.

[ivy88]

I tested the latest commit on IE11...

I see text if mermaid is initialized with htmlLabels:false, no text if htmlLabels:true. Is this intended behaviour?

[knsv]

@ivy88, yes it is! I am about to update the doc site to use the htmlLabels:false. With the new changes allowing background color and row breaks etc using non-html labels there is really no reasaon for the html labels anymore. Will keep them for backwards compatability though.

[ivy88]

Perfect, thanks!

[dhvanish]

Is this change released ?

[dhvanish]

This change is working in the code
https://github.com/knsv/mermaid/tree/d6363e908df4f3f5cfa058c13d3b938347296efa
but not in the master.

Could you please check ?

[sifb]

Hi,

This change to initialize with htmlLabels:false does make the labels appear in IE11, which is great.

Is it possible you could add it to the live_editor demo site? At the moment something like this

http://knsv.github.io/mermaid/live_editor/#/edit/JSUgU3ViZ3JhcGggZXhhbXBsZQogZ3JhcGggVEIKICAgICAgICAgc3ViZ3JhcGggb25lCiAgICAgICAgIGExLS0gInRlc3QiIC0tPmEyCiAgICAgICAgIGVuZAogICAgICAgICBzdWJncmFwaCB0d28KICAgICAgICAgYjEtLT5iMgogICAgICAgICBlbmQKICAgICAgICAgc3ViZ3JhcGggdGhyZWUKICAgICAgICAgYzEtLT5jMgogICAgICAgICBlbmQKICAgICAgICAgYzEtLT5hMg

Still renders with no labels in IE11. (And the documentation site is the same, but you've mentioned that already).

[JohnPickerill]

Does not seem to work in IE if using the mermaid.init function to render graphs that aren't there when the page is first loaded (is fine in Chrome)

var renderMermaid = function(){
var config = {
startOnLoad:false,
flowchart:{
useMaxWidth:false,
htmlLabels:false
}
};
//mermaid.initialize(config);
mermaid.init(config,".algorithm")
}

[jaseeey]

I'm able to replicate the issue where HTML labels do not appear in IE. When setting htmlLabels to false, I am able to see the labels in IE, however, I require the use of labels so it's not a suitable fix. Are there any updates on what is causing this? Do we know if it's the way IE is rendering the SVG?

[tylerlong]

We've decided to give up IE due to lack of contributors. We do want to support MS Edge browser.