身为一个码农，在家无事想想最近的项目需要用到工作流，由于之前对工作流不太熟悉，在家学习一下petri net经典工作流，然后用html5画出流程图顺便学习一下h5的画图功能，没有做不到只有想不到，一个上午就能弄出一个不错的成果，使用了一个在线开源的画图框架，参考：http://jointjs.com
效果图和源码如下
<!DOCTYPE html>
<html lang="en">
<script>
function addAction() {
var a= new joint.shapes.basic.Rect({
position: { x:0, y: 30 },
size: { width: 50, height: 50 },
attrs: { rect: { fill: 'green','stroke-width': 2, stroke: 'black' }, text: { text: '提交', fill: 'white' } }
});
a.on('batch:start', function(element) {
be(this);
});
graph.addCell(a);
}
function addPlace() {
var r = new joint.shapes.basic.Rect({
position: { x: 0, y: 30 },
size: { width: 100, height: 100 },
attrs: { rect: { fill: 'blue',rx:45,ry:45,'stroke-width': 2, stroke: 'black' }, text: { text: '开始', fill: 'white' } }
});
r.on('batch:start', function(element) {
be(this);
});
graph.addCell(r);
}
function addLink() {
var l = new joint.dia.Link({
source: { x: 170, y: 200 }, target: { x: 480, y: 200 },
attrs: {
// Define a filter for the whole link (special selector '.' means the root element )
'.': { filter: { name: 'dropShadow', args: { dx: 1, dy: 1, blur: 2 } } },
'.connection': {
stroke: 'blue'
},
'.marker-target': { fill: 'black', d: 'M 10 0 L 0 5 L 10 10 z' }
}
});
graph.addCell(l);
}
var obj;
function saveLabel() {
var label=$("#name").val();
obj.attr({text:{text:label}});
}
function be(element) {
obj=element;
$("#name").val(element.attr('text').text);
}
function deleteEl() {
obj.remove();
}
</script>
<head>
<link rel="stylesheet" type="text/css" href="js/joint.css" />
<script src="js/jquery.min.js"></script>
<script src="js/lodash.min.js"></script>
<script src="js/backbone-min.js"></script>
<script src="js/joint.js"></script>
<meta charset="UTF-8">
<title>WF</title>
</head>
<body>
<a href="#" onclick="addLink()" >线</a>
<a href="#" onclick="addPlace()">圆</a>
<a href="#" onclick="addAction()">动作</a>
<input type="text" id="name"/> <input type="button" onclick="saveLabel()" value="更新"/> <input id="eid" type="hidden" >
<input type="button" onclick="deleteEl()" value="删除"/>
<div id="myholder"></div>
<script type="text/javascript">
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#myholder'),
width: 600,
height: 200,
model: graph,
gridSize: 1
});
var rect = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
size: { width: 100, height: 100 },
attrs: { rect: { fill: 'blue',rx:45,ry:45,'stroke-width': 2, stroke: 'black' }, text: { text: '开始', fill: 'white' } }
});
var action= new joint.shapes.basic.Rect({
position: { x:400, y: 30 },
size: { width: 50, height: 50 },
attrs: { rect: { fill: 'green','stroke-width': 2, stroke: 'black' }, text: { text: '提交', fill: 'white' } }
});
var action2=action.clone();
action2.attr({text: { text: '拒绝'}});
action2.translate(0,100);
var rect2 = rect.clone();
rect2.attr({text: { text: '结束'},rect:{fill:'red'}});
rect2.translate(500);
var link = new joint.dia.Link({
source: { id: rect.id },
target: { id: action.id }
});
link.attr({
'.connection': { stroke: 'blue' },
'.marker-target': { fill: 'black', d: 'M 10 0 L 0 5 L 10 10 z' }
});
var link2= new joint.dia.Link({
source: { id: rect.id },
target: { id: action2.id },
});
var link3= new joint.dia.Link({
source: { id: action.id },
target: { id: rect2.id }
});
var link4= new joint.dia.Link({
source: { id: action2.id },
target: { id: rect2.id }
});
link2.attr({
'.connection': { stroke: 'blue' },
'.marker-target': { fill: 'black', d: 'M 10 0 L 0 5 L 10 10 z' }
});
link3.attr({
'.connection': { stroke: 'blue' },
'.marker-target': { fill: 'black', d: 'M 10 0 L 0 5 L 10 10 z' }
});
link4.attr({
'.connection': { stroke: 'blue' },
'.marker-target': { fill: 'black', d: 'M 10 0 L 0 5 L 10 10 z' }
});
graph.addCells([rect, rect2,action2,action, link,link2,link3,link4]);
var es=graph.getElements();
for(var x in es){
es[x].on('batch:start', function(element) {
be(this);
});
}
var jsonString='{"cells":[{"type":"basic.Rect","position":{"x":1441,"y":191},"size":{"width":100,"height":100},"angle":0,"id":"42a8eec4-d3b3-4043-945f-176fa52e2620","embeds":"","z":2,"attrs":{"rect":{"fill":"red","stroke":"black","rx":45,"ry":45,"stroke-width":2},"text":{"fill":"white","text":"结束"}}},{"type":"basic.Rect","position":{"x":1360,"y":347},"size":{"width":50,"height":50},"angle":0,"id":"70918a68-1486-4e30-ade6-cf955927ecbe","z":10,"attrs":{"rect":{"fill":"green","stroke":"black","stroke-width":2},"text":{"fill":"white","text":"拒绝"}}},{"type":"basic.Rect","position":{"x":0,"y":143},"size":{"width":100,"height":100},"angle":0,"id":"f08d945a-2882-4b9a-8a78-9b54d56e33ce","z":11,"attrs":{"rect":{"fill":"blue","stroke":"black","rx":45,"ry":45,"stroke-width":2},"text":{"fill":"white","text":"开始"}}},{"type":"basic.Rect","position":{"x":275,"y":126},"size":{"width":100,"height":100},"angle":0,"id":"4b73a5d6-7c6f-4bcb-b9dd-154ffb3bfed7","z":12,"attrs":{"rect":{"fill":"blue","stroke":"black","rx":45,"ry":45,"stroke-width":2},"text":{"fill":"white","text":"部门经理审批"}}},{"type":"basic.Rect","position":{"x":518,"y":123},"size":{"width":100,"height":100},"angle":0,"id":"fb9a74cd-43c5-436c-9e84-7dc1429bef2b","z":13,"attrs":{"rect":{"fill":"blue","stroke":"black","rx":45,"ry":45,"stroke-width":2},"text":{"fill":"white","text":"领导审批"}}},{"type":"basic.Rect","position":{"x":169,"y":45},"size":{"width":50,"height":50},"angle":0,"id":"66d7f43a-22ce-4e08-b965-a386221770d8","z":14,"attrs":{"rect":{"fill":"green","stroke":"black","stroke-width":2},"text":{"fill":"white","text":"提交"}}},{"type":"basic.Rect","position":{"x":434,"y":44},"size":{"width":50,"height":50},"angle":0,"id":"a0847725-3376-4aa7-91b0-dfe7066cbdec","z":15,"attrs":{"rect":{"fill":"green","stroke":"black","stroke-width":2},"text":{"fill":"white","text":"同意"}}},{"type":"basic.Rect","position":{"x":703,"y":44},"size":{"width":50,"height":50},"angle":0,"id":"e6d0d2e3-0f74-4a14-873e-fc426863e17a","z":16,"attrs":{"rect":{"fill":"green","stroke":"black","stroke-width":2},"text":{"fill":"white","text":"同意"}}},{"type":"basic.Rect","position":{"x":859,"y":5},"size":{"width":100,"height":100},"angle":0,"id":"38ca9ad9-fe69-440a-8dfa-a639900449aa","z":17,"attrs":{"rect":{"fill":"blue","stroke":"black","rx":45,"ry":45,"stroke-width":2},"text":{"fill":"white","text":"财务"}}},{"type":"basic.Rect","position":{"x":865,"y":195},"size":{"width":100,"height":100},"angle":0,"id":"675a2c82-c557-4f80-8b8e-e27153811c8b","z":18,"attrs":{"rect":{"fill":"blue","stroke":"black","rx":45,"ry":45,"stroke-width":2},"text":{"fill":"white","text":"法规"}}},{"type":"basic.Rect","position":{"x":867,"y":428},"size":{"width":100,"height":100},"angle":0,"id":"f337347e-f12d-4771-bdda-24fd0909e437","z":19,"attrs":{"rect":{"fill":"blue","stroke":"black","rx":45,"ry":45,"stroke-width":2},"text":{"fill":"white","text":"安全"}}},{"type":"basic.Rect","position":{"x":1219,"y":186},"size":{"width":100,"height":100},"angle":0,"id":"9e3b9ac2-d850-4d2a-93d3-fd571ccf3987","z":20,"attrs":{"rect":{"fill":"blue","stroke":"black","rx":45,"ry":45,"stroke-width":2},"text":{"fill":"white","text":"副总审批 "}}},{"type":"basic.Rect","position":{"x":427,"y":318},"size":{"width":50,"height":50},"angle":0,"id":"ef55a7fb-c1a9-4de5-aec8-a86e891fd6ba","z":21,"attrs":{"rect":{"fill":"green","stroke":"black","stroke-width":2},"text":{"fill":"white","text":"拒绝"}}},{"type":"basic.Rect","position":{"x":708,"y":321},"size":{"width":50,"height":50},"angle":0,"id":"4b3cab8c-d8d6-453d-9005-874322ada2bb","z":22,"attrs":{"rect":{"fill":"green","stroke":"black","stroke-width":2},"text":{"fill":"white","text":"拒绝"}}},{"type":"basic.Rect","position":{"x":1067,"y":156},"size":{"width":50,"height":50},"angle":0,"id":"bfc2b861-2624-41ef-a202-7d99a71eaa50","z":23,"attrs":{"rect":{"fill":"green","stroke":"black","stroke-width":2},"text":{"fill":"white","text":"同意"}}},{"type":"basic.Rect","position":{"x":1074,"y":341},"size":{"width":50,"height":50},"angle":0,"id":"404cdecb-3bf6-4929-a075-223fa884aeac","z":24,"attrs":{"rect":{"fill":"green","stroke":"black","stroke-width":2},"text":{"fill":"white","text":"拒绝"}}},{"type":"link","source":{"id":"f08d945a-2882-4b9a-8a78-9b54d56e33ce"},"target":{"id":"66d7f43a-22ce-4e08-b965-a386221770d8"},"id":"995c5172-989e-4c7a-9a65-b6efea8ce181","z":25,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"66d7f43a-22ce-4e08-b965-a386221770d8"},"target":{"id":"4b73a5d6-7c6f-4bcb-b9dd-154ffb3bfed7"},"id":"0b34dc7a-20bb-4863-809e-340e604551e1","z":26,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"4b73a5d6-7c6f-4bcb-b9dd-154ffb3bfed7"},"target":{"id":"a0847725-3376-4aa7-91b0-dfe7066cbdec"},"id":"72fb5b27-5909-4c56-9d46-b3f301698610","z":27,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"a0847725-3376-4aa7-91b0-dfe7066cbdec"},"target":{"id":"fb9a74cd-43c5-436c-9e84-7dc1429bef2b"},"id":"11eb8b08-b8d1-4693-b09a-f9307d835c01","z":28,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"fb9a74cd-43c5-436c-9e84-7dc1429bef2b"},"target":{"id":"e6d0d2e3-0f74-4a14-873e-fc426863e17a"},"id":"828fc9f5-2f63-41f1-80bc-239d78766337","z":29,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"e6d0d2e3-0f74-4a14-873e-fc426863e17a"},"target":{"id":"38ca9ad9-fe69-440a-8dfa-a639900449aa"},"id":"c8f1465e-6367-47fa-afdd-1c985253efde","z":30,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"e6d0d2e3-0f74-4a14-873e-fc426863e17a"},"target":{"id":"675a2c82-c557-4f80-8b8e-e27153811c8b"},"id":"5e033ddc-5381-454b-8c5d-e55bad13e9d4","z":31,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"e6d0d2e3-0f74-4a14-873e-fc426863e17a"},"target":{"id":"f337347e-f12d-4771-bdda-24fd0909e437"},"id":"614be384-7c7c-43ff-ad69-3bc23d7a5631","z":32,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"4b73a5d6-7c6f-4bcb-b9dd-154ffb3bfed7"},"target":{"id":"ef55a7fb-c1a9-4de5-aec8-a86e891fd6ba"},"id":"8dbb0c9b-496b-45c9-b9a1-0f94aef5a768","z":33,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"ef55a7fb-c1a9-4de5-aec8-a86e891fd6ba"},"target":{"id":"f08d945a-2882-4b9a-8a78-9b54d56e33ce"},"id":"db307ebf-b0f8-489a-8a64-58046f3a679c","z":34,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"4b3cab8c-d8d6-453d-9005-874322ada2bb"},"target":{"id":"f08d945a-2882-4b9a-8a78-9b54d56e33ce"},"id":"9de66737-94e6-45df-8f67-cd10a43f9f01","z":35,"vertices":[{"x":414,"y":405}],"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"fb9a74cd-43c5-436c-9e84-7dc1429bef2b"},"target":{"id":"4b3cab8c-d8d6-453d-9005-874322ada2bb"},"id":"08171308-3b37-47a3-834b-dca995c09307","z":36,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"38ca9ad9-fe69-440a-8dfa-a639900449aa"},"target":{"id":"bfc2b861-2624-41ef-a202-7d99a71eaa50"},"id":"05ffd282-c5e6-4b34-82c3-17c3ccc571a4","z":37,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"675a2c82-c557-4f80-8b8e-e27153811c8b"},"target":{"id":"bfc2b861-2624-41ef-a202-7d99a71eaa50"},"id":"6939d31e-1889-4f22-85f7-e78d4ef42fc7","z":38,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"f337347e-f12d-4771-bdda-24fd0909e437"},"target":{"id":"bfc2b861-2624-41ef-a202-7d99a71eaa50"},"id":"b1100370-6730-40fd-a8a3-6cf08de96c4f","z":39,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"bfc2b861-2624-41ef-a202-7d99a71eaa50"},"target":{"id":"9e3b9ac2-d850-4d2a-93d3-fd571ccf3987"},"id":"386a5acd-917d-456c-95f8-4ce843f790ec","z":40,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"38ca9ad9-fe69-440a-8dfa-a639900449aa"},"target":{"id":"404cdecb-3bf6-4929-a075-223fa884aeac"},"id":"f3f5ff6a-445f-4b13-aca6-d2c2f4450c02","z":41,"vertices":[],"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"675a2c82-c557-4f80-8b8e-e27153811c8b"},"target":{"id":"404cdecb-3bf6-4929-a075-223fa884aeac"},"id":"57bc88ab-7322-4dcf-98e6-0d6e540d53c8","z":42,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"f337347e-f12d-4771-bdda-24fd0909e437"},"target":{"id":"404cdecb-3bf6-4929-a075-223fa884aeac"},"id":"bceba379-ccc4-4c3b-a801-13322b37f028","z":43,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"404cdecb-3bf6-4929-a075-223fa884aeac"},"target":{"id":"f08d945a-2882-4b9a-8a78-9b54d56e33ce"},"id":"7573005b-f7a4-4444-805b-48310f7107d8","z":44,"vertices":[{"x":998,"y":574},{"x":642,"y":587}],"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"basic.Rect","position":{"x":1328,"y":86},"size":{"width":50,"height":50},"angle":0,"id":"32b2061f-38bc-4533-88ac-2e4808bea895","z":45,"attrs":{"rect":{"fill":"green","stroke":"black","stroke-width":2},"text":{"fill":"white","text":"提交"}}},{"type":"link","source":{"id":"9e3b9ac2-d850-4d2a-93d3-fd571ccf3987"},"target":{"id":"32b2061f-38bc-4533-88ac-2e4808bea895"},"id":"817bfd11-c7ad-4614-b6e3-4455112468b9","z":46,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"32b2061f-38bc-4533-88ac-2e4808bea895"},"target":{"id":"42a8eec4-d3b3-4043-945f-176fa52e2620"},"id":"f4ab5069-f56d-4b03-85cb-5f76c28d00dc","z":47,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"9e3b9ac2-d850-4d2a-93d3-fd571ccf3987"},"target":{"id":"70918a68-1486-4e30-ade6-cf955927ecbe"},"id":"a5556cbb-cd85-409b-8e59-24e73fda4d3b","z":48,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"x":1366,"y":394},"target":{"id":"f08d945a-2882-4b9a-8a78-9b54d56e33ce"},"id":"4850ecd7-4b18-402c-a9b3-b913f6bc2c08","z":49,"vertices":[{"x":1212,"y":380},{"x":1179,"y":379},{"x":1147,"y":380},{"x":868,"y":575},{"x":748,"y":586}],"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}}]}';
graph.fromJSON(JSON.parse(jsonString))
</script>
</body>
</html>
</html>