diagram-vue

    0.3.3 • Public • Published

    diagram-vue

    A SVG-based diagram component for Vue

    Codacy Badge npm version npm npm

    Demo
    Screen shot

    Installation

    npm i diagram-vue --save

    Usage

    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.

    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
    }
     

    5. Get SVG as String

    Use plain JavaScript.

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

    Development

    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.

    Install

    npm i diagram-vue

    DownloadsWeekly Downloads

    231

    Version

    0.3.3

    License

    MIT

    Unpacked Size

    1.06 MB

    Total Files

    68

    Last publish

    Collaborators

    • avatar