{"id":13445720,"url":"https://github.com/OXOYO/X-Flowchart-Vue","last_synced_at":"2025-03-21T05:31:03.866Z","repository":{"id":43187049,"uuid":"90735266","full_name":"OXOYO/X-Flowchart-Vue","owner":"OXOYO","description":"基于G6和Vue的可视化图形编辑器。A visual graph editor based on G6 and Vue.","archived":false,"fork":false,"pushed_at":"2024-08-11T09:33:15.000Z","size":16257,"stargazers_count":1476,"open_issues_count":8,"forks_count":330,"subscribers_count":40,"default_branch":"master","last_synced_at":"2025-03-20T10:44:26.137Z","etag":null,"topics":["flowchart","g6","g6-editor","gg-editor","jsplumb","mind","processon","vue-flowchart","workflow","xfc"],"latest_commit_sha":null,"homepage":"http://oxoyo.co/X-Flowchart-Vue/","language":"JavaScript","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/OXOYO.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":"http://oxoyo.co/2022/02/10/pay-me/pay-me.png"}},"created_at":"2017-05-09T10:52:18.000Z","updated_at":"2025-03-17T20:05:20.000Z","dependencies_parsed_at":"2024-12-04T20:10:45.287Z","dependency_job_id":"ce7552ed-e977-4f5f-a625-46721f6b9995","html_url":"https://github.com/OXOYO/X-Flowchart-Vue","commit_stats":{"total_commits":279,"total_committers":4,"mean_commits":69.75,"dds":"0.043010752688172005","last_synced_commit":"63eae751a7d2e22c8495a2f9b18be23ffb568615"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OXOYO%2FX-Flowchart-Vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OXOYO%2FX-Flowchart-Vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OXOYO%2FX-Flowchart-Vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OXOYO%2FX-Flowchart-Vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OXOYO","download_url":"https://codeload.github.com/OXOYO/X-Flowchart-Vue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244745688,"owners_count":20503044,"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","g6","g6-editor","gg-editor","jsplumb","mind","processon","vue-flowchart","workflow","xfc"],"created_at":"2024-07-31T05:00:38.317Z","updated_at":"2025-03-21T05:31:03.848Z","avatar_url":"https://github.com/OXOYO.png","language":"JavaScript","funding_links":["http://oxoyo.co/2022/02/10/pay-me/pay-me.png"],"categories":["Libraries","Examples [🔝](#readme)","Resources","awesome-vue [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg) ★101652](https://github.com/sindresorhus/awesome)","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","JavaScript"],"sub_categories":["Graph Editing","Examples","例子"],"readme":"# X-Flowchart-Vue\n\n\u003e A visual graph editor based on G6 and Vue.\n\n[![Version](https://img.shields.io/npm/v/@oxoyo/xfc.svg)](https://www.npmjs.com/package/@oxoyo/xfc)\n[![License](https://img.shields.io/npm/l/@oxoyo/xfc.svg)](https://www.npmjs.com/package/@oxoyo/xfc)\n[![NPM downloads](http://img.shields.io/npm/dm/@oxoyo/xfc.svg)](https://npmjs.org/package/@oxoyo/xfc)\n[![Downloads](https://img.shields.io/npm/dt/@oxoyo/xfc.svg)](https://www.npmjs.com/package/@oxoyo/xfc)\n![GitHub issues](https://img.shields.io/github/issues/OXOYO/X-Flowchart-Vue)\n![GitHub closed issues](https://img.shields.io/github/issues-closed/OXOYO/X-Flowchart-Vue)\n![GitHub repo size](https://img.shields.io/github/repo-size/oxoyo/X-Flowchart-Vue)\n![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/OXOYO/X-Flowchart-Vue)\n![Lines of code](https://img.shields.io/tokei/lines/github/OXOYO/X-Flowchart-Vue)\n![GitHub Sponsors](https://img.shields.io/github/sponsors/OXOYO)\n\n\n## 预览\n\n[online](http://oxoyo.co/X-Flowchart-Vue/)\n\n## 示例\n\n``` bash\n# git clone https://github.com/OXOYO/X-Flowchart-Vue.git\n\n# install dependencies\nyarn install\n\n### run dev\nyarn run serve\n```\n\n## 功能\n\n| 功能       | 默认启用 | 快捷键            | 工具栏 | 右键菜单 | 备注   |\n| :--------- | :--- | :--------------- | :----- | :----- | :---- |\n| logo       | ✔   |                   | ✔     | ✖      | Logo | \n| undo       | ✔   | ctrl + z          | ✔     | ✔      | 撤销 | \n| clearLog   | ✔   | ctrl + shift + l  | ✔     | ✔      | 清空操作日志 | \n| history    | ✔   | ctrl + shift + h  | ✔     | ✔      | 操作日志 | \n| redo       | ✔   | ctrl + shift + z  | ✔     | ✔      | 重做 | \n| copy       | ✔   | ctrl + c          | ✔     | ✔      | 复制 | \n| paste      | ✔   | ctrl + v          | ✔     | ✔      | 粘贴 | \n| delete     | ✔   | Delete            | ✖     | ✔      | 删除 | \n| clear      | ✔   | ctrl + shift + c  | ✔     | ✔      | 清空画布 |\n| zoom       | ✔   |                   | ✔     | ✔      | 缩放 |\n| zoomIn     | ✔   | ctrl + +          | ✔     | ✔      | 放大 |\n| zoomOut    | ✔   | ctrl + -          | ✔     | ✔      | 缩小 |\n| fit        | ✔   | ctrl + 0          | ✔     | ✔      | 适应屏幕 |\n| actualSize | ✔   | ctrl + 1          | ✔     | ✔      | 实际大小 |\n| canvasBackground | ✔   |                   | ✔     | ✔      | 画布背景 |\n| fill       | ✔   |                   | ✔     | ✔      | 填充颜色 |\n| lineColor  | ✔   |                   | ✔     | ✔      | 线条颜色 |\n| lineWidth  | ✔   |                   | ✔     | ✔      | 线条宽度 |\n| lineDash   | ✔   |                   | ✔     | ✔      | 线条样式 |\n| lineType   | ✔   |                   | ✔     | ✔      | 线条类型 |\n| startArrow | ✔   |                   | ✔     | ✔      | 起点 |\n| endArrow   | ✔   |                   | ✔     | ✔      | 终点 |\n| toFront    | ✔   |                   | ✔     | ✔      | 置于顶层 |\n| toBack     | ✔   |                   | ✔     | ✔      | 置于底层 |\n| selectAll  | ✔   | ctrl + a          | ✔     | ✔      | 全选 |\n| edit       | ✔   |                   | ✔     | ✔      | 编辑模式 |\n| preview    | ✔   |                   | ✔     | ✔      | 预览模式 |\n| upload     | ✔   |                   | ✔     | ✔      | 上传 |\n| download   | ✔   |                   | ✔     | ✔      | 下载 |\n| fullscreen | ✔   |                   | ✔     | ✔      | 全屏 |\n| language   | ✔   |                   | ✔     | ✔      | 语言 |\n| github     | ✖   |                   | ✔     | ✔      | Github |\n| feedback   | ✖   |                   | ✔     | ✔      | 反馈 |\n| help       | ✔   |                   | ✔     | ✔      | 帮助 |\n| up         | ✔   | up                | ✖     | ✖      | 上 |\n| down       | ✔   | down              | ✖     | ✖      | 下 |\n| left       | ✔   | left              | ✖     | ✖      | 左 |\n| right      | ✔   | right             | ✖     | ✖      | 右 |\n\n\n# 使用指南\n\n## 起步\n\n### 安装\n```\nnpm i @oxoyo/xfc --save\n```\n\n### 引用\n```\nimport xfc from '@oxoyo/xfc'\nimport '@oxoyo/xfc/dist/xfc.css'\n\n// 初始化\nconst xfcEditor = xfc({\n    el: '#xfc'\n})\n```\n\n## 配置\n\n在初始化 `xfc` 实例时，可以配置参数。\n\n### props\n| 参数       | 说明                      | 类型            | 可选值 | 默认值 |\n| :--------- | :----------------------- | :--------------- | :----- | :----- |\n| tools       | 全量配置工具项，覆写系统默认工具项信息，详见[全量配置tools](#tools)   | Object | - | - |\n| enableTools |【与tools互斥，配置后以此为主】设置要启用的系统工具项 | Array | - | - |\n| disableTools |【与tools、enableTools互斥，配置后以此为主】设置要禁用的系统工具项 | Array | - | - |\n| shortcutMap |【与tools互斥，配置后以此为主】设置自带的工具项的快捷键 | Object | - | - |\n| materials   | 全量配置物料列表，覆写系统默认物料，详见[全量配置materials](#materials)   | Array | - | - |\n| enableMaterials |【与materials互斥，配置后以此为主】设置要启用的系统物料 | Object | - | - |\n| system | 配置系统信息 | Object | - | - |\n| storage | 配置本地存储信息 | Object | - | - |\n| i18n | 配置多语言 | Object | - | - |\n| infoPanel | 信息面板配置 | Object | - | - |\n\n#### tools\n全量配置工具项，覆写系统默认工具项信息，自定义程度高，\u003cspan style=\"color: red; font-weight: 800;\"\u003e无非必要不建议配置此项\u003c/span\u003e。\n\n***tools数据结构***\n`tools` 下可以设置 `toolList` 与 `shortcutMap`\n\n```\nxfc({\n  el: '#xfc',\n  props: {\n    tools: {\n      toolList: [...],\n      shortcutMap: {...}\n    }\n  }\n})\n```\n\n***tools.toolList下单个工具配置字段说明：***\n```\n{\n      // 工具项名称，保持唯一性，便于区分工具项\n      name: 'logo',\n      // 文本，无lang时可取label值显示\n      label: 'logo',\n      // 多语言code码\n      lang: 'L10000',\n      // 工具项类型，不同的工具类型在ToolBar、ContextMenu里的表现不一样\n      type: 'link',\n      // 工具项图标\n      icon: '',\n      img: system.logo,\n      // 跳转连接\n      link: system.site,\n      // 是否启用该工具项，用户控制是否启用该工具项\n      enableTool: true,\n      // 是否启用，用于动态控制是否在界面上创建该工具项\n      enable: true,\n      // 启用模式，用于控制在什么模式下启用该工具项\n      enableMode: ['edit', 'preview'],\n      // 是否禁用，用于控制界面上已创建的工具项是否处于禁用状态\n      disabled: false,\n      // 禁用模式，用于控制在什么模式下该工具项处于禁用状态，详见Editor/Index.vue 中的doSetMode方法\n      disabledMode: ['edit', 'preview'],\n      // 热键\n      shortcuts: '',\n      // 工具栏\n      toolbar: {\n        // 是否启用\n        enable: true,\n        // 位置\n        position: 'left',\n        // 样式\n        style: {\n          opacity: 1\n        },\n        // 分割线，是否在该工具项后显示分割线，ToolBar中为竖线，ContextMenu中为横线\n        divider: false\n      },\n      // 右键菜单\n      contextmenu: {\n        // 是否启用\n        enable: false,\n        // 目标元素类型，用于控制在什么元素上可以显示该工具项\n        target: [],\n        style: {},\n        // 分割线，是否在该工具项后显示分割线，ToolBar中为竖线，ContextMenu中为横线\n        divider: false\n      }\n    }\n```\n\n***tools.shortcutMap下单个工具配置字段说明：***\n\n```\nshortcutMap: {\n  // 工具名\n  undo: {\n    // 工具名 \n    tool: 'undo',\n    // 快捷键\n    key: 'mod+z',\n    // 快捷键文本\n    label: 'Ctrl + Z',\n    // 快捷键描述\n    description: '' \n  }\n}\n```\n    \n#### enableTools\n【与tools互斥，配置后以此为主】设置要启用的工具项。\n\n```\nxfc({\n  el: '#xfc',\n  props: {\n    enableTools: [\n      // 日志相关\n      'undo',\n      'clearLog',\n      'history',\n      'redo',\n      // 复制、粘贴\n      'copy',\n      'paste',\n      // 删除\n      'delete',\n      // 清空画布\n      'clear',\n      // 缩放\n      'zoom',\n      'zoomIn',\n      'zoomOut',\n      'fit',\n      'actualSize',\n      // 画布背景\n      'canvasBackground',\n      // 元素基本操作\n      'fill',\n      'lineColor',\n      'lineWidth',\n      'lineDash',\n      'lineType',\n      'startArrow',\n      'endArrow',\n      'toFront',\n      'toBack',\n      'selectAll',\n      'marquee',\n      'group',\n      'ungroup',\n      'edit',\n      'preview',\n      'upload',\n      'download',\n      'layout',\n      'fullscreen',\n      'language',\n      'github',\n      'feedback',\n      'help',\n      // 纯快捷键\n      'up',\n      'down',\n      'left',\n      'right'\n    ]\n  }\n})\n```\n\n#### disableTools\n【与tools、enableTools互斥，配置后以此为主】设置要禁用的系统工具项\n\n```\nxfc({\n  el: '#xfc',\n  props: {\n    'logo',\n    'language',\n    'help'\n  }\n})\n```\n\n#### shortcutMap\n【与tools互斥，配置后以此为主】设置自带的工具项的快捷键\n\n```\nxfc({\n  el: '#xfc',\n  props: {\n    shortcutMap: {\n      // 工具名\n      undo: {\n        // 工具名 \n        tool: 'undo',\n        // 快捷键\n        key: 'mod+z',\n        // 快捷键文本\n        label: 'Ctrl + Z',\n        // 快捷键描述\n        description: '' \n      }\n    }\n  }\n})\n```\n\n#### materials\n全量配置物料列表，覆写系统默认物料，自定义程度高，\u003cspan style=\"color: red; font-weight: 800;\"\u003e无非必要不建议配置此项\u003c/span\u003e。\n\n```\nxfc({\n  el: '#xfc',\n  props: {\n    materials: [\n        ...\n    ]\n  }\n})\n```\n\n#### enableMaterials\n【与materials互斥，配置后以此为主】设置要启用的系统物料\n\n```\nxfc({\n  el: '#xfc',\n  props: {\n    enableMaterials: {\n        // 启用的物料分类\n        general: [\n            // 启用的分类下图形\n            'rectangle', \n            'rounded-rectangle'\n        ]  \n    }\n  }\n})\n```\n\n#### system\n配置系统信息\n\n```\nxfc({\n  el: '#xfc',\n  props: {\n    system: {\n        version: '1.0.0',\n        name: 'xfc',\n        author: 'OXOYO',\n        description: 'A visual graph editor based on G6 and Vue.',\n        title: 'XFC',\n        logo: require('@/assets/images/logo.png'),\n        github: 'https://github.com/OXOYO/X-Flowchart-Vue',\n        site: 'http://oxoyo.co/X-Flowchart-Vue/',\n        feedback: 'https://github.com/OXOYO/X-Flowchart-Vue/issues/new',\n        copyright: '©2019 - 2020 OXOYO All Rights Reserved.'\n    }\n  }\n})\n```\n\n#### storage\n配置本地存储信息\n\n```\nxfc({\n  el: '#xfc',\n  props: {\n    storage: {\n        // 本地存储前缀\n        prefix: 'xfc'\n    }\n  }\n})\n```\n\n#### i18n\n配置多语言\n\n```\nxfc({\n  el: '#xfc',\n  props: {\n    i18n: {\n        // 默认语言包\n        defLocale: 'zh-CN',\n        // 自定义语音包或覆写系统语音包\n        locales: {\n            ...\n        }\n    }\n  }\n})\n```\n#### infoPanel\n配置信息面板\n```\nxfc({\n  el: '#xfc',\n  props: {\n    infoPanel: {\n        // 配置信息\n        options: {\n            enable: true\n        },\n        // 导航器\n        navigator: {\n            enable: true,\n            // minimap插件配置\n            config: {\n                type: 'delegate',\n                delegateStyle: {\n                    fill: '#ffffff',\n                    stroke: '#000000'\n                }\n            }\n        }\n    }\n  }\n})\n```\n\n## API\n\n### read (data, isActualSize)\n接收数据，并进行渲染。\n\n**参数**\n\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| data | Object | true | 初始化的图数据，是一个包括 nodes 和 edges 的对象 |\n\n**用法**\n\n```\nconst data = {\n  nodes: [\n    {\n      id: 'node1',\n      label: 'node1',\n    },\n    {\n      id: 'node2',\n      label: 'node2',\n    },\n  ],\n  edges: [\n    {\n      source: 'node1',\n      target: 'node2',\n    },\n  ],\n};\n\nxfcEditor.read(data)\n```\n\n### save()\n\n获取图数据。\n\n该方法无参数。\n\n**返回值**\n\n*   返回值类型：Object；\n*   返回值包括所有节点和边，数据结构如下下所示：\n\n```\n{\n    nodes: [],\n    edges: []\n}\n```\n\n**用法**\n\n```\nxfcEditor.save()\n```\n\n### getNodes()\n\n获取图中所有节点的实例。\n\n**⚠️ 注意:** 这里返回的是节点的实例，而不是节点的数据项。\n\n**返回值**\n\n*   返回值类型：Array；\n*   返回值表示图中所有节点的实例。\n\n**用法**\n\n```\nconst nodes = xfcEditor.getNodes()\n```\n\n### getEdges()\n\n获取图中所有边的实例。\n\n**⚠️ 注意:** 这里返回的是边的实例，而不是边的数据项。\n\n**返回值**\n\n*   返回值类型：Array；\n*   返回值表示图中所有边的实例。\n\n**用法**\n\n```\nconst edges = xfcEditor.getEdges()\n```\n\n### downloadImage (name, type, backgroundColor)\n将画布上的元素导出为图片。\n\n**参数**\n\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| name | String | false | 图片的名称，不指定则为 'graph' |\n| type | `'image/png'` / `'image/jpeg'` / `'image/webp'` / `'image/bmp'` | false | 图片的类型。图的 `renderer` 为默认的 `'canvas'` 时生效，图的 `renderer` 为 `'svg'` 时将导出 svg 文件 |\n| backgroundColor | String | false | 图片的背景色，可选，不传值时将导出透明背景的图片 |\n\n**用法**\n\n```\nxfcEditor.downloadImage()\n```\n\n### toDataURL (type, backgroundColor)\n将画布上元素生成为图片的 URL。\n\n**参数**\n\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| type | `'image/png'` / `'image/jpeg'` / `'image/webp'` / `'image/bmp'` | false | 图片的类型。图的 `renderer` 为默认的 `'canvas'` 时生效，图的 `renderer` 为 `'svg'` 时将导出 svg 文件 |\n| backgroundColor | String | false | 图片的背景色，可选，不传值时将导出透明背景的图片 |\n\n**返回值**\n\n*   返回值类型：String；\n*   返回值表示生成的图片的 URL。\n\n**用法**\n\n```\nconst dataURL = xfcEditor.toDataURL()\n```\n\n## Reference\n[@antvis/g6](https://github.com/antvis/g6)\n\n[@alibaba/GGEditor](https://github.com/alibaba/GGEditor)\n\n[@guozhaolong/wfd](https://github.com/guozhaolong/wfd)\n\n[grapheditor](http://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/index.html)\n\n## Thank\n[guozhaolong](https://github.com/guozhaolong)\n\n## Contribution\n\n我们目前接受 GitHub Pull Request ，并且所有开发提交的合并均通过 Pull Request 进行，故你可以直接点击该项目的 Fork 按钮得到你自己的 Fork ，在其上进行提交，并在修改完毕后直接通过 GitHub 网页发起 Pull Request 即可。对于 Pull Request 的介绍和使用方式，可以参阅 [GitHub 帮助文档中的 “关于 Pull Request” 部分](https://help.github.com/en/articles/about-pull-requests)。\n\n**感谢所有为此项目做出贡献的人们！**\n\n[curiosity-hyf](https://github.com/curiosity-hyf) \n\n[lzygit18](https://github.com/lzygit18)\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n\nCopyright (c) 2019-present, OXOYO\n\n## Contact\n\n点击链接加入群【Web全栈QQ群 333765077】：https://jq.qq.com/?_wv=1027\u0026k=53iWbrr\n\n## Star History\n[![Stargazers over time](https://starchart.cc/OXOYO/X-Flowchart-Vue.svg)](https://starchart.cc/OXOYO/X-Flowchart-Vue)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FOXOYO%2FX-Flowchart-Vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FOXOYO%2FX-Flowchart-Vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FOXOYO%2FX-Flowchart-Vue/lists"}