Mermaid: Mermaid no longer created nodes with classes?

Created on 2 Feb 2016  路  10Comments  路  Source: mermaid-js/mermaid

I'm trying to upgrade from an older version. I used to create nodes that looked like this:
A[content]

But this syntax no longer seem to work. This is crucial my my usage, is there a way to create nodes items with classes?

Inactive

Most helpful comment

Just solved it by using single quotes in JS (and properly escaping them):

var insertSvg = function(svgCode, bindFunctions){
element.innerHTML = svgCode;
};
var graphDefinition = 'graph TD\n' +
        '10000633(fa:fa-camera-retro <span class=\'content\'>Node 1</span>)\n' + 
        '10000562(<span class=\'content\'>Node 2</span>)\n' + 
        '10000633-.->|goes to|10000562';

mermaidAPI.render('graphContent', graphDefinition, insertSvg);

All 10 comments

It should be working. Could it be something else like the chrome 48 issue?

Follow this link to the live editor, for me this renders fine:
http://knsv.github.io/mermaid/live_editor/#/view/Z3JhcGggVEIKQVtjb250ZW50XQ

Thanks for the prompt reply!

I tried the following:

graph TD; 
A[<span>city</span>]-->B 
    A-->C; 
    B-->D; 
    C-->D;

Which works. This however, doesn't:

graph TD; 
A[<span class="node">city</span>]-->B 
    A-->C; 
    B-->D; 
    C-->D;</div>

From what I was able to gather, the nodes are not parsed correctly, so I get a the following error:

Error: Invalid value for attribute viewBox="0 0 -Infinity -Infinity"

That's a result of the nodes not being found, so getExtremes doesn't have anything to run on, which leaves the sizes unchanged (at the end of that function the parameters are set to -Infinity).

I am having the same problem. I upgraded to latest version to get the Chrome 48 fix, but now my diagrams don't draw. The problem occurs when there is an equals sign in the node label. All of my nodes have spans with id's, titles, etc. The example below breaks because of the two equal signs in the span tag.

    A(<span id="A_node" title="Node Title">Node Label</span>);

        A-->B
        B-->C
        C-->A
        D-->C

I confirm that this is still an issue:

https://mermaidjs.github.io/mermaid-live-editor/#/edit/Z3JhcGggVEIKQVs8c3BhbiBjbGFzcz0ibm9kZSI-Y2l0eTwvc3Bhbj5d/error/UGFyc2UgZXJyb3Igb24gbGluZSAyOgouLi5oIFRCQVs8c3BhbiBjbGFzcz0ibm9kZSI-Y2l0eTwvc3Bhbj5dCi0tLS0tLS0tLS0tLS0tLS0tLS0tLS1eCkV4cGVjdGluZyAnU0VNSScsICdORVdMSU5FJywgJ1NQQUNFJywgJ0VPRicsICdHUkFQSCcsICdESVInLCAnVEFHRU5EJywgJ1RBR1NUQVJUJywgJ1VQJywgJ0RPV04nLCAnc3ViZ3JhcGgnLCAnZW5kJywgJ1NRUycsICdTUUUnLCAnUFMnLCAnUEUnLCAnKC0nLCAnLSknLCAnRElBTU9ORF9TVEFSVCcsICdESUFNT05EX1NUT1AnLCAnTUlOVVMnLCAnLS0nLCAnQVJST1dfUE9JTlQnLCAnQVJST1dfQ0lSQ0xFJywgJ0FSUk9XX0NST1NTJywgJ0FSUk9XX09QRU4nLCAnLS4nLCAnRE9UVEVEX0FSUk9XX1BPSU5UJywgJ0RPVFRFRF9BUlJPV19DSVJDTEUnLCAnRE9UVEVEX0FSUk9XX0NST1NTJywgJ0RPVFRFRF9BUlJPV19PUEVOJywgJz09JywgJ1RISUNLX0FSUk9XX1BPSU5UJywgJ1RISUNLX0FSUk9XX0NJUkNMRScsICdUSElDS19BUlJPV19DUk9TUycsICdUSElDS19BUlJPV19PUEVOJywgJ1BJUEUnLCAnU1RZTEUnLCAnTElOS1NUWUxFJywgJ0NMQVNTREVGJywgJ0NMQVNTJywgJ0NMSUNLJywgJ0RFRkFVTFQnLCAnTlVNJywgJ1BDVCcsICdDT01NQScsICdBTFBIQScsICdDT0xPTicsICdCUktUJywgJ0RPVCcsICdQVU5DVFVBVElPTicsICdVTklDT0RFX1RFWFQnLCAnUExVUycsICdFUVVBTFMnLCAnTVVMVCcsIGdvdCAnU1RSJw

It seems that HTML tags are supported but you cannot add attributes to those tags.

I will investigate when I have more time.

I managed to give my nodes/edges some properties by using the following chars:

graph TD

  %% My nodes----------------------------
  10000633(fa:fa-camera-retro <span class&#61;'content'>My content here</span>)

The code above works if I use the mermaid.initialize method only, but when I try to use mermaidAPI.render method, the page keeps loading forever and nothing shows up.

Currently, I'm trying to find an alternative for the problematic characters when using render.

Just solved it by using single quotes in JS (and properly escaping them):

var insertSvg = function(svgCode, bindFunctions){
element.innerHTML = svgCode;
};
var graphDefinition = 'graph TD\n' +
        '10000633(fa:fa-camera-retro <span class=\'content\'>Node 1</span>)\n' + 
        '10000562(<span class=\'content\'>Node 2</span>)\n' + 
        '10000633-.->|goes to|10000562';

mermaidAPI.render('graphContent', graphDefinition, insertSvg);

It's a nice workaround. In the long term we should improve the parser so it could have better HTML support

It's a nice workaround. In the long term we should improve the parser so it could have better HTML support

Is there any news on this improvement?
I have searched for better support for HTML tags in the node contents, but as fare as I can see, the problems still exists in the latest version (8.0.0-rc.8)...

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Given how long ago this issue's activity died out, I'm closing it.
This allows us to maintain a fresh list of issues the community is interested in.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

nfroidure picture nfroidure  路  26Comments

imrefazekas picture imrefazekas  路  15Comments

dotancohen picture dotancohen  路  14Comments

CyborgMaster picture CyborgMaster  路  14Comments

knsv picture knsv  路  22Comments