# JSON input for Viz.js

**URL:** <https://forum.graphviz.org/t/json-input-for-viz-js/1738>\
**Category:** Show and Tell\
**Created:** [August 15, 2023, 6:55pm UTC](https://forum.graphviz.org/t/json-input-for-viz-js/1738 "2023-08-15T18:55:36Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mdaines](https://avatars.discourse-cdn.com/v4/letter/m/a698b9/32.png) [@mdaines](https://forum.graphviz.org/u/mdaines)\
**Post date:** [August 15, 2023, 6:55pm UTC](https://forum.graphviz.org/t/json-input-for-viz-js/1738/1 "2023-08-15T18:55:36Z")

</div>

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](https://github.com/mdaines/viz-js/commit/40f3ddd793998852d0f0be930b3d831b197e67fd)

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

```javascript
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:

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

```

---

<div class="post-metadata">

**Author:** ![steveroush](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@steveroush](https://forum.graphviz.org/u/steveroush)\
**Post date:** [August 16, 2023, 11:06pm UTC](https://forum.graphviz.org/t/json-input-for-viz-js/1738/2 "2023-08-16T23:06:56Z")

</div>

[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](https://graphviz.org/docs/outputs/json/))
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](https://graphviz.org/doc/info/command.html))

---

<div class="post-metadata">

**Author:** ![mdaines](https://avatars.discourse-cdn.com/v4/letter/m/a698b9/32.png) [@mdaines](https://forum.graphviz.org/u/mdaines)\
**Post date:** [August 17, 2023, 1:57pm UTC](https://forum.graphviz.org/t/json-input-for-viz-js/1738/3 "2023-08-17T13:57:46Z")

</div>

> 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:

```javascript
{
  "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](https://github.com/mdaines/viz-js/issues/185))

---

<div class="post-metadata">

**Author:** ![smattr](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/smattr/32/85_2.png) [@smattr](https://forum.graphviz.org/u/smattr)\
**Post date:** [August 18, 2023, 9:39am UTC](https://forum.graphviz.org/t/json-input-for-viz-js/1738/4 "2023-08-18T09:39:55Z")

</div>

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.