{"id":48799452,"url":"https://github.com/code-shoily/kino_vizjs","last_synced_at":"2026-04-19T06:01:45.264Z","repository":{"id":350920974,"uuid":"1208785105","full_name":"code-shoily/kino_vizjs","owner":"code-shoily","description":"A smart cell and component for rendering GraphViz (DOT) graphs in browser using Viz.js","archived":false,"fork":false,"pushed_at":"2026-04-18T03:22:21.000Z","size":22,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-18T05:02:53.195Z","etag":null,"topics":["elixir","graph","graphviz","livebook"],"latest_commit_sha":null,"homepage":"","language":"Elixir","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/code-shoily.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-12T18:35:11.000Z","updated_at":"2026-04-18T03:22:24.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/code-shoily/kino_vizjs","commit_stats":null,"previous_names":["code-shoily/kino_vizjs"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/code-shoily/kino_vizjs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-shoily%2Fkino_vizjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-shoily%2Fkino_vizjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-shoily%2Fkino_vizjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-shoily%2Fkino_vizjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/code-shoily","download_url":"https://codeload.github.com/code-shoily/kino_vizjs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-shoily%2Fkino_vizjs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31996445,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T20:23:30.271Z","status":"online","status_checked_at":"2026-04-19T02:00:07.110Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["elixir","graph","graphviz","livebook"],"created_at":"2026-04-14T01:07:00.323Z","updated_at":"2026-04-19T06:01:45.190Z","avatar_url":"https://github.com/code-shoily.png","language":"Elixir","funding_links":[],"categories":[],"sub_categories":[],"readme":"# KinoVizjs\n\n[![Hex.pm](https://img.shields.io/hexpm/v/kino_vizjs.svg)](https://hex.pm/packages/kino_vizjs)\n[![Docs](https://img.shields.io/badge/hex-docs-lightgreen.svg)](https://hexdocs.pm/kino_vizjs)\n[![CI](https://github.com/code-shoily/kino_vizjs/actions/workflows/ci.yml/badge.svg)](https://github.com/code-shoily/kino_vizjs/actions/workflows/ci.yml)\n[![License](https://img.shields.io/hexpm/l/kino_vizjs.svg)](LICENSE)\n\nA [Livebook](https://livebook.dev) smart cell and component for rendering GraphViz (DOT) graphs in the browser using [Viz.js](https://github.com/mdaines/viz-js).\n\n`KinoVizjs` downloads the Viz.js WebAssembly bundle into the browser client and renders your graphs locally. \n\nUnlike [kino_yog](https://github.com/code-shoily/kino_yog) - the project I created earlier that's tied to [Yog](https://github.com/code-shoily/yog), this one is independent of any graph library and can be used with any library that can produce DOT strings.\n\n## Installation\n\nAdd `kino_vizjs` to your list of dependencies in `mix.exs`:\n\n```elixir\ndef deps do\n  [\n    {:kino_vizjs, \"~\u003e 0.5\"}\n  ]\nend\n```\n\nOr install it directly in a Livebook setup cell:\n\n```elixir\nMix.install([\n  {:kino_vizjs, \"~\u003e 0.5\"}\n])\n```\n\n## Usage\n\nYou can use `KinoVizjs` in two ways:\n\n### Smart Cell\n\nClick **+ Smart** and select **\"VizJS Render DOT\"**.\n\nIt provides an interactive UI where you can:\n- Type your raw DOT string in the editor.\n- Instantly switch between GraphViz layout engines (`dot`, `circo`, `neato`, `fdp`, `sfdp`, `twopi`, `osage`, `patchwork`).\n\n### Rendering from DOT String\n\nIf 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`:\n\n```elixir\ndot_graph = \"\"\"\ndigraph G {\n  node [shape=box style=filled fillcolor=lightblue];\n  A -\u003e B -\u003e C -\u003e D -\u003e A;\n  B -\u003e D;\n}\n\"\"\"\n\nKino.VizJS.render(dot_graph, engine: \"dot\")\n```\n\n### Rendering Yog\n\n`Kino.VizJS` is created primarily to render `Yog` graphs and be used in Yog tutorials/livebooks.\n\nHere is an example of Yog graph with shortest path being rendered using `Kino.VizJS`:\n\n```elixir\ngraph =\n  Yog.from_edges(\n    :directed,\n    [\n      {1, 2, 10},\n      {2, 3, 20},\n      {3, 8, 3},\n      {4, 7, 9},\n      {5, 6, 2},\n      {1, 3, 7},\n      {2, 7, 9},\n      {1, 5, 1},\n      {6, 8, 2}\n    ]\n  )\n\n{:ok, path} = Yog.Pathfinding.Dijkstra.shortest_path(graph, 1, 8)\n\ngraph\n|\u003e Yog.Render.DOT.to_dot(\n  Yog.Render.DOT.path_to_options(path)\n)\n|\u003e Kino.VizJS.render()\n```\n\nAn example of petersen graph:\n\n```elixir\nYog.Generator.Classic.petersen()\n|\u003e Yog.Render.DOT.to_dot()\n|\u003e Kino.VizJS.render()\n```\n\nMore Yog examples involving flow, pathfinding, spanning trees, and livebooks examples will be added soon.\n\n### Libgraph Example\n\n```elixir\ngraph =\n  Graph.new()\n  |\u003e Graph.add_vertices([3, 5, 7])\n  |\u003e Graph.add_edge(1, 3)\n  |\u003e Graph.add_edge(3, 4)\n  |\u003e Graph.add_edge(3, 5)\n  |\u003e Graph.add_edge(5, 6)\n  |\u003e Graph.add_edge(5, 7)\n\n{:ok, dot} = Graph.to_dot(graph)\n\nKino.VizJS.render(dot)\n```\n\n## Theme Support\n\nThe component comes automatically configured to be **theme-aware** in Livebook.\n\nIt 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-shoily%2Fkino_vizjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcode-shoily%2Fkino_vizjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-shoily%2Fkino_vizjs/lists"}