Getting started
with yFiles for HTML

First-time setup

In the Developer’s Guide, Getting Started offers an in-depth explanation of the following steps.
Naturally, you need a yFiles package and a valid license to use yFiles. If you don't have one yet, you can download a free trial version from our customer center or via the yFiles Dev Suite.

Prerequisites

The demos need an installed Node.js to run properly.

Install Nodes.js 12 or newer
https://nodejs.org/en/
load from Vimeo

Running the demos locally

To run the demos locally, a demo server has to be started.

Run the start_demos script in the yFiles-for-HTML-Complete-2.6.0.1 directory:
start_demos.cmd (Windows)
start_demos.sh (Linux)
start_demos.command (MacOS)
Open the demos
You can explore them at /demos-ts or /demos-js.

Working with yFiles

Install an IDE
We recommend WebStorm (30 days free). You can also use Visual Studio Code as a free alternative.
Open the project
Open the yFiles-for-HTML-Complete-2.6.0.1 directory as project in your IDE.
WebStorm will automatically start the demo server in the background. So you don't have to start the server manually each time.
Modify the demo code and observe changes
If you refresh the demos in the browser, changes in the source code will be visible. Tutorials are served just like regular demos, you will find their sources at:
TypeScript icondemos-ts/tutorial-yfiles-basic-features
JavaScript icondemos-js/tutorial-yfiles-basic-features

Intro to yFiles

There are three approaches to learning the yFiles basics. You can choose any of them, according to your personal preference.

Work through the interactive beginners tutorials

If you prefer to learn by exploring and experimenting, check out the live tutorials included in this package.

There are several tutorials for the complete beginner:

Basic features
Graph builder

As a prerequisite for this tutorial, you need to have opened the packages' project in an IDE (i.e. WebStorm or VSCode), as described in First-time setup. The first tutorial step can be found relative to the package root, at

TypeScript icondemos-ts/tutorial-yfiles-basic-features
JavaScript icondemos-js/tutorial-yfiles-basic-features

Read and work through the written tutorial

The written tutorial takes you through the basic concepts of working with yFiles in a step-by-step manner. Links to detailed documentation are provided throughout this tutorial.

As a prerequisite for this tutorial, you need to have opened the package's project in an IDE (i.e. WebStorm or VSCode), as described in First-time setup.

Watch introductory videos

The yWorks YouTube channel provides several helpful videos introducing the most important steps and concepts. Start your journey to becoming a proficient yFiles developer.

Next steps

Experiment with demos

The yFiles package contains over 100 demos presenting the various features of the library and how to use them in your own code. We invite you to open the various demos in the IDE and experiment with them.

TypeScript icondemos-ts
JavaScript icondemos-js

Work through the interactive advanced tutorials

In addition to the tutorials for beginners, you'll find tutorials that deal with specific topics:

Application features
Creating custom styles for nodes
Creating custom styles for edges
Creating custom styles for labels
Creating custom styles for ports
Layout features

Your own yFiles app

yFiles integrates easily into most JavaScript or TypeScript-based projects. Start a new yFiles-powered app from scratch – or include yFiles into your existing application to add sophisticated diagramming functionality.

Learn about the Development Mode to improve your development process:
meaningful error messages
type information
graph inspection

Creating a new app using yFiles

There are several ways to create a yFiles-enabled web app from scratch. Choose the one that suits you best.

yFiles Dev Suite project wizard

Create a basic project with just a few clicks in the yFiles Dev Suite. Automatically add application features like a context menu or a graph search. (powered by App Generator)

load from Vimeo

Templates on GitHub

Our template apps for Vue.js, React and Angular provide a starting point for development. You can clone the repositories from GitHub manually, or use the Yeoman Generator.

load from Vimeo

App Generator

The yFiles App Generator is an ETL tool that lets you rapidly prototype yFiles applications with custom data, styling, and graph layout.

load from Vimeo

Manual setup

Create your app manually in JavaScript or TypeScript.

load from Vimeo

Integrate yFiles into an existing project

yFiles is compatible with all modern web application frameworks, so it can be easily integrated into your existing application. After including the library, there are multiple demos show you how to add graphs to your application.

General integration

The easiest way to include the yFiles for HTML library into your project is to use it as a local npm module. Find lib-dev/es-modules/yfiles-26.0.1-dev.tgz in your yFiles package and add it as a dependency to your package.json.

>npm install --save <yFiles package path>/lib-dev/es-modules/yfiles-26.0.1-dev.tgz

The npm module comes with support of code completion for both JavaScript and TypeScript. If necessary, these typings can be generated and included in existing projects at any time.

For more information on how to set up this module, see the Working with the yFiles npm module chapter in the Developer's Guide.

Before you can start developing, register the yFiles for HTML license. Import License and set the value to the license's content.

Using yFiles in a framework-specific project

Each framework comes with special requirements. We provide specific advice for most common toolkits.

Several demos showcase yFiles integration with different frameworks:

Distributing your application

Before distributing your application, we highly recommend that you obfuscate and minify the resulting application. This reduces the download size of the library files for your end-users and protects your intellectual property by making the application source code harder to read.

The top-level deployment directory contains the yFiles deployment tool that provides name obfuscation and minification, especially for the yFiles for HTML library, amongst others. For more details, see the description in the deployment directory or the respective section in the Developer's Guide.

Test and experience
yFiles free of charge!
Fully-functional yFiles version
Free access to our high-quality support, to help you start easily
More than 100 source-code examples for rapid prototyping
Extensive step-by-step source-code tutorials that cover the essentials
Free resources like our Developer’s Guide, documentation, IDE setup tips, and more

Why, how, what? —
Just ask the diagramming experts!

Our team is happy to advise you – no strings attached. Let's talk about your project and find the perfect solution for your needs!

E-mail: hello@yworks.com

The data you enter will only be used to contact you regarding your request.
Learn more in our privacy policy.