很多人在工作或者生活中有需要绘制流程图，而流程图的绘制，很大程度上要依赖工具来完成，不同的工具具有不同的功能，如何在众多的流程图软件中找到适合自己的呢？本文就来给大家盘点几款好用的流程图绘制工具。

GitMind

官网传送门：https://gitmind.cn/

GitMind是一款多平台免费在线流程图制作软件，它汇集了泳道图，拓扑图、数据流图、ER图、分析图、活动图以及用例图等十多种图形的绘制功能。你可以通过选图、拖动以及添加连接线这3个简单的步骤快速绘制出专业的各类流程图。

GitMind制作流程图教程：https://gitmind.cn/faq/flowchart.html

推荐理由：

使用完全免费，在线自动保存

简单，迅速，方便，小白用户也能快速上手

作图元素多，分类齐全又直观

支持绘制思维导图、泳道图，拓扑图、数据流图、ER图等多图形

流程图模板丰富，新手直接套用模板就能作图

导出格式多，图片、PDF等都可以高清无水印导出

亿图图示

官网传送门：https://www.edrawmax.cn/

亿图图示是一款比较老牌的流程图制作软件，主要支持制作项目管理流程图、程序流程图、工作流程图等。操作也简单，可以将绘制的图形同步到多个平台上。

美中不足的是，个人免费版功能和制作文件数会受到限制，如果你想无限制的使用，则需要支付一定的费用。

推荐理由：

软件提供的符号库很丰富

流程图模板比较丰富

支持多种格式下载

支持多平台同步使用

总结

以上就是为大家推荐的两款常用流程图软件了，两款软件都各有优缺点。相比较来说，亿图图示作为老牌产品，软件功能、图形丰富度以及素材种类上会比GitMind要丰富很多，但下载导出文件等需要开通会员；而GitMind作为一款新型作图工具，功能、图形等基本可以满足日常需求，所有功能都可以免费使用。

因此，如果你正在寻找一款在线制作流程图的软件，而且资金有限，GitMind是一个不错的选择。

    最近公司有个导航项目需要做个流程图比较复杂的那种，作为一个前端小菜也是很蒙的，要求就两条一：动态加载流程图；二：动态连线；这两点要求也是难住了一阵呢，最后选择了jointJS，选着原因官网API很详细，代码量比较少封装起来使用也很便捷，进阶文档基础略过，没接触过得可以去在官网先学习一下，废话不多少直接上硬菜。

    我这块写了两个一个是节点型流程图和关系行流程图。（源码在下一篇文章可以下载查看示例）

节点型流程图

  一 准备文件

1.jquery

2.Lodash.js

3.Backbone.js

4.joint.js

5.joint.css

<script src="jquery.min.js"></script>
<script src="lodash.min.js"></script>
<script src="backbone-min.js"></script>
<script src="joint.js"></script>
<link rel="stylesheet" type="text/css" href="joint.css" />

这些官网都可以下载。

前四个顺序一定不能乱！！！（也是坑了一次）

二 进阶

 1.创建数据模块要出现的画板

<div class="ProcessDiv"></div>

     因为是动态加载的数据，但是导航图需要的是坐标，数据加载出来的位置是不固定的所以需要建立一个隐藏的区域把joint画板覆盖上边。

2.创建joint画板

<div id="paper"></div>

html代码：

<div class="ProcessDiv"></div>
<div id="paper"></div>

Js代码：

 var graph = new joint.dia.Graph;

    var paper = new joint.dia.Paper({
        el: $('#paper'),
        width: 20000,
        height: 20000,
        gridSize: 1,
        model: graph
    });

定义Joint的画布和画板，然后我封装了两个函数用来定义线和模块，方便使用减少代码量，在写代码方面也很很懒的，哈哈继续继续。

 //定义模块形状
var stat = function(x, y, shape, background, text) {
				var cell;
				if(shape === "rect") {
					cell = new joint.shapes.basic.Rect({
						position: {
							x: x,
							y: y
						}, //坐标
						size: {
							width: 140,
							height: 40
						}, //宽高
						attrs: {
							rect: {
								fill: {
									type: 'linearGradient',
									stops: [{
											offset: '0%',
											color: background
										}, //渐变开始
										{
											offset: '100%',
											color: background
										}
									], //渐变结束
									attrs: {
										x1: '0%',
										y1: '0%',
										x2: '0%',
										y2: '100%'
									}
								},
								stroke: background, //边框颜色
								'stroke-width': 1 //边框大小
							},
							text: {
								text: text,
								'ref-x': .5,
								'ref-y': .5,
								fill: '#000'
							}, //显示文字
						}
					});
				} else if(shape === "ellipse") {
					cell = new joint.shapes.basic.Ellipse({
						position: {
							x: x,
							y: y
						}, //坐标
						size: {
							width: 140,
							height: 40
						}, //宽高
						attrs: {
							ellipse: {
								fill: {
									type: 'linearGradient',
									stops: [{
											offset: '0%',
											color: background
										}, //渐变开始
										{
											offset: '100%',
											color: '#FFFFFF'
										} //渐变结束
									],
									attrs: {
										x1: '0%',
										y1: '0%',
										x2: '0%',
										y2: '100%'
									}
								},
								stroke: background, //边框颜色
								'stroke-width': 1 //边框大小
							},
							text: {
								text: text,
								'ref-x': .5,
								'ref-y': .5,
								fill: '#000'
							}, //显示文字
						}
					});
				}
				graph.addCell(cell);
				return cell;
			};

 rect为方形,circle为圆形，还有stroke：边框颜色，具体其他样式官网很详细。

