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