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.

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.
GitHubPlayground
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])
}
// Apply a tree layout. Other layouts to try are for example OrganicLayout or Hierarchic Layout
await graphComponent.applyLayoutAnimated(new TreeLayout(), '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
Powerful and Diverse Layout Algorithms
A wide variety of layouts, flexible configurations, and superior performance.
- Wide variety of different layout types
- Incremental layout algorithms
- Combination of multiple layouts
- Advanced edge-routing
Advanced Visualization Capabilities
High-quality visualizations that clarify and inform.
- High-quality rendering
- Interactive visualizations
- Dynamic visualizations
- Customization of visual styles
- Support for different graph types
Flexibility and Customizability
Fully customizable layouts and styles for any use case.
- Highly customizable layouts
- Flexible API
- Support for multiple styles
- Adaptability to different data structures
- Dynamic customization
High Performance
Efficient handling and rendering of large graphs.
- Efficient layout algorithms
- Scalability
- Performance tuning options
- Optimized rendering engine
- Efficient handling of large graphs
Integration with Various Platforms
Seamlessly integrates with existing systems and frameworks.
- Cross-platform support
- Framework independent
- API consistency
- Modular architecture
- Cloud and on-premise compatibility
Interaction and Animation Features
Comprehensive components for dynamic, interactive graphs.
- Comprehensive interaction framework
- Advanced animation capabilities
- Customizable user interactions
- Touch and gesture support
- Dynamic updates
- Smooth transitions for layout changes
Universal Data Support
No restrictions on data sources or types—total flexibility.
- Data source independence
- Real-time data updates
- No forced cloud dependencies
- Data ownership remains with the customer
- No specific data format required
Security and Data Privacy
GDPR compliant, no forced cloud use, full data control.
- GDPR-compliant
- No forced cloud dependencies
- Full control over infrastructure
- End-to-end data security
- Data ownership remains with the customer
Fast and Competent Support
Quick responses, direct access to core developers.
- Direct contact with core developers
- Quick response times
- Professional support
- Comprehensive resources
Long-Term Market Presence and Expertise
25 years of experience, mature, future-proof solutions.
- 25+ years of experience
- Mature and stable software
- Future-proof
- Proven in diverse industries
- Commitment to ongoing improvements
Comprehensive Documentation
Extensive docs, guides, 300+ demos, and tutorials.
- Detailed API documentation
- Developer guides
- Extensive code samples
- Step-by-step tutorials
- 300+ live source code demos