vue-diagrams

    0.0.1-development • Public • Published

    vue-diagrams

    Rollup badge Jest Vue Storybook Commitizen semantic-release Npm badge Build Status

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

    Generated using 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.

    ES6

    //
    // You can register a component manually
    //
    import { Diagram } from 'vue-diagrams';
     
    export default {
      ...
      components: {
        Diagram
      },
      ...
    };
     
    //
    // or register the whole module with vue
    //
    import ModuleLibrary from 'vue-diagrams';
     
    // Install this library
    Vue.use(ModuleLibrary);

    CommonJS

    //
    // You can register a component manually
    //
    var Vue = require('vue');
    var ModuleLibrary = require('vue-diagrams');
     
    var YourComponent = Vue.extend({
      ...
      components: {
        'diagram': ModuleLibrary.Diagram
      },
      ...
    });
     
    //
    // or register the whole module with vue
    //
    var Vue = require('vue');
    var ModuleLibrary = require('vue-diagrams');
     
    // Install this library
    Vue.use(ModuleLibrary);

    Browser

    <script src="path/to/vue/vue.min.js"></script>
    <script src="path/to/vue-diagrams/dist/vue-diagrams.min.js"></script>
    <!-- Components are registered globally -->

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

    <template>
      <diagram :model="model"></diagram>
    </template>
    <script>
    <script>
    export default {
      data() {
        const diagramModel = new DiagramModel();
     
        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
        };
      }
    };
    </script> 

    Changelog

    See the GitHub release history.

    Contributing

    See CONTRIBUTING.md.

    Install

    npm i vue-diagrams

    DownloadsWeekly Downloads

    137

    Version

    0.0.1-development

    License

    MIT

    Unpacked Size

    162 kB

    Total Files

    18

    Last publish

    Collaborators

    • gwenaelp