You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
975 B
52 lines
975 B
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<link rel='stylesheet' href='joint.min.css'> |
|
<style> |
|
body { |
|
background-color: darkgray; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body> |
|
<div id='graph'></div> |
|
</body> |
|
|
|
<script src='joint.min.js'></script> |
|
<script src='joint.shapes.fsa.min.js'></script> |
|
|
|
<script> |
|
var graph = new joint.dia.Graph; |
|
var paper = new joint.dia.Paper({ |
|
el: $('#graph'), |
|
width: 800, |
|
height: 600, |
|
gridSize: 1, |
|
model: graph |
|
}); |
|
|
|
var master = new joint.shapes.fsa.State({ |
|
position: {x: 10, y: 10}, |
|
size: { width: 80, height: 80 }, |
|
attrs: { text: { text: 'master' } }, |
|
rect: { fill: 'white' } |
|
}); |
|
graph.addCell(master); |
|
|
|
var develop = new joint.shapes.fsa.State({ |
|
position: { x: 120, y: 60 }, |
|
size: { width: 80, height: 80 }, |
|
attrs: { text: { text: 'develop' } } |
|
}); |
|
graph.addCell(develop); |
|
|
|
var link = new joint.shapes.fsa.Arrow({ |
|
source: { id: master.id }, |
|
target: { id: develop }, |
|
attrs: { rect: { stroke: 'white' } } |
|
}); |
|
graph.addCell(link); |
|
|
|
</script> |
|
</html>
|
|
|