JSON Crack – A tool that generates graph diagrams from JSON objects(github.com)
github.com
JSON Crack – A tool that generates graph diagrams from JSON objects
https://github.com/AykutSarac/jsoncrack.com
50 comments
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
[0] https://github.com/Wilfred/difftastic [1] https://difftastic.wilfred.me.uk/languages_supported.html
Python's deepdiff [0] is your friend (more or less).
[0] https://github.com/seperman/deepdiff
[0] https://github.com/seperman/deepdiff
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...
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...
Stable formatting the JSON (sorted keys, same indent) then using a graphical diff tool seems to work pretty well for me.
[deleted]
Sadly I have to use BeyondCompare for this, but I'd love to know what your PM uses.
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 ;)
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.
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.
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
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
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.
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.
https://plantuml.com/json
Not sure how to get rid of the enclosing PlantUML pragmas:
Not sure how to get rid of the enclosing PlantUML pragmas:
@startjson
{
"fruit":"Apple",
"size":"Large",
"color": ["Red", "Green"]
}
@endjsonHmm! 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
----
```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.
Having said that I really like this new JSONCRACK a lot, now that I've played with it a little.
Is it possible to express a JSON graph (as opposed to a simple tree)? I didn't think it was.
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
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
[0] https://www.rfc-editor.org/rfc/rfc6901
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.
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
[deleted]
Does JSON Crack support a node having multiple parents?
What is a JSON graph?
[deleted]
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.
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?
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
{ Left:{}, Right:{} }
Has a tree with 3 nodes
If you don't parse the JSON, you tend to traverse it as a graph
[deleted]
trees are graphs, so there is no problem!
[deleted]
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/
https://www.json-buddy.com/
What is a use case for this? Is indentation not more or less ideal for visualizing hierarchical data?
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.
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.