Skip to content

Instantly share code, notes, and snippets.

@skinnyjames
Last active September 6, 2020 12:04
Show Gist options
  • Save skinnyjames/8ccc7647eda6b4e27fd6e1196ca6be17 to your computer and use it in GitHub Desktop.
Save skinnyjames/8ccc7647eda6b4e27fd6e1196ca6be17 to your computer and use it in GitHub Desktop.
erd.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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment