Skip to content

Methodology: Modeling Libraries Search

The following sections describe the approach and methodology used to determine the modeling libraries that could be considered as a basis for the web-based modeling application.

1. General Information

The approach to selecting three modeling libraries/frameworks worth evaluating and considering as the basis for the modeling application is described below. A systematic search was conducted to determine existing and relevant modeling libraries/frameworks. First, a Google search was conducted, followed by a Github search due to the platform's popularity, especially for open-source projects. This popularity also became apparent during the Google search since the absolute majority of the mentioned libraries can be found on Github. The final result of the selected modeling libraries with their selection reasons can be found in the Final Selection Result section.

The Google search used the following search string to find modeling libraries/frameworks:

javascript AND web AND (diagramming | drawing) AND (open-source OR open source OR OSS)

📆 Search date: 2022-03-31
→ 🔍 Results: 1 610 000 000

However, due to the huge amount of received results, the considered search results were limited to the websites listed on the first 10 Google pages. The received results are documented in Google_Search_Results_part1 and Google_Search_Results_part2. In these files, the mentioned libraries are listed for each website individually. Afterwards, all identified libraries, minus duplicates, were summarized in the Google_Search_Results_Libs file, which includes additional information based on the respective code repository. This resulted in 🔍 139 identified libraries.

Since the websites received by the Google search can list any frameworks/libraries, their relevance, popularity, and open-source property cannot be presumed. For example, the identified libraries include libraries that are not open-source and instead commercially licensed or had received their last update (identified by latest commit and version) in 2013. Therefore, the following exclusion criteria were applied for the first filtering of the results in order to ensure that the individual repository projects are relevant, comparatively up-to-date, open-source, and enjoy certain popularity. With 100, a relatively small number of required repository stars was chosen since their meaning is not commonly defined, resulting in different interpretations.

❌ Exclusion Criteria:

  • Repositories with last commit before 2019-01-01 despite search constraints
  • Repositories with non OSS Licenses
  • Repository Stars < 100

→ Resulting repositories 🔍 73

The remaining libraries can be found in the Google_Search_firstFiltering file.

In contrast to the Google search, the Github search used significantly fewer restrictions for their search string. This is due to the limitations of the provided Github search. The search considers repository titles as well as provided topics and descriptions. However, since topics and descriptions are typically very short and not required, restricting the search too much could exclude relevant and valuable results. Therefore, the search was limited to two most important and fitting keywords. Additionally, since the Github search allows filtering for specific last commit dates, the same date restriction applied to the received Google results is included.

javascript diagramming pushed:"> 2019-01-01"

📆 Search date: 2022-04-02
→ Results 🔍 239

The received repositories are documented in Github_Search_raw_results, which also includes additional information based on the respective code repository. The repositories are then further filtered with the following exclusion criteria that are almost identical to the ones applied to the Google results. Again, to ensure that the individual repository projects are relevant, comparatively up-to-date, open-source, and enjoy certain popularity.

❌ Exclusion Criteria:

  • Repositories with last commit before 2019-01-01 despite search constraints
  • Repositories with non OSS Licenses
  • Empty repositories (in table identified by no last commits)
  • Repository Stars < 100

→ Resulting repositories 🔍 27

The remaining libraries can be found in the Github_Search_first_filtering file.

4. Merging Search Results

After completing the first filtering of the search results, the remaining libraries were merged and duplicates removed, which resulted in 🔍 90 remaining libraries: merged_results. Since general aspects and properties of the libraries like their relevance, popularity and license have already been considered in the steps before, the following exclusion and inclusion criteria consider the actual intention and general functionality of the respective libraries.

❌ Exclusion Criteria:

  • Not related to drawing general diagrams
  • Too specific e.g. designed to create specific types of diagrams like bpmn
  • Not for web applications
  • A drawing application not usable as library
  • Only able to create or edit graphics like SVG content

✔ Selection Criteria:

  • Library usable for drawing content
  • Usable for web application

→ Resulting repositories: 🔍 30

The remaining libraries, as well as the specific removal reason(s) for each individual library can be found in the merged_results_first_filtering file.

For the final selection as described in the following section, each remaining library and its provided functionalities were considered in greater detail by providing a short summary of the most critical identified remarks as summarized in filtered_results_remarks.

5. Final Selection Result

Based on the remarks for each library and the following exclusion and selection criteria, three different modeling libraries are selected for the following evaluation to be considered as the basis for realizing the modeling application. This selection also considered the actual range of functions provided by the respective library.

❌ Exclusion Criteria:

  • No or insufficient documentation available
  • Connection modeling not per se supported
  • Documentation not entirely in english
  • No custom creation of shapes provided

✔ Selection Criteria:

  • Occurrence during search more than once (preferably high number)
  • Preferably good documentation available
  • Provides many shapes and additional features useful for modeling
  • Explicitly mentioned by tool that designed for modeling applications/ tools
Modeling library
Repository URL
Selection Reasons
MxGraph Archived repository: https://github.com/jgraph/mxgraph
Continued repository: https://github.com/maxGraph/maxGraph
  • highest occurrence during search: 7 times in total
  • used for popular modeling editor draw.io
  • extensive documentation, demos and tutorials available
  • provides several shapes but also customization of these as well as creating new shapes
  • provides explicit support for creating diagram editor
Joint.js https://github.com/clientIO/joint
  • second highest occurrence during search: 6 times in total
  • extensive documentation, demos and tutorials available
  • explicitly designed for creating diagramming tools
  • provides several shapes but also customization of these as well as creating new shapes
Draw2d https://github.com/freegroup/draw2d
  • occurred three times during search
  • extensive documentation and examples available
  • easily create visual languages & tools
  • provides several shapes but also customization of these as well as creating new shapes
Last update: 2022-08-31
Back to top