index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script> <script src="https://cdn.jsdelivr.net/npm/vue-diagram-editor@^1/dist/vue-diagram-editor.umd.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-diagram-editor@^1/dist/vue-diagram-editor.min.css"> </head> <body> <div id="app"> <diagram-editor ref="diagram"></diagram-editor> </div> <script> // register the component Vue.component('diagram-editor', VueDiagramEditor.Diagram); new Vue({ el: '#app', data: { nodes: { 'node-1': { id: 'node-1', title: 'My node 1', size: { width: 200, height: 220 }, portsOut: { default: '' } }, 'node-2': { id: 'node-2', title: 'My node 2', size: { width: 200, height: 220 }, coordinates: { x: 280, y: 100 }, portsIn: { default: 'in port' } }, }, links: { 'link-1': { id: 'link-1', start_id: 'node-1', start_port: 'default', end_id: 'node-2', end_port: 'default' } } }, mounted() { this.init(); }, methods: { init() { this.$refs.diagram.setModel({ nodes: this.nodes, links: this.links }); } } }); </script> </body> </html> |
