開源、易擴展、方便集成的在線繪圖（微服務架構圖、網絡拓撲圖、流程圖）工具

時間 2019-11-07

原文原文鏈接

一個基於typescript + canvas 實現的開源在線繪圖的引擎Topology。採用引擎 + 圖形庫中間件的思路可以方便、快速的擴展、集成到前端項目。目前暫時實現了基本圖形、流程圖圖形庫，可以知足微服務架構圖、網絡拓撲圖和流程圖的繪製。後面計劃陸續實現活動圖/時序圖/類圖等UML圖。前端

在線無償使用（由於操做方便問題，暫時沒有適配移動端）
node

爲何重複造輪子

筆者工做中遇到比較多的微服務架構、雲資源運維、部署與運維可視化方面的需求
開源、知足本身需求的很少
typescript + 純粹canvas架構的很少
以中間件方式可定製知足不一樣場景的很少
動畫

特色

開源
動畫
可定製化
簡單易用，方便集成
較好的性能，很是流暢
方便的數據導入導出
圖片保存/預覽
typescript + canvas

使用場景

微服務架構圖
運維時部署結構拓撲圖
流程圖
活動圖
時序圖
類圖等

架構設計

主要由：層、節點、連線和箭頭等組成。
git

層：這裏的層，主要是爲了提高性能的邏輯層；與ps裏面的用戶圖層無關。 es6

離屏層：包含全部繪圖數據，是最穩定的圖層。
選中層：用戶選中部分或所有節點/連線的高亮圖層，並設置相關屬性、縮放、和旋轉等。
動畫層：主要用於演示動畫。
活動層：主要用於箭頭鼠標交互事件，好比錨點和連線過程。github

節點：是畫布的主要組成部分，節點內部還能夠包含圖標或文字。
連線和箭頭：連線和箭頭是關聯在一塊兒的。連線兩端能夠選擇設置或不設置箭頭。節點能夠經過控制點進行總體縮放、旋轉。

typescript

繪畫與屬性
節點和連線各類有自身的繪畫屬性，同時還能夠設置一個附加的自定義數據
npm

快速集成使用

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

typescript使用示例：
https://github.com/le5le-com/...api

安裝

# 安裝繪圖引擎
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
);