用HTML5构建一个流程图绘制工具

刚 posted @ 2014年11月28日 16:27 in 软件开发 with tags html5 flowchart , 21674 阅读

分享到：更多

在我们的开发工程中经常会使用到各种图，所谓的图就是由节点和节点之间的连接所形成的系统，数学上专门有一个分支叫图论（Graph Theroy）。利用图我们可以做很多工具，比如思维导图，流程图，状态机，组织架构图，等等。今天我要做的是用开源的HTML5工具来快速构造一个做图的工具。

工具选择

预先善其事，必先利其器。第一件事是选择一件合适的工具，开源时代，程序员还是很幸福的，选择很多。

flowchart.js http://adrai.github.io/flowchart.js/ , 基于SVG创建Flow Chart
go.js http://www.gojs.net/latest/index.html go.js 提供一整套的JS工具，支持各种交互式图表的创建。有免费版和收费版
joint.js http://www.jointjs.com/ joint.js 是另一个创建图标库的工具，也提供免费版和商业版
jsPlumb http://www.jsplumb.org/ jsPlumb是一套开源的流程图创建工具，小巧精悍，使用简单
d3 http://d3js.org 在html5领域，d3可谓是最好的可视化基础库，提供方面的DOM操作，非常强大。

最终，我选择了jsPlumb，因为它完全开源，使用很简单，用D3的话可能会多花很多功夫。joint.js也不错。大家可以根据自己的需要选择。

构建静态应用

下面我们一步一步的来使用jsPlumb来创建我们的流程图工具。

第一步是等待DOM和jsPlumb初始化完毕，类似document.ready()和jquery.ready(), 要使用jsPlumb, 需要把代码放在这个函数里：

