Using a javascript library inside a jupyter/jupyterlab notebook

my real objective is to associate graphically two lists together.

I want to do it in interactively in jupyter/jupyterlab.

An example can be find in this library : http://sebastien.drouyer.com/jquery.flowchart-demo/

My problem is that I'm not at ease with integrating Javascript into ipython notebook.

I found some tutorials : http://jacobbridges.github.io/post/jupyter-notebook-with-interactive-charts/

If I'm able to reproduce this example, I'm not try to replace by flowchart library.

First Cell

%%javascript
require.config({
  paths: {
    flowcharts: "https://github.com/sdrdis/jquery.flowchart/blob/master/jquery.flowchart.js",
  },
shim: {
    flowcharts: {
      exports: "FlowCharts",
      deps: ["jquery"]
    },
}
});

Second

%%javascript
// Since I append the div later, sometimes there are multiple divs.
$("#example_1").remove();

// Make the cdiv to contain the chart.
element.append('<div id="example_1" style="min-width: 310px; height: 400px; margin: 0 auto"></div>');
var data = {
  operators: {
    operator: {
      top: 20,
      left: 20,
      properties: {
        title: 'Operator',
        inputs: {
          input_1: {
            label: 'Input 1',
          },
          input_2: {
            label: 'Input 2',
          }
        },
        outputs: {
          output_1: {
            label: 'Output 1',
          },
          output_2: {
            label: 'Output 2',
          },
          output_3: {
            label: 'Output 3',
          }
        }
      }
    }
  }
};

// Require highcarts and make the chart.
require(['flowcharts'], function(FlowCharts) {
   $('#example_1').flowchart({
      data: data
    });
});

I also don't know where to import css file.

Can someone help me with this ?

Regards, Thomas