FlowChartEditor

GitHub ｜ Editor DEMO ｜ BLOG ｜ TODO

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

# Install
$ npm i embed-drawio

# Development
$ npm run build:dist
$ npm run dev

独立编辑器

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

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

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<typeof DiagramEditor> => {
  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<typeof DiagramViewer> => {
  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原因，强烈建议以路径方式引入。

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

// ...