本项目作为《mxGraph 入门实例教程》的实战教学项目,使用 mxGraph、Vue 做一个宠物小精灵人物展示图谱。
# 安装依赖
npm install
# 启动
npm start
# 访问
http://localhost:7777
- mxGraph
- Vue
- 从面板拖拽元素加入到画布
- 节点可修改属性、名称
- 右侧面板修改线条样式,包括线形、粗细、颜色
- 删除线条、节点级联删除
- 导出、导入图形
- 导航器
- 节点连接校验,规定“智爷”只能与“皮卡超”或"我是皮卡丘的超级超级进化"连接
- 导出 PNG(仅提供前端代码)
注:本项目在 Chrome 下进行开发,并没有对其他浏览器做兼容处理。