feature: json graph support

[zrcoder]

It will be great to support rendering json data as graph, like https://plantuml.com/json and https://jsoncrack.com/editor

[zrcoder]

I use sql_table to implement it, see https://github.com/zrcoder/cdor, code like:

package main

import (
	"github.com/zrcoder/cdor"
)

func main() {
	c := cdor.Ctx()
	c.Json(`{
		"firstName": "John",
		"lastName": "Smith",
		"isAlive": true,
		"age": 27,
		"address": {
		  "streetAddress": "21 2nd Street",
		  "city": "New York",
		  "state": "NY",
		  "postalCode": "10021-3100"
		},
		"phoneNumbers": [
		  {
			"type": "home",
			"number": "212 555-1234"
		  },
		  {
			"type": "office",
			"number": "646 555-4567"
		  }
		],
		"children": [],
		"spouse": null
	  }`)
	c.SaveFile("json.svg")
}

and the renderd svg is like:

[bo-ku-ra]

i do something similar with perl script.

dendrogram.txt

firstName: John
lastName: Smith
isAlive: true
age: 27
address
	streetAddress: 21 2nd Street
	city: New York
	state: NY
	postalCode: 10021-3100
phoneNumbers
	type: home
		number: 212 555-1234
	type: office
		number: 646 555-4567
children
spouse: null

↓ dendrogram.pl

• simply count and output the number of tabs and connect them if they exist.
  • (duplicate output is not a concern.) ↓ dendrogram.d2

vars: "dendrogram.pl" {
  d2-config: {theme-id: 0; dark-theme-id: 0; pad: 10; center: false; sketch: false; layout-engine: elk}
}
***:{style.border-radius: 8; style.font-color: darkorange; style.stroke: lemonchiffon; style.fill: darkorange;}
(*** <-> ***)[*]{style.stroke: darkorange; source-arrowhead.shape: circle; source-arrowhead.style.filled:true; target-arrowhead.shape: circle; target-arrowhead.style.filled:true;}
# ----------------------------------------------------------------------
direction: right
0.1:"firstName: John"
0:""{ shape:sql_table }
0.2:"lastName: Smith"
0:""{ shape:sql_table }
0.3:"isAlive: true"
0:""{ shape:sql_table }
0.4:"age: 27"
0:""{ shape:sql_table }
0.5:"address"
0:""{ shape:sql_table }
0_5.1:"streetAddress: 21 2nd Street"
0_5:""{ shape:sql_table }
0_5.2:"city: New York"
0_5:""{ shape:sql_table }
0_5.3:"state: NY"
0_5:""{ shape:sql_table }
0_5.4:"postalCode: 10021-3100"
0_5:""{ shape:sql_table }
0.6:"phoneNumbers"
0:""{ shape:sql_table }
0_6.5:"type: home"
0_6:""{ shape:sql_table }
0_6_5.1:"number: 212 555-1234"
0_6_5:""{ shape:sql_table }
0_6.6:"type: office"
0_6:""{ shape:sql_table }
0_6_6.2:"number: 646 555-4567"
0_6_6:""{ shape:sql_table }
0.7:"children"
0:""{ shape:sql_table }
0.8:"spouse: null"
0:""{ shape:sql_table }
0.5 <-> 0_5
0.6 <-> 0_6
0_6.5 <-> 0_6_5
0_6.6 <-> 0_6_6