@ant-design/flowchart

Case

✨ Features

- Easy to use
- TypeScript

📦 Installation

``bash | pure
$ npm install @ant-design/flowchart
`

🔨 Usage

`tsx | pure
import React from 'react';
import { Flowchart } from '@ant-design/flowchart';
import 'antd/dist/antd.css';
import '@ant-design/flowchart/dist/index.css';

const DemoFlowchart = () => {
return (


`ts
export interface FlowchartProps extends FlowchartContainerProps {
/* 默认数据 /
data?: Datum;

/* 画布是否自动居中 /
isAutoCenter?: boolean;

/* 节点面板配置 /
nodePanelProps?: NodePanelProps;

/* 画布主要区域配置 /
canvasProps?: CanvasProps;

/**
* @title 画布状态
* @description scan 会禁用一些画布事件，例如连线、鼠标右键等
* @default "edit"
*/
mode?: 'edit' | 'scan';

/* toolbar /
toolbarPanelProps?: ToolbarPanelProps;

/* keyBinding /
keyBindingProps?: false | KeybindingConfig;

/* scale toolbar /
scaleToolbarPanelProps?: ScaleToolbarPanelProps;

/* form editor /
detailPanelProps?: DetailPanelProps;

/* 右键菜单配置 /
contextMenuPanelProps?: ContextMenuPanelProps;

/* popover /
popoverProps?: PopoverProps;

/* onReady /
onReady?: (graph: IFlowchartGraph, app: IApplication) => void;

/* 点击回调，仅支持 save-graph-data /
onSave?: (data: Datum) => void;

/* 新增节点时回调 /
onAddNode?: (node: NsGraph.INodeConfig) => void;

/* 新增边时回调 /
onAddEdge?: (edge: NsGraph.IEdgeConfig) => void;

/* xflow app 销毁前的回调 /
onDestroy?: IAppDestroy;

/* xflow app 初始化后的回调 /
onConfigReady?: IAppConfigReady;

/* 节点或边更新数据时调用 /
onConfigChange?: (params: { data: Datum; type: string; config?: NsGraph.INodeConfig | NsGraph.IEdgeConfig }) => void;
}
`

🤝 How to Contribute

Your contributions are always welcome! Please Do have a look at the issues first.

📧 Contact us

DingTalk group number: 44788198 `.

License

MIT