Diagram vue

A SVG-based diagram component for Vue

Version: 0.3.3 Updated: 10/24/2020

By: pb10005 License: MIT

Downloads Last 30 Days: 190


npm i diagram-vue
yarn add diagram-vue

Repository: https://github.com/pb10005/diagram-vue


bundle.run: https://bundle.run/diagram-vue

jsDelivr: https://cdn.jsdelivr.net/npm/diagram-vue

unpkg: https://unpkg.com/diagram-vue


A SVG-based diagram component for Vue

Codacy Badge npm version npm npm

Screen shot


npm i diagram-vue --save


Edit diagram-vue

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.


1. Import

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

2. Template

        edit: 'Edit',
        remove: 'Remove',
        link: 'Link',
        select: 'Select',
        cancel: 'Cancel'

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

5. Get SVG as String

Use plain JavaScript.

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


Development Environment

See diagram-vue-dev-env

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

Customize configuration

See Configuration Reference.

Categories: Vue js