skinnyjames/index.html

## index.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.11/paper-full.min.js" integrity="sha512-ehNJ9gpOQJn8EYlA3P1zUtfrh97G/6WNsjfPfpnMxbo6PX6UXHRj8Ny5MCd36w2eTPlvOSVuXLZmY+/VLVhI4A==" crossorigin="anonymous"></script>
  </head>
  <body>
    <div id="erd" style="width: 100vw; height: 100vh">
      <canvas id="erd-canvas" style="width: 100vw; height: 100vh"></canvas>
    </div>
  </body>
  <script>
    var orderTable = {
      _id: 'order-table',
      type: 'table',
      name: 'Order',
      columns: [
        { name: 'id', type: 'integer', nullable: false, primary: true },
        { name: 'date', type: 'date', nullable: false, primary: false },
        { name: 'total', type: 'integer', nullable: false, primary: false }
      ]
    }

    var customerTable = {
      _id: 'customer-table',
      type: 'table',
      name: 'Customer',
      columns: [
        { name: 'id', type: 'integer', nullable: false, primary: false },
        { name: 'OrderId', type: 'integer', nullable: false, primary: false }
      ]
    }

    var orderToCustomer = {
      type: 'table-relation',
      relation: {
        from: { table: 'order-table', columns: ['id'] },
        to: { table: 'customer-table', columns: ['OrderId'] },
        modifier: 'has-one'
      }
    }
    new Vue({
      el: '#erd',
      data() {
        return {
          tables: [orderTable, customerTable],
          relations: [orderToCustomer]
        }
      },
      mounted() {
        const canvas = document.getElementById('erd-canvas')
        paper.setup(canvas)

        this.tables.forEach((table, idx) => {
          const length = table.columns.length
          const width = 200;
          const height = (length * 50) + 50
          const leftMargin = (width * idx) + (100 * idx)
          const center = leftMargin + 100
          var size = new paper.Size(width, height)
          var point = new paper.Point(leftMargin, 0)
          var shape = new paper.Shape.Rectangle(point, size)
          shape.strokeColor = 'black'
          var text = new paper.PointText(center, 25)
          text.justification = 'center';
          text.fillColor = 'black';
          text.content = table.name
          table.columns.forEach((column, idx) => {
            var line = new paper.Path()
            line.strokeColor = '#000000'
            var lineHeight = ((idx + 1) * 50)
            var columnFrom = new paper.Point(leftMargin, lineHeight)
            var columnTo = new paper.Point(leftMargin + 200, lineHeight)
            line.add(columnFrom)
            line.add(columnTo)
            line.complete = true;
            var text = new paper.PointText(leftMargin + 20, lineHeight + 25)
            text.fillColor = 'black'
            text.content = column.name
          })
        })
        paper.view.draw();
      }
    })
  </script>
</html>
	<html>
	<head>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.11/paper-full.min.js" integrity="sha512-ehNJ9gpOQJn8EYlA3P1zUtfrh97G/6WNsjfPfpnMxbo6PX6UXHRj8Ny5MCd36w2eTPlvOSVuXLZmY+/VLVhI4A==" crossorigin="anonymous"></script>
	</head>
	<body>
	<div id="erd" style="width: 100vw; height: 100vh">
	<canvas id="erd-canvas" style="width: 100vw; height: 100vh"></canvas>
	</div>
	</body>
	<script>
	var orderTable = {
	_id: 'order-table',
	type: 'table',
	name: 'Order',
	columns: [
	{ name: 'id', type: 'integer', nullable: false, primary: true },
	{ name: 'date', type: 'date', nullable: false, primary: false },
	{ name: 'total', type: 'integer', nullable: false, primary: false }
	]
	}

	var customerTable = {
	_id: 'customer-table',
	type: 'table',
	name: 'Customer',
	columns: [
	{ name: 'id', type: 'integer', nullable: false, primary: false },
	{ name: 'OrderId', type: 'integer', nullable: false, primary: false }
	]
	}

	var orderToCustomer = {
	type: 'table-relation',
	relation: {
	from: { table: 'order-table', columns: ['id'] },
	to: { table: 'customer-table', columns: ['OrderId'] },
	modifier: 'has-one'
	}
	}
	new Vue({
	el: '#erd',
	data() {
	return {
	tables: [orderTable, customerTable],
	relations: [orderToCustomer]
	}
	},
	mounted() {
	const canvas = document.getElementById('erd-canvas')
	paper.setup(canvas)

	this.tables.forEach((table, idx) => {
	const length = table.columns.length
	const width = 200;
	const height = (length * 50) + 50
	const leftMargin = (width * idx) + (100 * idx)
	const center = leftMargin + 100
	var size = new paper.Size(width, height)
	var point = new paper.Point(leftMargin, 0)
	var shape = new paper.Shape.Rectangle(point, size)
	shape.strokeColor = 'black'
	var text = new paper.PointText(center, 25)
	text.justification = 'center';
	text.fillColor = 'black';
	text.content = table.name
	table.columns.forEach((column, idx) => {
	var line = new paper.Path()
	line.strokeColor = '#000000'
	var lineHeight = ((idx + 1) * 50)
	var columnFrom = new paper.Point(leftMargin, lineHeight)
	var columnTo = new paper.Point(leftMargin + 200, lineHeight)
	line.add(columnFrom)
	line.add(columnTo)
	line.complete = true;
	var text = new paper.PointText(leftMargin + 20, lineHeight + 25)
	text.fillColor = 'black'
	text.content = column.name
	})
	})
	paper.view.draw();
	}
	})
	</script>
	</html>