身为一个码农,在家无事想想最近的项目需要用到工作流,由于之前对工作流不太熟悉,在家学习一下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: { 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: { 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'), 600, height: 200, model: graph, gridSize: 1 }); var rect = new joint.shapes.basic.Rect({ position: { x: 100, y: 30 }, size: { 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: { 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>