jsPlumb.ready(function() {
    // ... your code goes here ...
}

创建一个jsPlumb的实例，并初始化jsPlumb的配置参数：

//Initialize JsPlumb
var color = "#E8C870";
var instance = jsPlumb.getInstance({
    // notice the 'curviness' argument to this Bezier curve.  the curves on this page are far smoother
    // than the curves on the first demo, which use the default curviness value.      
    Connector : [ "Bezier", { curviness:50 } ],
    DragOptions : { cursor: "pointer", zIndex:2000 },
    PaintStyle : { strokeStyle:color, lineWidth:2 },
    EndpointStyle : { radius:5, fillStyle:color },
    HoverPaintStyle : {strokeStyle:"#7073EB" },
    EndpointHoverStyle : {fillStyle:"#7073EB" },
    Container:"container-id"
 });

这里给给出了一些配置包括，连接线（这里配置了一个贝塞尔曲线），线的风格，连接点得风格。Container需要配置一个对应的DIV容器的id。（这里也可以使用setContainer的方法）

下面我们要创建一个节点（node），每一个节点可以用一个DIV来实现。我这里提供了一个函数来创建节点。

function addNode(parentId, nodeId, nodeLable, position) {
  var panel = d3.select("#" + parentId);
  panel.append('div').style('width','120px').style('height','50px')
    .style('position','absolute')
    .style('top',position.y).style('left',position.x)
    .style('border','2px #9DFFCA solid').attr('align','center')
    .attr('id',nodeId).classed('node',true)
    .text(nodeLable);

  return jsPlumb.getSelector('#' + nodeId)[0];
}

这里做的事情就是创建了一个DIV元素，并放在对应的容器的制定位置上，注意为了支持拖拽的功能，必须使用position:absolute 。

我使用D3来操作DOM，大家可能会更习惯JQuery，这纯属个人喜好的问题。

最后返回创建节点的实例引用，这是的selector使用了jsPlumb.getSelector()方法，它和JQuery的selector是一样的，这样用的好处是你可以使用不同的DOM操作库，例如Vanilla

下面我使用一个函数来创建端点/锚点（anchor），锚点就是节点上的连接点，用于连接不同的节点。

function addPorts(instance, node, ports, type) {
  //Assume horizental layout
  var number_of_ports = ports.length;
  var i = 0;
  var height = $(node).height();  //Note, jquery does not include border for height
  var y_offset = 1 / ( number_of_ports + 1);
  var y = 0;

  for ( ; i < number_of_ports; i++ ) {
    var anchor = [0,0,0,0];
    var paintStyle = { radius:5, fillStyle:'#FF8891' };
    var isSource = false, isTarget = false;
    if ( type === 'output' ) {
      anchor[0] = 1;
      paintStyle.fillStyle = '#D4FFD6';
      isSource = true;
    } else {
      isTarget =true;
    }

    anchor[1] = y + y_offset;
    y = anchor[1];

    instance.addEndpoint(node, {
      uuid:node.getAttribute("id") + "-" + ports[i],
      paintStyle: paintStyle,
      anchor:anchor,
      maxConnections:-1,
      isSource:isSource,
      isTarget:isTarget
    });
  }
}

instance是jsPlumb的实例

node是我们用addNode方法创建的Node实例

ports，是一个string的数组，指定端点的个数和名字

type，可能是output或者input，指定端点的种类，一个节点的输出端口可以连接另一个节点的输入端口。

这里anchor是一个四维数组，0维和1维分别是锚点在节点x轴和y轴的偏移百分比。我这里希望把端口画在节点的左右两侧，并按照端口的数量均匀分布。

最后使用instance.addEndpoint来创建端点。注意这里只要指定isSource和isTarget就可以用drag&drop的方式来连接端点，非常方便。

下面一步我们提供一个函数来连接端点：

function connectPorts(instance, node1, port1, node2 , port2) {
  // declare some common values:
  var color = "gray";
  var arrowCommon = { foldback:0.8, fillStyle:color, width:5 },
  // use three-arg spec to create two different arrows with the common values:
  overlays = [
    [ "Arrow", { location:0.8 }, arrowCommon ],
    [ "Arrow", { location:0.2, direction:-1 }, arrowCommon ]
  ];

  var uuid_source = node1.getAttribute("id") + "-" + port1;
  var uuid_target = node2.getAttribute("id") + "-" + port2;

  instance.connect({uuids:[uuid_source, uuid_target]});
}

node1和node2是源节点和目标节点的引用，port1和port2是源端口和目标端口的名字。

使用instance.connect方法来创建连接。 overlays用来添加连接线的箭头效果或者其他风格，我这里没有使用，因为觉得都不是很好看。大家如果要用，只要把overlays加入到instance.connect的方法参数就可以了。

调用以上方法来创建节点，端点和连接线。

var node1 = addNode('container-id','node1', 'node1', {x:'80px',y:'20px'});
var node2 = addNode('container-id','node2', 'node2', {x:'280px',y:'20px'});

addPorts(instance, node1, ['out1','out2'],'output');
addPorts(instance, node2, ['in','in1','in2'],'input');

connectPorts(instance, node1, 'out2', node2, 'in');

这里我们创建了两个节点，第一个节点有两个输出端口，第二个节点有三个输入端口，然后把第一个节点的out2端口连接到第二个端点的in端口。效果如下：

最后我们给节点增加drag&drop的功能，这样我们就可以拖动这些节点来改变图的布局了。

instance.draggable($('.node'));

这里似乎依赖于JQuery-UI,我还不是很清楚。

交互式创建节点

我们已经初步具有了创建图的功能，可是节点的创建必须通过程序，我们希望用交互的方式来创建节点。

通常我们希望有一个tree view的控件，让后通过拖拽来创建对应类型的节点。这里我使用了这个开源的tree view，基于bootstrap https://github.com/jonmiles/bootstrap-treeview

我们先创建一个tree view：

function getTreeData() {
  var tree = [
    {
      text: "Nodes",
      nodes: [
        {
          text: "Node1",
        },
        {
          text: "Node2"
        }
      ]
    }
  ]; 

  return tree;
}
//Initialize Control Tree View
$('#control-panel').treeview({data: getTreeData()});

树上有两个节点:

然后我实现从树上拖拽对应的节点，到流程图上的逻辑。

//Handle drag and drop
$('.list-group-item').attr('draggable','true').on('dragstart', function(ev){
  //ev.dataTransfer.setData("text", ev.target.id);
  ev.originalEvent.dataTransfer.setData('text',ev.target.textContent);
  console.log('drag start');
});

$('#container-id').on('drop', function(ev){
  //avoid event conlict for jsPlumb
  if (ev.target.className.indexOf('_jsPlumb') >= 0 ) {
    return;
  }

  ev.preventDefault();
  var mx = '' + ev.originalEvent.offsetX + 'px';
  var my = '' + ev.originalEvent.offsetY + 'px';

  console.log('on drop : ' + ev.originalEvent.dataTransfer.getData('text'));
  var uid = new Date().getTime();
  var node = addNode('flow-panel','node' + uid, 'node', {x:mx,y:my});
  addPorts(instance, node, ['out'],'output');
  addPorts(instance, node, ['in1','in2'],'input');
  instance.draggable($(node));
}).on('dragover', function(ev){
  ev.preventDefault();
  console.log('on drag over');
});

这里要注意的是要避免和jsPlumb拖拽端点的逻辑冲突，当检测到target是jsPlumb对象是需要直接从drop方法中退出以执行对应的jsPlumb的drop逻辑。

好了，一个绘制流程图的软件工具初步完工。

我把代码放在oschina的代码托管服务上了，大家有兴趣可以下来试试 http://git.oschina.net/gangtao/FlowChart-Builder

分享到：更多

[回复]

独舞天威说:
2015年9月01日 14:40

go.js能用于商业上吗？？

[回复]

sdf 说:
2018年4月07日 22:13

sdfdfs

fdsfsdfsdf

sfd

fsd

dsf

dfsd

dsf

fsd

sdf

fsd

cvx

vxc

jgy

ytj

[回复]

f88tw┃华歌尔说:
2020年4月22日 20:43

敬启者：个人小网站希望大家多多支持感谢您对我们热心的支持 f88tw┃华歌尔┃I appreciate your kind assistance. f88tw|墓园|捡骨流程|捡骨费用|捡骨时间|禁忌|捡骨颜色|捡骨师|新竹|时间|台北|桃园|苗栗|头份|火化|晋塔|安葬|法事|捡骨|看日子|墓穴|墓园|坟墓|看日子|乞丐|http://mypaper.pchome.com.tw/f88tw

[回复]

f88tw 说:
2021年6月01日 17:46

敬启者：个人小网站希望大家多多支持感谢您对我们热心的支持 f88tw┃华歌尔┃I appreciate your kind assistance. f88tw| 粗工| 粗工内容 | 粗工| 粗工内容 |墓园|捡骨流程|捡骨费用|捡骨时间|禁忌|捡骨颜色|捡骨师|新竹|时间|台北|桃园|苗栗|头份|火化|捡骨|https://mypaper.m.pchome.com.tw/f88tw

[回复]

Bong88 说:
2021年6月26日 00:02

your writing style very good

[回复]

instanthack 说:
2021年7月08日 03:22

This is a very interesting web page and I have enjoyed reading many of the articles and posts contained on the website, keep up the good work and hope to read some more interesting content in the future.

[回复]

Cialis tablets 说:
2021年7月08日 13:50

[回复]

visit website 说:
2021年7月15日 02:21

I can’t imagine focusing long enough to research; much less write this kind of article. You’ve outdone yourself with this material. This is great content

[回复]

gwaa.net 说:
2021年7月16日 01:38

I was looking at some of your posts on this website and I conceive this web site is really instructive! Keep putting up.

[回复]

subcene 说:
2021年7月19日 08:49

hello!! Very interesting discussion glad that I came across such informative post. Keep up the good work friend. Glad to be part of your net community

[回复]

สล็อตฟรีเครดิต 说:
2021年7月20日 00:49

Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon. Big thanks for the useful info

[回复]

fire safety 说:
2021年7月20日 04:23

Hello! I just wish to give an enormous thumbs up for the nice info you've got right here on this post. I will probably be coming back to your weblog for more soon!

[回复]

moviesflix 说:
2021年7月22日 11:22

Fabulous post, you have denoted out some fantastic points, I likewise think this s a very wonderful website. I will visit again for more quality contents and also, recommend this site to all. Thanks.

[回复]

Akku Luftpumpe 说:
2021年7月23日 11:35

Thanks for sharing the post.. parents are worlds best person in each lives of individual..they need or must succeed to sustain needs of the family.

[回复]

Akku Luftpumpe 说:
2021年7月23日 11:35

Thanks for sharing the post.. parents are worlds best person in each lives of individual..they need or must succeed to sustain needs of the family.

[回复]

https://g.page/dr-go 说:
2021年7月24日 05:45

This is important, though it's necessary to help you head over to it weblink:

[回复]

fat burners 说:
2021年7月25日 06:12

Hello! I just wish to give an enormous thumbs up for the nice info you've got right here on this post. I will probably be coming back to your weblog for more soon!

[回复]

ambcrypto epaper 说:
2021年7月25日 11:33

I really appreciate this wonderful post that you have provided for us. I assure this would be beneficial for most of the people

[回复]

how long does it tak 说:
2021年7月26日 03:06

You make so many great points here that I read your article a couple of times. Your views are in accordance with my own for the most part. This is great content for your readers.

[回复]

penload 说:
2021年7月26日 12:48

I was looking at some of your posts on this website and I conceive this web site is really instructive! Keep putting up.

[回复]

visa de canadá 说:
2021年7月27日 13:46

This is important, though it's necessary to help you head over to it weblink

[回复]

nextbet 说:
2021年7月28日 11:27

Wonderful illustrated information. I thank you about that. No doubt it will be very useful for my future projects. Would like to see some other posts on the same subject!

[回复]

Travel Tourism 说:
2021年7月30日 15:46

Hey very nice blog!! Man .. Excellent .. Amazing .. I will bookmark your website and take the feeds also…I am happy to find a lot of useful info here in the post

[回复]

www.cacamart.com 说:
2021年7月31日 02:53

[回复]

amazon sale of phenq 说:
2021年7月31日 10:19

I appreciate everything you have added to my knowledge base.Admiring the time and effort you put into your blog and detailed information you offer.Thanks.

[回复]

hotmail.com ́ login 说:
2021年8月01日 14:01

Pretty good post. I have just stumbled upon your blog and enjoyed reading your blog posts very much. I am looking for new posts to get more precious info. Big thanks for the useful info.

[回复]

Uwatchfree 说:
2021年8月01日 17:51

Awesome dispatch! I am indeed getting apt to over this info, is truly neighborly my buddy. Likewise fantastic blog here among many of the costly info you acquire. Reserve up the beneficial process you are doing here.

[回复]

canada visa online 说:
2021年8月02日 16:41

You made some decent points there. I looked on the net for your issue and located most individuals will go as well as with the internet site.

[回复]

relx煙彈说:
2021年8月03日 15:17

Great! It sounds good. Thanks for sharing..

[回复]

free 3d 说:
2021年8月05日 19:08

Thanks for writing such a good article, I stumbled onto your blog and read a few post. I like your style of writing...

[回复]

加拿大签证在线说:
2021年8月06日 00:02

I wanted to leave a little comment to support you and wish you a good continuation. Wishing you the best of luck for all your blogging efforts.

[回复]

pawn phoenix 说:
2021年8月07日 01:18

Really your post is really very good and I appreciate it. It’s hard to sort the good from the bad sometimes.You definitely put a new spin on a topic thats been written about for years

[回复]

find out 说:
2021年8月08日 22:57

I can’t imagine focusing long enough to research; much less write this kind of article. You’ve outdone yourself with this material. This is great content

[回复]

khatrimaza 说:
2021年8月09日 18:13

I think this is one of the most significant information for me. And i’m glad reading your article. But should remark on some general things, The web site style is perfect, the articles is really great : D. Good job, cheers

[回复]

instant views 说:
2021年8月10日 02:32

This article gives the light in which we can observe the reality. This is very nice one and gives indepth information. Thanks for this nice article.

[回复]

instagram takipçi sa 说:
2021年8月10日 06:04

Really a great addition. I have read this marvelous post. Thanks for sharing information about it. I really like that. Thanks so lot for your convene.

[回复]

Visto Indiano 说:
2021年8月10日 23:07

I can’t imagine focusing long enough to research; much less write this kind of article. You’ve outdone yourself with this material. This is great content

[回复]

hindistan vizesi çev 说:
2021年8月14日 22:22

This article gives the light in which we can observe the reality. This is very nice one and gives indepth information. Thanks for this nice article.

[回复]

Yeni Zelanda ETA 说:
2021年8月16日 04:50

I can’t imagine focusing long enough to research; much less write this kind of article. You’ve outdone yourself with this material. This is great content

[回复]

blackjack 说:
2021年8月18日 10:34

I can’t imagine focusing long enough to research; much less write this kind of article. You’ve outdone yourself with this material. This is great content

[回复]

canada visum voor ne 说:
2021年8月23日 15:15

This article gives the light in which we can observe the reality. This is very nice one and gives indepth information. Thanks for this nice article.

[回复]

ติดตั้งกล้องวงจรปิด 说:
2021年8月24日 18:31

You make so many great points here that I read your article a couple of times. Your views are in accordance with my own for the most part. This is great content for your readers.

[回复]

Visto Indiano 说:
2021年8月25日 08:35

I can’t imagine focusing long enough to research; much less write this kind of article. You’ve outdone yourself with this material. This is great content

[回复]

188bet 说:
2021年8月25日 13:19

Wow, What an Outstanding post. I found this too much informatics. It is what I was seeking for. I would like to recommend you that please keep sharing such type of info.If possible, Thanks

[回复]

วีซ่าท่องเที่ยวอินเด 说:
2021年8月27日 06:37

You make so many great points here that I read your article a couple of times. Your views are in accordance with my own for the most part. This is great content for your readers.

[回复]

خصم 说:
2021年8月27日 23:13

Positive site, where did u come up with the information on this posting? I'm pleased I discovered it though, ill be checking back soon to find out what additional posts you include.

[回复]

mega888 apk download 说:
2021年8月28日 07:57

This is very useful, although it will be important to help simply click that web page link:

[回复]

canada visum voor ne 说:
2021年8月28日 10:03

You make so many great points here that I read your article a couple of times. Your views are in accordance with my own for the most part. This is great content for your readers.

[回复]

soaptoday 说:
2021年8月30日 02:21

I admire this article for the well-researched content and excellent wording. I got so involved in this material that I couldn’t stop reading. I am impressed with your work and skill. Thank you so much.

[回复]

soap2day movies 说:
2021年8月30日 23:28

Thanks for another informative website. Where else could I get that type of information written in such a perfect way? I have a project that I’m just now working on, and I’ve been on the look out for such info.

[回复]

merchant sales rep 说:
2021年8月31日 04:19

Cool you inscribe, the info is really salubrious further fascinating, I'll give you a connect to my scene

[回复]

this 说:
2021年9月01日 03:14

Thank you because you have been willing to share information with us. we will always appreciate all you have done here because I know you are very concerned with our.

[回复]

House Cleaning Servi 说:
2021年9月12日 22:40

There is a party of professionals in which are well trained in neuro-scientific housekeeping. They are simply experienced and additionally efficient in just about every house bind. You may well hire a fabulous part-time housemaid for Dubai or pc daily chores try full-time service personnel in Dubai. With us, go to unlock quite a plethora of cleaning offerings.

[回复]

ท่อHDPE 说:
2021年9月15日 03:03

The information you have posted is very useful. The sites you have referred was good. Thanks for sharing.

[回复]

Bruno Nicoletti 说:
2021年9月18日 01:45

i was just browsing along and came upon your blog. just wanted to say good blog and this article really helped me <a href="https://www.marketwatch.com/press-release/bruno-nicoletti-selected-as-ceo-of-the-year-by-ceo-monthly-magazine-2021-09-99">Bruno Nicoletti</a>

[回复]

elizabeth rabbit 说:
2021年9月18日 14:12

[回复]

Bruno Nicoletti 说:
2021年9月21日 02:24

Great! It sounds good. Thanks for sharing..

[回复]

uae visa services 说:
2021年9月21日 06:12

wow very nice <a href="https://opseon.com/">uae visa services</a>

[回复]

FB88 说:
2021年9月23日 17:27

This is important, though it's necessary to help you head over to it weblink:

[回复]

Satta king 说:
2021年9月24日 07:00

Thanks for writing such a good article, I stumbled onto your blog and read a few post. I like your style of writing...

[回复]

merchant sales rep 说:
2021年9月24日 11:44

However, you must remember that not all sports betting software will yield you sizable returns in your sports trading activities.

[回复]

slot 说:
2021年9月25日 03:13

[回复]

afdah 说:
2021年9月27日 06:10

I visit your blog regularly and recommend it to all of those who wanted to enhance their knowledge with ease. The style of writing is excellent and also the content is top-notch. Thanks for that shrewdness you provide the readers!

[回复]

tshirts for nerds 说:
2021年9月27日 22:55

[回复]

Stage Curaçao 说:
2021年9月28日 14:27

Amazing, this is great as you want to learn more, I invite to This is my page.

[回复]

Stage op Curaçao 说:
2021年9月30日 10:27

Wow, this is fascinating reading. I am glad I found this and got to read it. Great job on this content. I liked it a lot. Thanks for the great and unique info.

[回复]

here 说:
2021年10月01日 05:35

You have done a great job on this article. It’s very readable and highly intelligent. You have even managed to make it understandable and easy to read. You have some real writing talent. Thank you.

[回复]

white label 说:
2021年10月02日 17:25

I all around need to uncover to you that I am new to weblog and totally respected this blog page. Reliable I'm going to bookmark your blog . All of you around have mind blowing stories. Offers of interest familiarizing with us your blog.

[回复]

ฉีดฟิลเลอร์คาง 说:
2021年10月03日 13:57

This was really an interesting topic and I kinda agree with what you have mentioned here!

[回复]

Bruno Nicoletti 说:
2021年10月04日 03:56

nice post, keep up with this interesting work. It really is good to know that this topic is being covered also on this web site so cheers for taking time to discuss this

[回复]

Bruno Nicoletti 说:
2021年10月04日 03:57

This was really an interesting topic and I kinda agree with what you have mentioned here!

[回复]

Bruno Nicoletti 说:
2021年10月04日 03:58

all around need to uncover to you that I am new to weblog and totally respected this blog page. Reliable I'm going to bookmark your blog . All of you around have mind blowing stories. Offers of interest familiarizing with us your blog.

[回复]

guest post, guestpo 说:
2021年10月07日 02:19

This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value of providing a quality resource for free.

[回复]

Buy Naughty One Stra 说:
2021年10月11日 03:03

wow very nice <a href="https://somkingundispensary.com/">Buy Naughty One Strain Online</a>

[回复]

san francisco seo se 说:
2021年10月26日 00:33

Thanks for the post

[回复]

دانلود فیلم سریال 说:
2021年10月26日 06:02

Everything has its own value, but this is really precious information shared by Author of