KinoVizjs

A Livebook smart cell and component for rendering GraphViz (DOT) graphs in the browser using Viz.js.

KinoVizjs downloads the Viz.js WebAssembly bundle into the browser client and renders your graphs locally.

Unlike kino_yog - the project I created earlier that's tied to Yog, this one is independent of any graph library and can be used with any library that can produce DOT strings.

Installation

To bring KinoVizjs into your Livebook, simply add the package to your setup cell:

Mix.install([
  {:kino_vizjs, github: "code-shoily/kino_vizjs"}
])

Usage

You can use KinoVizjs in two ways:

Smart Cell

Click + Smart and select "VizJS Render DOT".

It provides an interactive UI where you can:

• Type your raw DOT string in the editor.
• Instantly switch between GraphViz layout engines (dot, circo, neato, fdp, sfdp, twopi, osage, patchwork).

Rendering from DOT String

If you are programmatically generating DOT strings (e.g. producing them from a library like Yog), you can pipe them directly into Kino.VizJS.render/2:

dot_graph = """
digraph G {
  node [shape=box style=filled fillcolor=lightblue];
  A -> B -> C -> D -> A;
  B -> D;
}
"""

Kino.VizJS.render(dot_graph, engine: "dot")

Rendering Yog

Kino.VizJS is created primarily to render Yog graphs and be used in Yog tutorials/livebooks.

Here is an example of Yog graph with shortest path being rendered using Kino.VizJS:

graph =
  Yog.from_edges(
    :directed,
    [
      {1, 2, 10},
      {2, 3, 20},
      {3, 8, 3},
      {4, 7, 9},
      {5, 6, 2},
      {1, 3, 7},
      {2, 7, 9},
      {1, 5, 1},
      {6, 8, 2}
    ]
  )

{:ok, path} = Yog.Pathfinding.Dijkstra.shortest_path(graph, 1, 8)

graph
|> Yog.Render.DOT.to_dot(
  Yog.Render.DOT.path_to_options(path)
)
|> Kino.VizJS.render()

An example of petersen graph:

Yog.Generator.Classic.petersen()
|> Yog.Render.DOT.to_dot()
|> Kino.VizJS.render()

More Yog examples involving flow, pathfinding, spanning trees, and livebooks examples will be added soon.

Libgraph Example

graph =
  Graph.new()
  |> Graph.add_vertices([3, 5, 7])
  |> Graph.add_edge(1, 3)
  |> Graph.add_edge(3, 4)
  |> Graph.add_edge(3, 5)
  |> Graph.add_edge(5, 6)
  |> Graph.add_edge(5, 7)

{:ok, dot} = Graph.to_dot(graph)

Kino.VizJS.render(dot)

Theme Support

The component comes automatically configured to be theme-aware in Livebook.

It intercepts default black (#000000 / black) fills and strokes generated by GraphViz and injects currentColor, letting the text color natively adapt whether you're viewing the notebook in Light Mode or Dark Mode. Explicit color definitions within your nodes and edges remain exactly as you configured them.