开源、易扩展、方便集成的在线绘图（微服务架构图、网络拓扑图、流程图）工具

# 安装绘图引擎
npm install topology-core

# 安装图形库 - 流程图
npm install topology-flow-diagram
# ...其他图形库

// 1. 导入绘画引擎
import { Topology } from ‘topology-core‘;

// 2. 创建画布
// 其中，第一个参数‘topo-canvas‘表示canvas的dom元素id；
// 第二个参数{}表示画布选项，这里表示全部使用默认值。具体选项请参考后面的api文档。
var canvas = new Topology(‘topo-canvas‘, {});

// 3. 渲染图形
// 其中，第一个参数{}表示图形数据
// 第二个参数true，表示打开一个新文件；否则在当前文件打开，覆盖已存在的图形数据
canvas.render({}, true);

// 获取画布数据
const data = this.canvas.data();

// 保存为图片blob
// toImage函数参数：type, quality, callback
this.canvas.toImage(null, null, blob => {
  // Do sth.
});

// 下载为图片
// saveAsImage函数参数：filename, type, quality
this.canvas.saveAsImage(‘canvas.png‘);

// 编辑相关操作
this.canvas.cut();
this.canvas.copy();
this.canvas.parse();
this.canvas.undo();
this.canvas.redo();

// 使用第三方图形库

// 1. 先导入注册函数
import { registerNode } from ‘topology-core/middles‘;

// 2. 导入图形库图形及其相关元素
import {
  flowData,
  flowDataAnchors,
  flowDataIconRect,
  flowDataTextRect,
  flowSubprocess,
  flowSubprocessIconRect,
  flowSubprocessTextRect,
  flowDb,
  flowDbIconRect,
  flowDbTextRect,
  flowDocument,
  flowDocumentAnchors,
  flowDocumentIconRect,
  flowDocumentTextRect,
  flowInternalStorage,
  flowInternalStorageIconRect,
  flowInternalStorageTextRect,
  flowExternStorage,
  flowExternStorageAnchors,
  flowExternStorageIconRect,
  flowExternStorageTextRect,
  flowQueue,
  flowQueueIconRect,
  flowQueueTextRect,
  flowManually,
  flowManuallyAnchors,
  flowManuallyIconRect,
  flowManuallyTextRect,
  flowDisplay,
  flowDisplayAnchors,
  flowDisplayIconRect,
  flowDisplayTextRect,
  flowParallel,
  flowParallelAnchors,
  flowComment,
  flowCommentAnchors
} from ‘topology-flow-diagram‘;

// 3. 向引擎注册图形库图形及其相关元素
registerNode(‘flowData‘, flowData, flowDataAnchors, flowDataIconRect, flowDataTextRect);
registerNode(‘flowSubprocess‘, flowSubprocess, null, flowSubprocessIconRect, flowSubprocessTextRect);
registerNode(‘flowDb‘, flowDb, null, flowDbIconRect, flowDbTextRect);
registerNode(‘flowDocument‘, flowDocument, flowDocumentAnchors, flowDocumentIconRect, flowDocumentTextRect);
// ...

// 下面是简单的注册函数介绍，详情请参考api文档
// registerNode: 注册一个自定义图形节点node.
// name - node名称.
// drawFn - node渲染函数。传入canvas ctx和node数据，自己决定如何绘画node
// anchorsFn - 计算node的锚点，如果为null，表示使用缺省计算锚点方法
// iconRectFn - 计算node的图标区域，如果为null，表示使用缺省计算图标区域方法
// textRectFn - 计算node的文字区域，如果为null，表示使用缺省计算文字区域方法
// force - 如果已经存在同名node，是否覆盖.
export function registerNode(
  name: string,
  drawFn: (ctx: CanvasRenderingContext2D, node: Node) => void,
  anchorsFn?: (node: Node) => void,
  iconRectFn?: (node: Node) => void,
  textRectFn?: (node: Node) => void,
  force?: boolean
);