Mermaid: Arrow heads missing (cli, 7.0.3)

[asgoth]

Arrow heads are missing, when using the cli (version 7.0.3).

Last version which worked: 7.0.0

Test case:

graph TD
    A --> B
    B -.-> C

Which results in the following image:

Cli arguments used:

"mermaid": "mermaid documentation/resources/*.mmd --phantomPath node_modules/.bin/phantomjs --outputDir documentation/resources -w 400",

[tylerlong]

I tested the web version and it seemed OK. So this problem is probably a cli specific issue.

[K4zuki]

I am facing same, arrow heads missing

seems it only happens on flowchart.
from repo top README only this one does not work as expected:

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

---

• ubuntu 16.04
• nodejs 4.2.6
• mermaid(from npm) 7.0.3

---

• This might be helpful:

$ mermaid data/classes.mmd -v
Num files to execute : 1
ready to execute: data/classes.mmd
CONSOLE: %c 15:38:37 (661) :%cDEBUG:  color:grey; color: green; Starting rendering diagrams (from line # in "")
CONSOLE: %c 15:38:37 (661) :%cDEBUG:  color:grey; color: green; Start On Load before: true (from line # in "")
CONSOLE: %c 15:38:37 (661) :%cDEBUG:  color:grey; color: green; Start On Load inner: true (from line # in "")
CONSOLE: %c 15:38:37 (661) :%cDEBUG:  color:grey; color: green; Initializing mermaidAPI (from line # in "")
CONSOLE: %c 15:38:37 (661) :%cDEBUG:  color:grey; color: green; Initializing mermaidAPI (from line # in "")
CONSOLE: %c 15:38:37 (661) :%cDEBUG:  color:grey; color: green; Drawing flowchart (from line # in "")
CONSOLE: %c 15:38:37 (661) :%cINFO:  color:grey; color: info; Got edge... A B (from line # in "")
CONSOLE: %c 15:38:37 (661) :%cINFO:  color:grey; color: info; Got edge... A C (from line # in "")
CONSOLE: %c 15:38:37 (661) :%cINFO:  color:grey; color: info; Got edge... B D (from line # in "")
CONSOLE: %c 15:38:37 (661) :%cINFO:  color:grey; color: info; Got edge... C D (from line # in "")
CONSOLE: %c 15:38:37 (661) :%cINFO:  color:grey; color: info; Got edge... A B (from line # in "")
CONSOLE: %c 15:38:37 (661) :%cINFO:  color:grey; color: info; Got edge... A C (from line # in "")
CONSOLE: %c 15:38:37 (661) :%cINFO:  color:grey; color: info; Got edge... B D (from line # in "")
CONSOLE: %c 15:38:37 (661) :%cINFO:  color:grey; color: info; Got edge... C D (from line # in "")
saved png: /home/yamamoto/workspace/AkiSpiLcd/classes.mmd.png

• classes.mmd contains the source above

[MartB]

Confirmed broken with multiple of my diagrams.
Any eta for a fix or a pointer on why this got introduced ?

[tylerlong]

Could anybody confirm: does version 7.0.0 have this issue or not?

[K4zuki]

@tylerlong
7.0.0 worked on Mac

[tylerlong]

I upgraded the library from 7.0.0 to 7.0.3. I didn't change any major logic. One possible reason might be I upgraded phantomjs to latest version.

I will definitely take a look. Maybe we will replace phantomjs with headless Chrome. For now, please stick to 7.0.0. Because 7.0.3 adds no new feature (major change is webpack support added)

[wangnangg]

Looking at the generated SVG, it seems that the reference of the arrow head definition is not correct.
It should be "url(#arrowhead)" instead of "url(about:blank #arrowhead)" . Hope this helps.

[tylerlong]

I am sorry I have been busy with my daily job. Now I am back to the mermaid development.

I just did a quick test in the live editor: https://mermaidjs.github.io/mermaid-live-editor/#/edit/Z3JhcGggVEQKICAgIEEgLS0+IEIKICAgIEIgLS4tPiBDCg==

There is no problem. So I think this is a CLI only issue and it is most likely caused by PhantomJS.

PhantomJS is discontinued: http://carstenwindler.de/software-testing/phantomjs-is-discontinued/

Here are my plans:

1. Try to fix the issue with PhantomJS
2. If #1 doesn't work, investigate jsdom: https://github.com/knsv/mermaid/issues/559

[GTB3NW]

tylerlong, headless chromium is also an option now.

Just confirming I still have the issue in CLI 7.0.4

[KeenS]

I faced the same issue on both the Demo page and Online Editor

Arrow heads of the last 2 lines are missing

And when I inspect it, arrow heads aren't even in SVG tree

Note: I'm using Firefox 55 on Linux

[tylerlong]

@KeenS

It is by design: https://mermaidjs.github.io/sequenceDiagram.html

Type | Description
-- | --
-> | Solid line without arrow
--> | Dotted line without arrow
->> | Solid line with arrowhead
-->> | Dotted line with arrowhead
-x | Solid line with a cross at the end (async)
--x | Dotted line with a cross at the end (async)

---

@All,

I confirm that flowchart has this arrow missing issue, while sequence diagram works as expected.

I have found the root cause and I will fix it soon.

[KeenS]

@tylerlong I'm sorry and thank you for telling me the documentation. I missed it.

[dslztx]

My solution is as follows:

sudo npm install [email protected] -g 
sudo npm install [email protected] -g 

By the way,there not exist double sided arrow markup in flowchar,is it right?

[tylerlong]

Guys, sorry for the delay.

Please check this project: https://github.com/mermaidjs/mermaid.cli I replaced PhantomJS with puppeteer.

I want to move CLI out of mermaid main project in the near future.

It's new so there might be bugs. Its code is deadly simple so everyone here can contribute: https://github.com/mermaidjs/mermaid.cli/blob/master/index.js

I will keep this issue open till the end of this week. Please reply if you still have issues.