//定义连线
			function link(source, target, label) {
				var cell = new joint.dia.Link({
					source: {
						id: source.id
					},
					target: {
						id: target.id
					},
					labels: [{
						position: 0.5,
						attrs: {
							text: {
								text: label || '',
								'font-weight': 'bold'
							}
						}
					}],

					attrs: {
						'.connection': {
							stroke: '#333333', //连线颜色
							'stroke-width': 4 //连线粗细
						},
						'.marker-target': {
							fill: '#000', //箭头颜色
							d: 'M 10 0 L 0 5 L 10 10 z' //箭头样式
						}
					}
				});
				graph.addCell(cell);
				return cell;
			}

导航流程图需要的根据节点进行连接，数据结构如下

var data = [
				[{
					title: '订单',
					tolink: "",
					state: "1",
					id: "1",
					name: '订单'
				}],
				[{
					title: '预售',
					tolink: "1",
					state: "1",
					id: "2",
					name: '预售'
				}, {
					title: '预售2',
					tolink: "1",
					state: "0",
					id: "3",
					name: '预售2'
				}],
				[{
					title: '采购清单',
					tolink: "2",
					state: "-1",
					id: "4",
					name: '采购清单'
				}, {
					title: '待加工',
					tolink: "2",
					state: "-1",
					id: "5",
					name: '待加工'
				}]
			]

      state代表状态，这里可以随意定义，比较懒就直接-1，0，1定义了，id是必须需要的因为要根据id找坐标，tolink是当前上一个连接节点的id。这里结构一定要根据节点划分，每一级的节点要在一个数组里也是方便下一步遍历操作，当然大家也可以用其他方法都是可以的这方面刚接触前端还在摸索中。

三 动态连接

  var arraylist = [];
    $.each(data, function (index, item1) {
        $(".ProcessDiv").append("<div class='process'></div>")
        $.each(item1, function (index2, item2) {
            $(".process").eq(index).append("<p id='" + item1[index2].id + "'>" + item1[index2].title + "</p>")
            debugger
            var id1 = item1[index2].id
            var arrValue1 = arraylist[id1];
            var y = $("#" + id1).offset().top;
            var x = $("#" + id1).offset().left;
            var name = item1[index2].name
            var n = item1[index2].state
            if (arrValue1 == undefined) {
                switch (n) {
                    case "1":
                        arraylist[id1] = stat(x, y, "rect", "green", name);
                        break;
                    case "0":
                        arraylist[id1] = stat(x, y, "rect", "yellow", name);
                        break;
                    default:
                        arraylist[id1] = stat(x, y, "rect", "red", name);
                }
            }
            if (item1[index2].tolink != "") {
                var id2 = item1[index2].tolink
                var arrValue2 = arraylist[id2];
                var y2 = $("#" + id2).offset().top;
                var x2 = $("#" + id2).offset().left;
                var state = item1[index2].state
                if (arrValue2 == undefined) {
                    arraylist[id2] = stat(x2, y2, "rect", "#000");
                }
                link(arraylist[id2], arraylist[id1]);
            }

        });

    });

   这里需要用到字典数组，放置重复生成模块这坑也是摔的妥妥的，定义一个数组arraylist，然后进行第一次遍历data，根据数组个数也就是节点创建节点区域process，然后进行二次遍历，拿到遍历到的节点添加到对应的节点区域，遍历时候根据id存入字典数组，再次遍历是如果存在就直接使用，没有在创建，这一步是防止一个父节点连接多个子节点时候重复创建，创建var根据offset().top;和offset().left，存入y,x坐标，，如果tolink==""就保存父节点，根据state决定当前接节点状态及颜色，这下坐标有了，id有了就可以连接了。

link(arraylist[id2], arraylist[id1]);

