diagram-vue
A SVG-based diagram component for Vue
Installation
npm i diagram-vue --saveUsage
Ready-to-use editor
1. Import
import { DiagramEditor } from "diagram-vue";
import "diagram-vue/dist/diagram.css";2. Template
<DiagramEditor v-model="graph"></DiagramEditor>See Data specification.
Customization
1. Import
import Diagram from 'diagram-vue';
import "diagram-vue/dist/diagram.css";2. Template
<Diagram
:width="2000"
:height="1000"
:fluid="false"
scale="1"
background="#fafafa"
:nodes="nodes"
:links="links"
:editable="editable"
:labels="{
edit: 'Edit',
remove: 'Remove',
link: 'Link',
select: 'Select',
cancel: 'Cancel'
}"
@editNode="editNode"
@editLink="editLink"
@nodeChanged="nodeChanged"
@linkChanged="linkChanged"
>
</Diagram>3. Props
props: {
width: Number,
height: Number,
background: String,
nodes: Array,
links: Array,
editable: Boolean,
labels: Object,
fluid: Boolean
}See Data specification.
4. Events
editNode(node /* selected node */) {
/* event handler */
},
editLink(link /* selected link */) {
/* event handler */
},
nodeChanged(obj /* array of nodes */) {
/* event handler */
const nodes = obj.nodes
},
linkChanged(obj /* array of links */) {
/* event handler */
const links = obj.links
},
nodeRemoved(id /*Identifier of node*/){
/* event handler */
},
linkRemoved(id /*Identifier of link*/){
/* event handler */
},
nodeClicked(id /* identifier of node */) {
/* event handler */
console.log("your clicked in node: ", id)
},
linkClicked(id /* identifier of link */) {
/* event handler */
console.log("your clicked in link: ", id)
}5. Get SVG as String
Use plain JavaScript.
document.getElementById('svg-diagram-show-area').innerHTML; // <svg ...>...</svg>Development
Development Environment
Project setup
yarn install
Compiles and hot-reloads for development
yarn run serve
Compiles and minifies for production
yarn run build
Run your tests
yarn run test
Lints and fixes files
yarn run lint
Run your end-to-end tests
yarn run test:e2e
Run your unit tests
yarn run test:unit