图结构绘制与存储系统

GraphEditor 是一个基于 Web 的交互式图结构编辑与持久化存储系统。系统采用前后端分离架构，用户可通过画布操作创建、编辑和保存有向图或无向图，并可从存储中读取作品继续编辑。

项目结构

graph-editor/
├── backend/
│   ├── server.js
│   ├── routes/
│   │   └── graphs.js
│   ├── data/
│   └── package.json
├── frontend/
│   ├── src/
│   │   ├── main.js
│   │   ├── App.vue
│   │   ├── style.css
│   │   ├── components/
│   │   │   ├── GraphCanvas.vue
│   │   │   ├── Toolbar.vue
│   │   │   ├── PropPanel.vue
│   │   │   └── GraphList.vue
│   │   ├── stores/
│   │   │   └── graphStore.js
│   │   └── api/
│   │       └── graphApi.js
│   ├── public/
│   ├── index.html
│   ├── vite.config.js
│   └── package.json

系统展示图

启动

# 启动后端
cd backend
npm install
npm run dev

# 启动前端
cd frontend
npm install
npm run dev