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

https://github.com/AykutSarac/jsoncrack.com

by gjvc • 4 years ago

230 45 4 years ago

github.com

chrisseaton4• 4 years ago

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

nixpulvis3• 4 years ago

What is a JSON graph?

chrisseaton4• 4 years ago

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

worg2• 4 years ago

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

chrisseaton4• 4 years ago

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

aliqot2• 4 years ago

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

zwkrt• 4 years ago

trees are graphs, so there is no problem!

tunesmith• 4 years ago

Does JSON Crack support a node having multiple parents?

emadda• 4 years ago

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.

nopenopenopeno• 4 years ago

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

kmoser2• 4 years ago

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

boxed• 4 years ago

Not if you use 2 spaces for indent ;)

nielsbot• 4 years ago

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

MilStdJunkie3• 4 years ago

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.

theogravity• 4 years ago

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

alias_neo• 4 years ago

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

MilStdJunkie3• 4 years ago

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.

nivertech• 4 years ago

https://plantuml.com/json

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

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

MilStdJunkie3• 4 years ago

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

Goosey• 4 years ago

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

thadk• 4 years ago

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.

xwdv• 4 years ago

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?

conqueso• 4 years ago

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

socialismisok• 4 years ago

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.

kmoser2• 4 years ago

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

hadlock• 4 years ago

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.

smdyc1• 4 years ago

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

return_to_monke• 4 years ago

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

theteapot• 4 years ago

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

throwawaybutwhy• 4 years ago

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

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

lionkor• 4 years ago

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 ;)

afiori• 4 years ago

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

raydiatian• 4 years ago

Gotta love a good diagramming tool

tejtm• 4 years ago

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

petesergeant• 4 years ago

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

lazyeye• 4 years ago

There is also

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

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

Related Stories