Embed Graph Visualizers

Why Embed Graphs?

Graph algorithms traverse nodes and edges in patterns that are difficult to convey through text or static images alone. A written description of Dijkstra's algorithm can explain the logic, but watching the shortest path tree grow outward from a source node makes the concept immediately intuitive.

Our graph visualizers are now embeddable. Whether you're writing a blog post, building a lecture deck, or creating an interactive tutorial, readers can draw their own graphs, assign weights, pick a source node, and watch the algorithm run step by step without ever leaving your page.

How to Embed

Each graph algorithm has a dedicated embed page that strips away the site navigation and article content, leaving only the interactive canvas and controls. To use it, place the embed URL inside a standard HTML iframe element.

The URL follows this pattern:

https://see-algorithms.com/graph/embed/{Algorithm}

Basic Example

<iframe
    src="https://see-algorithms.com/graph/embed/BFS"
    width="100%"
    height="700px"
    frameborder="0">
</iframe>

Available Algorithms

BFS          - Breadth-First Search
DFS          - Depth-First Search
Dijkstras    - Dijkstra's Shortest Path
Prims        - Prim's Minimum Spanning Tree
Kruskals     - Kruskal's Minimum Spanning Tree
Boruvkas     - Borůvka's Minimum Spanning Tree
TopSort      - Topological Sorting
Hamiltonian  - Hamiltonian Cycle

If you're using a platform like Notion or Medium, pasting the embed URL directly will often auto-convert it into an inline embed without needing to write any HTML.

Choosing the Right Size

Graph visualizers need more vertical space than sorting visualizers as they include a drawing canvas, node labels, and edge connections. Setting the width to 100% ensures the visualization adapts to the container, while the height should generally be 700 pixels. Algorithms that display auxiliary elements, such as the traversal order in BFS and DFS, may benefit from additional height.

Final Reflection

A static diagram freezes a single moment of a graph algorithm. An embedded visualizer, on the other hand, lets the reader construct a graph, choose a starting point, and watch the algorithm unfold across every edge and node. This turns a passive reading experience into an active exploration.

Whether you’re illustrating BFS traversal or comparing MST strategies, a simple iframe is all it takes to turn abstract graph theory into a tangible, interactive experience.