Interactive Graph Visualization

Visualizing graphs helps verify algorithms and communicate results. This page explains two complementary approaches: exporting JSON into external playgrounds and wiring the built-in view helpers for custom dashboards.

Export JSON to playgrounds

1. Render the current graph state:

   import { Graph } from '@avensio/graph'
   
   const graph = new Graph()
   // ... mutate graph
   const snapshot = graph.render('json')

2. Paste the resulting JSON into tools like GraphOnline or any visualizer that accepts adjacency/edge lists. GraphOnline lets you:
   • Draw directed and undirected graphs
   • Assign weights and labels to edges
   • Run DFS, BFS, Dijkstra, Floyd–Warshall, etc.
   • Step through traversals to confirm algorithm output

Use GraphView/JSONGraphView

import { Graph, JSONGraphView } from '@avensio/graph'

const graph = new Graph()
const view = new JSONGraphView(graph)

const serialized = view.render()
// -> feed into a canvas/webgl renderer or persist to localStorage

// Later reconstruct
view.from(serialized)

• Implement your own GraphView subclass when you need a custom data shape (e.g., Cytoscape elements, Sigma.js nodes).
• Register additional serializers via graph.registerSerializer(format, serializer) so you can call graph.render('cytoscape') directly.

Inline visual previews

If your app already has UI components, use VertexEmitter to produce render-friendly payloads (positions, colors, metadata) and pass them to your visualization layer. Combine this with the JSON export above for snapshot testing or regression visuals.