An Editable SVG-based Diagram Component For Vue

vuejs-diagram-editor

Diagram is a Vue-based library for creating SVG-based diagrams.

vuejs diagram editor, vue diagram library, syncfusion vue diagram, vue block diagram, vue simple flowchart, vue workflow builder, flowy vue example

How to make use of it:

Installation

npm i diagram-vue --save

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
}

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

document.getElementById('svg-diagram-show-area').innerHTML; // <svg ...>...</svg>

SVG Diagram Component, diagram-vue Plugin/Github, vue js network diagram


See Demo And Download

Official Website(pb10005): Click Here

This superior jQuery/javascript plugin is developed by pb10005. For extra Advanced usage, please go to the official website.

Share