Looking for customization on canvas (joining div's and maintaining it's relationship)

Question

I'm looking for a javascript library or custom solution where I can freely drag drop components and maintain the relationship between them (like which node is connected to what & move the nodes freely wherever I want)

By maintaining the relationship I mean the different components should maintain their interconnection flow(like a flowchart). After drawing them I need to get the JSON data of their relationship.

Below is a sample glimpse of what I'm talking about

In the above picture as you can see I have different nodes which are interconnected. How can I achieve these things by library or custom solution?

The above image is from the strom-react-diagrmas react library. I have tried this but it uses SVG and lacks a lot of customization that I want.

I've also tried rete.js but unable to customize it as per my need(customizing shapes etc).

I'm also thinking of building a solution from scratch, the only problem I'm facing is how do I join two or multiple divs on canvas maintaining its relationship?

Note why am I doing this?

1. My goal behind doing this is I want to create a visual editor where a non-technical person can design the flow and then I want to export the JSON to store it accordingly in my database.
2. When I load the canvas of this flow again I should be able to render the interconnection flow along with connected nodes again based on the JSON data that I will have.

Can you suggest me something if you have come across such a situation? Any help from you guys is really appreciated.

Answer 1

Rete.js can be customized via custom Vue.js components.

Example

Visual part of the framework is represented by one of the plugins for rendering: vue or stage0. I'm prefer Vue.js so I have developed the plugin based on it.

Create custom socket and node

var CustomSocket = {
  template: `<div class="socket"
    :class="[type, socket.name, used()?'used':''] | kebab"
    :title="socket.name+'\\n'+socket.hint"></div>`,
  props: ['type', 'socket', 'used']
}


var CustomNode = {
  template,
  mixins: [VueRenderPlugin.mixin],
  methods:{
    used(io){
      return io.connections.length;
    }
  },
  components: {
    Socket: /*VueRenderPlugin.Socket*/CustomSocket
  }
}


class NumComponent extends Rete.Component {

    constructor(){
        super("Number");
        this.data.component = CustomNode;
    }
...

Template:

  <div class="node" :class="[selected(), node.name] | kebab">
  <div class="title">{{node.name}}</div>
  <div class="content">
    <div class="col" v-if="node.controls.size&gt;0 || node.inputs.size&gt;0">
      <div class="input" v-for="input in inputs()" :key="input.key" style="text-align: left">
        <Socket v-socket:input="input" type="input" :socket="input.socket" :used="() => input.connections.length"></Socket>
        <div class="input-title" v-show="!input.showControl()">{{input.name}}</div>
        <div class="input-control" v-show="input.showControl()" v-control="input.control"></div>
     </div>
     <div class="control" v-for="control in controls()" v-control="control"></div>
    </div>
    <div class="col">
      <div class="output" v-for="output in outputs()" :key="output.key">
        <div class="output-title">{{output.name}}</div>
        <Socket v-socket:output="output" type="output" :socket="output.socket" :used="() => output.connections.length"></Socket>
      </div>
    </div>
  </div> 
</div>

As a result, you can customize nodes, connections and background without restrictions