{"id":16974645,"url":"https://github.com/windrunnermax/flowcharteditor","last_synced_at":"2025-10-28T18:10:19.307Z","repository":{"id":165161818,"uuid":"573654230","full_name":"WindRunnerMax/FlowChartEditor","owner":"WindRunnerMax","description":"流程图编辑器","archived":false,"fork":false,"pushed_at":"2024-10-04T10:27:37.000Z","size":8420,"stargazers_count":47,"open_issues_count":2,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-24T09:04:02.329Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://windrunnermax.github.io/FlowChartEditor/","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/WindRunnerMax.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":"2022-12-03T02:12:55.000Z","updated_at":"2025-01-30T17:03:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"09ed4814-5f4e-48a4-8ce3-a64f04aae705","html_url":"https://github.com/WindRunnerMax/FlowChartEditor","commit_stats":null,"previous_names":["windrunnermax/embeddrawio"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WindRunnerMax%2FFlowChartEditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WindRunnerMax%2FFlowChartEditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WindRunnerMax%2FFlowChartEditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WindRunnerMax%2FFlowChartEditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WindRunnerMax","download_url":"https://codeload.github.com/WindRunnerMax/FlowChartEditor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246450408,"owners_count":20779406,"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":[],"created_at":"2024-10-14T01:07:23.187Z","updated_at":"2025-10-28T18:10:14.253Z","avatar_url":"https://github.com/WindRunnerMax.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FlowChartEditor\n\n\u003cp\u003e\n\u003ca href=\"https://github.com/WindrunnerMax/FlowChartEditor\"\u003eGitHub\u003c/a\u003e\n\u003cspan\u003e｜\u003c/span\u003e\n\u003ca href=\"https://windrunnermax.github.io/FlowChartEditor/\"\u003eEditor DEMO\u003c/a\u003e\n\u003cspan\u003e｜\u003c/span\u003e\n\u003ca href=\"https://github.com/WindrunnerMax/EveryDay/blob/master/Plugin/基于drawio构建流程图编辑器.md\"\u003eBLOG\u003c/a\u003e\n\u003cspan\u003e｜\u003c/span\u003e\n\u003ca href=\"./TODO.md\"\u003eTODO\u003c/a\u003e\n\u003c/p\u003e\n\n\n流程图编辑器，支持独立的流程图编辑器包以及`DrawIO`嵌入通信方案。  \n\n```bash\n# Install\n$ npm i embed-drawio\n\n# Development\n$ npm run build:dist\n$ npm run dev\n```\n## 独立编辑器\n支持独立的流程图编辑器编辑与渲染。\n\n使用方法可参考`example/index.tsx`，由于包体积原因，强烈建议以懒加载方式引入。\n\n```js\nimport type { DiagramEditor } from \"embed-drawio/dist/es/core/editor\";\nimport type { DiagramViewer } from \"embed-drawio/dist/es/core/viewer\";\n\nlet editor: typeof DiagramEditor | null = null;\nexport const loadEditor = async (): Promise\u003ctypeof DiagramEditor\u003e =\u003e {\n  if (editor) return Promise.resolve(editor);\n  const res = await Promise.all([\n    import(/* webpackChunkName: \"embed-drawio-editor\" */ \"embed-drawio/dist/es/core/editor\"),\n    // @ts-expect-error css declaration\n    import(/* webpackChunkName: \"embed-drawio-css\" */ \"embed-drawio/dist/es/index.css\"),\n  ]);\n  editor = res[0].DiagramEditor;\n  return editor;\n};\n\nlet viewer: typeof DiagramViewer | null = null;\nexport const loadViewer = async (): Promise\u003ctypeof DiagramViewer\u003e =\u003e {\n  if (viewer) return Promise.resolve(viewer);\n  const res = await Promise.all([\n    import(/* webpackChunkName: \"embed-drawio-viewer\" */ \"embed-drawio/dist/es/core/viewer\"),\n  ]);\n  viewer = res[0].DiagramViewer;\n  return viewer;\n};\n```\n\n## 嵌入DrawIO\n支持`DrawIO`的嵌入通信方案。\n\n使用方法可参考`example/index.tsx`，由于`sideEffects`原因，强烈建议以路径方式引入。\n\n\n```js\nimport { EditorEvent } from \"embed-drawio/dist/es/event/basic\";\nimport { EditorBus } from \"embed-drawio/dist/es/event/index\";\n\n// ...\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwindrunnermax%2Fflowcharteditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwindrunnermax%2Fflowcharteditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwindrunnermax%2Fflowcharteditor/lists"}