{"id":13559204,"url":"https://github.com/pb10005/diagram-vue","last_synced_at":"2025-04-03T14:31:31.094Z","repository":{"id":33954182,"uuid":"163264411","full_name":"pb10005/diagram-vue","owner":"pb10005","description":"A editable SVG-based diagram component for Vue","archived":false,"fork":false,"pushed_at":"2022-12-10T14:51:17.000Z","size":3631,"stargazers_count":105,"open_issues_count":10,"forks_count":32,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-15T09:05:53.512Z","etag":null,"topics":["bezier","diagram","diagram-vue","json","svg","vue-component","vue2"],"latest_commit_sha":null,"homepage":"https://diagramvue.netlify.com","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/pb10005.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}},"created_at":"2018-12-27T07:47:44.000Z","updated_at":"2024-05-28T19:04:05.000Z","dependencies_parsed_at":"2023-01-15T03:35:05.517Z","dependency_job_id":null,"html_url":"https://github.com/pb10005/diagram-vue","commit_stats":null,"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pb10005%2Fdiagram-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pb10005%2Fdiagram-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pb10005%2Fdiagram-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pb10005%2Fdiagram-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pb10005","download_url":"https://codeload.github.com/pb10005/diagram-vue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247018477,"owners_count":20870006,"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":["bezier","diagram","diagram-vue","json","svg","vue-component","vue2"],"created_at":"2024-08-01T12:05:25.671Z","updated_at":"2025-04-03T14:31:30.696Z","avatar_url":"https://github.com/pb10005.png","language":"Vue","funding_links":[],"categories":["Vue","json"],"sub_categories":[],"readme":"# diagram-vue\nA SVG-based diagram component for Vue\n\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/a66f2b18a900451693f7a41019abf79e)](https://app.codacy.com/app/pb10001/diagram-vue?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=pb10001/diagram-vue\u0026utm_campaign=Badge_Grade_Dashboard)\n[![npm version](https://badge.fury.io/js/diagram-vue.svg)](https://badge.fury.io/js/diagram-vue)\n![npm](https://img.shields.io/npm/dt/diagram-vue.svg)\n![npm](https://img.shields.io/npm/dw/diagram-vue.svg)  \n\n[Demo](https://diagramvue.netlify.com/)  \n![Screen shot](https://raw.githubusercontent.com/pb10005/diagram-vue/master/img/screenshot.svg)\n## Installation\n```sh\nnpm i diagram-vue --save\n```\n## Usage\n[![Edit diagram-vue](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/q7wj02ny2w)\n### Ready-to-use editor\n#### 1. Import\n```js\nimport { DiagramEditor } from \"diagram-vue\";\nimport \"diagram-vue/dist/diagram.css\";\n```\n#### 2. Template\n```html\n\u003cDiagramEditor v-model=\"graph\"\u003e\u003c/DiagramEditor\u003e\n```\nSee [Data specification](https://github.com/pb10005/diagram-vue/blob/master/DATA_SPECIFICATION.md).\n\n### Customization\n#### 1. Import\n```js\nimport Diagram from 'diagram-vue';\nimport \"diagram-vue/dist/diagram.css\";\n```\n#### 2. Template\n```html\n\u003cDiagram\n    :width=\"2000\"\n    :height=\"1000\"\n    :fluid=\"false\"\n    scale=\"1\"\n    background=\"#fafafa\"\n    :nodes=\"nodes\"\n    :links=\"links\"\n    :editable=\"editable\"\n    :labels=\"{\n        edit: 'Edit',\n        remove: 'Remove',\n        link: 'Link',\n        select: 'Select',\n        cancel: 'Cancel'\n    }\"\n    @editNode=\"editNode\"\n    @editLink=\"editLink\"\n    @nodeChanged=\"nodeChanged\"\n    @linkChanged=\"linkChanged\"\n    \u003e\n\u003c/Diagram\u003e\n```\n#### 3. Props\n```js\nprops: {\n    width: Number,\n    height: Number,\n    background: String,\n    nodes: Array,\n    links: Array,\n    editable: Boolean,\n    labels: Object,\n    fluid: Boolean\n}\n```\nSee [Data specification](https://github.com/pb10005/diagram-vue/blob/master/DATA_SPECIFICATION.md).\n\n#### 4. Events\n```js\neditNode(node /* selected node */) {\n    /* event handler */\n},\neditLink(link /* selected link */) {\n    /* event handler */\n},\nnodeChanged(obj /* array of nodes */) {\n    /* event handler */\n    const nodes = obj.nodes\n},\nlinkChanged(obj /* array of links */) {\n    /* event handler */\n    const links = obj.links\n},\nnodeRemoved(id /*Identifier of node*/){\n    /* event handler */\n},\nlinkRemoved(id /*Identifier of link*/){\n    /* event handler */\n},\nnodeClicked(id /* identifier of node */) {\n   /* event handler */\n   console.log(\"your clicked in node: \", id)\n},\nlinkClicked(id /* identifier of link */) {\n   /* event handler */\n   console.log(\"your clicked in link: \", id)\n}\n```\n\n#### 5. Get SVG as String\nUse plain JavaScript.\n```js\ndocument.getElementById('svg-diagram-show-area').innerHTML; // \u003csvg ...\u003e...\u003c/svg\u003e\n```\n\n## Development\n### Development Environment\nSee [diagram-vue-dev-env](https://github.com/pb10005/diagram-vue-dev-env)\n\n## Project setup\n```\nyarn install\n```\n\n### Compiles and hot-reloads for development\n```\nyarn run serve\n```\n\n### Compiles and minifies for production\n```\nyarn run build\n```\n\n### Run your tests\n```\nyarn run test\n```\n\n### Lints and fixes files\n```\nyarn run lint\n```\n\n### Run your end-to-end tests\n```\nyarn run test:e2e\n```\n\n### Run your unit tests\n```\nyarn run test:unit\n```\n\n### Customize configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpb10005%2Fdiagram-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpb10005%2Fdiagram-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpb10005%2Fdiagram-vue/lists"}