NPM

直接使用npm（或yarn）方式安装使用。

  1. # 安装绘图引擎
  2. npm  install @topology/core
  4. # 安装图形库 - 流程图
  5. npm  install @topology/flow-diagram
  7. # 安装图形库 - 活动图
  8. npm  install @topology/activity-diagram
  10. # 安装图形库 - 类图
  11. npm  install @topology/class-diagram
  13. # 安装图形库 - 时序图
  14. npm  install @topology/sequence-diagram
  16. # 其他共享图形库
  17. # ...
  20. # 集成打包版本
  21. npm install topology-bundle

package.json参考

  1. {
  2.   "name": "topology-demo",
  3.   "version": "0.0.1",
  4.   "description": "ES6 + Babel: The demo",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "build": "webpack"
  8.   },
  9.   "keywords": [
  10.     "es2018",
  11.     "webpack"
  12.   ],
  13.   "author": "alsmile123@qq.com",
  14.   "license": "MIT",
  15.   "dependencies": {
  16.     "@topology/core": "^0.5.8",
  17.     "@topology/activity-diagram": "^0.3.0",
  18.     "@topology/class-diagram": "^0.3.0",   
  19.     "@topology/flow-diagram": "^0.3.0",
  20.     "@topology/sequence-diagram": "^0.3.0",
  21.     "@topology/chart-diagram": "^0.3.0",
  22.     "@topology/layout": "^0.3.0"
  23.   },
  24.   "devDependencies": {
  25.     "@babel/core": "^7.5.5",
  26.     "@babel/plugin-transform-runtime": "^7.5.5",
  27.     "@babel/preset-env": "^7.5.5",
  28.     "babel-loader": "^8.0.6",
  29.     "path": "^0.12.7",
  30.     "webpack": "^4.37.0",
  31.     "webpack-cli": "^3.3.6"
  32.   }
  33. }

使用

  1. // 先导入库
  2. import { Topology, Options, registerNode } from '@topology/core';
  3. import { register as registerFlow } from '@topology/flow-diagram';
  4. import { register as registerActivity } from '@topology/activity-diagram';
  5. import { register as registerClass } from '@topology/class-diagram';
  6. import { register as registerSequence } from '@topology/sequence-diagram';
  7. import { register as registerChart } from '@topology/chart-diagram';
  9. // 注册图形库
  10. canvasRegister() {
  11.   registerFlow();
  12.   registerActivity();
  13.   registerClass();
  14.   registerSequence();
  15.   registerChart();
  16.   // ... 其他图形库
  17. }
  18. canvasRegister();

注意，下面示例代码版本属于旧版本号，请参考上面用新版本号

es5使用示例：
https://github.com/le5le-com/topology-es5-demo

es6使用示例：
https://github.com/le5le-com/topology-demo-es6

typescript使用示例：
https://github.com/le5le-com/topology/tree/master/examples/angular/src/app