Embed Graph Visualizers

Why Embed Visualizers?

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 site navigation and content, leaving only the interactive canvas and controls. Place the embed URL inside a standard HTML iframe.

The URL follows this pattern:

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

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

Basic Example

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

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.

Embed Custom Graphs

Instead of embedding a random graph, you can design a custom graph topology. Go to the main algorithm page, draw your custom nodes and edges, configure any weights, and click the Share Graph icon in the toolbar. This copies a unique URL to your clipboard, representing your custom graph structure. Use this copied URL as the src attribute in your iframe, and your readers will see your custom graph pre-loaded.

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 600 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, comparing MST strategies, or demonstrating shortest path computation, a simple iframe is all it takes to turn abstract graph theory into a tangible, interactive experience.