producer-consumer.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="app.css">
  </head>
  <body>
  </body>

<script>
  var states = [
  	{label:'a', y:10, x:20},
  	{label:'b', y:30, x:20},
  	{label:'c', y:10, x:80},
  	{label:'d', y:30, x:80},
  	{label:'queue', y:20, x:50},
  ]

  var transitions = [

  	{label: 'x', y: 20, x: 30,
  		pre: {a: 1},
  		post: {
  			queue: 1,
  			b: 1
  		}
  	},

  	{label: 'y', y: 20, x: 10,
  		pre: {b: 1},
  		post: {a: 1}
  	},

  	{label: 'w', y: 20, x: 70,
  		pre: {queue: 1, d: 1},
  		post: {c: 1}
  	},

  	{label: 'z', y: 20, x: 90,
  		pre: {c: 1},
  		post: {d: 1}}
  ];

  var marking = {a: 1, d: 1};
  
  function scaleModel(sx, sy) {
  	(states.concat(transitions)).forEach(function(s){s.x *= sx; s.y *= sy})	
  }

  scaleModel(4, 4);
  
</script>
  
  <script src="bundle.js"></script>
</html>