Using yFiles for HTML for More Demanding Use Cases

Integrating yFiles Layout Algorithms for React Flow offers a powerful toolkit to enhance React Flow projects with advanced features. With precise node placement, sophisticated edge routing (including support for polyline edges with bends), flexible node and edge label placement, and precise port positioning, developers can create visually appealing graph layouts that help users quickly gain insights into complex data.

yFiles Layout Algorithms for React Flow leverages the robust layout features of yFiles for HTML, a commercial programming library designed for visualizing graphs, networks, and diagrams. In addition to layout algorithms, yFiles for HTML also provides developers with high-performance diagramming visualizations and rich user interactions.

For projects with complex graph structures and demanding use cases, yFiles for HTML offers a compelling alternative solution.

yFiles Features

The following features are supported by yFiles for HTML. For a more detailed list, please refer to the feature page on our website.

  • a rendering backend that support SVG, HTML, Canvas, and WebGL – at the same time when needed
  • customizable styling of the nodes, edges, labels, and ports including high-performance WebGL styles with level of detail rendering and bridges in edges
  • smoothly animated layouts that visually move the graph elements to their new locations, helping the user to keep their mental map
  • individual background visualizations like tables, swim lanes, heatmaps, or geographical maps
  • advanced interaction capabilities like drag-and-drop, snapping, orthogonal edge editing, context menu, tooltips, supporting fully accessible pen-, touch-, mouse, and keyboard input
  • sophisticated label placement and rendering with support for any number of labels at nodes, edges, and ports
  • isometric graph drawings
  • grouping and folding to organize the graph and temporarily collapse parts of the graph
  • graph element filtering
  • flexible and infinite undo/redo and clipboard operations
  • support of various input formats, like CSV, JSON, XML, databases into graphs
  • graph export to SVG, PDF, bitmap and Visio
  • a complete set of graph analysis algorithms that help you analyze your data and fine-tune visualizations and layout
  • a future-proof architecture that supports every version of React, Svelte, Vue, Angular, as well as Web Components, and every other framework
  • a fully IP-owned library that has no third party dependencies, trusted by the biggest corporations around the world
  • enterprise-grade support, licensing, and maintenance options
swimlanes and tablesbridgesheat mapedge-bundlingfraud detectionisometric graph

Explore the possibilities of the yFiles for HTML diagramming library by browsing through our demos and the documentation. For further information about yFiles for HTML and our company, please visit yWorks.com.

yFiles React Components

If you are looking for a specific use case, please have a look at our yFiles React components. Each React component comes with a simple React Flow-like API tailored to the use case, extensive documentation, and live a playground that demonstrate the various features.