Unable to generate gantt diagram with mermaid CLI

[mrtazz]

Hi!

This project looks super awesome and I wanted to give it a try to play with generating some Gantt diagrams. However after a couple of attempts I'm unable to even generate a png with the mermaid cli from the example given on the page. I've installed it from GitHub master as I ran into the problem with comments not being parseable which is fixed with #141. However it still breaks for me with comments and it also breaks with some missing attribute "height" in the phantomjs phase. I've tried to generate png and svg with -p and -s as well. The png run shows the same output and the svg run generates a broken svg with a giant black box. I have no idea how to debug this, so any pointers would be great. If attached some information below, let me know if there's something else I can provide.

% mermaid --version
0.4.0

% npm list -g | grep mermaid
├─┬ mermaid@0.4.0 (git://github.com/knsv/mermaid.git#11a30dd50541b107cadfa57e20add80c34094867)

# with comment
% mermaid gantt.mmd
CONSOLE: Mermaid Syntax error: (from line #undefined in "undefined")
CONSOLE: Parse error on line 2:
...lection of syntaxesgantt        dateFo
----------------------^
Expecting 'NEWLINE', 'SPACE', 'GRAPH', got 'ALPHA' (from line #undefined in "undefined")
TypeError: 'undefined' is not an object (evaluating 'action[0]')

  ../dist/mermaid.full.js:27485 in parse
  ../dist/mermaid.full.js:25891
  ../dist/mermaid.full.js:30956
  ../dist/mermaid.full.js:31018
  phantomjs://webpage.evaluate():33 in executeInPage
  phantomjs://webpage.evaluate():39
  phantomjs://webpage.evaluate():39
PHANTOM ERROR: TypeError: 'null' is not an object (evaluating 'element.setAttribute')
TRACE:
 -> /usr/local/lib/node_modules/mermaid/lib/phantomscript.js: 156 (in function resolveSVGElement)
 -> /usr/local/lib/node_modules/mermaid/lib/phantomscript.js: 76%                                                                                                        

# without comment
% mermaid gantt.mmd
PHANTOM ERROR: TypeError: 'null' is not an object (evaluating 'oDOM.documentElement.attributes.getNamedItem('height').value')
TRACE:
 -> /usr/local/lib/node_modules/mermaid/lib/phantomscript.js: 88%                                                                                                        

% cat gantt.mmd
%% Example with slection of syntaxes
gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid

        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2               :         des4, after des3, 5d

        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d

        section Documentation
        Describe gantt syntax               :active, a1, after des1, 3d
        Add gantt diagram to demo page      :after a1  , 20h
        Add another diagram to demo page    :doc1, after a1  , 48h

        section Last section
        Describe gantt syntax               :after doc1, 3d
        Add gantt diagram to demo page      : 20h
        Add another diagram to demo page    : 48h

[knsv]

Hello!

Turned out to be some issues with that. Given the recent changes... :)

Youc an generate the gannt diagram with something like this command line:
node bin/mermaid.js -t ./dist/mermaid.forest.css -g ./test/gconfig.json test/gantt.mmd

You need to add some width for the body in the css to make it a bit wider then the default.

This is committed and pushed but not yet (fully tested and) included in a release.

[knsv]

(And yes I noticed the %% in before the graph definition messes thing up... Will look at that sometime, you can have comments in the defintion though).

[mrtazz]

oh sweet, I will give it a try. Thanks for the quick response!

[mrtazz]

Just to follow up here. I couldn't get the cli to work as it kept breaking for configuration missing. But I got some basic charts working in the browser. Just needs some more CSS tweaking :)

[knsv]

Yeah I can see how that would have been unclear. Sorry about that. So the command line would be:

node bin/mermaid.js -t ./dist/mermaid.forest.css -g ./test/gconfig.json test/gantt.mmd

A sample config file would contain:

{
"titleTopMargin":25,
"barHeight":20,
"barGap":4,
"topPadding":50
,"sidePadding":75,
"gridLineStartPadding":35,
"fontSize":11
,"numberSectionStyles":3
}

I used the chart definition above without the leading %%. The configuration regarding the axis formatting will not work, so I have excluded that. This is because it contains javascript and the configuration is in a JSON file.

I hope this makes it easier to get things to work.

[mrtazz]

awesome, that works! Somehow I managed to break something before as I ran almost the same thing. Thanks again!

[knsv]

A fix for this has been released in version 0.5.0