Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature: json graph support #1839

Open
zrcoder opened this issue Feb 16, 2024 · 3 comments
Open

feature: json graph support #1839

zrcoder opened this issue Feb 16, 2024 · 3 comments

Comments

@zrcoder
Copy link

zrcoder commented Feb 16, 2024

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

@cyborg-ts cyborg-ts added this to D2 Feb 16, 2024
@zrcoder
Copy link
Author

zrcoder commented Mar 3, 2024

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:

json

@bo-ku-ra
Copy link
Contributor

bo-ku-ra commented Mar 3, 2024

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

@the42
Copy link

the42 commented Feb 20, 2025

Somethink similar for JSON Schema would be great

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: No status
Development

No branches or pull requests

3 participants