Diagram Visualization With TypeScript
Increase the code quality of web-based diagramming applications by using TypeScript
Static type checking is particularly advantageous in larger software projects. The added type safety contributes to code quality and stability. However, smaller projects also benefit from type annotations since IDEs can provide improved static checking and code refactoring.
Visualizing structured data as a graph is a requirement for many applications. It can help understand the relationships between single data entries and, therefore, understand the data itself. Sometimes a diagram may be an auxiliary tool to provide another perspective for the user, e.g., displaying source code in a UML diagram. In other use cases, an interactive diagram serves as an interface for the user, for example, in fraud detection or organization charts.
yFiles for HTML is a commercial diagramming library for web applications, which integrates perfectly in TypeScript. The comprehensive library creates various types of diagrams, e.g., organization charts, BPMN diagrams, flowcharts, Sankey diagrams, and many more. yFiles integrates well on mobile devices and provides out of the box keyboard, mouse, and touch support to create interactive applications. Built-in automatic layout algorithms ensure that the visualization is always neat and easily readable.
yFiles for HTML brings a fully complete TypeScript definition file and also provides more specific versions for different IDEs like WebStorm or Visual Studio Code besides an extensive Developer’s Guide and API documentation.
The type definition file that is shipped with yFiles for HTML enables the IDE to autocomplete methods and properties while providing documentation and often source code snippets alongside:
It is also perfectly suited for complex object-oriented applications because the IDE can automatically generate inherited members to overwrite:
Besides the general type definitions of the entire yFiles API, the definition file also supports option overloads, which results in significantly less overhead and more readable code:
The option objects directly instantiate classes with a specific configuration, which makes the code more concise and avoids unnecessary initialization code.
This feature is not limited to class instantiation but is also utilized in commonly used factory functions to create elements with a specific style, size, or bounds.
Another feature that contributes to an efficient development process is the automatic type conversion. This concept offers developers a convenient way to specify complex yFiles types with a short-hand syntax. In parameter lists, parameter objects, or property setters, these convertible types can be assigned by a substitute type, e.g., a simple string. The substitute type is then converted into the actual type at runtime.
It is particularly useful for item styles because a CSS-like syntax can be used instead of explicitly instantiating each yFiles style:
Automatic type conversion is also reflected in the yFiles type definition file such that it can be used seamlessly in a TypeScript project.
yFiles for HTML comes with a TypeScript Sample Application that shows how to integrate yFiles for HTML with TypeScript. Besides this, there are also TypeScript sample applications for React, Angular, and Dojo.
The source code of these sample applications is part of the yFiles for HTML package and available on the yWorks Github repository:
Test the yFiles for HTML diagramming library with a 60-day, fully functional trial package. The recommended way to create a diagram with yFiles for HTML in Typescript is shown by the TypeScript sample application examples that are part of that package.
Download a trial version of yFiles for HTML.
Navigate to the source directory of the TypeScript Sample Application or to one of the TypeScript sample applications for React, Angular or Dojo.
Inspect the sample application’s documentation and
copy its build configuration and its Typescript sample components to your project or
adjust its source code to match your requirements.