yFiles for HTML Diagramming in the browser
yFiles for HTML is an extensive JavaScript/HTML library that adds diagramming functionality to your web project. It lets you create cutting-edge custom apps while easily integrating with your existing web solutions and dashboards.
Thank you!
Your message has been sent.
We'll get back to you as soon as possible.
Create natural, flowing diagrams for the web
The yFiles diagramming library offers everything needed to easily visualize complex networks and relationships in the browser. Whether starting a new project or enhancing existing applications and dashboards, yFiles is designed to simplify the process and deliver powerful results. Expert support from our library developers ensures a smooth experience, helping to resolve any challenges efficiently.
Start visualizing complex networks and dynamic relationships today with yFiles!
If you are working with AI coding agents, use the following prompt to get started:
Technical features
Developer-friendly
Extensive Developer's Guide and API documentation, runtime type-checking, debugging tools, plus code completion and quick API lookup in modern IDEs.
Pure JavaScript
A pure JavaScript solution that works seamlessly with Angular, React, Vue.js, and basically any other JavaScript framework.
100% client-side
100% client-side graph drawing and graph editing— no specific server required.
TypeScript support
The complete set of type definitions is available for TypeScript.
Runs everywhere
Supports all modern browsers — from Chrome to Edge, Firefox, and Safari — on desktops, tablets, and phones!
Develop with modern ECMAScript
The API supports ECMAScript features like async functions, promises, classes, JS modules, iterators, etc. during development.
Latest rendering technologies
Leverages SVG, WebGL, and HTML Canvas to draw diagrams—exclusively, simultaneously, or switched dynamically. It's your choice. Spice up your styling with CSS, animations, and transitions.
Flexible Deployment
Develop with your favorite toolchain!
Use Vite, esbuild, JS modules, Angular CLI, tsc, plain script loading, and more.
yFiles in action
Playground
Try yFiles' capabilities directly here in the playground.
graph.nodeDefaults.size = [70, 70];
graph.nodeDefaults.style = new ShapeNodeStyle({
shape: ShapeNodeShape.ELLIPSE,
cssClass: "node",
});
graph.nodeDefaults.labels.style = new LabelStyle({
shape: LabelShape.PILL,
backgroundFill: "white",
backgroundStroke: "1px solid #6A8293",
font: "15px poppins",
textFill: "#6A8293",
});
graph.edgeDefaults.labels.style = new LabelStyle({
shape: LabelShape.PILL,
backgroundFill: "#6A8293",
backgroundStroke: "1px solid white",
font: "15px poppins",
textFill: "white",
});
graphComponent.fitGraphBounds()
More information
11 reasons why web developers choose yFiles, the superior diagramming SDK
Getting started with yFiles
Tailored options for every step of your network visualization journey
Discover how easy it is to explore, evaluate, and implement yFiles for your projects. Whether you're looking to test it directly in your browser, build a prototype in your own environment, or invest in a long-term solution, yFiles offers straightforward options without hidden costs or commitments.
No subscription, no credit card required—just a quick start with your email address.
Test in Browser
Perfect for a quick hands-on experience with yFiles for HTML, the Playground lets you test its features, try out sample code, and get a feel for its powerful capabilities in real time. All you need is a browser; no downloads or installations necessary.
Explore yFiles directly in your browser using the yFiles Playground, no setup required.
Quick Start with AI
Already using an AI coding agent like Claude Code, Qwen, or GitHub Copilot? Skip the manual setup. The yFiles AI tools give your agent up-to-date knowledge of the yFiles for HTML API, so it can scaffold a working project straight from a single prompt.
Copy the prompt and paste it into your agent:
“ Fetch https://yfiles.com/agent-start.md and follow its instructions ” Copied! Could not copy Try for Free
Evaluate the complete yFiles SDK at no cost. Build prototypes in your own environment with full support from the yFiles core developers.
Start your free trial by visiting our evaluation center.
Buy the SDK
Got questions about
yFiles for HTML?
Dr. Michael Baur
Team Lead HTML
Email: hello@yworks.com
Phone: +49 7071 9709050
Choose your next steps
Get connected
Connect with our Customer Success Team regarding your ideas or projects.
Download yFiles
Try yFiles free of charge.
