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

A editable SVG-based diagram component for Vue
https://github.com/pb10005/diagram-vue

bezier diagram diagram-vue json svg vue-component vue2

Last synced: 4 days ago
JSON representation

A editable SVG-based diagram component for Vue

• Host: GitHub
• URL: https://github.com/pb10005/diagram-vue
• Owner: pb10005
• License: mit
• Created: 2018-12-27T07:47:44.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T14:51:17.000Z (almost 2 years ago)
• Last Synced: 2024-08-09T02:25:14.345Z (3 months ago)
• Topics: bezier, diagram, diagram-vue, json, svg, vue-component, vue2
• Language: Vue
• Homepage: https://diagramvue.netlify.com
• Size: 3.46 MB
• Stars: 105
• Watchers: 4
• Forks: 32
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-starred - pb10005/diagram-vue - A editable SVG-based diagram component for Vue (json)

README

        
# diagram-vue

A SVG-based diagram component for Vue

[![Codacy Badge](https://api.codacy.com/project/badge/Grade/a66f2b18a900451693f7a41019abf79e)](https://app.codacy.com/app/pb10001/diagram-vue?utm_source=github.com&utm_medium=referral&utm_content=pb10001/diagram-vue&utm_campaign=Badge_Grade_Dashboard)

[![npm version](https://badge.fury.io/js/diagram-vue.svg)](https://badge.fury.io/js/diagram-vue)

![npm](https://img.shields.io/npm/dt/diagram-vue.svg)

![npm](https://img.shields.io/npm/dw/diagram-vue.svg)  

[Demo](https://diagramvue.netlify.com/)  

![Screen shot](https://raw.githubusercontent.com/pb10005/diagram-vue/master/img/screenshot.svg)

## Installation

```sh

npm i diagram-vue --save

```

## Usage

[![Edit diagram-vue](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/q7wj02ny2w)

### Ready-to-use editor

#### 1. Import

```js

import { DiagramEditor } from "diagram-vue";

import "diagram-vue/dist/diagram.css";

```

#### 2. Template

```html

```

See [Data specification](https://github.com/pb10005/diagram-vue/blob/master/DATA_SPECIFICATION.md).

### Customization

#### 1. Import

```js

import Diagram from 'diagram-vue';

import "diagram-vue/dist/diagram.css";

```

#### 2. Template

```html

```

#### 3. Props

```js

props: {

    width: Number,

    height: Number,

    background: String,

    nodes: Array,

    links: Array,

    editable: Boolean,

    labels: Object,

    fluid: Boolean

}

```

See [Data specification](https://github.com/pb10005/diagram-vue/blob/master/DATA_SPECIFICATION.md).

#### 4. Events

```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

},

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.

```js

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

```

## Development

### Development Environment

See [diagram-vue-dev-env](https://github.com/pb10005/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](https://cli.vuejs.org/config/).