FlowChartEditor

Github ｜ Editor DEMO ｜ BLOG ｜ TODO

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

$ npm i embed-drawio

独立编辑器

支持独立的流程图编辑器编辑与展示功能。

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

import type * as DiagramEditor from "embed-drawio/dist/packages/core/diagram-editor";
import type * as DiagramViewer from "embed-drawio/dist/packages/core/diagram-viewer";

let editor: typeof DiagramEditor | null = null;
export const diagramEditorLoader = (): Promise<typeof DiagramEditor> => {
  if (editor) return Promise.resolve(editor);
  return Promise.all([
    import(
      /* webpackChunkName: "embed-drawio-editor" */ "embed-drawio/dist/packages/core/diagram-editor"
    ),
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    import(/* webpackChunkName: "embed-drawio-css" */ "embed-drawio/dist/index.css"),
  ]).then(res => (editor = res[0]));
};

let viewer: typeof DiagramViewer | null = null;
export const diagramViewerLoader = (): Promise<typeof DiagramViewer> => {
  if (viewer) return Promise.resolve(viewer);
  return Promise.all([
    import(
      /* webpackChunkName: "embed-drawio-viewer" */ "embed-drawio/dist/packages/core/diagram-viewer"
    ),
  ]).then(res => (viewer = res[0]));
};

嵌入DrawIO

支持DrawIO的嵌入通信方案。

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

import { EditorEvents } from "embed-drawio/dist/packages/events/event";
import { EditorBus } from "embed-drawio/dist/packages/events/bus";

// ...