解析HTML流程图,JointJS JavaScript流程图绘制框架解析

JointJS：JavaScript 流程图绘制框架

最近调研了js画流程图的框架，最后选择了Joint。配合上 dagre 可以画出像模像样的流程图。

JointJS 简介

JointJS 是一个开源前端框架，支持绘制各种各样的流程图、工作流图等。Rappid 是 Joint 的商业版，提供了一些更强的插件。JointJS 的特点有下面几条，摘自官网：

能够实时地渲染上百(或者上千)个元素和连接

支持多种形状(矩形、圆、文本、图像、路径等)

高度事件驱动，用户可自定义任何发生在 paper 下的事件响应

元素间连接简单

可定制的连接和关系图

连接平滑(基于贝塞尔插值 bezier interpolation)& 智能路径选择

基于 SVG 的可定制、可编程的图形渲染

NodeJS 支持

通过 JSON 进行序列化和反序列化

总之 JoingJS 是一款很强的流程图制作框架，开源版本已经足够日常使用了。

一些常用地址：

JointJS Hello world

var graph = new joint.dia.Graph;

var paper = new joint.dia.Paper({

el: document.getElementById('myholder'),

model: graph,

width: 600,

height: 100,

gridSize: 1

});

var rect = new joint.shapes.standard.Rectangle();

rect.position(100, 30);

rect.resize(100, 40);

rect.attr({

body: {

fill: 'blue'

},

label: {

text: 'Hello',

fill: 'white'

}

});

rect.addTo(graph);

var rect2 = rect.clone();

rect2.translate(300, 0);

rect2.attr('label/text', 'World!');

rect2.addTo(graph);

var link = new joint.shapes.standard.Link();

link.source(rect);

link.target(rect2);

link.addTo(graph);

hello world 代码没什么好说的。要注意这里的图形并没有自动排版，而是通过移动第二个 rect 实现的手动排版。

前后端分离架构

既然支持 NodeJs，那就可以把繁重的图形绘制任务交给服务器，再通过 JSON 序列化在 HTTP 上传输对象，这样减轻客户端的压力。

NodeJS 后端

var express = require('express');

var joint = require('jointjs');

var app = express();

function get_graph(){

var graph = new joint.dia.Graph();

var rect = new joint.shapes.standard.Rectangle();

rect.position(100, 30);

rect.resize(100, 40);

rect.attr({

body: {

fill: 'blue'

},

label: {