KinoVizjs

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

Viz.js compiles Graphviz to WebAssembly, so no local Graphviz installation is needed. Unlike kino_yog, which is tied to Yog, this package works with any source that produces DOT strings.

Installation

Add kino_vizjs to your list of dependencies in mix.exs:

def deps do
  [
    {:kino_vizjs, "~> 0.8"}
  ]
end

Or in a Livebook setup cell:

Mix.install([
  {:kino_vizjs, "~> 0.8"}
])

Usage

Smart Cell

Click + Smart and select "VizJS Render DOT".

The Smart Cell provides:

• A DOT editor with a dark theme.
• A layout engine selector (dot, circo, neato, fdp, twopi, osage).
• Configurable height and width that update the output reactively.
• Pan & Zoom support for large graphs.

Kino.VizJS.render/2

For programmatic use, pass a DOT string to 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")

With Yog

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()

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

See the Yog repository for more examples.

With Libgraph

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 replaces default black (#000000 / black) fills and strokes from GraphViz output with currentColor, so text and edges follow Livebook's light/dark theme. Explicit colors in your DOT source are preserved.