render to png from the cli does not display the marker-end arrow heads

[phairow]

When running the cli to save a diagram as a png the marker-end arrow heads do not show. Using the following example diagram from the site:

graph TB
sq[Square shape] --> ci((Circle shape))

subgraph A subgraph
    od>Odd shape]-- Two line is where it's at this is long and lets make it much longer so we can see the issue and then some<br>edge comment --> ro
    di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
    di==>ro2(Rounded square shape)
end

%% Notice that no text in shape are added here instead that is appended further down
e --> od3>Really long text with linebreak<br>in an Odd shape]

%% Comments after double percent signs
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)

cyr[Cyrillic]-->cyr2((Circle shape Начало));

 classDef green fill:#9f6,stroke:#333,stroke-width:2px;
 classDef orange fill:#f96,stroke:#333,stroke-width:4px;
 class sq,e green
 class di orange

posting a pull request for a solution to this one shortly

[phairow]

image before the fix

[phairow]

image after the fix

[phairow]

actually that might not be good enough. I just tried a simple diagram and the problem is persisting.

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

[phairow]

when rendered in chrome browser it shows the arrow heads:

[phairow]

well at this point I have it rendering properly by resizing the viewport

[knsv]

I tested your pull request and this last example renders with arrows for me. Is this still an issue?

[knsv]

I notice that this fix causes problems for the sequence diagrams. The lines actor lines go below the bottom actors. And I also notice that the arrow problem seems to be affecting the signals in the sequence diagram as well.

Is this a syncronisation issue? I could make a callback form mermaid that is called after rendering are completed.

[phairow]

Thanks for checking on this. To your first question, yes it is working after these changes. I hadn't tried sequence diagrams but I will do that today.

[knsv]

That sounds great! I appreciate your effort!

[phairow]

without the fix, it seems the bottom actors are chopped

[phairow]

with the fix, I do see the lines extending below. I think it will take a separate fix. currently I don't know why it's doing that but I think it's unrelated to this change.

[phairow]

I think the sequence diagrams don't need the 1.5 scale factor because they render the correct size without it. I will see if I can find out why that is happening. Also, I am not up to speed on mermaid itself so I'm not sure if there are some other config options that should be used.

[phairow]

I don't think a callback would help since I tried even waiting 10 seconds before rendering the png and had the same resulcs. I believe the issue with this is that there is no event or guarantee that the UI will be repainted before you render the png image. If there is such a way to force repaint it might help and resizing the viewport seems to do that.

[phairow]

I think this is an issue with mermaid rendering the lines. In the online editor I was able to select the line using chrome tools and it shows the line extending beyond the viewable area. I'm sure the fix is to set the height of that line or of the view area. I will dig further.

[knsv]

I draw the lines first to get them drawn in the bottom layer. At that time I do not know the height of the diagram so they are drawn quite tall. Then I instead I use the viewpoint to "crop" the rest.

Perhaps one could save is ids of the actors and later go back and adjust the height of the lines after rendering.

[knsv]

Now it looks good!

[phairow]

That looks great! I'm excited to try out the sequence diagrams now.

[sebelk]

Hi,
The error persists using mermaid 0.5.1 and phantomjs 1.9.8.

With the file test having:

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

rendering as:

after issuing:

mermaid -v -t   /usr/lib/node_modules/mermaid/dist/mermaid.css -g /usr/lib/node_modules/mermaid/test/gconf.json  test

Any ideas?

Thanks in advance

[sebelk]

I've tested even with latest commit: 3ec7c6d. Seq diagram is rendered well but not the flowchart.

[pi1ot]

@sebelk same question, no arrow, osx 10.10, mermaid 0.5.1

[knsv]

This is fixed but not yet released when I use the command below in the latest code I get the image below.

node ./bin/mermaid.js test/flow2.mermaid 

Hope this helps.

[niyue]

I ran into a similar problem, when used in Chrome 45, Mac OS X 10.11, mermaid 0.5.3 (the latest version currently in bower), no arrow is rendered, for both mermaid.css and mermaid.forest.css.

I found the svg has path like below:

<path class="path" d="M594.5,110L784,110L886.7729885057471,265.5" marker-end="url(http://myhost/mypage#arrowhead23)" style="fill:none"></path>

But it works if I manually modify the SVG path to be (I removed the marker-end url prefix and left only anchor):

 <path class="path" d="M594.5,110L784,110L886.7729885057471,265.5" marker-end="url(#arrowhead23)" style="fill:none"></path>

Any idea? Thanks.

[knsv]

Interesting. I have not seen that in my tests. In what context are you running this? The url that you remove, does that not match the page?

I added the http://myhost/mypage to the marker end to enable the arrow heads for sites using a base tag. Are you using a base tag or can you think of anything else that would help me to reproduce this?

I could alway add a config option to enable/disable the link to the marked but would prefer to understand the root cause.

[niyue]

I used mermaid in one of our web application, and I used requirejs to load mermaid, and this web application does not use HTML base tag.

I tried to remove the prefix in marker-end url because I saw the marker-end usage in this page (http://knsv.github.io/mermaid/sequenceDiagram.html) and the usage there does not have the http url path prefix in it.

I don't know what could be the cause yet, but in the same browser (Chrome 45 in Mac OS X 10.11), I can see the arrow in this page http://knsv.github.io/mermaid, where the marker-end has this http url path prefix in it.

And I can use Firefox 41.0.1 to reproduce this issue in the same web application, and it will work once I remove the marker-end prefix from the SVG path using the Chrome/Firefox developer tools.

As you can see in the screenshot, the first arrow is the one rendered, and the second one is the one I removed the marker-end prefix manually using developer tools.

[niyue]

After some investigation, I think I can reproduce this issue easily now. You can try this "http://knsv.github.io/mermaid/?q=test". The arrows in the page will not be shown for my Chrome 45, and the cause is the additional query parameter at the end of the URL, and in my case, I use mermaid in a web page having query parameter in the URL too.

Compared to the originally reported issue, this could be a separated issue because the original issue uses it in CLI which may not have such a query parameter problem.

[knsv]

Yes lets do that.

A seperate issue would make it easier to keep track of.

15 okt. 2015 kl. 08:33 skrev Yue notifications@github.com:

I used mermaid in one of our web application, and I used requirejs to load mermaid, and this web application does not use HTML base tag.

I tried to remove the prefix in marker-end url because I saw the marker-end usage in this page (http://knsv.github.io/mermaid/sequenceDiagram.html http://knsv.github.io/mermaid/sequenceDiagram.html) and the usage there does not have the http url path prefix in it.

I don't know what could be the cause yet, but in the same browser (Chrome 45 in Mac OS X 10.11), I can see the arrow in this page http://knsv.github.io/mermaid http://knsv.github.io/mermaid, where the marker-end has this http url path prefix in it.

And I can use Firefox 41.0.1 to reproduce this issue in the same web application, and it will work once I remove the marker-end prefix from the SVG path using the Chrome/Firefox developer tools.

https://cloud.githubusercontent.com/assets/27754/10506335/4ef3ff06-7349-11e5-8a70-c815db94936b.png
As you can see in the screenshot, the first arrow is the one rendered, and the second one is the one I removed the marker-end prefix manually using developer tools.

—
Reply to this email directly or view it on GitHub #181 (comment).

[niyue]

#225 was filed.

[knsv]

Great, thanks!

15 okt. 2015 kl. 09:06 skrev Yue notifications@github.com:

#225 #225 was filed.

—
Reply to this email directly or view it on GitHub #181 (comment).

[tylerlong]

Try the new CLI: https://github.com/mermaidjs/mermaid.cli