Gantt diagrams too narrow #493
Comments
|
+1 |
1 similar comment
|
+1 |
|
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> |
|
+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. |
|
I manage to resolve my generated gantt diagrams being too narrow by passing in a css file using div.mermaid {
width: 1192px;
} |
|
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. |
Bumps [random-word-slugs](https://github.com/nas5w/random-word-slugs) from 0.1.5 to 0.1.6. - [Release notes](https://github.com/nas5w/random-word-slugs/releases) - [Commits](nas5w/random-word-slugs@v0.1.5...v0.1.6) --- updated-dependencies: - dependency-name: random-word-slugs dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Thanks in advance. I used the example form the site. I get the output pictured below
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,
I'm using Ubuntu, latest. Installed as
npm install mermaid. I installed phantomjs viaphantomjs-prebuilt, andI 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
-wflag has no effect.The text was updated successfully, but these errors were encountered: