https://github.com/gwenaelp/vue-diagrams

Diagram component for vue.js, inspired by react-diagrams
https://github.com/gwenaelp/vue-diagrams

diagram vue vue-component vue-components

Last synced: 1 day ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/gwenaelp/vue-diagrams
• Owner: gwenaelp
• License: mit
• Created: 2018-04-12T01:06:07.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-12-03T01:38:57.000Z (11 months ago)
• Last Synced: 2024-04-24T15:27:00.877Z (7 months ago)
• Topics: diagram, vue, vue-component, vue-components
• Language: Vue
• Size: 8.92 MB
• Stars: 279
• Watchers: 13
• Forks: 63
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE.md
  • Code of conduct: .github/CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-starred - gwenaelp/vue-diagrams - Diagram component for vue.js, inspired by react-diagrams (vue)

README

        
# vue-diagrams

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

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

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

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

[See the website for documentation and demos](https://vue-diagrams.js.org/)

## Installation

```

npm install vue-diagrams

```

```

yarn add vue-diagrams

```

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

```html

  

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

  },

};

```

## Changelog

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

## Contributing

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