Immersive Graph Visualization in 3D, AR & VR
Understand complex networks interactively—in any browser, in 3D or VR

Q: How are interactions handled in the yFiles VR visualization tool?

yFiles uses A-Frame , a web framework whose components map controller gestures, pointer, and gaze to grab/scale/rotate operations; custom handlers can be implemented.

Graphs and networks often contain complex structures that are difficult to grasp in two dimensions. A three‑dimensional or immersive representation adds depth and perspective, helping users recognize relationships and spatial groupings more intuitively.

Modern web technologies such as WebXR make it possible to explore graph data directly in augmented or virtual reality – without additional software installation. This opens new ways to present, teach, and analyze connections in data.

The concept can be seen in action in the browser‑based tool yEd Live, which demonstrates how network layouts created with yFiles can be viewed and explored in an interactive 3D or VR scene.

Typical applications include exploratory data analysis, educational visualizations, collaborative design sessions, and prototypes of AR/VR interfaces for web applications.

AR & VR Graph Visualization with yFiles and the yEd Live VR viewer

Get yFiles for HTML Try the VR viewer in yEd Live

Why visualize graphs in augmented & virtual reality?

Graph and network data often become easier to interpret when viewed in three dimensions. Augmented and virtual reality add spatial perception and depth, offering new ways to explore complex connections.

Immersive perspective

Users can experience the structure and clustering of a network in space, which helps to grasp relationships more intuitively.

Additional dimension

The third axis can encode hierarchy, time, or other attributes, making multi‑layered data easier to understand.

Flexible scale and viewpoint

Switching between detailed and overview perspectives allows inspection of both global patterns and local structures.

Natural interaction

Nodes and links can be moved, scaled, or rotated directly in the virtual scene, encouraging hands‑on exploration.

Improved readability

3D layouts can reduce edge crossings and overlaps, especially for organic or force‑based graph arrangements.

Broad accessibility

Browser‑based WebXR makes immersive 3D views available on common headsets and also provides desktop and mobile fallbacks.

Interactive 3D visualizations often help reveal hidden patterns and make structural correlations more apparent.

3D Organic layout viewed in virtual reality

VR view of the yFiles 3D Organic layout (Meta Quest 3). Open in yEd Live to experience full depth and interact with the graph. VR view of a 3D network using the yFiles Organic layout with labeled spherical nodes and connecting edges; virtual controller in the foreground. Captured on Meta Quest 3.

How it works — technical overview

Rendering stack

The visualization is based on standard web technologies. yFiles for HTML provides the graph model, layout algorithms, and data handling. The 3D and VR representation uses the A‑Frame framework, built on top of three.js, to render geometry and supply interaction components.

Data flow

Node positions are computed by yFiles using two‑ or three‑dimensional layouts. The resulting coordinates and attributes are passed to the 3D runtime, which generates nodes and edges as A‑Frame entities. Layouts such as the Organic layout make direct use of the additional spatial dimension.

Interaction and controls

In the 3D scene, A‑Frame components handle controller movements, pointer actions, and gaze‑based selection for operations like grabbing, scaling, or rotating graphs. If WebXR is available, users can enter AR or VR mode; otherwise a standard 3D view is provided.

Performance considerations

To maintain smooth interaction, instancing and level‑of‑detail techniques are applied, reducing geometric complexity at distance. For large networks, layouts can be recalculated asynchronously, and data can load progressively. Force‑based algorithms benefit from the third dimension to minimize overlaps.

The 3D/VR viewer can be opened from yEd Live’s View menu. When WebXR is available, AR / VR entry buttons are shown.

Technical resources

A‑Frame (framework)
three.js (renderer)
yFiles for HTML

Example: Exploring a diagram in AR/VR using yEd Live

yEd Live, which was developed using yFiles for HTML, demonstrates how graphs can be explored directly in three dimensions or immersive environments in the browser. The example below shows how to open an existing diagram in AR or VR mode—no installation required.

Open yEd Live.
Load a diagram (File → Open) or create one in the editor.
From the main menu choose View → Show graph in virtual reality.
A new 3D viewer window appears. If your device supports WebXR, AR/VR entry buttons are shown in the lower‑right corner.
Select “Enter VR/AR” or use the interactive 3D view on desktop or mobile as a fallback. In VR mode, grab, rotate, and scale gestures are supported.

Quick tips

For large graphs, apply compact layouts or clustering before switching to 3D / VR.
If performance drops, reduce node size, simplify edges, or enable instancing in custom setups.
For headset use, ensure WebXR permissions in the browser and close other tabs for best performance.

Activating the 3D graph viewer in yEd Live

Opening a graph in yEd Live’s 3D/VR viewer

Short developer note: minimal export idea

// Pseudocode: yFiles -> A-Frame geometry export (concept)
const nodes = graph.nodes.map(n => ({ id: n.id, pos: { x: n.x, y: n.y, z: n.z || 0 }, data: n.tag }));
const edges = graph.edges.map(e => ({ from: e.source.id, to: e.target.id }));
// send to 3D runtime (A-Frame): create entities for nodes and lines for edges
// For yEd Live this is handled internally; for custom apps use yFiles for HTML to compute positions and export them.

Try it — with yEd live

The demo is yEd Live — open yEd Live and enable View → Show graph in virtual reality to see your diagram directly in 3D/VR.

For a short walkthrough, watch the demo below.

load from YouTube

Open yEd Live

Typical use cases

Exploratory data analysis of complex networks
Educational visualizations and interactive lectures
Stakeholder presentations and demos
Collaborative walkthroughs in mixed/remote settings
Prototyping WebXR features for product UIs

3D Network Exploration with yEd Live — Stereo VR Preview

yEd Live — 3D VR graph exploration (left/right eye views)

