Width fixed to 400px

[piranna]

In the CLI or when using the API, the flowchart graphs are always width 400px, so when having somewhat complex charts the letters and boxes get small and blurry. Online editor don't happen to have this problem, showing them full size.

[knsv]

Hello! I think this can be fixed. I am struggling to recreate the problem.

What version do you run?
Also what is the width of the surrounding element? Perhaps there is not room for your graph which possibly could could explain the smaller width.

[piranna]

What version do you run?

0.5.1

Also what is the width of the surrounding element? Perhaps there is not room for your graph which possibly could could explain the smaller width.

I'm generating it from the command line... I was using it before on GitBook using gitbook-plugin-mermaid but normal images are shown with their real size or its width adjusted to the book width, so I don't think the problem would be here...

If you are interested, the next block:

graph BT
  subgraph initramfs
    / === ibin[bin]
    / --- DEV((dev))
    / === ilib[lib]
    / --- proc((proc))
    / === tmp

    /   === usr
    usr === bin
    bin === ENV(env)

    tmp --- root
    tmp --- users((users))

    root --- RDEV((dev))
    root --- rproc((proc))
    root --- rtmp((tmp))

    root --- home((home))
  end

  subgraph usersfs
    .workdirs
    nodeos
    uroot[root]

    nodeos --- NDEV((dev))
    nodeos --- nproc((proc))
    nodeos --- ntmp((tmp))
  end

  home === .workdirs
  home === nodeos
  home === uroot

  users -.-> home

  DEV  -.- NDEV
  proc -.- nproc

  DEV  -.- RDEV
  proc -.- rproc

Loading

is generating the next image

As you can see, the image is 400px width and you can hardly read the text labels or see the lines patterns... :-/

[Daijobou]

I would like to set a max-width (and max-height). I have a fluid design (responsive), so widescreen have much more space. ;)

[piranna]

Also, I think the borders width should be removed so image can adjust better and don't waste space...

[knsv]

@piranna I can reproduce your issue. The easy fix is to not use maxWidth in the mermaid settings. In your case this would mean a width of around 1200 px. With maxWidth set mermaid tries to make the flowchart no wider then the surrounding element. If it is smaller it stays smaller otherwise small flowcharts can look a bit big... :)

I am not sure how the plugin generates the images. If it is using the api in the you use the flowchart config settings to turn this of as outlined below:

        var config = {
            startOnLoad:true,
            htmlLabels:true,
            callback:function(id){
                console.log(id,' rendered');
            },
            flowchart:{
                    useMaxWidth:false,
                }
        };
        mermaid.initialize(config);

The cli needs an update to change the default value of having maxWidth set.

[piranna]

The easy fix is to not use maxWidth in the mermaid settings. In your case this would mean a width of around 1200 px.

I can confirm that this fix it :-) Lines patterns are not shown, but at least text is now readable :-P

With maxWidth set mermaid tries to make the flowchart no wider then the surrounding element. If it is smaller it stays smaller otherwise small flowcharts can look a bit big... :)

Well, this could be done better with another approach, having elements with a fixed size and getting the graph as big as needed instead of the inverse (having the graph a fixed size and being elements as big as possible). Since first they are generated as SVG graphics, maybe the problem is when converting them to PDF assigning them a fixed width via CSS instead lefting it to auto...

I am not sure how the plugin generates the images.

It works by crafting and ad-hoc html page injecting the graph description and rendering it with PhantomJS. A bit cumbersome (I would have used node-canvas + Raphaël instead to be Node.js pure), but plugin is not mine...

[knsv]

I'm glad it helped!
tors 17 sep 2015 kl. 22:10 skrev Jesús Leganés Combarro <
notifications@github.com>:

The easy fix is to not use maxWidth in the mermaid settings. In your case
this would mean a width of around 1200 px.

I can confirm that this fix it :-) Lines patterns are not shown, but at
least text is now readable :-P

With maxWidth set mermaid tries to make the flowchart no wider then the
surrounding element. If it is smaller it stays smaller otherwise small
flowcharts can look a bit big... :)

Well, this could be done better with another approach, having elements
with a fixed size and getting the graph as big as needed instead of the
inverse (having the graph a fixed size and being elements as big as
possible). Since first they are generated as SVG graphics, maybe the
problem is when converting them to PDF assigning them a fixed width via CSS
instead lefting it to auto...

I am not sure how the plugin generates the images.

It works by crafting and ad-hoc html page injecting the graph description
and rendering it with PhantomJS. A bit cumbersome (I would have used
node-canvas + Raphaël instead to be Node.js pure), but plugin is not mine...

—
Reply to this email directly or view it on GitHub
#204 (comment).

[piranna]

I'm glad it helped!

Thank you! :-) I've fixed it for gitbook-plugin-mermaid at piranna/gitbook-plugin-mermaid@ee9838f :-)

[sgerke]

Is the CLI already fixed? I tried to generate a more complex diagram from 0.5.3 (installed via npm) and still see a very low resolution (554 x 241).

[knsv]

No… :(

Many aspects, default config for flowcharts using CLI is to not use maxWidth and no way to set it. Will fix this in two ways.

1. default setting should be to have maxWidth false for the CLI for flowcharts
2. it should be possible to set all options as one object instead of having sequenceConfig/ganttConfig separately

[vertti]

CLI is pretty much unusable until this is fixed :(

[knsv]

Will try to make a small 0.5.4 release fairly soon