Specifying output dimensions or ratio

Thank you for this awesome project ❤️ — this is more of a feature request / support issue. I don’t have much experience with GraphViz, so please excuse me if I’m missing something obvious.

Expected Behavior

For charts that could potentially be large, it would be helpful to be able to specify the ratio or output dimensions so that graphs are properly laid out.

Current Behavior

When I produce an SVG with the following smcat code:

initial,
undefined,
fooState {
  foo -> bar: barEvent;
  foo -> baz: bazEvent;
  bork -> foo: fooEvent;
  bork -> bar: barEvent;
  foo -> bork: borkEvent;
  foo -> bar: barEvent;
  foo -> baz: bazEvent;
  bar -> foo: fooEvent;
  bar -> baz2: bazEvent;
  baz -> bork: borkEvent;
  baz -> foo: fooEvent;
  baz -> bar: barEvent;
  baz2 -> bork: borkEvent;
  baz2 -> foo: fooEvent;
  baz2 -> bar: barEvent;
},
initFooState {
  initbar -> initFoo: bazEvent;
  initFoo -> foo: fooEvent;
  initbar -> foo: fooEvent;
};

initial -> undefined;

undefined -> foo: fooEvent;

undefined -> initFoo: bazEvent;
undefined -> initFoo: unstartedEvent;
undefined -> initbar: barEvent;

initFoo -> bork: borkEvent;

… using left-to-right layout, I get quite a wide image:

Using the default, the labels and arrows are overlapping quite often:

Hence, I chose the LTR variant.

Possible Solution

Could the layout options for rendering the output be somehow specified, e.g. using a -r option?

I imagine a parameter that would set the ratio such as described here: https://www.graphviz.org/doc/info/attrs.html#d:ratio

Your Environment

• Version used: 4.2.0
• Node version: v11.0.0
• Operating System and version: macOS 10.13

[sverweij]

Thanks for the rationale for adding the ratio/ dimensions parameters.

Graph level parameters will probably follow in the course of this week - I’ll keep you posted.

B.t.w. until that has landed, as a quick hack, you can insert graph level parameters using the native dot’s -G command line parameter. E.g. to get output that is as high as it’s wide and has a width of 8 inch you could use:

smcat --direction left-right -T dot -o - your_statemachine.smcat | dot -Tsvg  -Gsize="8,0" -Gratio=1 > your_statemachine.svg

(Similarly you can use -N and -E attributes to set things for all nodes and edges respectively)

[sverweij]

hi @slhck thanks for raising this issue. It has annoyed me for a while as well - this gives me an incentive to seriously attempt a fix.

IMHO the left-to-right graph needs to look better out of the box for the majority of cases, without the need for manual tweaking; so that’s what I’m going to try first. If that fails, I’ll look into exposing the underlying interface (e.g. by passing on node separation, ratio and/ or other graph level tweaks).