# @ant-design/flowchart 中文文档

规范地址：https://npmcn.com/package/%40ant-design/flowchart/

版本：1\.2\.3
npm 元数据更新时间：2024-09-25T06:01:20.724Z
中文译文更新时间：2026-11-06T06:01:25.416Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40ant-design/flowchart
原文对照：https://npmcn.com/package/%40ant-design/flowchart/?lang=original
项目主页：https://github.com/ant-design/ant-design-charts#readme
源码仓库：https://github.com/ant-design/ant-design-charts

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：12.1 MB，78 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：7 个
- peer 依赖：antd ^4\.6\.3，react \>=16\.8\.4，lodash ^4\.17\.20，react-dom \>=16\.8\.4，@ant-design/icons ^4\.6\.0
- 首次发布：2021-10-15T05:18:56.246Z
- 最新版本发布：2024-03-08T02:43:48.465Z
- 近 30 天下载量：68927（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：38（近 12 个月 0 个）

## 中文简介

流程图

## 安装

```sh
npm install @ant-design/flowchart
```

也可以使用：`pnpm add @ant-design/flowchart`、`yarn add @ant-design/flowchart`、`bun add @ant-design/flowchart`

## README

# @ ant- dedesign/流程图

流程图解决方案,基于 [X 飞行](https://github.com/antvis/xflow)。 。 。 .

![npm](https://img.shields.io/npm/v/@ant-design/charts) ![npm](https://img.shields.io/npm/dm/@ant-design/flowchart) [![GitHub stars](https://img.shields.io/github/stars/ant-design/ant-design-charts)](https://github.com/ant-design/ant-design-charts/stargazers) [![npm License](https://img.shields.io/npm/l/@ant-design/charts.svg)](https://www.npmjs.com/package/@ant-design/charts)

[网站](https://charts.ant.design/) 二. 支助 [快速启动](https://charts.ant.design/en/docs/manual/getting-started) 二. 支助 [图片库](https://charts.ant.design/en/examples/gallery) 二. 支助 [财务问题](https://charts.ant.design/en/docs/manual/faq) 二. 支助 [博客](https://www.yuque.com/antv/g2plot)

## 大小写

![](https://gw.alipayobjects.com/zos/antfincdn/4o%26HrctHA3/bcbfb761-4fbb-4bc9-8875-8e71853f3253.png) ![](https://gw.alipayobjects.com/mdn/rms_19b204/afts/img/A*ixVAQrEoCTcAAAAAAAAAAAAAARQnAQ)

## \* 特性

-   易于使用
-   类型脚本

## \* 安装

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

## 使用量

```tsx
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;
```

预览

![](https://gw.alipayobjects.com/zos/antfincdn/gqf81qzYtJ/ae69e47b-2e1c-4dbb-9619-9a852b402d5c.png)

## & API 文档

```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;
}
```

## 如何贡献

你的贡献总是受欢迎的! 请 有看到一个 [问题](https://github.com/ant-design/ant-design-charts/issues) 先说.

## 联系我们

DingTalk 组号 : `44788198` 。 。 。 .

![](https://gw.alipayobjects.com/zos/antfincdn/bi1LxWeIEj/32f85bbf-a06e-4046-96e5-417126bffeaf.png)

## 许可证

麻省理工学院

## 常见问题

### @ant-design/flowchart 是什么？

流程图

### 如何安装 @ant-design/flowchart？

在项目目录运行 npm install @ant-design/flowchart，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：antd（^4\.6\.3）、react（\>=16\.8\.4）、lodash（^4\.17\.20）、react-dom（\>=16\.8\.4）、@ant-design/icons（^4\.6\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @ant-design/flowchart 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @ant-design/flowchart 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @ant-design/flowchart 可以商用吗？

@ant-design/flowchart 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @ant-design/flowchart 的下载量有多少？

根据 npm 官方下载统计，@ant-design/flowchart 在 2026/10/06 – 2026/11/04 这 30 天内被下载 68,927 次，日均约 2,298 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @ant-design/flowchart 还在维护吗？

最新版本 1\.2\.3 发布于 2024/03/08（2 年前）；至今共发布 38 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/10/15。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。