本系列主要讲自定义流程可视化功能的开发，使用AntDesignPro作为脚手架，AntV/xflow作为可视化开发框架，自定义自定义节点，添加自定义节点和连接属性，使用formliy生成自定义表单来编辑节点属性。本文主要介绍xflow的整体页面和各个控件的功能。为了准备开发，我们选择AntDesignPro+umijs3.x作为我们开发的脚手架。Umi4已经为早期采用者做好了准备，但它仍然不稳定。后期会稳定，升级umi4。首先，搭建脚手架。推荐使用pnpmmkdirdesignable-xflow&&cddesignable-xflowyarncreate@umijs/umi-appyarn基础脚手架搭建好，然后安装xflow，formliyyarnadd@antv/xflow@formily/core@formily/react@formily/antd这样我们用到的基础库都安装好了，然后我们在主视图中进行修改。先在主目录下新建config/config.ts，将.umirc.ts文件内容复制到config.ts中，然后删除.umirc.ts，添加对应路由config/config.ts:import{defineConfig}from'umi';exportdefaultdefineConfig({nodeModulesTransform:{type:'none',},layout:{},routes:[{path:'/',redirect:'/xflow',},{name:'流程可视化'，路径：'/xflow'，图标：'SmileOutlined'，组件：'@/pages/Xflow',},],fastRefresh:{},});将antv官网xflow列表复制到pages目录下（pages/Xflow），链接，启动serviceyarnrunstart，但是此时看到的首页是乱七八糟的，css介绍也不见了。在pages/Xflow/index.tsx中添加+import'@antv/xflow/dist/index.css'import在'./index.less'src下新建一个global.css，添加@import'~antd/dist/antd.css';)这时候我们可以看到我们的页面和官网是一样的。官网介绍的比较全面，但仅限于展示，官方使用的组件我们需要自定义，比如一个组件代表什么，组件下有哪些属性，哪些属性可以编辑，组件是否可以connected等，官方的例子不够用场景太多，需要自己开发自定义组件。接下来的几篇博文将对这些情况一一进行解答和说明，敬请期待。本文地址：链接本github地址：链接githubdemo地址：链接
