A SVG-based diagram component for Vue

Diagram Vue

A vue component library of diagrams

Installation

source-shell
npm i diagram-vue --save

Usage

Edit diagram-vue

Ready to use editor

1. Import

source-js
import { DiagramEditor } from "diagram-vue";
import "diagram-vue/dist/diagram.css";

2. Template

text-html-basic
<DiagramEditor v-model="graph"></DiagramEditor>

See Data specification.

Customization

1. Import

source-js
import Diagram from 'diagram-vue';
import "diagram-vue/dist/diagram.css";

2. Template

text-html-basic
<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

source-js
props: {
    width: Number,
    height: Number,
    background: String,
    nodes: Array,
    links: Array,
    editable: Boolean,
    labels: Object,
    fluid: Boolean
}

See Data specification.

4. Events

source-js
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
}

5. Get SVG as String

Use plain JavaScript.

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

Development

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

Download Details:

Author: pb10005

Live Demo: https://diagram.netlify.com/

Official Website: https://github.com/pb10005/diagram-vue

#vuejs #javascript #vue-js