The easy way to start using yFiles - yFiles Dev Suite
The yFiles Dev Suite combines everything you need to get started with yFiles for HTML. Set up the SDK, learn the basics, and build your first graph apps.Simply run it from your terminal!
Requires a recent version of Node.js
First-time setup
The Getting Started section in the Developer's Guide explains the following steps in detail.
Obviously, you do require 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 16 or newer
load from Vimeo
Running the demos locally
The best way to run the demos locally is with the included dev server.
Run the start_demos script in the yFiles-for-HTML-Complete-2.6.0.4 directory:
start_demos.cmd (Windows)
start_demos.sh (Linux)
start_demos.command (MacOS)
Open the demos
Access and 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.4 directory as a project in your IDE.
WebStorm will automatically start the dev server in the background. So you don'thave to start the server manually each time.
Modify the demo code and observe the changes
The dev server automatically reloads the demo's page after changes in the source code.
Intro to yFiles
There are three approaches to learning the yFiles basics. Choose the one that resonates with you the most.
Work through the interactive beginners tutorial
If you prefer to learn by exploring and experimenting, check out the yFiles Basic Features tutorial included in the package. It can be found relative to the package root, in the following directories:
/demos-ts/tutorial-yfiles-basic-features
/demos-js/tutorial-yfiles-basic-features
As a prerequisite for this tutorial, open the packages' project in an IDE, as described before in First-time setup.
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, open the packages' project in an IDE, as described before in First-time setup.
Watch introductory videos
The yWorks YouTube channel has many 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 250 demos illustrating the various features of the library and how to use them in your own code. We invite you to open the many demos in any IDE and try them out.
/demos-ts
/demos-js
Work through the interactive advanced tutorials
In addition to the introductory tutorial, you'll find tutorials that deal with specific topics:
Using the GraphBuilder class
Implementing a custom style for nodes
Deploying a custom style for edges
Integrating a custom style for labels
Applying a custom style for ports
Further reading
The yFiles library includes comprehensive documentation about its concepts, features and API. Some entry points for beginners are:
The graph model: learn the basic concepts of graphs
Displaying the graph: learn how a graph is displayed on the screen
User interaction: learn how to configure and implement basic as well as sophisticated graph user interactions
Customizing styles: learn to tweak the look and feel of various graph elements
How to use the magnitude of automatic layout algorithms provided by yFiles
Your own yFiles app
yFiles integrates easily into most JavaScript or TypeScript 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 will help you get started easily.
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 showing 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.4-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.4-dev.tgz
The npm module comes with support for 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.
Using yFiles in a framework-specific project
Each framework comes with special requirements. We provide specific advice for most common toolkits.
Various demos showcase yFiles integration within different frameworks:
React Demo
Vue.js Demo
Angular CLI Demo
Frequently Asked Questions
More FAQ results
Test and experience
yFiles free of charge!
Fully-functional yFiles version
Free access to our high-quality support, to help you get started 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.
