JSFiddle - React, Tailwind, and code Playground

by Roman Bruckner

HTML

<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.4.4/joint.min.css" />
</head>
<body>
      <!-- content -->
      <div id="paper"></div>

      <!-- dependencies -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.4.4/joint.min.js"></script>
    
    </body>
</html>

JavaScript

var graph = new joint.dia.Graph({}, {
  cellNamespace: joint.shapes
});

const paper = new joint.dia.Paper({
  el: document.getElementById('paper'),
  width: 800,
  height: 900,
  model: graph,
  defaultConnectionPoint: {
    name: 'boundary'
  },
  cellViewNamespace: joint.shapes,
  gridSize: 10,
  drawGrid: true,
  async: true,
  sorting: joint.dia.Paper.sorting.APPROX,
  background: {
    color: "#fff"
  },
  interactive: true,
});

///////////////////////////////////////////////////
//																							 //
///////////////////_our example_///////////////////
//																					     //
///////////////////////////////////////////////////

// this is how we get the svg from the backend
// this svg contains information about arrowlink display and content: information about markers 
// for target and source
// You can view it in any online svg file viewer
// Specifically in this case we have information about the targetMarker(toPort) view 
// and no information about the sourceMarker(fromPort) view 
// because we only need the targetMarker in this case.

const customSVG = `
<svg id='main' width='70' height='20' version='1.1' xmlns='http://www.w3.org/2000/svg'>
  <style>
    polyline.common {
      fill: blue;
      stroke-width: 1;
      stroke: black;
      orient: auto;
    }

    path.common {
      fill: blue;
      stroke: black;
      stroke-width: 1;
    }
  </style>
  <defs>
    <marker id='toPort' refX='5' refY='10' markerUnits='strokeWidth' markerWidth='21' markerHeight='20'>
      <polyline id='toPolyline' class='common' points='0,0 20,10 0,20 5,10 0,0' />
    </marker>
    <marker id='fromPort' />
  </defs>
  <path class='common' d='M0 10 L50 10' style='marker-start: url(#fromPort); marker-end: url(#toPort);' />
</svg>
`;

// this is how we create our instance of the link 
// as sourceMarker and targetMarker we want to pass our SVG element,
// but we want Joint itself to find the appropriate marker for sourceMarker and substitute it, 
//...