@ant-design/flowchart
Case
✨ Features
📦 Installation
$ npm install @ant-design/flowchart
🔨 Usage
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 (
    <div style={{ height: 600 }}>
      <Flowchart
        onSave={(d) => {
          console.log(d, JSON.stringify(d));
        }}
        toolbarPanelProps={{
          position: {
            top: 0,
            left: 0,
            right: 0,
          },
        }}
        scaleToolbarPanelProps={{
          layout: 'horizontal',
          position: {
            right: 0,
            top: -40,
          },
          style: {
            width: 150,
            height: 39,
            left: 'auto',
            background: 'transparent',
          },
        }}
        canvasProps={{
          position: {
            top: 40,
            left: 0,
            right: 0,
            bottom: 0,
          },
        }}
        nodePanelProps={{
          position: { width: 160, top: 40, bottom: 0, left: 0 },
        }}
        detailPanelProps={{
          position: { width: 200, top: 40, bottom: 0, right: 0 },
        }}
      />
    </div>
  );
};
export default DemoFlowchart;
Preview
<img src=https://gw.alipayobjects.com/zos/antfincdn/gqf81qzYtJ/ae69e47b-2e1c-4dbb-9619-9a852b402d5c.png height=240>
📜 Document & API
export interface FlowchartProps extends FlowchartContainerProps {
  
  data?: Datum;
  
  isAutoCenter?: boolean;
  
  nodePanelProps?: NodePanelProps;
  
  canvasProps?: CanvasProps;
  
  mode?: 'edit' | 'scan';
  
  toolbarPanelProps?: ToolbarPanelProps;
  
  keyBindingProps?: false | KeybindingConfig;
  
  scaleToolbarPanelProps?: ScaleToolbarPanelProps;
  
  detailPanelProps?: DetailPanelProps;
  
  contextMenuPanelProps?: ContextMenuPanelProps;
  
  popoverProps?: PopoverProps;
  
  onReady?: (graph: IFlowchartGraph, app: IApplication) => void;
  
  onSave?: (data: Datum) => void;
  
  onAddNode?: (node: NsGraph.INodeConfig) => void;
  
  onAddEdge?: (edge: NsGraph.IEdgeConfig) => void;
  
  onDestroy?: IAppDestroy;
  
  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