Yograph & YogEx Playground

Mix.install([
  {:kino_yograph_playground, path: __DIR__},
  {:kino_vizjs, "~> 0.9.0"},
  {:yog_ex, "~> 0.99.1"}
])

1. The Interactive Dart Editor

We instantiate the custom Kino. It runs the full Dart compiler and VM inside the browser using WebAssembly. Any Dart code executed can serialize the graph to JSON and push it to Elixir.

• Click the ⚡ Focus Editor button in the header of the editor to capture keyboard inputs.
• Modify the Dart code inside the cell (e.g. add new nodes or edges).
• Click ▶ Run in the editor to execute the Dart VM and compile the graph.

playground = KinoYographPlayground.new()

2. Extracting in Elixir

Run the editor above first. Then evaluate this cell to pull the %Yog.Graph{} struct from the Dart environment.

graph = KinoYographPlayground.get_graph(playground)

Now you can run any of the YogEx algorithms that Dart version doesn’t yet have - or compaare/match results of running the same algorithms.

3. Visualization in Elixir

We can render the graph using Livebook’s native Mermaid integration:

if graph do
  Yog.Render.DOT.to_dot(graph)
  |> Kino.VizJS.render()
else
  IO.puts("Please run the Dart compiler first to produce a graph to render.")
end

4. Sending Graph from Elixir to Dart

We can also generate a graph on the Elixir side (e.g., a classic generator or a random maze) and push it to the Dart editor.

Evaluate the cell below to push a new 3x3 grid graph to the editor. The editor’s Monaco model will update with the new graph structure!

# Create a 3x3 grid graph in Elixir
elixir_graph = Yog.Generator.Classic.grid_2d(2, 2)

# Push the graph to the editor
KinoYographPlayground.send_graph(playground, elixir_graph)