yFiles for HTMLDiagramming 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.
Get in touch to discuss your specific challenges with our diagramming experts. We're here to provide the guidance you need.
We´d love to help you. Reach out and we'll get in touch with you.
Your message has been sent.
Create natural, flowing diagrams directly in the browser
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 data structures, the tools are designed to simplify the process and deliver powerful results. Expert support from core developers ensures a smooth experience, helping to resolve any challenges efficiently.
Start transforming complex networks and dynamic relationships into intuitive, interactive diagrams today with the organic layout in yFiles.
Test yFiles free of charge
Technical features
Extensive Developer’s Guide and API documentation, runtime type-checking, debugging tools, plus code completion and quick API lookup in modern IDEs.
A pure JavaScript solution that works seamlessly with Angular, React, Vue.js, and basically any other JavaScript framework.
100% client-side graph drawing and graph editing—no specific server required.
The complete set of type definitions is available for TypeScript.
Supports all modern browsers — from Chrome to Edge, Firefox, and Safari — on desktops, tablets, and phones!
The API supports ECMAScript features like async functions, promises, classes, JS modules, iterators, etc. during development.
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.
Develop with your favorite toolchain!
Use Vite, esbuild, JS modules, Angular CLI, tsc,
plain script loading, and more.
yFiles in action
Interactive demos
Our interactive demos, created with yFiles for HTML, work directly in your browser.
Interactive demosSource-code demos
Explore our demos’ source code on GitHub to kick start or improve your projects.
GitHub
Playground
Try yFiles’ capabilities directly here in the playground.
graphComponent.fitGraphBounds()/**
* The yFiles graph component is already set up in this playground, and you can access
* it via the globally available variables 'graph' and 'graphComponent'.
*/
const nodeCount = 20
const rootNode = graph.createNode()
graph.addLabel(rootNode, 'Hello World')
// Create a random graph with a tree structure
const nodes: INode[] = [rootNode]
for (let i = 1; i < nodeCount; i++) {
nodes.push(graph.createNode())
graph.createEdge(nodes[Math.floor(Math.random() * (i - 1))], nodes[i])
}
const hl = new HierarchicalLayout()
hl.coordinateAssigner.symmetryOptimizationStrategy = 'strong'
// Apply a tree layout. Other layouts to try are for example OrganicLayout or Hierarchic Layout
await graphComponent.applyLayoutAnimated(hl, '1s')
More information
Working resources
Find helpful resources like Developer’s Guides, API documentation and videos.
Support hubLicense information
Get the right license and accurate pricing information for your specific use case.
Licenses11 reasons why web developers choose yFiles, the superior diagramming SDK
Get started right away!Test yFiles for HTML free of charge.
Download yFiles now!Choose your next steps
Get connected
Connect with our Customer Success Team regarding your ideas or projects.
Download yFiles
Try yFiles free of charge.
