{"id":24374377,"url":"https://github.com/pipefunc/graphviz-anywidget","last_synced_at":"2025-10-06T01:13:20.185Z","repository":{"id":264240895,"uuid":"892792978","full_name":"pipefunc/graphviz-anywidget","owner":"pipefunc","description":"Interactive Graphviz visualization widget for Jupyter notebooks using anywidget using Graphviz as Wasm, d3-graphviz, and graphvizsvg","archived":false,"fork":false,"pushed_at":"2025-04-07T17:20:20.000Z","size":129,"stargazers_count":3,"open_issues_count":4,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-07T18:31:30.557Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/pipefunc.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2024-11-22T19:40:04.000Z","updated_at":"2025-03-12T00:04:30.000Z","dependencies_parsed_at":"2024-12-16T18:32:40.965Z","dependency_job_id":"df81986d-c4a9-425d-b6b0-0c3f67e59b26","html_url":"https://github.com/pipefunc/graphviz-anywidget","commit_stats":null,"previous_names":["pipefunc/graphviz-anywidget"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pipefunc%2Fgraphviz-anywidget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pipefunc%2Fgraphviz-anywidget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pipefunc%2Fgraphviz-anywidget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pipefunc%2Fgraphviz-anywidget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pipefunc","download_url":"https://codeload.github.com/pipefunc/graphviz-anywidget/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247709856,"owners_count":20983229,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2025-01-19T05:28:24.040Z","updated_at":"2025-10-06T01:13:15.137Z","avatar_url":"https://github.com/pipefunc.png","language":"JavaScript","readme":"# graphviz-anywidget\n\n[![PyPI version](https://badge.fury.io/py/graphviz-anywidget.svg)](https://badge.fury.io/py/graphviz-anywidget)\n[![Python Version](https://img.shields.io/pypi/pyversions/graphviz-anywidget.svg)](https://pypi.org/project/graphviz-anywidget/)\n[![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n\nInteractive Graphviz visualization widget for Jupyter notebooks using anywidget.\nGraphviz is provided via WASM ([hpcc-js-wasm](https://github.com/hpcc-systems/hpcc-js-wasm)) and the rendering is done using [graphvizsvg](https://github.com/pipefunc/graphvizsvg) and [d3-graphviz](https://github.com/magjac/d3-graphviz), inspired by the VS Code extension [Graphviz Interactive Preview](https://github.com/tintinweb/vscode-interactive-graphviz/).\n\nhttps://github.com/user-attachments/assets/74cf39c5-2d64-4c98-b3ee-cf7308753da6\n\nhttps://github.com/user-attachments/assets/8947dfd1-5d4a-43b9-b0c7-22cb52f72dc3\n\n## Features\n\n* 🎨 Interactive SVG visualization of Graphviz DOT graphs\n* 🔍 Search functionality with regex support\n* 🎯 Node and edge highlighting\n* ↔️ Directional graph traversal\n* 🔄 Zoom reset functionality\n* 📱 Responsive design\n* 🎨 Smooth animations and transitions\n* 💻 Works in JupyterLab, Jupyter Notebook, and VS Code\n\n## Installation\n\n```sh\npip install graphviz-anywidget\n```\n\nor with [uv](https://github.com/astral-sh/uv):\n\n```sh\nuv add graphviz-anywidget\n```\n\n## Usage\n\n```python\nfrom graphviz_anywidget import graphviz_widget\n\n# Create a widget with a DOT string\ndot_source = \"\"\"\ndigraph {\n    a -\u003e b;\n    b -\u003e c;\n    c -\u003e a;\n}\n\"\"\"\nwidget = graphviz_widget(dot_source)\nwidget\n```\n\n### Features\n\n1. **Search**: Use the search box to find nodes and edges\n   - Supports exact match, substring, and regex search\n   - Case-sensitive option available\n\n2. **Direction Selection**: Choose how to traverse the graph\n   - Bidirectional: Show connections in both directions\n   - Downstream: Show only outgoing connections\n   - Upstream: Show only incoming connections\n   - Single: Show only the selected node\n\n3. **Zoom Reset**: Reset the graph to its original position and scale\n\n## API\n\n### graphviz_widget\n\n```python\ndef graphviz_widget(dot_source: str = \"digraph { a -\u003e b; }\") -\u003e widgets.VBox:\n    \"\"\"Create an interactive Graphviz widget.\n\n    Parameters\n    ----------\n    dot_source\n        The DOT string representing the graph\n\n    Returns\n    -------\n    widgets.VBox\n        The widget containing the graph and controls\n    \"\"\"\n```\n\n## Dependencies\n\n- anywidget\n- ipywidgets\n- graphvizsvg (npm package)\n- d3-graphviz (npm package)\n- hpcc-js-wasm (npm package)\n\n## Development\n\nWe recommend using [uv](https://github.com/astral-sh/uv) for development.\nIt will automatically manage virtual environments and dependencies for you.\n\n```sh\nuv run jupyter lab example.ipynb\n```\n\nAlternatively, create and manage your own virtual environment:\n\n```sh\npython -m venv .venv\nsource .venv/bin/activate\npip install -e \".[dev]\"\njupyter lab example.ipynb\n```\n\nThe widget front-end code bundles it's JavaScript dependencies. After setting up Python,\nmake sure to install these dependencies locally:\n\n```sh\nnpm install\n```\n\nWhile developing, you can run the following in a separate terminal to automatically\nrebuild JavaScript as you make changes:\n\n```sh\nnpm run dev\n```\n\nOpen `example.ipynb` in JupyterLab, VS Code, or your favorite editor\nto start developing. Changes made in `js/` will be reflected\nin the notebook.\n\n## License\n\nMIT\n\n## Credits\n\nBuilt with:\n- [anywidget](https://github.com/manzt/anywidget)\n- [graphvizsvg](https://www.npmjs.com/package/graphvizsvg)\n- [d3-graphviz](https://www.npmjs.com/package/d3-graphviz)\n- The WASM binary comes from [@hpcc-js/wasm](https://github.com/hpcc-systems/hpcc-js-wasm) (via `d3-graphviz`)\n- Inspired by the VS Code extension [Graphviz Interactive Preview](https://github.com/tintinweb/vscode-interactive-graphviz/).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpipefunc%2Fgraphviz-anywidget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpipefunc%2Fgraphviz-anywidget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpipefunc%2Fgraphviz-anywidget/lists"}