# react-topo

**Repository Path**: langwen/react-topo

## Basic Information

- **Project Name**: react-topo
- **Description**: reactflow 拓扑图可视化
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: http://www.lulongwen.com/topology
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 4
- **Created**: 2023-08-13
- **Last Updated**: 2025-03-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react-topo 拓扑图可视化

在数据世界里，获得视觉化思考能力。



## react-topo 项目技术栈

* react v18
* antd v5
* umi v4，更多基础配置参考 [Umi Max](https://next.umijs.org/zh-CN/docs/max/introduce)
* pro-components
* reactflow
* d3



## reactflow 案例

flowChart 流程图图例

1. Circle 圆形
2. Diamond 菱形，钻石
3. Ellipse，椭圆
4. Hexagon 六边形
5. RoundRectangle 圆角矩形
6. ArrowRectangle 箭头矩形
7. Database，数据库，圆柱形
8. Triangle，三角形
9. Parallelogram，平行四边形



### flowChart 流程图<img src="./docs/flowChart-designer.jpg" alt="flowChart-designer" style="zoom:50%;" />



flowChart 流程图效果

<img src="./docs/flowChart/flowChart.jpg" alt="flowChart" style="zoom:50%;" align="left" />



### Card 知识卡片

<img src="./docs/react-topo.jpg" alt="react知识卡片" style="zoom:50%;" />





### 流程图功能

1. 流程图块生成、连线、拖拽

2. 保存JSON

   1. 导入JSON数据

3. 导出图片

   1. svg
   2. png
   3. pdf

   

#### 工具栏功能

1. 撤销，重做，redo， undo



#### 画布功能

1. 复制，粘贴，剪切，删除
2. 节点分组
3. 放大缩小功能
4. 锁定画布功能



### 逻辑编排

1. 开始，结束
2. 普通活动
3. 条件分支
4. 循环
5. 自动插入
6. 转义





## node

业务组件规范

1. 业务逻辑与数据分离，高阶组件
2. API支持可配置，可扩展，灵活性
3. 组件名称规范化，一看名称就知道组件的应用场景



### CustomNode 自定义节点

1. 最外层是一个 div
2. 里面第一个是 svg，渲染形状
3. 下面是一个 div，绝对定位，显示文字等内容

```html
<div
	class="react-flow__node react-flow__node-shape nopan selectable"
	style="
		z-index: 0;
		transform: translate(0px, 0px);
		pointer-events: all;
		visibility: visible;
	"
>
	<div style="position: relative">
		<Handle
			type="source"
			class="react-flow__handle react-flow__handle-top nodrag nopan source connectable connectablestart connectableend connectionindicator"
		/>
		<svg width="150" height="50" style="display: block; overflow: visible">
			<rect
				x="0"
				y="0"
				rx="20"
				width="150"
				height="50"
				fill="#668de3"
				stroke-width="0"
				stroke="#fff"
			></rect>
		</svg>
		<div
			style="
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: 0px;
				left: 0px;
				width: 100%;
				height: 100%;
			"
		>
			<div>
				自定义节点
			</div>
		</div>
	</div>
</div>

```







## git操作

```bash
# gitee
git clone https://gitee.com/langwen/react-topo.git

# github
git clone https://github.com/lulongwen/react-topo.git

# 安装依赖
yarn install

# 运行项目
yarn dev
```





### 分支开发

```bash
# 本地创建分支并进入，分支拉取 master
git checkout -b feature/dev origin/master

# 拉取线上分支
git fetch

# 本地分支 'feature/dev' 关联线上线上分支'origin' 的远程分支 'feature/dev'
git branch --set-upstream-to=origin/feature/dev feature/dev

#本地远程关联
git branch --set-upstream-to=origin/master master

# 执行完 add 撤销
git reset .

# 执行完 commit 撤销
git reset HEAD # 后面什么都不跟的话 就是上一次add 里面的全部撤销
git reset HEAD # XXX/XX.js 对某个文件进行撤销

# 修改 remote
git remote set-url origin https://github.com/lulongwen/react-topo.git
# gitee仓库
git remote set-url origin https://gitee.com/langwen/react-topo.git
```



### push 新分支

* 本地新建分支
* 本地分支推送到线上分支

```bash
 git branch reactflow
 
 git checkout reactflow
 
 git push --set-upstream origin reactflow
```





### git reset 回退版本

git reset是彻底回退到指定的commit版本，该commit后的所有commit都将被清除；

git revert仅是撤销指定 commit的修改，并不影响后续的commit；

reset执行后不会产生记录，revert执行后会产生记录

```bash
# 回退到上一个版本，HEAD^ 表示上一个版本，HEAD^^表示上上个版本
git reset HEAD^

# 回退更多个版本，用 HEAD~n 即可，比如回退到前3个版本
git rest HEAD~3

# 回退到指定的版本，回退到指定的commitId 所在位置及commitId 以前的代码
# 清空工作区与缓存区，弃目标版本后所有的修改
git reset --hard COMMIT_ID

# 回退版本及保留更改, 把所有的未提交的修改放入到 Git 的 stash 中
git stash
```







### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request