Cli error rendering stateDiagram on MacOs

[PaoloneM]

Describe the bug
Error generating image from .mmd with mmdc installed via npm when input file starts with a state diagram:

(node:63597) UnhandledPromiseRejectionWarning: Error: Evaluation failed: Error: Parse error on line 1:
stateDiagram	[*] --
^
Expecting 'NEWLINE', 'SPACE', 'GRAPH', got 'ALPHA'
    at Yt.parseError (file:///Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/mermaid.cli/mermaid.min.js:1:486512)
    at Yt.parse (file:///Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/mermaid.cli/mermaid.min.js:1:487678)
    at Object.e.getClasses (file:///Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/mermaid.cli/mermaid.min.js:1:749437)
    at Object.render (file:///Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/mermaid.cli/mermaid.min.js:1:759998)
    at s (file:///Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/mermaid.cli/mermaid.min.js:8:233)
    at Object.init (file:///Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/mermaid.cli/mermaid.min.js:8:318)
    at __puppeteer_evaluation_script__:17:20
    at ExecutionContext._evaluateInternal (/Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/puppeteer/lib/ExecutionContext.js:122:13)
    at process._tickCallback (internal/process/next_tick.js:68:7)
  -- ASYNC --
    at ExecutionContext.<anonymous> (/Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/puppeteer/lib/helper.js:111:15)
    at ElementHandle.evaluate (/Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/puppeteer/lib/JSHandle.js:55:42)
    at ElementHandle.<anonymous> (/Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/puppeteer/lib/helper.js:112:23)
    at ElementHandle.$eval (/Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/puppeteer/lib/JSHandle.js:478:40)
    at process._tickCallback (internal/process/next_tick.js:68:7)
  -- ASYNC --
    at ElementHandle.<anonymous> (/Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/puppeteer/lib/helper.js:111:15)
    at DOMWorld.$eval (/Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/puppeteer/lib/DOMWorld.js:156:21)
    at process._tickCallback (internal/process/next_tick.js:68:7)
  -- ASYNC --
    at Frame.<anonymous> (/Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/puppeteer/lib/helper.js:111:15)
    at Page.$eval (/Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/puppeteer/lib/Page.js:347:29)
    at Page.<anonymous> (/Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/puppeteer/lib/helper.js:112:23)
    at /Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/mermaid.cli/index.bundle.js:83:14
    at Generator.next (<anonymous>)
    at step (/Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/mermaid.cli/index.bundle.js:4:191)
    at /Users/pmorgano/Developement/projects/UmlFlowsCentraleOperativa/node_modules/mermaid.cli/index.bundle.js:4:361
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:63597) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:63597) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

To Reproduce
Steps to reproduce the behavior:
Test.mmd file content:

stateDiagram
	[*] --> Still
	Still --> [*]

	Still --> Moving
	Moving --> Still
	Moving --> Crash
	Crash --> [*]

Command line:

./node_modules/.bin/mmdc -i graphs/Test.mmd assets/Test.png

Expected behavior
Test.png is rendered

Desktop (please complete the following information):

• OS: macOS Catalina 10.15.2
• Node version: v10.16.0 and v13.7.0
• Cli Version:

 "mermaid.cli": {
      "version": "0.5.1",
      "resolved": "https://npm.ff3d.com/mermaid.cli/-/mermaid.cli-0.5.1.tgz",
      "integrity": "sha512-03aKyM1nH86Hk16xiP7Hiswg2CuJ4iFkwDdWln00Irx4E81fy1FPUzXon3JVckp1MkxKtDHJlg3SudlLwKsndQ==",
      "dev": true,
      "requires": {
        "chalk": "^2.4.1",
        "commander": "^2.15.1",
        "puppeteer": "^1.4.0"
      }
    }```

**Additional context**
VScode preview and Live editor preview do work with the same file content

[styts]

I just had something like this... You have "version": "0.5.1", the current is "8.4.8" - you're waaay behind.
Maybe you made the same error as me and installed the old "mermaid.cli" npm package? The correct package is installed with npm install @mermaid-js/mermaid-cli.

[styts]

@tylerlong could the old repo be made more explicit about avoiding this confusion? warning signs, npm package deletion or modification to show a warning right away if installed?

[PaoloneM]

I just had something like this... You have "version": "0.5.1", the current is "8.4.8" - you're waaay behind.
Maybe you made the same error as me and installed the old "mermaid.cli" npm package? The correct package is installed with npm install @mermaid-js/mermaid-cli.

@styts you're totally right, I was stuck against old repo, didn't realize there are two different repos. Removing the old and installing new one solved my issue. Many thanks for pointing me there.

[Kochise]

https://www.npmjs.com/package/mermaid.cli (v0.5.1) : installation cli still mention the old repo, how are people supposed to know ? Is there someone updating those packages and wiki pages ?

[MindaugasLaganeckas]

@Kochise : the readme has been updated in the mermaid.cli repo https://github.com/mermaidjs/mermaid.cli/

[lorenzznerol]

@MindaugasLaganeckas There is still a confusion. I also made the mistake of installing from the old repo. I saw the updated readme and clicked on the link, but the new repo readme starts with mmdc commands, and I even scrolled a bit but did not see the install commands. I jumped back, expecting that I needed the install commands from the first repo. Then, only npm worked for me, but at least, it worked in parts (except for the autonumber).

The same outdated command is on the official npm site which is as outdated as the outdated old repo which made it even clearer for me that the command had to be right.

The install commands also did not seem strange or outdated as regards the naming. When I jumped between the repos, I did not look at the version. I have lost an hour or two with this. Stupidity, but it happens, especially with 50 tabs open. It would be best if there was a comment directly on top of the old install commands of yarn and npm saying that these commands are outdated.

[jgreywolf]

Transferring issue to cli repo

[aloisklink]

Duplicate of #433