JSON Crack – A tool that generates graph diagrams from JSON objects | Hacker News Reader

JSON Crack – A tool that generates graph diagrams from JSON objects

github.com

230 pointsgjvc45 comments

Would be great to get a tool that could diff(erence) two JSON files, with the output being a grid of gray boxes, each gray box represents where a top level element is the same between both, and yellow box represents some sub-level item inside the top level item is not the same between both, blue boxes represent where a new top level element is only present in the left side (added), and red represents only present in the right side (deleted)

You could visually diff a whole lot of reports, pretty much instantly. Our PM had a paid tool that could do this, but wasn't sure what it was.

Sadly I have to use BeyondCompare for this, but I'd love to know what your PM uses.

This, of course, isn't exactly what you want, but what about difftastic?[0] It claims it supports JSON [1]

[0] https://github.com/Wilfred/difftastic [1] https://difftastic.wilfred.me.uk/languages_supported.html

Stable formatting the JSON (sorted keys, same indent) then using a graphical diff tool seems to work pretty well for me.

Python's deepdiff [0] is your friend (more or less).

[0] https://github.com/seperman/deepdiff

The JSON spec, of course, has a diff specified, and common json implementation can in fact diff json. You could then put that result back into a graph (since its also just json, in flattened form i believe), and youre done ;)

Far from perfect but I use a VSCode extension[0] to sort json object keys, then (if properly indented) normal diffing tools work slightly better

Once I wrote a simple script to convert json files to `path : value\n` form; that is getting this

."a" : 1 ."b" : {} ."b"."a" : "" ."b"."c" : [] ."b"."c"[0] : true

from the json { "a": 1, "b": { "a": "", "c": [true] } }

It made better diffs but it was also harder to read.

[0] https://marketplace.visualstudio.com/items?itemName=richie5u...

I have built a similar tree visualisation tool to merge categories from different e-commerce stores (turning a tree into a graph).

https://tree-merge.com/merging-categories-4-independant-diy-...

The conclusion I came to here is that nested/indented lists are actually quite nice to visualise trees. JSON text is already a good visual UI.

In case you have to do something like this in your code base, d3-hierarchy is gold.

Particularly this digraph() example: https://observablehq.com/@d3/visiting-a-d3-hierarchy. With a bit of modification away from the GraphViz format, the result fits straight into one of the many graph component visualization libraries like react-flow.

Looks like a great tool for explaining a JSON object to a less technical audience? I dunno I'm going to give it a shot.

Also, a little meta, but I like that the github page was linked to rather than directly linking to the product's page. It lets me know upfront that this is open source something I'm dealing with. +1 to the submitter

I did a more rudimentary one that excludes all values with `jq` & `dot` as my use case was needing to grasp the structure of huge biomedical data dumps.

https://github.com/TomConlin/json_to_paths

PlantUML had/has(?) a JSON graph mode too, which works well.

Now, this is light years from PlantUML, but Vega abd Vega-Lite can do just about anything with JSON data. It's the most powerful textual graph description vocabulary I've ever seen, by far, but it's too verbose for my average user.

I don't have to download anything to use this tool. You have to download PlantUML

That's not exactly true. This is hostable, just like PlantUML is, but PlantUML also hosts an instance, linked directly on their sidebar: https://www.plantuml.com/plantuml

I'm never in a position where I can use cloud-hosted stuff, sad to say. So everything is hosted in-house. Between that, ITAR, and the general red tape nightmare it's sort of a minor miracle anyone makes anything.

Having said that I really like this new JSONCRACK a lot, now that I've played with it a little.

https://plantuml.com/json

Not sure how to get rid of the enclosing PlantUML pragmas:

  @startjson
  {
     "fruit":"Apple",
     "size":"Large",
     "color": ["Red", "Green"]
  }
  @endjson

Hmm! I dunno. I usually use PlantUML in Asciidoc and put an include in there to pull the JSON data into the graph block.

  //Asciidoc follows
  [plantuml]
  ----
  @startjson
  include::../path/to/fruit.json[]
  @endjson
  ----
  ```

Is it possible to express a JSON graph (as opposed to a simple tree)? I didn't think it was.

What is a JSON graph?

A general graph is a tree without the restriction that a node can have at most one parent.

Correct.

So how is JSON a graph? Or maybe the answer is just, No. Not generally. I'm confused by your question.

You're just repeating what I originally asked?

Fine, let me be clear then.

No. JSON is not a graph.

Any visualization of a graph from JSON would be a specific encoding of a graph (probably using IDs) which is not generally interpreted as a graph.

Tree is a type of graph, though.

Each object is a node.

{ Left:{}, Right:{} }

Has a tree with 3 nodes

If you don't parse the JSON, you tend to traverse it as a graph

I think the author means Diagram instead of graph as data structure

Ah, right. I thought they had some adjacency list format or something.

That is a graph. It has vertices and edges. Any tree or hierarchical structure can be expressed this way.

Of course the display representation on the tool is indeed a graph, but some people might wonder how one can represent a multi-parent node in a JSON tree or have some cyclic structure, which of course is not possible and cause confusion

All JSON would be an acyclic graph, as JSON does not support cyclically linked elements (that I'm aware of). You'd represent encapsulated JSON objects with a structure like a 'polyforest tree'.

If cyclicallity is needed specifically, cyclic graphs do exist, but it was my impression that JSON doesn't have these, or I'm unable to imagine how that would work. While two fields may have the same 'value' in a JSON object, I don't know how I could express cyclicallity using normal JSON syntax to say that two identical values would be linked cyclically.

you are correct, you can't have cycles in json. you can invent conventions for representing cycles, but can't express them natively. i did write a toJS stringifier that handles cycles, but it outputs JS not JSON

With JSON pointers [0] this is possible. For example OpenAPI allows them. Can be a pretty useful extension.

[0] https://www.rfc-editor.org/rfc/rfc6901

trees are graphs, so there is no problem!

Does JSON Crack support a node having multiple parents?

A bit of an aside but I thought the practice of using drugs in an application or tool names had fallen out of favor? Remember Amphetamine?

I also initially thought of crack cocaine, but it turns out the name means literally to crack the data - as in break it apart into visual nodes

Yeah, the name sure threw me at first too. Even with the the definition that's like "cracking oil" it's just an odd choice.

There is also

https://www.json-buddy.com/

What is a use case for this? Is indentation not more or less ideal for visualizing hierarchical data?

It's great for showing to management, who tends to like things presented in org chart format.

Not if you use 2 spaces for indent ;)

Maybe if one is representing something like a schema where JSON properties can be references to other entities in your JSON file?

Gotta love a good diagramming tool

This looks incredible. Just wish it came as a self-contained Electron app too

Google "json to graph" and you will find many tools to do this.

Reply on news.ycombinator.com