Getting Started

This chapter introduces yFiles for HTML and helps you get started quickly.

First, we describe how to create a new yFiles for HTML project in your preferred integrated development environment (IDE). Then, a short tutorial guides you through building your first yFiles for HTML application and familiarizes you with some of the basic concepts of yFiles for HTML.

The tutorial begins with a basic yFiles for HTML web application consisting of a simple HTML <div> element containing the main diagram component. Subsequent sections extend this web app step by step with new features.

You will learn how to create a simple graph and customize its visual appearance. Enabling user interaction will transform your application into a simple graph editor. The tutorial concludes by explaining how to use automatic graph layout in your new application.

At the start of each tutorial section, a note like this will summarize the main topics of that step.

You can also have a look at our YouTube Playlist that covers some of the same topics.

First Time Setup

To prepare for development and explore the yFiles for HTML sample applications, run:

npm install

or use one of the start_demos scripts in the package root folder. This will install the demo server.

Source Code Demos and Tutorials

The yFiles for HTML package includes pre-configured project settings for JetBrains IDEs and Visual Studio Code. In these projects, you can run the demo applications that are included in the package, and inspect their source code to learn how to implement the features you want to use.

Additionally, you can also browse the extensive API documentation and the developer’s guide from within the IDE.

See Demos and Tutorials for more details.

The pre-configured project settings include startup tasks for installing the yFiles for HTML NPM module and starting a local Vite server that serves the yFiles for HTML demos.In current JetBrains IDEs, you need to explicitly allow these tasks to be executed.

One important part of the demo applications is the Basic Features source code tutorial, a step-by-step introduction that is more comprehensive than this tutorial. We recommend reading this chapter to quickly learn the most basic concepts, and then examining the source code tutorial for more details and features not covered here.

yFiles Dev Suite

The yFiles Dev Suite offers a graphical interface within your browser to simplify working with a yFiles for HTML package. It provides the following capabilities:

• Creating new yFiles applications with just a few clicks.
• Browsing demo applications, including:
  • Managing the demo server.
  • Browsing the source code.
  • Using demo source code as a foundation for your own applications.
  • Using an integrated diff tool to compare your code with the original demo code.
• Communication with the yWorks support team and integration with my.yworks.com.

To launch the yFiles Dev Suite, execute the following command:

> npx yfiles-dev-suite

This command will open the yFiles Dev Suite in your default browser.

For an introductory overview, see this video.

Tutorial Videos

Our introductory videos provide a quick start with tutorials about working and developing with yFiles for HTML.

App Generator

The App Generator enables you to quickly create diagram application prototypes. Use this browser-based tool to select from various data sources and data processing steps to prototype yFiles for HTML applications with custom data, styling, and graph layout.

With just a few clicks, you can configure a yFiles for HTML application and export it as plain JavaScript or for target frameworks like React, Angular, or Vue. The generated code is designed to be readable and easily modified, allowing the application to evolve into a production-ready tool tailored to your specific requirements.

Watch the Video for a brief introduction to working with the App Generator.