le5le-topology是基于typescript canvas实现的开源在线绘图软件。 采用引擎图形库中间件的思路，可以方便、快速地扩展，并集成到前端项目中。 目前暂时实现了基本图形、流程图、活动图、时序图、类图等UML图，还支持微服务体系图、网络拓扑图等。 我想知道
在线体验(由于操作容易性的问题，没有适合移动端) )产品介绍
在33558www.Sina.com/vscode插件列表中搜索： le5le topology或le5le-topology-plugin
查看插件
为什么做车轮的笔者工作中有比较多的微服务结构、云资源运维、部署和运维可视化方面的需求是开源的，满足自己需求的不多的typescript纯canvas结构不多的中间件方式可以满足不同的场景
特征开源动画可定制、易于使用，能够轻松集成出色的性能，非常顺利、方便的数据读取/导出图像存储/预览typescript canvas
在使用场景微服务架构图传输时，引入结构拓扑图流程图活动图时序图类图等
体系结构设计主要由层、节点、连接、箭头等组成。
图层：
这里的层主要是为了提高性能的逻辑层； 与ps这样的用户层无关。
配合VS Code插件一起使用:包含所有绘图数据，是最稳定的图层。
动画:用户选择部分或全部节点/连接的高亮图层，并设置相关属性、缩放、旋转等。
离屏层:主要用于演示视频。
选中层:主要用于箭头鼠标操作事件，如锚点和连接过程。
节点：
是画布的主要组成部分，节点内部也可以包含图标和字符。
连接和箭头：
连接和箭头是相关联的。 可以选择是否在连接的两端设置箭头。
可以通过控制点整体缩放和旋转节点。
连接只表示节点之间的连接，没有缩放或旋转。 节点的缩放或旋转将重新计算控制点。 线的形状可以根据线的控制点而改变。
绘制连接到属性节点，具有自己的绘制属性，还可以设置其他自定义数据
使用es6快速集成的示例：
github.com/le5le-com/t…
typescript使用示例：
github.com/le5le-com/t…
安装使用npm (或yarn )方式安装。
#安装绘图引擎npm install topology-core#安装图形库-流程图npminstalltopology-flow-diagram # .其他图形
创建基础画布//1 .绘制引擎{ paint import } 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.to image (null，null，blob={ //Do sth.} ) //作为图片下载//saveAsImage函数参数： filename，type，quality this.canvas.save as image (' canvas.png ' )； //编辑相关操作this.canvas.cut (； this.canvas.copy (； this.canvas.parse (； this.canvas.undo (； this.canvas.redo (； 浏览第三方图形库//使用第三方图形库//1 .注册函数import { register node } from ' topology-core/middles '； //2 .图形库图形及其相关元素import { flowData，flowDataAnchors，flowDataIconRect，flowDataTextRect，flowSubprocess，}
processTextRect, 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
个人服务器资源非常非常非常小，打开慢请耐心等待。欢迎资助 : )。
微信技术讨论群：
Topology技术讨论群