Vue.js

The diagram-view Vue.js component allows integrating the MindFusion.Diagramming API into Vue.js applications. It renders a Diagram instance assigned to "diagram" prop as its model.

At this time the following properties can be set from vue templates too: allowInplaceEdit, autoResize, backBrush, behavior, defaultShape, enabled, linkHeadShapeSize, linkShape, roundedLinks, routeLinks, showAnchors, showGrid, zoomFactor. All diagram events can be handled through the v-on directive as well:

vue

this.diagram = new Diagramming.Diagram();
...
<diagram-view
    id="diagram"
    :diagram="this.diagram"
    :allow-inplace-edit="true"
    :route-links="true"
    :show-grid="true"
    back-brush="lightcyan"
    v-on:node-created="onDiagramNodeCreated"
    v-on:diagram-changed="onDiagramChanged"
/>

diagram-view can be installed from the @mindfusion/diagramming-vue package on npm:

npm i @mindfusion/diagramming-vue

Several Vue.js examples are included in JsDiagram's distribution. In order to run them, execute the following npm commands from command line in Samples/Vue folder:

npm install
npm run serve