luobogor / pokemon-diagram

A mxGraph tutorial project

Pokemon diagram

本项目作为《mxGraph 入门实例教程》的实战教学项目，使用 mxGraph、Vue 做一个宠物小精灵人物展示图谱。

在线演示

点我访问

运行

# 安装依赖
npm install

# 启动
npm start

# 访问
http://localhost:7777

技术栈

• mxGraph
• Vue

功能

• 从面板拖拽元素加入到画布
• 节点可修改属性、名称
• 右侧面板修改线条样式，包括线形、粗细、颜色
• 删除线条、节点级联删除
• 导出、导入图形
• 导航器
• 节点连接校验，规定“智爷”只能与“皮卡超”或"我是皮卡丘的超级超级进化"连接
• 导出 PNG（仅提供前端代码）

注：本项目在 Chrome 下进行开发，并没有对其他浏览器做兼容处理。