TPN

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }

.marked{
      fill:#b2dfdb ;
    }
    .text{
     font-family:arial;
     font-weight:bold;
  	 font-size:12px;
     color:#e0f2f1;
    }

</style>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <script>
 
// -------------------------------------------------------------------------
//                     DISPLAY Petri Net 
// -------------------------------------------------------------------------
function displayPetriNet(data){
  var width=900;
  var height = 600;
	var svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height);
  
  	svg.append('defs').append('marker')
        .attr('id','arrowhead')
               .attr('viewBox','-0 -5 10 10')
               .attr('refX',13)
               .attr('refY',0)
               .attr('orient','auto')
               .attr('markerWidth',13)
               .attr('markerHeight',13)
               .attr( 'xoverflow','visible')
        .append('svg:path')
        .attr('d', 'M 0,-5 L 10 ,0 L 0,5')
        .attr('fill', '#999')
        .style('stroke','none');

var simulation = d3.forceSimulation(data.nodes)
  .force("center", d3.forceCenter(width / 2, height / 2))
  .force("charge",d3.forceManyBody().strength(-150).distanceMax(350)
 .distanceMin(225))
  .force("collide", d3.forceCollide().radius(20))
  .force("link", d3.forceLink().id(function(d) { return d.id }).distance(30).strength(1));

transitions.attr("x", function(d) { return d.x-7; })
      .attr("y", function(d) { return d.y-7; })
  
  marked.attr("x", function(d) { return d.x-4; })
      .attr("y", function(d) { return d.y+4; })
  
  labels.attr("x", function(d) { 
    			if(d.type =="place"){
						return d.x+10;
          }
          else{
             return d.x;
          }
        })
      .attr("y", function(d) { 
          if(d.type =="place"){
						 return d.y-10;
          }
          else{
             return d.y+8;
          }
        })
  });

}
    
    
// -------------------------------------------------------------------------
//                     READ TPN FILE 
// -------------------------------------------------------------------------
function readTpn(data){
  var lines = data.split(";\n")
  var result={}

result["nodes"]=readNodesAndInit(lines);
  result["links"]=readLinks(lines);
  return result;
}

d3.text("choice.tpn", function(error, data) {
  if (error) throw error;
  
  var promise = new Promise(function(resolve, reject) {
    var result = readTpn(data.replace(/~/g, '-'));
  	return resolve(result); 
	});

promise.then(function(result) {
 		displayPetriNet(result);
	});
	
   
});

</script>
</body>

https://d3js.org/d3.v4.min.js

https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js