# @chadmarchand/vue-diagrams

> Diagram component for vue.js, inspired by react-diagrams

Latest version **0.0.2** (published 2019-05-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @chadmarchand/vue-diagrams
pnpm add @chadmarchand/vue-diagrams
yarn add @chadmarchand/vue-diagrams
bun add @chadmarchand/vue-diagrams
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2019-05-07 |
| First published | 2019-05-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8.9.0 |
| Dependencies | 7 |
| Unpacked size | 287.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 300 |
| Author | Gwenael Pluchon |
| Maintainers | chadmarchand |
| Keywords | vue, vue-component, vue-library |

## Links

- npm: https://www.npmjs.com/package/@chadmarchand/vue-diagrams
- Repository: https://github.com/gwenaelp/vue-diagrams
- Homepage: https://github.com/gwenaelp/vue-diagrams#readme
- Issues: https://github.com/gwenaelp/vue-diagrams/issues
- npm.io page: https://npm.io/package/@chadmarchand/vue-diagrams

## Dependencies (7)

- [vue](https://npm.io/package/vue.md) ^2.5.17
- [webpack](https://npm.io/package/webpack.md) ^4.30.0
- [svg-pan-zoom](https://npm.io/package/svg-pan-zoom.md) ^3.5.3
- [vue-svg-pan-zoom](https://npm.io/package/vue-svg-pan-zoom.md) ^0.1.0
- [vue-class-component](https://npm.io/package/vue-class-component.md) ^6.3.2
- [vue-property-decorator](https://npm.io/package/vue-property-decorator.md) ^7.2.0
- [draggable-vue-directive](https://npm.io/package/draggable-vue-directive.md) ^1.1.0

## Recent versions

- 0.0.2 (latest) — 2019-05-07
- 0.0.1 — 2019-05-07
- 0.0.1-development — 2019-05-07

## README

# vue-diagrams

![Rollup badge](https://img.shields.io/badge/Rollup-^0.53.3-ff69b4.svg)
![Jest](https://img.shields.io/badge/Jest-^22.0.4-blue.svg)
![Vue](https://img.shields.io/badge/Vue-^2.5.13-brightgreen.svg)
![Storybook](https://img.shields.io/badge/Storybook-^3.3.3-ff70a3.svg)
![Commitizen](https://img.shields.io/badge/Commitizen-enabled-brightgreen.svg)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
![Npm badge](https://img.shields.io/npm/v/vue-diagrams.svg)
[![Build Status](https://travis-ci.org/gwenaelp/vue-diagrams.svg?branch=master)](https://travis-ci.org/gwenaelp/vue-diagrams)

> Diagram component for vue.js, inspired by react-diagrams

![](./images/example1.png)

> Generated using [vue-cli-template-library](https://github.com/julon/vue-cli-template-library).

## Installation
```
npm install vue-diagrams
```
vue-diagrams can be used as a module in both CommonJS and ES modular environments.

When in non-modular environment, vue-diagrams will register all the components to vue by itself.</p>

### After that, you can use it in your Vue components:

```html
<template>
  <diagram :model="model"></diagram>
</template>
<script>
import { Diagram } from 'vue-diagrams';

export default {
  data() {
    const diagramModel = new Diagram.Model();

    const node1 = diagramModel.addNode("test2", 300, 200);
    const inPort = node1.addInPort("test");

    const node2 = diagramModel.addNode("test", 10, 300, 144, 80);
    const node2OutPort = node2.addOutPort("testOut");
    node2.addOutPort("testOut2");
    node2.color = '#00cc66';

    const node3 = diagramModel.addNode("test3", 10, 100, 72, 100);
    const node3OutPort = node3.addOutPort("testOut3");
    node3.color = '#cc6600';

    diagramModel.addLink(node2OutPort, inPort);
    diagramModel.addLink(node3OutPort, inPort);

    return {
      model: diagramModel
    };
  },

  components: {
    Diagram
  },
};
</script>
```

## Changelog

See the GitHub [release history](https://github.com/gwenaelp/vue-diagrams/releases).

## Contributing

See [CONTRIBUTING.md](.github/CONTRIBUTING.md).

---
_Source: https://npm.io/package/@chadmarchand/vue-diagrams · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._