mxGraph Getting Started Tutorial

mxGraph Tutorial

Haha, mxGraph is no longer updated, but the effect of using it to draw hierarchical graphs is still great.
mxGraph is powerful and the documentation is complete (difficult to understand).

https://github.com/jgraph/mxgraph

https://jgraph.github.io/mxgraph/docs/tutorial.html

The mxGraph package contains a client software written in JavaScript, and a series of backends for various languages. The client software is a graphical component with an optional application wrapper that is integrated into the existing web interface. The client requires a network server to deliver the required files to the client, or can run from a local file system without a network server. The backend can be used as-is or embedded into an existing server application in one of the supported languages.

Getting Started Example

1. Create an HTML page and introduce the mxGraph library into it.

<script type="text/javascript">
  mxBasePath = 'javascript/src';
</script>
<script type="text/javascript" src="javascript/src/js/mxClient.js"></script>

2. Create a div to hold the mxGraph graphic.

<div id="graphContainer" style="position:relative;overflow:hidden;width:100%;height:100%;"></div>

3. Create an mxGraph instance in JavaScript and add it to the div you created earlier.

var container = document.getElementById('graphContainer');
var graph = new mxGraph(container);

4. Create graphic elements and connectors and add them to graphics.

// 创建两个图形元素
var vertex1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
var vertex2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);

// 创建一条连接线
var edge = graph.insertEdge(parent, null, '', vertex1, vertex2);

5. Run the page and you will see the graph created.

This is just a simple example of mxGraph. If you want to learn mxGraph more deeply, you also need to refer to the official documentation.

basic concept

1. Graph: The core object of mxGraph, representing the entire graph. It contains graphic elements, connectors, etc.

2. Cells: Represent nodes or connections in a graph and can have various properties such as labels, styles, and geometric positions.

3. Model: Represents the data model of mxGraph and is responsible for maintaining graphic elements and connectors. As cells are added or removed from the drawing, the model is updated.

4. Views: They manage all information related to drawing graphics, such as scroll bars, zoom level, selection state, and currently displayed area.

5. Stylesheet: used to define styles for graphic elements and connectors. Styles can establish default values ​​for certain elements while allowing custom styles to be applied to specific elements.

6. Layouts: Algorithm for automatically arranging nodes. Using layouts allows large numbers of nodes to be better organized together, making them more beautiful and easier to understand. There are many different types of layouts available in mxGraph.

7. Graphics events: events such as click, double-click, drag, change size, etc. mxGraph has built-in event handlers that allow you to capture and handle these events easily.

8. Connectors: Lines connecting two nodes. mxGraph supports different types of connectors, such as straight lines, curves, arrows, etc.

9. Ports: is a special type of cell used to define connection points on nodes. They can be input or output ports and can be connected to adjacent cells.

10. Zoom and scroll: mxGraph supports zooming and scrolling to navigate and view large graphs. You can zoom in or out of the graph as needed and use the scroll bars to navigate within the graph.

11. Toolbars and Menus: mxGraph supports custom toolbars and menus so that users can easily add, delete, or edit graphic elements.

12. Import and Export: mxGraph supports importing graphics data (such as XML files) from other sources and exporting it to multiple formats such as JPEG, PNG, and PDF. This makes mxGraph a very flexible tool that can be integrated with other applications.

13. Printing: mxGraph includes useful printing functions that allow you to generate high-quality printouts suitable for various occasions such as reports, presentations, etc.

14. Client events: mxGraph supports the processing of many events (such as mouse click, double-click, drag and drop, etc.), and completes foreground processing on the client, reducing background interaction data and improving user experience. 15. Server-side events: mxGraph also supports handling events on the server side, so that more complex operations like validation and database saving can be performed.

15. Virtual layout: mxGraph provides a virtual layout algorithm to solve the layout problem of large graphics. The algorithm uses a hierarchical grouping method and a hierarchical constraint algorithm to generate graph layouts for greater efficiency, speed, and scalability.

16. Data binding: mxGraph supports binding data to graphic elements to achieve synchronization between data and graphics and update graphics in real time. When the data changes, the graph will automatically update, which can be very useful in some applications.

17. Plug-in system: mxGraph provides a plug-in system that allows you to add custom functionality, such as style editors, rulers, and more. By using the plugin system, you can tailor mxGraph to your specific needs.

Now that we are familiar with the basic concepts, let's start drawing a topology diagram.