完整代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/joint.css" />
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/lodash.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/backbone.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/joint.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/template.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.left {
				float: left;
				height: 100%;
				width: 20%;
			}
			
			html,
			body,
			#paper {
				height: 100%;
				width: 100%;
			}
			
			#paper {
				position: absolute;
				top: 0;
			}
			
			p {
				margin: 50px 0;
			}
		</style>
	</head>

	<body>
		<div id="paper" class="paper"></div>
		<div class="box"></div>
		<script type="text/javascript">
			var graph = new joint.dia.Graph();
			//定义画布
			var paper = new joint.dia.Paper({
				el: $('#paper'),
				width: 1200,
				height: 600,
				gridSize: 1,
				model: graph
			});
			paper.$el.css('pointer-events', 'none')
			//定义形状
			var stat = function(x, y, shape, background, text) {
				var cell;
				if(shape === "rect") {
					cell = new joint.shapes.basic.Rect({
						position: {
							x: x,
							y: y
						}, //坐标
						size: {
							width: 140,
							height: 40
						}, //宽高
						attrs: {
							rect: {
								fill: {
									type: 'linearGradient',
									stops: [{
											offset: '0%',
											color: background
										}, //渐变开始
										{
											offset: '100%',
											color: background
										}
									], //渐变结束
									attrs: {
										x1: '0%',
										y1: '0%',
										x2: '0%',
										y2: '100%'
									}
								},
								stroke: background, //边框颜色
								'stroke-width': 1 //边框大小
							},
							text: {
								text: text,
								'ref-x': .5,
								'ref-y': .5,
								fill: '#000'
							}, //显示文字
						}
					});
				} else if(shape === "ellipse") {
					cell = new joint.shapes.basic.Ellipse({
						position: {
							x: x,
							y: y
						}, //坐标
						size: {
							width: 140,
							height: 40
						}, //宽高
						attrs: {
							ellipse: {
								fill: {
									type: 'linearGradient',
									stops: [{
											offset: '0%',
											color: background
										}, //渐变开始
										{
											offset: '100%',
											color: '#FFFFFF'
										} //渐变结束
									],
									attrs: {
										x1: '0%',
										y1: '0%',
										x2: '0%',
										y2: '100%'
									}
								},
								stroke: background, //边框颜色
								'stroke-width': 1 //边框大小
							},
							text: {
								text: text,
								'ref-x': .5,
								'ref-y': .5,
								fill: '#000'
							}, //显示文字
						}
					});
				}
				graph.addCell(cell);
				return cell;
			};

			//定义连线
			function link(source, target, label) {
				var cell = new joint.dia.Link({
					source: {
						id: source.id
					},
					target: {
						id: target.id
					},
					labels: [{
						position: 0.5,
						attrs: {
							text: {
								text: label || '',
								'font-weight': 'bold'
							}
						}
					}],

					attrs: {
						'.connection': {
							stroke: '#333333', //连线颜色
							'stroke-width': 4 //连线粗细
						},
						'.marker-target': {
							fill: '#000', //箭头颜色
							d: 'M 10 0 L 0 5 L 10 10 z' //箭头样式
						}
					}
				});
				graph.addCell(cell);
				return cell;
			}

			var data = [
				[{
					title: '订单',
					tolink: "",
					state: "1",
					id: "1",
					name: '订单'
				}],
				[{
					title: '预售',
					tolink: "1",
					state: "1",
					id: "2",
					name: '预售'
				}, {
					title: '预售2',
					tolink: "1",
					state: "0",
					id: "3",
					name: '预售2'
				}],
				[{
					title: '采购清单',
					tolink: "2",
					state: "-1",
					id: "4",
					name: '采购清单'
				}, {
					title: '待加工',
					tolink: "2",
					state: "-1",
					id: "5",
					name: '待加工'
				}]
			]

			console.log(data)
			var arraylist = [];
			$.each(data, function(index, item1) {
				$(".box").append("<div class='left'></div>")

				$.each(item1, function(index2, item2) {

					$(".left").eq(index).append("<p id='" + item1[index2].id + "'>" + item1[index2].title + "</p>")
					debugger
					var id1 = item1[index2].id
					var arrValue1 = arraylist[id1];
					var y = $("#" + id1).offset().top;
					var x = $("#" + id1).offset().left;
					var name = item1[index2].name
					var n = item1[index2].state
					if(arrValue1 == undefined) {

						switch(n) {
							case "1":
								arraylist[id1] = stat(x, y, "rect", "#99ff00", name);
								break;
							case "0":
								arraylist[id1] = stat(x, y, "rect", "#FFFF00", name);
								break;
							default:
								arraylist[id1] = stat(x, y, "rect", "red", name);

						}

					}
					if(item1[index2].tolink != "") {
						var id2 = item1[index2].tolink
						var arrValue2 = arraylist[id2];
						var y2 = $("#" + id2).offset().top;
						var x2 = $("#" + id2).offset().left;
						var state = item1[index2].state
						if(arrValue2 == undefined) {
							arraylist[id2] = stat(x2, y2, "rect", "#000");
						}
						link(arraylist[id2], arraylist[id1]);
					}

				});

			});
		</script>
	</body>

</html>

效果图

基本节点流程图就这样了只需要后台传入数据就可以了

关系型流程图

 关系型流程图就有点复杂，主要复杂在数据结构这方面，结构如下图

字典数组和遍历和节点流程图一样，但是关系这块要在一个数组里面包含所有关联的信息，在创建隐藏模版这块推荐使用模版引擎（template.js）搭配joint堪称完美！！

效果图如下：

写得有点仓促样式可能不太 咳咳，基本的方法效果还是实现了，先这样吧有不足的地方欢迎大家一起学习讨论！