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

le5le-topology一個基於typescript + canvas 實現的開源在線繪圖的軟件。采用引擎 + 圖形庫中間件的思路能夠方便、快速的擴展、集成到前端項目。目前暫時實現了基本圖形、流程圖圖形庫，能夠滿足微服務架構圖、網絡拓撲圖和流程圖的繪制。后面計划陸續實現活動圖/時序圖/類圖等UML圖。

在線體驗（因為操作方便問題，暫時沒有適配移動端）       產品介紹

配合VS Code插件一起使用

在vs code插件列表里搜索：le5le topology，或le5le-topology-plugin

查看插件

 

 

為什么重復造輪子

• 筆者工作中遇到比較多的微服務架構、雲資源運維、部署與運維可視化方面的需求
• 開源、滿足自己需求的不多
• typescript + 純粹canvas架構的不多
• 以中間件方式可定制滿足不同場景的不多
• 動畫

 

特點

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

 

使用場景

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

 

架構設計

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

層：

這里的層，主要是為了提升性能的邏輯層；與類似ps里面的用戶圖層無關。

離屏層：包含所有繪圖數據，是最穩定的圖層。

選中層：用戶選中部分或全部節點/連線的高亮圖層，並設置相關屬性、縮放、和旋轉等。

動畫層：主要用於演示動畫。

活動層：主要用於箭頭鼠標交互事件，比如錨點和連線過程。

 

節點：

是畫布的主要組成部分，節點內部還可以包含圖標或文字。

 

連線和箭頭：

連線和箭頭是關聯在一起的。連線兩端可以選擇設置或不設置箭頭。

 

節點可以通過控制點進行整體縮放、旋轉。

 

連線只表示節點描點間的連線，不存在縮放、旋轉。節點縮放或旋轉會造成控制點的重計算。連線形狀可以由線的控制點改變。

繪畫與屬性

節點和連線各種有自身的繪畫屬性，同時還可以設置一個附加的自定義數據

 

快速集成使用

es6使用示例：

github.com/le5le-com/t…

typescript使用示例：

github.com/le5le-com/t…

 

安裝

使用npm（或yarn）方式安裝使用。

 

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

 

 

開發自己的圖形庫

參考開發文檔： www.yuque.com/alsmile/top…

 

項目地址

• github
• 文檔 

結語

個人周末開發，還有很多需要提升的空間，歡迎提出意見和交流。

微信：alsmile123

 

個人服務器資源非常非常非常小，打開慢請耐心等待。歡迎資助 : )。

 

微信討論群