Le5le-topology is an open source, extensible, and integrated software project that provides online mapping (microservice architecture diagram, network topology diagram, flow diagram, activity diagram, sequence diagram, class diagram, mind map/brain map, animation, etc.).

Open source online drawing engine Topology based on typescript + Canvas. The idea of using engine + graphics library middleware can be easily and quickly expanded and integrated into the front-end project.

Free online use (due to convenient operation, temporarily not adapted to mobile terminal) product introduction



Use with VS Code plug-ins

In the VS Code plugin list, search: le5le Topology, or le5le-topology-Plugin

Check the plugin



Why repeat the wheel

  • In my work, THE author has encountered many requirements in microservice architecture, cloud resource operation and maintenance, deployment and operation and maintenance visualization
  • Not many are open source and meet their own needs
  • There’s not much in typescript + that is purely canvas
  • Not many can be customized in middleware to meet different scenarios
  • Animation support


The characteristics of

  • Open source
  • animation
  • Can be customized
  • Light weight (core library + 3 graphics library is only about 100K), but very rich features
  • Easy to use, easy to integrate
  • Supports rotation, zooming, text properties, border properties, backgrounds, line animations, and more
  • Excellent performance, very smooth
  • Convenient data import and export
  • Picture save/preview
  • typescript + canvas


Usage scenarios

  • Microservices architecture diagram
  • Deployment topology during O&M
  • The flow chart
  • Activity diagrams
  • Sequence diagram
  • The class diagram etc.
  • Mind mapping/brain mapping
  • Class SCADA











Architecture design

It mainly consists of layers, nodes, lines and arrows.



Layer:

The layer here is mainly the logical layer for improving performance; It has nothing to do with user layers like those in PHOTOSHOP.

Off-screen layer: Contains all the drawing data and is the most stable layer.

Select Middle layer: the user selects the highlighted layer of some or all nodes/lines and sets the related properties, scaling, and rotation.

Animation layer: mainly used to demonstrate animation.

Activity layer: Mainly used for arrow mouse interaction events, such as anchors and wiring processes.


Nodes:

Is the main part of the canvas. The node can also contain ICONS or text inside.


Lines and arrows:

The lines and arrows go together. The arrows can be set or not set at both ends of the cable.


The nodes can be scaled and rotated as a whole by control points.




The line only represents the line between node tracing points, without scaling or rotation. Node scaling or rotation causes recalculation of control points. The shape of the line can be changed by the control points of the line.



Painting and Attributes

Nodes and wires have their own drawing properties, as well as an additional set of custom data




Rapid integrated use

Es6 Example:

Github.com/le5le-com/t…

Examples of typescript usage:

Github.com/le5le-com/t…


The installation

Install it in NPM (or YARN) mode.

Install the drawing engine
npm install topology-core

Install graphics library - Flowchart
npm install topology-flow-diagram
#... Other Graphics librariesCopy the code

Creating the base Canvas

Import the drawing engine import {Topology} from'topology-core'; // 2. Create canvas // where, the first argument'topo-canvas'Represents the CANVAS DOM element ID; // The second argument {} represents the canvas option, in which case all defaults are used. Please refer to the API documentation below for details. var canvas = new Topology('topo-canvas'{}); Render graph // the first parameter {} represents graph data // the second parametertrueTo open a new file. Otherwise in the current file open, overwrite the existing graphics data canvas.render({},true);Copy the code

Common Canvas methods

// Get canvas data const data = this.canvas.data(); // Save as image blob // toImagetype, quality, callback this.canvas.toImage(null, null, blob => { // Do sth. }); // saveAsImage function argument: filename,type, quality
this.canvas.saveAsImage('canvas.png'); This.canvas. Cut (); this.canvas.copy(); this.canvas.parse(); this.canvas.undo(); this.canvas.redo();Copy the code

Reference third-party graphics libraries

1. Import {registerNode} from'topology-core/middles'; Import {flowData, 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. Register the graphics library and its related elements registerNode('flowData', flowData, flowDataAnchors, flowDataIconRect, flowDataTextRect);
registerNode('flowSubprocess', flowSubprocess, null, flowSubprocessIconRect, flowSubprocessTextRect);
registerNode('flowDb', flowDb, null, flowDbIconRect, flowDbTextRect);
registerNode('flowDocument', flowDocument, flowDocumentAnchors, flowDocumentIconRect, flowDocumentTextRect); / /... // Drawfn-node render function drawfn-node render function drawfn-node render function drawfn-node render function drawfn-node Pass in canvas CTX and Node data and decide how to draw the node // anchorsFn - compute node's anchor. If null, it means using the default calculation anchor method // iconRectFn - icon area of compute node. If null, TextRectFn - Specifies the text area of a compute node. If null, specifies the default text area of a compute node. // force - Specifies whether to overwrite a node with the same name if it already exists.export functionregisterNode( name: string, drawFn: (ctx: CanvasRenderingContext2D, node: Node) => void, anchorsFn? : (node: Node) => void, iconRectFn? : (node: Node) => void, textRectFn? : (node: Node) => void, force? : boolean );Copy the code

Develop your own graphics library

Development of reference documents: www.yuque.com/alsmile/top…


The project address

  • github
  • Documentation (some API documentation to be continued)

conclusion

Personal weekend development, there is still a lot of room for improvement, welcome to give your opinion and exchange.

WeChat: alsmile123


Open source project is not easy, we feel good, might as well on GitHub star support:), let me know everyone’s hot attention, will be more motivated oh.

Personal server resources are very, very, very small, open slowly please wait patiently. Funding is welcome:).


Wechat discussion group :(large groups with more than 100 members need to be invited into the group; New group click scan code to enter)