JSON input for Viz.js

Show and Tell
1

Hi, I’m the maintainer of Viz.js, a project that builds Graphviz with Emscripten and provides a wrapper for using it in JavaScript. The project was inactive for a while, but I started working on it again this year.

Viz.js will render graphs written in DOT syntax, but that’s often inconvenient if you want to render something based on model objects in your program, since you need to build a string and worry about quoting, etc. Generally wrapper libraries offer a richer interface, so you can create a graph object, add nodes and edges, and then render it. I’d like to provide similar functionality, but I don’t want Viz.js to return a graph object that has to be manually closed by a user of the library.

The direction I’ve taken so far is to accept plain JavaScript objects (which could be serialized as JSON) as input for rendering. I’m curious to know what people think of the schema I’ve come up with.

Commit that adds this to Viz.js

Here’s an example of what it looks like in code:

viz.render({
  defaultAttributes: {
    node: { shape: "circle" }
  },
  nodes: [
    {
      name: "a",
      attributes: { label: "A", color: "red" }
    }
  ],
  edges: [
    { tail: "a", head: "b" }
  ],
  subgraphs: [
    {
      name: "cluster_1",
      nodes: [
        {
          name: "b",
          attributes: { label: "B", color: "blue" }
        }
      ]
    }
  ]
});

Which should be equivalent to this in DOT:

digraph {
  node [shape=circle];
  a [label=A, color=red];
  a -> b;
  subgraph cluster_1 {
    b [label=B, color=blue];
  }
}
2 Likes
2

[I am pretty JSON ignorant, so forgive me if my questions make no sense]

  1. Is your proposed JSON input consistent with any/all of the JSON output definitions? (JSON | Graphviz)
  2. There are a few command-line options that are not covered by the dot language. What are your plans for specifying the output format (-T)? And do you have plans for the -x and -y options? (Command Line | Graphviz)
3

Is your proposed JSON input consistent with any/all of the JSON output definitions?

It’s a different structure, more like DOT. Attributes are written similarly, though.

The example above would look more like this if it were consistent with Graphviz’s JSON output:

{
  "directed": true,
  "strict": false,
  "objects": [
    {
      "name": "cluster_1",
      "nodes": ["b"]
    },
    {
      "name": "a",
      "color": "red",
      "label": "A",
      "shape": "circle"
    },
    {
      "name": "b",
      "color": "blue",
      "label": "B",
      "shape": "circle"
    }
  ],
  "edges": [
    { "tail": "a", "head": "b"}
  ]
}

There are a few command-line options that are not covered by the dot language.

Viz.js currently supports the equivalent of -K (layout engine), -T (output format), -y (invert y coordinates in output). The next release will support -G, -N, and -E (default attributes).

Supporting -x seems similar to -y, so I think it makes sense to add that. (GitHub issue)

1 Like
4

If there’s things you’d like to change or improve in the -Tjson output, please feel free to propose these as Gitlab issues or merge requests too.