Gantt diagrams too narrow

timtro commented 7 years ago

Thanks in advance. I used the example form the site. I get the output pictured below

proposal-gantt mmd

and I would hope for something like this.

In this particular example, my result is not too bad. But most of my personal charts have collisions and text overruns. For example, proposal-gantt mmd

I'm using Ubuntu, latest. Installed as npm install mermaid. I installed phantomjs via phantomjs-prebuilt, and

> mermaid --version
7.0.0
> phantomjs --version
2.1.1

I get the same problem when I pull from git, and use the deprecated npm phantomjs.

I am using no modified/custom configurations or CSS. Everything is just out of the box.

The -w flag has no effect.

linxxx3 commented 7 years ago

+1

CapitanPrimate commented 7 years ago

+1

tylerlong commented 7 years ago

I think the problem is caused by some CSS. CSS code limits the width of the page content.

I write an example and the gatt diagram takes the full page width. So the digram could be as wide as your monitor.

Sample code:


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Mermaid Quick Test Page</title>
  <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
  <link rel="stylesheet" href="mermaid.css">
</head>
<body>
  <div class="mermaid">
gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram 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
  </div>

  <script src="mermaid.js"></script>
  <script>
    mermaid.initialize({startOnLoad:true});
  </script>
</body>
</html>

marmanold commented 7 years ago

+1 A fix for this in the CLI would be much appreciated. I'll give the code a look when I have a moment, but passing the width argument to PhantomJS might resolve this issue.

aarnchng commented 7 years ago

I manage to resolve my generated gantt diagrams being too narrow by passing in a css file using -t option of mermaid CLI. The css file is actually a duplicate copy of the file mermaid.css in the folder npm\node_modules\mermaid\dist. I append the following lines to the above-mentioned file.

div.mermaid {
  width: 1192px;
}

tylerlong commented 6 years ago

We do not use PhantomJS any more. Ref: https://github.com/mermaidjs/mermaid.cli

Feel free to create a new issue for the latest version.

mermaid-js / mermaid

Gantt diagrams too narrow #493