<!DOCTYPE html> <html> <head> <link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/2.1.0/joint.css" /> </head> <body> <!-- content --> <div></div> <!-- dependencies 通过CDN加载依赖--> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/2.1.0/joint.js"></script> <!-- code --> <script type="text/javascript"> var graph = new joint.dia.Graph; var paper = new joint.dia.Paper({ el: document.getElementById('myholder'), model: graph, width: 2000, height: 2000, gridSize: 1 }); $.get('http://192.168.237.128:8071/graph', function(data, statue){ graph.fromJSON(data); }); </script> </body> </html>
结果：
使用 HTML 定制元素
流程图中的每个点，也就是是元素，都可以自定义，直接编写 html 代码能添加按钮、输入框、代码块等。
我的一个代码块 demo，搭配 highlight.js 可以达到类似 IDA 控制流图的效果。这个 feature 可玩度很高。
joint.shapes.BBL = {}; joint.shapes.BBL.Element = joint.shapes.basic.Rect.extend({ defaults: joint.util.deepSupplement({ type: 'BBL.Element', attrs: { rect: { stroke: 'none', 'fill-opacity': 0 } } }, joint.shapes.basic.Rect.prototype.defaults) }); // Create a custom view for that element that displays an HTML div above it. // ------------------------------------------------------------------------- joint.shapes.BBL.ElementView = joint.dia.ElementView.extend({ template: [ '<div data-collapse>', '<label></label><br/>', '<div><pre><code></code></pre></span></div>', '</div>' ].join(''), initialize: function() { _.bindAll(this, 'updateBox'); joint.dia.ElementView.prototype.initialize.apply(this, arguments); this.$box = $(_.template(this.template)()); // Prevent paper from handling pointerdown. this.$box.find('h3').on('mousedown click', function(evt) { evt.stopPropagation(); }); // Update the box position whenever the underlying model changes. this.model.on('change', this.updateBox, this); // Remove the box when the model gets removed from the graph. this.model.on('remove', this.removeBox, this); this.updateBox(); }, render: function() { joint.dia.ElementView.prototype.render.apply(this, arguments); this.paper.$el.prepend(this.$box); this.updateBox(); return this; }, updateBox: function() { // Set the position and dimension of the box so that it covers the JointJS element. var bbox = this.model.getBBox(); // Example of updating the HTML with a data stored in the cell model. this.$box.find('label').text(this.model.get('label')); this.$box.find('code').html(this.model.get('code')); var color = this.model.get('color'); this.$box.css({ width: bbox.width, height: bbox.height, left: bbox.x, top: bbox.y, background: color, "border-color": color }); }, removeBox: function(evt) { this.$box.remove(); } });