Skip to content

AnzyGit/flow-playground

Repository files navigation

Create beautiful diagrams with ease!

Transform a json file into a beautiful diagrams that can be animated.


🎯 The goal

The goal of this repository is to create a web page able to generate a nice looking diagram on the fly.

It is using the power of react flow in order to do that.

Just pass the query where you are hosting the json graph

Example

http://localhost:3000/?url=https://www.mywebsite/files/myfile.json
{
    "nodes": [
        {
          "id": "1",
          "type": "input",
          "data": { "label": "Input Node" },
          "position": { "x": 250, "y": 25 }
        },
        {
          "id": "2",
          "data": { "label": "Default Node" },
          "position": { "x": 100, "y": 125 }
        },
        {
          "id": "3",
          "type": "output",
          "data": { "label": "Output Node" },
          "position": { "x": 250, "y": 250 }
        }
      ],
	"edges": [{
			"id": "e1-2",
			"source": "1",
			"target": "2"
		},
		{
			"id": "e2-3",
			"source": "2",
			"target": "3",
			"animated": true
		}
	]
}

Example

After that, the page should render a nice diagram that you can send.

🪜 Steps

  • ✅ Create a page that can render a diagram
  • ✅ Able to read a json file and render it
  • ✅ Use query params to fetch custom urls
  • 🚧 Host the page on a github page

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published