Mermaid: classDiagramm example fails on macOs

[chbndrhnns]

When I run mermaid 6.0.0 on the classDiagram example I get a picture as attached.

[knsv]

Hello. That looks like some styling is lost. Is the mermaid.css in place?

[chbndrhnns]

All other examples can be compiled without problems.

For this, I created a virtualenv, ran
npm install mermaid --save-dev
and which mermaid gives me
.virtualenvs/mermaid/bin/mermaid.

Specifying the -t option with the normal mermaid.css does help not either and the debug output looks like this: http://pastebin.com/y5vjp2jV

[terciodemelo]

Not only in Mac, it is also failing in my ubuntu 16.04, with node v6.3.1, phantomjs 2.1.1, and mermaid 6.0.0. I get the same output =(

[terciodemelo]

It is probably a parsing problem, when I use a %% before the diagram it fails completly, below is the diagram code as I used, and bellow it is the error message when running mermaid <file_name>:

%% A Class diagram
classDiagram
    Class01 <|-- AveryLongClass : Cool
    Class03 *-- Class04
    Class05 o-- Class06
    Class07 .. Class08
    Class09 --> C2 : Where am i?
    Class09 --* C3
    Class09 --|> Class07
    Class07 : equals()
    Class07 : Object[] elementData
    Class01 : size()
    Class01 : int chimp
    Class01 : int gorilla
    Class08 <--> C2: Cool label

Output:

Num files to execute : 1
ready to execute png: class_diagram_example.png
CONSOLE: [17:38:07 (172)]  Starting rendering diagrams (from line # in "")
CONSOLE: [17:38:07 (172)]  Start On Load before: undefined (from line # in "")
CONSOLE: [17:38:07 (172)]  Initializing mermaidAPI (from line # in "")
CONSOLE: [17:38:07 (172)]  Setting conf  gantt - useWidth (from line # in "")
CONSOLE: [17:38:07 (172)]  Setting config: gantt useWidth to 1200 (from line # in "")
CONSOLE: [17:38:07 (174)]  Detected classDiagram syntax (from line # in "")
CONSOLE: [17:38:07 (175)]  {
  "message": "Parse error on line 1:\n%% A Class diagramclassDiagram    Cl\n------------------^\nExpecting 'CLASS_DIAGRAM', got 'NEWLINE'",
  "hash": {
    "text": "\n",
    "token": "NEWLINE",
    "line": 1,
    "loc": {
      "first_line": 1,
      "first_column": 0,
      "last_line": 1,
      "last_column": 0
    },
    "expected": [
      "'CLASS_DIAGRAM'"
    ]
  },
  "line": 49466,
  "sourceURL": "phantomjs://code/mermaid.js",
  "stack": "parseError@phantomjs://code/mermaid.js:49466:49\nparse@phantomjs://code/mermaid.js:49551:36\ndraw@phantomjs://code/mermaid.js:49179:13\nrender@phantomjs:/
/code/mermaid.js:58825:31\nrender@phantomjs://code/mermaid.js:58882:30\n_init@phantomjs://code/mermaid.js:58250:26\nexecuteInPage\n\nglobal code\nevaluateJavaScript@[
native code]\nevaluate@phantomjs://platform/webpage.js:390:39\nphantomjs://code/phantomscript.js:92:29\nforEach@[native code]\nglobal code@phantomjs://code/phantomscr
ipt.js:79:14"
} (from line # in "")
saved png: class_diagram_example.png

[terciodemelo]

I've done some more research and I found an isolated testable environment, the most popular mermaid container in Docker Hub, which also is not able to correctly render a class diagriam such as:

  Class03 *-- Class04

Resulting in the following image:

[odravison]

Still falling in atom-mermaid plugin.

[aeracode]

same issue (6.0.0, 7.0.0) I've downloaded and use js and css on local machine.
os: win 7 64x
browser: chrome

update:
mermaid.forest.css contains required css classes, so diagram works with Forest theme.

[yudenzel]

Looks into the src/less/ folder, seems that only forest and neutral contains classDiagram.less.

[yudenzel]

The content in src/less/forest/classDiagram.less looks generic.

Could we copy it to src/less/default/ to build the style needed by classDiagram for default theme?

[knsv]

Good idea!

[stale[bot]]

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.