How To Create A Graph With A Diagram In React.js?

I have created a group like reject using a diagram. And this is a very easy way to make a graph. To understand it more, let's take an example.

EX. Let's say one owner has 10 clients. So the data of 10 clients will come out from the owner. There will be a condition in the client that he is also a client and can become the owner in future. When the client becomes the owner, the same condition will be there that he can be the owner as well as the client. This means that the input and output from its box will also be.

We will first install a graph 📈.

$ beautiful-react-diagrams

After that, we will initialize the data in a variable in JSON format something like this.

const data = createSchema({
  nodes: [
    {
      id: "node-1",
      content: "@NAVBIZADA_NAVID_MANSURI",
      coordinates: [650, 10],
      inputs: [
        { id: "port-11-b", alignment: "left" }
      ],
      outputs: [{ id: "port-12", alignment: "left" }]
    }
  ],

And after that, we will pass this variable to a function. so that he can show us.Something a bit like this.

const UncontrolledDiagram = () => {

  const [schema, { onChange }] = useSchema(data);

We will get our leader back after the is done so that it is ready to run on our browser.

NOTE: We have to keep in mind that our style should be within this heart and not a separate file for it. If you create a separate file for this then it will not work because to create this group it must have its own separate page.

 return (

    <div >
      <div style={{ height: "70rem", width: "88rem" }}>
        <Diagram schema={schema} onChange={onChange} />
      </div>
    </div>

  );

and after that we will pass the function which we created above.

export default function App() {
  return (
    <>
      <UncontrolledDiagram />
    </>
  )
};

---

Project Code 👨‍💻

Diagram source code: https://github.com/NavidMansuri5155/Diagrams_Graph.io
Live Demo: https://navidmansuri5155.github.io/Diagrams_Graph.io

☕ coffee Features:

• Concise API
• Small and lightweight
• Easy to use
• Easy to customise

Tech Stack 💻

• How to use react-diagrams.
• How to make owner and clients systems.
• How to make a graph page.
• How to pass two-time function.

---

Thank you for reading 🙏

If you enjoyed this article or found it helpful, give it a thumbs-up 👍

Feel free to connect 👋

Instagram, Facebook, Twitter