{"id":13822081,"url":"https://github.com/joyceworks/flowchart-vue","last_synced_at":"2025-05-16T15:32:41.562Z","repository":{"id":40341731,"uuid":"254231917","full_name":"joyceworks/flowchart-vue","owner":"joyceworks","description":"Flowchart \u0026 designer component for Vue.js.","archived":false,"fork":false,"pushed_at":"2024-07-04T07:36:46.000Z","size":8663,"stargazers_count":339,"open_issues_count":1,"forks_count":74,"subscribers_count":8,"default_branch":"main","last_synced_at":"2024-07-19T03:46:29.805Z","etag":null,"topics":["flowchart","vuejs"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/joyceworks.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-09T00:28:25.000Z","updated_at":"2024-07-13T21:09:02.000Z","dependencies_parsed_at":"2023-01-31T04:01:45.514Z","dependency_job_id":"992e8b0b-2d14-4592-8ac5-12cae9bfed84","html_url":"https://github.com/joyceworks/flowchart-vue","commit_stats":{"total_commits":197,"total_committers":4,"mean_commits":49.25,"dds":0.2893401015228426,"last_synced_commit":"02753fde7bf0b87b43253a5cde38ff1c6b7b7df8"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joyceworks%2Fflowchart-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joyceworks%2Fflowchart-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joyceworks%2Fflowchart-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joyceworks%2Fflowchart-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joyceworks","download_url":"https://codeload.github.com/joyceworks/flowchart-vue/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":213893315,"owners_count":15653524,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flowchart","vuejs"],"created_at":"2024-08-04T08:01:41.744Z","updated_at":"2024-08-04T08:07:38.819Z","avatar_url":"https://github.com/joyceworks.png","language":"Vue","funding_links":[],"categories":["Vue","Components \u0026 Libraries","UI Components [🔝](#readme)"],"sub_categories":["UI Components"],"readme":"# Flowchart\n\nFlowchart \u0026 Flowchart designer component for Vue.js([flowchart-react](https://github.com/joyceworks/flowchart-react) for React.js).\n\n[![NPM](https://img.shields.io/npm/v/flowchart-vue.svg)](https://www.npmjs.com/package/flowchart-vue)\n\n\u003cimg width=\"801\" alt=\"image\" src=\"https://user-images.githubusercontent.com/5696485/156284211-1bd18756-d785-440a-8292-4fdeb89fca5b.png\"\u003e\n\n## Usage\n\n```shell script\nyarn add flowchart-vue\n```\n\n```vue\n\u003ctemplate\u003e\n    \u003cdiv id=\"app\"\u003e\n        \u003cbutton type=\"button\" @click=\"$refs.chart.add({id: +new Date(), x: 10, y: 10, name: 'New', type: 'operation', approvers: []})\"\u003e\n            Add\n        \u003c/button\u003e\n        \u003cbutton type=\"button\" @click=\"$refs.chart.remove()\"\u003e\n            Del\n        \u003c/button\u003e\n        \u003cbutton type=\"button\" @click=\"$refs.chart.editCurrent()\"\u003e\n            Edit\n        \u003c/button\u003e\n        \u003cbutton type=\"button\" @click=\"$refs.chart.save()\"\u003e\n            Save\n        \u003c/button\u003e\n        \u003cbutton type=\"button\" v-if=\"showRemovingConfirmation\" @click=\"confirmRemoving\"\u003e\n            Confirm removing\n        \u003c/button\u003e\n        \u003cbutton type=\"button\" v-if=\"showRemovingConfirmation\" @click=\"showRemovingConfirmation = false\"\u003e\n            Reject removing\n        \u003c/button\u003e\n        \u003cflowchart :nodes=\"nodes\" \n                   :connections=\"connections\" \n                   :remove-requires-confirmation=\"true\"\n                   @editnode=\"handleEditNode\"\n                   @dblclick=\"handleDblClick\" \n                   @editconnection=\"handleEditConnection\"\n                   @removeconfirmationrequired=\"initRemovingConfirmation\"\n                   @save=\"handleChartSave\" ref=\"chart\"\u003e\n        \u003c/flowchart\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\n  import Vue from 'vue';\n  import FlowChart from 'flowchart-vue';\n\n  Vue.use(FlowChart);\n\n  export default {\n    name: 'App',\n    data: function() {\n      return {\n        nodes: [\n          // Basic fields\n          {id: 1, x: 140, y: 270, name: 'Start', type: 'start'},\n          // You can add any generic fields to node, for example: description\n          // It will be passed to @save, @editnode\n          {id: 2, x: 540, y: 270, name: 'End', type: 'end', description: 'I\\'m here'},\n        ],\n        connections: [\n          {\n            source: {id: 1, position: 'right'},\n            destination: {id: 2, position: 'left'},\n            id: 1,\n            type: 'pass',\n          },\n        ],\n        showRemovingConfirmation: false,\n      };\n    },\n    methods: {\n      handleChartSave(nodes, connections) {\n        // axios.post(url, {nodes, connections}).then(resp =\u003e {\n        //   this.nodes = resp.data.nodes;\n        //   this.connections = resp.data.connections;\n        //   // Flowchart will refresh after this.nodes and this.connections changed\n        // });\n      },\n      handleEditNode(node) {\n        if (node.id === 2) {\n          console.log(node.description);\n        }\n      },\n      handleEditConnection(connection) {\n      },\n      handleDblClick(position) {\n        this.$refs.chart.add({\n          id: +new Date(),\n          x: position.x,\n          y: position.y,\n          name: 'New',\n          type: 'operation',\n          approvers: [],\n        });\n      },\n      initRemovingConfirmation() {\n        this.showRemovingConfirmation = true;\n      },\n      confirmRemoving() {\n        this.$refs.chart.confirmRemove();\n        this.showRemovingConfirmation = false;\n      }\n    }\n  };\n\u003c/script\u003e\n```\n\nSee more at [src/views/App.vue](https://github.com/joyceworks/flowchart-vue/blob/master/src/views/App.vue).\n\n## Demo\n\n- [GitHub Pages](https://joyceworks.github.io/flowchart-vue/)\n- [CodeSandbox](https://codesandbox.io/s/funny-shaw-971s84)\n- [Flowchart Vue Demo](https://github.com/joyceworks/flowchart-vue-demo)\n- Development Environment\n\n  ``` shell\n  git clone https://github.com/joyceworks/flowchart-vue.git\n  cd flowchart-vue\n  yarn install\n  yarn run serve\n  ```\n  \n  Then open http://localhost:yourport/ in browser.\n\n## API\n\n## Props\n\nProperty|Description|Type|Default\n-|-|-|-\nnodes|Collection of nodes|`Array`|`[{id: 1, x: 140, y: 270, name: 'Start', type: 'start'}, {id: 2, x: 540, y: 270, name: 'End', type: 'end'}]`\nconnections|Collection of connections|`Array`|`[{source: {id: 1, position: 'right'}, destination: {id: 2, position: 'left'}, id: 1, type: 'pass',          }]`\nwidth|Width of canvas|`String` \\| `Number`|`800`\nheight|Height of canvas|`String` \\| `Number`|`600`\nlocale|Display language, available values: `'en'`, `'zh'`|`String`|`'en'`\nreadonly|Read-only|`Boolean`|false\nrender|Custom render function|`null`\nreadOnlyPermissions|Allows to specify more granular read-only mode permissions|`Object`|`{ allowDragNodes: false, allowSave: false, allowAddNodes: false, allowEditNodes: false, allowEditConnections: false, allowDblClick: false, allowRemove: false }`\n\n## Events\n\nEvent|Description|Handler\n-|-|-\neditnode|Node double-click event|`(node) =\u003e void`\neditconnection|Connection double-click event|`(connection) =\u003e void`\nsave|Save event|`(nodes, connections) =\u003e void`\ndblclick|Background double-click event|`(position: {x: number, y: number}) =\u003e void`\nconnect|Connect event|`(connection, nodes, connections) =\u003e void`\ndisconnect|Disconnect event|`(connection, nodes, connections) =\u003e void`\nadd|Add node event|`(node, nodes, connections) =\u003e void`\ndelete|Delete node event|`(node, nodes, connections) =\u003e void`\nselect|Select node event|`nodes =\u003e void`\nselectconnection|Select connection event|`connections =\u003e void`\nrender|Node render event, children is a collection of svg elements |`(node: Node, children: { header, title, body, content }) =\u003e vod`\nnodesdragged|Notifies which nodes dragging just ended|`(nodes) =\u003e void`\nremoveConfirmationRequired|Notifies that remove confirmation required. Pass nodes and connections selected to remove|`(nodes, connections) =\u003e void`\nmovediff|Notifies about change in chart view position|`(diff: {x: number, y: number}) =\u003e void`\n\n### Properties.Node\n\nProperty|Description\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;|Type|Default\n-|-|-|-\nid|ID|`Number`|`+new Date()`\nx|Horizontal position of node|`Number`|-\ny|Vertical position of node|`Number`|-\ntype|Type of node|`String`|`'operation'`\nwidth|Width of node|`Number`|`120`\nheight|Height of node|`Number`|`60`\napprovers|Approvers of node, eg: [{name: 'admin'}]|`Array`|[]\nconnectors|Defines which connectors should be rendered|`Array`|['top', 'right', 'bottom', 'left']\ntheme|Defines colors for specified node elements|`Object`|`{ borderColor: \"#bbbbbb\", borderColorSelected: \"#666666\", headerTextColor: \"black\", headerBackgroundColor: \"#f1f3f4\", bodyBackgroundColor: \"white\", bodyTextColor: \"black\" }`\n\n### Properties.Connection\n\nProperty|Description\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;|Type|Default\n-|-|-|-\nid|ID|`Number`|`+new Date()`\nsource|Source of connection|`Object`|-\ndestination|Destination of connection|`Object`|-\ntype|Type of connection|`String`|`pass`\n\n### Properties.Connection.Source \u0026 Properties.Connection.Destination\n\nProperty|Description\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;|Type|Default\n-|-|-|-\nid|Node id|`Object`|-\nposition|Starting/Ending position of node|`Object`|-\n\n### Slot\nIf you want you can pass value as slot. It allows you to add new UI elements to chart playground.\nThese slot elements aren't selectable - are ignored while selection. Moreover actions on click and on double click are disabled\nin area filled by passed elements. \nYou can use this functionality to e.g. in quite easy way add toolbar inside.\n\n```vue\n\u003cflowchart ...\u003e\n  \u003cdiv id=\"toolbox\" style=\"position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; \n                           display: flex; align-items: center; \n                           background-color: rgba(225, 225, 225, 0.7);\"\u003e\n    \u003cbutton @click=\"$refs.chart.remove()\"\u003eDelete(Del)\u003c/button\u003e\n    \u003cbutton @click=\"$refs.chart.editCurrent()\"\u003e\n      Edit(Double-click node)\n    \u003c/button\u003e\n    \u003cbutton @click=\"$refs.chart.save()\"\u003eSave\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/flowchart\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoyceworks%2Fflowchart-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoyceworks%2Fflowchart-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoyceworks%2Fflowchart-vue/lists"}