mxgraph series [2]: Project structure

Posted May 25, 20206 min read

1 . Directory description

mxgraph The directory structure is as follows:

  • docs :mxgraph documentation
  • dotnet editor backend implementation, no need to pay attention for now
  • etc/build :There is only one Gruntfile.js file in this directory, which is used to build the build environment version
  • java :java-based editor backend implementation, no need to pay attention for now
  • javascript :mxgraph core code folder, where javascript/src is the framework source code; javascript/examples is the example code.

The mxgraph repository mainly contains several types of resources. The core is the graphics engine source code in the javascript/src directory; followed by the graphics editor based on the graphics engine in the javascript/src/editor directory; Backend examples based on .net and java; and the documents in the docs directory as learning resources, and the sample code in the javascript/examples directory, explained one by one below.

2 . Official documents

To learn mxgraph, you can start with the official documents. The following types of documents exist in the mxgraph warehouse, which is of great help for getting started:

  1. tutorial :Project overview document that outlines the role of mxgraph, component structure, and provides a simple example of getting started , Has a higher guiding role when first contacting the project.
  2. manual :User manual document, detailing mxgraph design ideas, starting the engine, how to use it, and how mxgraph The data model for managing images. It is recommended to skim in the early stage and write a few examples with a basic perceptual knowledge of the framework. You can go back and read it carefully.
  3. examples :Project example index document, which describes the purpose of each example in detail and can be used as a reference for learning.
  4. api :API manual, provides the use of all classes, class methods, and class attributes under mxgraph Note that you can query when you need to use certain classes.

The recommended reading order is that a detailed reading of the tutorial can help establish the perception of mxgraph; two skimming the manual to understand the management method of the mxgraph data model; three carefully reading the sample code to learn and understand various interfaces from the examples Usage; if necessary, you can consult the API documentation for detailed information on each interface.

All the above documents can be double-clicked on the corresponding html file to open and view it in the browser.


The quality of mxgraph's official documents is simply a pity. Many concepts have been carried out without a detailed explanation. In addition, the community's discussion about mxgraph is very low, resulting in high learning costs for users. In this situation, the author believes that the most effective learning method can only be combined with examples, API documentation, and source code, and the three dimensions of learning are compared with each other.

3 . Core directory structure

The mxgraph framework code is stored in the javascript/src directory, the main files are:

  | index.txt
  • javascript/src/js:mxgraph JS code, basically all functions are implemented here.
  • javascript/src/css:The style implementation of the mxgraph component can be temporarily ignored.
  • javascript/src/images:The image resources needed in the chart editor can be ignored.
  • javascript/src/resource:Multi-language definition file of graphic editor, which can be ignored.

The core functions of mxgraph are all defined in the javascript/src/js directory, so the subsequent learning is mainly concentrated in this part of the code. The main functions of several subdirectories are:

  • The model subdirectory is the implementation of the data management model. The data model records the graph structure of the mxgraph instance and the detailed information of the nodes, and exposes a series of update, delete, and insert interfaces. When we use mxgraph, we often follow this part of the interface. Deal with. More explorations on the data model will be added later.
  • shape defines several main primitive types, including lines, labels, arrows, polygons, quadrilaterals, swim lanes, etc.
  • view is the main interface layer for the external interaction of the framework, including the graphic interaction interface mxGraph class, style management interface mxStylesheet, graphic element editor mxCellEditor and so on.
  • handler defines several common interactive behavior logics of primitives in the framework, such as mxKeyHandler for processing shortcut key logic; mxEdgeSegmentHandler for processing connection line fragments; mxCellHighlight for processing primitive highlighting effects, etc.
  • layout defines the layout logic used by mxgraph, including stacking layout mxStackLayout; swimlane layout mxSwimlaneLayout; circular layout mxCircleLayout.
  • util contains various tool functions.
  • io defines several codecs for different tenses, which can be used to achieve the persistence of mxgraph instance state.
  • editor short and powerful editor implementation, built-in shortcut keys, pop-up menus, toolbars and other functional support.

In addition, javascript/src/mxClient.js is the entry file of the framework. On the one hand, it defines a series of environment variables; on the one hand, it declares the basic dependency file list of the framework. javascript/src/mxClient.min.js is the version after etc/build/Gruntfile.js connection, merge and compression operations, and can be used as a production environment library file.


The mxgraph repository contains two types of function codes, one is as the bottom graphics engine; the other is as the graphics editor for the upper applications. In the source code, javascript/src/js/editor is the implementation code of the editor. Javascript/src/css, javascript/src/images, and javascript/src/resource are all resource dependencies of the graphical editor. Readers are advised to ignore this part of the code for the time being and concentrate on learning how to use the graphics engine first.

4 . Sample code

The examples provided by mxgraph are all under javascript/examples directory, there are 88 in total, you can double-click javascript/index. html Open the sample index document. Although there are so many example codes, each example does not have enough details; the official does not provide a learning process from shallow to deep, for which I briefly summarized a reading order:

  1. helloworld.html, although it is a very basic introductory example, but fully demonstrates the use of mxgraph framework.
  2. Learn how to customize primitives through shape.html; learn how to define primitive styles in xml format through stencils.html.
  3. Learn how to monitor events of mxgraph instance objects through events.html. For a complete list of events, please refer to the javascript/docs/jsapi/index.html document.
  4. Learn the concept of graphic layering through layers.html. Layered functions help to manage graphic elements. Most graphic engines will have similar functional designs.
  5. Learn groups and merge of graphic elements through groups.html. The grouping function can logically merge multiple graphics into one elements, which is another dimension management method.
  6. Learn how to define graphic styles through stylesheet.html.
  7. Learn how to embed custom patterns in mxgraph through images.html.
  8. Use markers.html to learn how to modify the style of the connection line.
  9. Learn how to add explanatory text to graphics through labels.html and secondlabel.html; learn how to add indicators to parent primitives through indicators.html; learn how to embed html content in the form of label through htmllabel.html.
  10. Learn how to add interactive functions to graphic components through anchors.html and control.html.
  11. Learn the layout function of mxgraph through graphlayout.html, autolayout.html, boundary.html; later you can also learn more complex layout logic through hierarchicallayout.html, swimlanes.html.
  12. Use codec.html and jsondata.html to learn how to perform the encoding and decoding functions of the data model, and fileio.html to learn how to achieve the persistence and restoration of graphic content.
  13. Use dragsource.html and drop.html to learn how to implement graphic drag and drop operations, and handles.html to learn more complex interactive functions.

The above example of accuracy, combined with the javascript/docs/jsapi/index.html document, believes that readers will have a higher dimensional understanding of mxgraph.