jsPlumb с соединением Angular 5+ Drag&Drop

Чтобы экспортировать вашу блок-схему в json, я бы посоветовал вам установить uuid для каждой добавляемой вами конечной точки:

this.jsPlumbInstance.addEndpoint(id, { anchor: 'Bottom', uuid: id + '_bottom' }, Endpoint1);
                                                          /\
                                                        this one

Таким образом, вы сможете восстановить все связи, которые вы создали на графике, с помощью метода:

jsPlumbInstance.connect({ uuids: connection.uuids });

Все, что вам нужно сделать, это сохранить json, который состоит из двух частей:

• узлы
• связи

узлы-контейнер.component.ts

saveNodeJson(){
    //save element position on Canvas and node conections

    const container = this.viewContainerRef.element.nativeElement.parentNode;
    const nodes = Array.from(container.querySelectorAll('.node')).map((node: HTMLDivElement) => {
      return {
        id: node.id,
        top: node.offsetTop,
        left: node.offsetLeft, 
      }
    });

    const connections = (this.nodeService.jsPlumbInstance.getAllConnections() as any[])
        .map((conn) => ({ uuids: conn.getUuids() }));

    const json = JSON.stringify({ nodes, connections });

    console.log(json);
  }

После того, как вы сохранили json, вы можете восстановить состояние:

узлы-контейнер.component.ts

this.nodes.forEach(node => {
  this.nodeService.addDynamicNode(node);
});

setTimeout(() => { // we need it to make sure all nodes have been rendered
  this.connections.forEach(connection => {
    this.nodeService.addConnection(connection);
  });
})

где метод addConnection:

node.service.ts

addConnection(connection) {
  this.jsPlumbInstance.connect({ uuids: connection.uuids });
}

Пример Stackblitz