# x6-flow-chart

**Repository Path**: modelview/x6-flow-chart

## Basic Information

- **Project Name**: x6-flow-chart
- **Description**: 使用antv x6构建的流程图绘制网站。支持编辑，导入导出 JSON 和 svg导出
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-03-05
- **Last Updated**: 2026-03-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# X6 Flow Chart

基于 Vue 3 + TypeScript + Vite 开发的流程图应用，使用 AntV X6 图形库构建。

## 项目简介

本项目是一个现代化的流程图编辑器，利用 Vue 3 的 Composition API 和 TypeScript 的类型安全特性，结合 AntV X6 强大的图形绘制能力，提供流畅的流程图编辑体验。

## 技术栈

- **前端框架**: Vue 3 (Composition API)
- **语言**: TypeScript
- **构建工具**: Vite
- **图形库**: @antv/x6
- **包管理**: pnpm

## 功能特性

- 拖拽式流程图编辑
- 多种预设节点类型（API、客户端、云服务、HTTP、消息队列、数据库）
- 节点连线与关系展示
- 流程图导出与保存

## 快速开始

### 安装依赖

```bash
pnpm install
```

### 启动开发服务器

```bash
pnpm dev
```

### 构建生产版本

```bash
pnpm build
```

## 项目结构

```
├── src/
│   ├── views/
│   │   ├── FlowChart.vue      # 流程图主视图
│   │   └── FlowChartOld.vue   # 旧版流程图
│   ├── components/            # 公共组件
│   ├── assets/                # 静态资源
│   ├── App.vue                # 根组件
│   └── main.ts                # 入口文件
├── public/
│   └── images/                # 节点图标资源
├── index.html                 # HTML 入口
└── vite.config.ts             # Vite 配置
```

## 预设节点类型

项目内置以下系统架构常用节点图标：

| 类型 | 说明 |
|------|------|
| Api | API 接口服务 |
| Client | 客户端应用 |
| Cloud | 云服务 |
| Http | HTTP 服务 |
| Mq | 消息队列 |
| Sql | 数据库 |

## 浏览器支持

推荐使用以下现代浏览器访问：

- Chrome (最新版本)
- Firefox (最新版本)
- Edge (最新版本)
- Safari (最新版本)

## 许可证

MIT License

## 发布方式

### 前置条件
- ssh登录，`ssh ubuntu@124.222.247.130` 填写密码
- 修改.ssh/authorized_keys 文件，添加公钥
- 之后可以免密码登录

### 存储位置
- nginx `/etc/nginx/nginx.conf` 通过其中的配置文件可以找到其他网站目录，注意配置文件可能是在目录中通过 include 添加的 `/etc/nginx/conf.d`
- 网页目录 `/home/ubuntu/projects/`
- 服务目录 `/home/ubuntu/projects/`

### 更新主页目录

- 可以通过网页80端口，访问页面主页。
- 其中应当添加对应的网页信息