Invalid value for <svg> attribute viewBox="0 0 -Infinity -Infinity"

[SteveEdson]

Using the Jekyll plugin and getting the above error. Also get the error when calling mermaid.init();

The svg looks like:

<svg id="mermaidChart1" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 -Infinity -Infinity" style="max-width:-Infinitypx;"><g><g class="output"><g class="clusters"></g><g class="edgePaths"></g><g class="edgeLabels"></g><g class="nodes"></g></g></g></svg>

for the example:

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

[LeonardoRamos]

I am getting the same error when calling mermaid.init();

[knsv]

Ok, sorry about that. What version of mermaid are you running on?

[LeonardoRamos]

Actually, I think I figure it out, this error happens when you try to use mermaid.init() in a div with class "mermaid" and this div is empty, without the graph definition. I tested it in all versions above 4.0, including 4.0 and they all have this problem, although the version in the 'editor' folder, which I believe is an much older one, works fine.

[knsv]

Ok. As of 4.0 the initialization code changed a bit. Perhaps this should be reported in the the jekyll repository.

[jay-sridharan]

any solution for this?

[crankycyclops]

I too am looking for a solution to this. I'm using version 6.0.0, which I think is the latest release. I'll try the latest in master to see if it's been fixed, but in the meantime, I've been working around it by executing the following code after initialization:

var viewbox = document.getElementById('main').getAttribute('viewbox'); document.getElementById('main').querySelector('svg').setAttribute('viewBox', viewbox);

This is where main is the div containing the svg. Posting this here in case it happens to help someone.

[ellatemprosa]

I am also having a problem with version 7

[StingyJack]

Also having this problem with a code sample pulled from the docs page

[StingyJack]

The problem is with calling init. If you dont call it like this...

  var config = {
        startOnLoad: false
    };
    mermaid.initialize(config);

then the startOnLoad defaults to True. The page may have no graph/chart text info yet, and this makes the svg error happen.

[Glavin001]

Thank you, @StingyJack! Simply adding the following fixed this issue:

mermaidAPI.initialize({
  startOnLoad: false
});

I would say this Issue could be closed, since documentation also recommends this: http://knsv.github.io/mermaid/#sample-of-api-usage-together-with-browserify

[devdigital]

This also occurs if the input text can't be parsed, and you only get useful feedback if you've switched logging to the lowest level. I think parsing errors should be displayed within the container element.

[blackst0ne]

Still see this problem on 7.1.0

/cc @tylerlong

[stanhu]

This worked for me:

mermaid.initialize({
  mermaid: {
     startOnLoad: false
  }
});

Notice the addition of the mermaid hash used here: https://github.com/knsv/mermaid/blob/6cd5ffe637d88525b93417bf3954e9c0e5a4deb8/src/mermaid.js#L116-L121

I ran https://github.com/mermaidjs/mermaid-live-editor in the debugger and confirmed that leaving this out doesn't do the right thing.

[tylerlong]

For those who are still suffering from this, could you please give me a sample so that I can reproduce this issue?

You can either create it here: https://mermaidjs.github.io/mermaid-live-editor

Or you can create a simple HTML page and post it here.

[StingyJack]

@tylerlong - I can point you to this or this, but I'm not sure how useful (or horrifying) those are going to be to you.

[tylerlong]

There is no problem for me to render the chart in the orignal question: https://mermaidjs.github.io/mermaid-live-editor/#/edit/Z3JhcGggVEQ7CiAgICBBLS0-QjsKICAgIEEtLT5DOwogICAgQi0tPkQ7CiAgICBDLS0-RDs

If anybody could prove that it is a mermaid bug, please open a new issue.

@StingyJack

I think

mermaid.initialize({
  mermaid: {
     startOnLoad: false
  }
});

should be

mermaid.initialize({
     startOnLoad: false
});

Please test the latest version and let me know if it doesn't work for you.