Multiple possible solutions. One requires a different language but easy to implement if you use it as a microservice. Another is harder to implement but uses the correct language and framework that you are using.

Solution 1

Continue using React and Javascript.

Install graphviz with npm to use with javascript and react https://www.npmjs.com/package/graphviz-react

(There are graphviz libraries for many languages such as python and javascript, but need to use the one with graphviz and react)

Read the docs here for graphviz to make an ER diagram https://graphviz.org/Gallery/neato/ER.html

Use this graphviz playground to learn and test the langauge. https://magjac.com/graphviz-visual-editor/

However, one big problem is that you would need to somehow convert your JSON file into a graphviz language. And that might be really hard to do it with the JSON structure that you have.

Your JSON structure is nice and nested with table name, column name, and relations.

Graphviz does not have a hierarchical structure. You would basically have to do a lot of work to make JSON fit with graphviz-react package. You would basically have to figure out how to take a nice hierarchal JSON structure, and flatten it and figure out what table maps to what relationship.

But if you get it working, you will have some sort of function and/or react component that can take in a JSON file and output a SVG of an ER Diagram.

Solution 2

Use d2. https://github.com/terrastruct/d2

Follow the directions, install the go programming language. Clone the repo, wrap the library as a Go Lang server.

Make the Go Lang server into a micro service. It should do a http get or post requests, and take in a json file and output a svg file.

The Go Lang microservice should be able to convert a json file into a friendly .d2 file and then convert the .d2 file into an SVG and then send that back to the frontend. This should be not as hard as graphviz. This is because JSON is hierarchal, and .d2 files are hierarchal. Meaning that the file structures are similar, and you just have to parse the JSON and turn it into an object/struct. The once you turn the JSON file into a struct, you then turn that struct into a .d2 file.

So it might look something like this.

1. Frontend sends the JSON to the Go Lang microservice by http request.
2. Turn each JSON object to have a related Go Lang Struct.
3. Convert the Go Lang Struct into a string that follows something like a .d2 file
4. concatenate all of them in a specific order and create the .d2 file
5. use the library to convert them into an SVG.
6. Send that to the frontend as a http response payload.

• relations might be harder to implement in the .d2 file from JSON, but you can do it by having an array of dictionary/<key,value> pairs of relations. Relationships are still tables containing PK and 2 or more FKs but the lines of relationships between tables must be key value pairs of 2 struct objects or strings of the names of the tables.

Here is an example of what the final product might look like.

The image below shows the "tasks" table mapping to "tasks_data" table and then mapping to "data" table. Basically showing the relations of tables using the PK and FK.

Use the playground to check your work. https://play.d2lang.com/?script=pJBBCoNADEX3OcWHrnuBWfQqQ1pHG9RoJ9mIePeiUloGoYVuw-P9_-NsrQXMBNidxxRgjy46X7tEgFQBoo75Nqh5ZlEPGLP0nKfYpmkh4ATlPh1w9ZCTNPridso8iza0EFXs_FdwLV2KhXWbE1c1Ptwo5fhuX03xsEaxaw37AVxoL4fzBe-W2xeK0zMAAP__&

Use the docs for learning how it works. https://d2lang.com/tour/sql-tables#foreign-keys