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?
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
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='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.
Most helpful comment
Just solved it by using single quotes in JS (and properly escaping them):