Stereo preview of the yEd Live VR graph viewer showing labeled nodes and interactive controls for exploring clusters, paths, and temporal layers.

Integration & developer notes

Recommended product: yFiles for HTML to compute geometry and apply layouts. Export positions and attributes to your WebXR runtime (A-Frame/three.js) and map nodes/edges to 3D entities.

Implementation tips: use instanced rendering for many nodes, simplify edges at a distance, perform layout asynchronously for large datasets, and provide a desktop fallback for non‑WebXR clients.

Standards: prefer WebXR where available; support WebVR fallbacks if required. Add accessibility alternatives and consider passive vs. active experiences depending on input availability.

Developer links

All demos
yFiles for HTML
A-Frame docs

Frequently Asked Questions

Do I need a VR headset for VR visualization with yEd Live?

No. yEd Live offers a 3D viewer in the browser. For full immersion, use a WebXR-capable headset.

What is the Organic (force-directed) layout in yFiles, and how does it relate to AR and VR applications?

The Organic layout in yFiles is a force‑directed algorithm that internally calculates node positions in three dimensions. While the default visualization projects this 3D model onto a 2D plane, you can directly access and utilize the native x/y/z coordinates for immersive AR and VR scenes. This makes integrating realistic 3D network visualizations into WebXR experiences remarkably straightforward.

Which devices are supported by the yFiles VR visualization tool?

Modern headsets supporting WebXR (e.g., Meta Quest series) and desktop/mobile browsers for the 3D fallback.

Can yFiles handle large graphs in VR?

Yes—with LOD, instancing, streaming, and tailored layouts, performance can scale to large datasets.

What is the Organic (force-directed) layout in yFiles, and how does it relate to AR and VR applications?

How are interactions handled in the yFiles VR visualization tool?

yFiles uses A-Frame, a web framework whose components map controller gestures, pointer, and gaze to grab/scale/rotate operations; custom handlers can be implemented.

Is the yEd Live VR viewer production-ready?

yEd Live's VR viewer is a working demo. For production, integrate yFiles for HTML and adapt rendering/interaction to your requirements.

More FAQ results

Do you have questions about AR/VR graph visualization?

Get in touch to discuss your specific challenges with our diagramming experts. We're here to provide the guidance you need.

Do you have questions about AR/VR graph visualization?

We´d love to help you. Reach out and we'll get in touch with you.

Thank you!

Your message has been sent.

About yFiles: The graph visualization SDK

yFiles playground graph drawing example

yFiles is your go-to SDK for crafting advanced graph visualizations, whether you're working with Web, Java, or .NET technologies. Its unmatched flexibility and scalability enable you to convert complex data into clear, actionable visuals, fitting for both enterprise and startup needs.

With yFiles, you're equipped for the future—supporting any data source while maintaining strong data security. Getting started is seamless, thanks to over 300 source-code demos, thorough documentation, and direct access to core developer support. These resources are available even during your free trial.

Backed by 25 years of graph drawing expertise, yFiles is trusted by top companies worldwide for their most critical visualization tasks.

11 reasons why developers choose yFiles, the superior diagramming SDK

Powerful and Diverse Layout Algorithms

A wide variety of layouts, flexible configurations, and superior performance.

Advanced Visualization Capabilities

High-quality visualizations that clarify and inform.

Flexibility and Customizability

Fully customizable layouts and styles for any use case.

High Performance

Efficient handling and rendering of large graphs.

Integration with Various Platforms

Seamlessly integrates with existing systems and frameworks.

Interaction and Animation Features

Comprehensive components for dynamic, interactive graphs.

Universal Data Support

No restrictions on data sources or types—total flexibility.

Security and Data Privacy

GDPR compliant, no forced cloud use, full data control.

Fast and Competent Support

Quick responses, direct access to core developers.

Long-Term Market Presence and Expertise

25 years of experience, mature, future-proof solutions.

Comprehensive Documentation

Extensive docs, guides, 300+ demos, and tutorials.

Start building your graph application today!

- Download yFiles for free -

Why top companies rely on yFiles for superior graph visualization.

From southern Germany to Silicon Valley, yFiles is the choice of world-renowned companies, research institutes, universities, and even #innovative startups. They all rely on yWorks' expertise to accelerate the development of their business ideas and bring advanced graph visualization to life. Whether it's established enterprises or emerging startups, yFiles helps them efficiently create and optimize their visualization solutions, making it easier to turn ideas into reality.

yFiles Newsletter

Stay informed about yFiles, network visualization, and graph technology updates.

Join our newsletter

Recap

AR & VR Graph Visualization

Visualize graphs in augmented and virtual reality using yFiles for HTML together with modern WebXR tooling. The yEd Live VR viewer demonstrates the approach: yFiles computes layouts and geometry which are rendered in a WebXR-capable 3D runtime (A-Frame + three.js). This enables immersive, interactive exploration of complex network data with browser-based access and desktop fallbacks.

Benefits include improved readability through the third dimension, flexible perspectives, interactive manipulation, and scalable strategies for handling large graphs. Use cases range from exploratory analysis and teaching to stakeholder demos and prototype integrations into web applications.

Got questions about
AR & VR Graph Visualization?

Email: hello@yworks.com
Phone: +49 7071 9709050

Get in touch

Ready to build your data visualization app?

Download yFiles now!

Choose your next steps

Get connected

Connect with our Customer Success Team regarding your ideas or projects.

Reach out!Join our newsletter

Dive deep

Get more detailed information about specific yFiles topics.

About yFiles yFiles platforms All features Interactive demos yFiles Playground Licenses & pricing

Download yFiles

Try yFiles free of charge.

Immersive Graph Visualization in 3D, AR & VRUnderstand complex networks interactively—in any browser, in 3D or VR