Mermaid Gantt sizing bug caused by asciidoctor-diagram (forcing all Gantts to have heights <= 210 px)

[greglearns]

TL;DR: It appears that Asciidoctor-diagram is taking Mermaid Gantt results, and then forcing all Mermaid Gantt results to fit within 210px height, which causes Gantt charts with more than 8 elements in them to shrink until they are illegible.

This adoc file (you can select-all and then cut and paste) illustrates that Mermaid Gantt images will start to shrink if there are more than 8 elements in them.

It does not appear to be an error inside of Mermaid since these both look fine (using the 1st and 3rd example below):

8 elements display correctly when not done through Asciidoctor-diagram
15 elements display correctly in Mermaid when not done through Asciidoctor-diagram

== Example where Asciidoctor-diagram renders Mermaid Gantt correctly

.Full-size, everything looks good with 8 elements
[mermaid,"generated/full-size","png"]
....
gantt
A1 :2016-12-16, 1d
B2 :1d
B3 :1d
B4 :1d
B5 :1d
B6 :1d
B7 :1d
B8 :1d
....

== Example where Asciidoctor-diagram DOES NOT renders Mermaid Gantt correctly

.Oh oh, starting to shrink with 9 elements
[mermaid,"generated/shrinking1","png"]
....
gantt
A1 :2016-12-16, 1d
B2 :1d
B3 :1d
B4 :1d
B5 :1d
B6 :1d
B7 :1d
B8 :1d
B9 :1d
....

.Oh oh, really shrinking with 15 elements
[mermaid,"generated/shrinking1","png"]
....
gantt
A1 :2016-12-16, 1d
B2 :1d
B3 :1d
B4 :1d
B5 :1d
B6 :1d
B7 :1d
B8 :1d
B9 :1d
B10 :1d
B11 :1d
B12 :1d
B13 :1d
B14 :1d
B15 :1d
....

It appears that Asciidoctor-diagram is taking the Mermaid Gantt results, and then forcing all Mermaid Gantt results to fit within 210px height.

Also want to say: loving Asciidoctor and Asciidoctor-diagram! Thank you so much!

[pepijnve]

I ran some quick tests with your examples. It seems to be the default way mermaid renders these gantt charts that's causing the shrinkage. If I copy the diagram definition to a file and run mermaid <inputfile> manually, I get the exact same results as what you see with asciidoctor. Console output shows that a fixed default width is being used

mermaid shrinking.mmd
Num files to execute : 1
ready to execute png: shrinking.mmd.png 
CONSOLE: [19:47:15 (599)]  Starting rendering diagrams (from line # in "")
CONSOLE: [19:47:15 (599)]  Start On Load before: undefined (from line # in "")
CONSOLE: [19:47:15 (599)]  Initializing mermaidAPI (from line # in "")
CONSOLE: [19:47:15 (599)]  Setting conf  gantt - useWidth (from line # in "")
CONSOLE: [19:47:15 (600)]  Setting config: gantt useWidth to 1200 (from line # in "")
CONSOLE: Deprecation warning: moment construction falls back to js Date. This is discouraged and will be removed in upcoming major release. Please refer to https://github.com/moment/moment/issues/1407 for more info.
Arguments: [object Object]
undefined (from line # in "")
saved png: shrinking.mmd.png

I'll have to figure out how this can be controlled and how to integrate that in asciidoc.

[pepijnve]

I spent some time trying to figure out how to control this with mermaid, but I'm not having much success. The documentation on how to configure gantt diagram generation is pretty sparse. Perhaps you should raise this issue in the mermaid project, since I don't think there's much I can do about this.

If the answer turns out to be that you need a gantt config file, you can already specify the path to one of these using block attributes. I've added information about this to the README.