https://github.com/windrunnermax/flowcharteditor

流程图编辑器
https://github.com/windrunnermax/flowcharteditor

Last synced: 19 days ago
JSON representation

流程图编辑器

• Host: GitHub
• URL: https://github.com/windrunnermax/flowcharteditor
• Owner: WindRunnerMax
• License: mit
• Created: 2022-12-03T02:12:55.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2024-10-04T10:27:37.000Z (about 1 month ago)
• Last Synced: 2024-10-15T01:07:23.892Z (about 1 month ago)
• Language: JavaScript
• Homepage: https://windrunnermax.github.io/FlowChartEditor/
• Size: 8.03 MB
• Stars: 36
• Watchers: 4
• Forks: 8
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# FlowChartEditor



GitHub

｜

Editor DEMO

｜

BLOG

｜

TODO



流程图编辑器，支持独立的流程图编辑器包以及`DrawIO`嵌入通信方案。  

```bash

# Install

$ npm i embed-drawio

# Development

$ npm run build:dist

$ npm run dev

```

## 独立编辑器

支持独立的流程图编辑器编辑与渲染。

使用方法可参考`example/index.tsx`，由于包体积原因，强烈建议以懒加载方式引入。

```js

import type { DiagramEditor } from "embed-drawio/dist/es/core/editor";

import type { DiagramViewer } from "embed-drawio/dist/es/core/viewer";

let editor: typeof DiagramEditor | null = null;

export const loadEditor = async (): Promise => {

  if (editor) return Promise.resolve(editor);

  const res = await Promise.all([

    import(/* webpackChunkName: "embed-drawio-editor" */ "embed-drawio/dist/es/core/editor"),

    // @ts-expect-error css declaration

    import(/* webpackChunkName: "embed-drawio-css" */ "embed-drawio/dist/es/index.css"),

  ]);

  editor = res[0].DiagramEditor;

  return editor;

};

let viewer: typeof DiagramViewer | null = null;

export const loadViewer = async (): Promise => {

  if (viewer) return Promise.resolve(viewer);

  const res = await Promise.all([

    import(/* webpackChunkName: "embed-drawio-viewer" */ "embed-drawio/dist/es/core/viewer"),

  ]);

  viewer = res[0].DiagramViewer;

  return viewer;

};

```

## 嵌入DrawIO

支持`DrawIO`的嵌入通信方案。

使用方法可参考`example/index.tsx`，由于`sideEffects`原因，强烈建议以路径方式引入。

```js

import { EditorEvent } from "embed-drawio/dist/es/event/basic";

import { EditorBus } from "embed-drawio/dist/es/event/index";

// ...

```