Is it possible to generate a small GraphViz chart?

Question

I need to generate a small graphviz graph that represents a "price map" of the main graphviz. The main graph is:

digraph g {
  graph [rankdir = "LR"];

  a [label = "<f0>a | <f1> $139  | <f2> Chair | Brown" shape = "record"];
  b [label = "<f0>b | <f1> $280  | <f2> Speakers | Grey" shape = "record"];
  c [label = "<f0>c | <f1> $89  | <f2> Jacket | Beige" shape = "record"];
  d [label = "<f0>d | <f1> $19  | <f2> Mug | Green" shape = "record"];
  e [label = "<f0>e | <f1> $180  | <f2> Printer | Grey" shape = "record"];

  a -> b; a -> c; c -> d; c -> e;
}

and it generates:

When I try to generate a "small" price map like:

digraph g {
  graph [rankdir = "LR"];
  node [shape=box];

  a[color=black, fillcolor=yellow, style=filled];
  b[color=black, fillcolor=red, style=filled];
  c;
  d;
  e[color=black, fillcolor=yellow, style=filled];

  a -> b; a -> c; c -> d; c -> e;
}

I get:

But I wanted a really small price map, like:

Is this possible?

DisappointedByUnaccountableMod · Answer 1 · 2021-07-09T22:37:09.357

You should really read the dot guide which is a pretty impressive view across using dot (although HTMl nodes don't feature so much): http://graphviz.org/pdf/dotguide.pdf

Try changing the shape to plain:

node [shape=plain];

Result:

Another possibility is to use HTML nodes - my answer in this example shows compact nodes https://stackoverflow.com/a/68320427/2318649

Another way to control spacing is useing nodesep and ranksep on the graph, for example:

digraph g {
  graph [rankdir="LR"  nodesep=0.1 ranksep=0.2];
  node [shape=plain];

  a[color=black, fillcolor=yellow, style=filled];
  b[color=black, fillcolor=red, style=filled];
  c;
  d;
  e[color=black, fillcolor=yellow, style=filled];

  a -> b; a -> c; c -> d; c -> e;
}

Result:

Another way to minimize the space inside a box node is setting margin, width and height all to 0:

digraph g {
  graph [rankdir="LR"  nodesep=0.1 ranksep=0.2];
  node [shape=box  margin=0 width=0 height=0];

  a[color=black, fillcolor=yellow, style=filled];
  b[color=black, fillcolor=red, style=filled];
  c;
  d;
  e[color=black, fillcolor=yellow, style=filled];

  a -> b; a -> c; c -> d; c -> e;
}

Result:

You can control the arrow size on each edge, e.g.:

  a -> b [arrowsize=0.5]; a -> c [arrowsize=0.5]; c -> d  [arrowsize=0.5]; c -> e;

result:

Or you can control arrowsize across all edges:

digraph g {
  graph [rankdir="LR"  nodesep=0.1 ranksep=0.2];
  node [shape=box  margin=0 width=0 height=0];
  edge [arrowsize=0.5]
  a[color=black, fillcolor=yellow, style=filled];
  b[color=black, fillcolor=red, style=filled];
  c;
  d;
  e[color=black, fillcolor=yellow, style=filled];

  a -> b; a -> c; c -> d; c -> e;
}

Result:

Read about attributes: http://graphviz.org/doc/info/attrs.html

Read about nodes: http://graphviz.org/doc/info/shapes.html

Read about using dot: http://graphviz.org/pdf/dotguide.pdf

Is it possible to generate a small GraphViz chart?

1 Answers1

Linked