# graphviz-anywidget
[](https://badge.fury.io/py/graphviz-anywidget)
[](https://pypi.org/project/graphviz-anywidget/)
[](https://opensource.org/licenses/MIT)
Interactive Graphviz visualization widget for Jupyter notebooks using anywidget.
Graphviz 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/).
https://github.com/user-attachments/assets/74cf39c5-2d64-4c98-b3ee-cf7308753da6
https://github.com/user-attachments/assets/8947dfd1-5d4a-43b9-b0c7-22cb52f72dc3
## Features
* 🎨 Interactive SVG visualization of Graphviz DOT graphs
* 🔍 Search functionality with regex support
* 🎯 Node and edge highlighting
* ↔️ Directional graph traversal
* 🔄 Zoom reset functionality
* 📱 Responsive design
* 🎨 Smooth animations and transitions
* 💻 Works in JupyterLab, Jupyter Notebook, and VS Code
## Installation
```sh
pip install graphviz-anywidget
```
or with [uv](https://github.com/astral-sh/uv):
```sh
uv add graphviz-anywidget
```
## Usage
```python
from graphviz_anywidget import graphviz_widget
# Create a widget with a DOT string
dot_source = """
digraph {
a -> b;
b -> c;
c -> a;
}
"""
widget = graphviz_widget(dot_source)
widget
```
### Features
1. **Search**: Use the search box to find nodes and edges
- Supports exact match, substring, and regex search
- Case-sensitive option available
2. **Direction Selection**: Choose how to traverse the graph
- Bidirectional: Show connections in both directions
- Downstream: Show only outgoing connections
- Upstream: Show only incoming connections
- Single: Show only the selected node
3. **Zoom Reset**: Reset the graph to its original position and scale
## API
### graphviz_widget
```python
def graphviz_widget(dot_source: str = "digraph { a -> b; }") -> widgets.VBox:
"""Create an interactive Graphviz widget.
Parameters
----------
dot_source
The DOT string representing the graph
Returns
-------
widgets.VBox
The widget containing the graph and controls
"""
```
## Dependencies
- anywidget
- ipywidgets
- graphvizsvg (npm package)
- d3-graphviz (npm package)
- hpcc-js-wasm (npm package)
## Development
We recommend using [uv](https://github.com/astral-sh/uv) for development.
It will automatically manage virtual environments and dependencies for you.
```sh
uv run jupyter lab example.ipynb
```
Alternatively, create and manage your own virtual environment:
```sh
python -m venv .venv
source .venv/bin/activate
pip install -e ".[dev]"
jupyter lab example.ipynb
```
The widget front-end code bundles it's JavaScript dependencies. After setting up Python,
make sure to install these dependencies locally:
```sh
npm install
```
While developing, you can run the following in a separate terminal to automatically
rebuild JavaScript as you make changes:
```sh
npm run dev
```
Open `example.ipynb` in JupyterLab, VS Code, or your favorite editor
to start developing. Changes made in `js/` will be reflected
in the notebook.
## License
MIT
## Credits
Built with:
- [anywidget](https://github.com/manzt/anywidget)
- [graphvizsvg](https://www.npmjs.com/package/graphvizsvg)
- [d3-graphviz](https://www.npmjs.com/package/d3-graphviz)
- The WASM binary comes from [@hpcc-js/wasm](https://github.com/hpcc-systems/hpcc-js-wasm) (via `d3-graphviz`)
- Inspired by the VS Code extension [Graphviz Interactive Preview](https://github.com/tintinweb/vscode-interactive-graphviz/).
Raw data
{
"_id": null,
"home_page": null,
"name": "graphviz-anywidget",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.10",
"maintainer_email": "Bas Nijholt <bas@nijho.lt>",
"keywords": "graph, graphviz, interactive, jupyter, network, visualization, widget",
"author": null,
"author_email": null,
"download_url": "https://files.pythonhosted.org/packages/f6/be/1854f564f4d79c2be679c57072b15756f14f505601a483a4724ef0504b74/graphviz_anywidget-0.5.0.tar.gz",
"platform": null,
"description": "# graphviz-anywidget\n\n[](https://badge.fury.io/py/graphviz-anywidget)\n[](https://pypi.org/project/graphviz-anywidget/)\n[](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* \ud83c\udfa8 Interactive SVG visualization of Graphviz DOT graphs\n* \ud83d\udd0d Search functionality with regex support\n* \ud83c\udfaf Node and edge highlighting\n* \u2194\ufe0f Directional graph traversal\n* \ud83d\udd04 Zoom reset functionality\n* \ud83d\udcf1 Responsive design\n* \ud83c\udfa8 Smooth animations and transitions\n* \ud83d\udcbb 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 -> b;\n b -> c;\n c -> 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 -> b; }\") -> 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",
"bugtrack_url": null,
"license": "MIT",
"summary": "Interactive Graphviz visualization widget for Jupyter notebooks using anywidget.",
"version": "0.5.0",
"project_urls": {
"documentation": "https://github.com/pipefunc/graphviz-anywidget",
"homepage": "https://github.com/pipefunc/graphviz-anywidget",
"repository": "https://github.com/pipefunc/graphviz-anywidget"
},
"split_keywords": [
"graph",
" graphviz",
" interactive",
" jupyter",
" network",
" visualization",
" widget"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "b16a4f4f197400f579e2f1ab36f57fbd830341e1ffb97c266c20691c2cb9640f",
"md5": "fa04365a7d237f23def67ddcd31fcbc3",
"sha256": "21bc4af339f05e083bc8f834c001c96a926b28cc72b8877a175785d57e08b78d"
},
"downloads": -1,
"filename": "graphviz_anywidget-0.5.0-py3-none-any.whl",
"has_sig": false,
"md5_digest": "fa04365a7d237f23def67ddcd31fcbc3",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.10",
"size": 694999,
"upload_time": "2025-01-20T21:29:54",
"upload_time_iso_8601": "2025-01-20T21:29:54.464057Z",
"url": "https://files.pythonhosted.org/packages/b1/6a/4f4f197400f579e2f1ab36f57fbd830341e1ffb97c266c20691c2cb9640f/graphviz_anywidget-0.5.0-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "f6be1854f564f4d79c2be679c57072b15756f14f505601a483a4724ef0504b74",
"md5": "9770f54900fff0f47a1229141f34f422",
"sha256": "29cc608a8f372046a02d6e23f7be9efcd639ee26caaab91c7d7f92d06f015c4c"
},
"downloads": -1,
"filename": "graphviz_anywidget-0.5.0.tar.gz",
"has_sig": false,
"md5_digest": "9770f54900fff0f47a1229141f34f422",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.10",
"size": 693605,
"upload_time": "2025-01-20T21:29:56",
"upload_time_iso_8601": "2025-01-20T21:29:56.997546Z",
"url": "https://files.pythonhosted.org/packages/f6/be/1854f564f4d79c2be679c57072b15756f14f505601a483a4724ef0504b74/graphviz_anywidget-0.5.0.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-01-20 21:29:56",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "pipefunc",
"github_project": "graphviz-anywidget",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"lcname": "graphviz-anywidget"
}
JSON
