Metadata-Version: 2.4
Name: d2-widget
Version: 0.0.1
Summary: An AnyWidget for displaying declarative diagrams written in D2
Project-URL: Homepage, https://github.com/peter-gy/d2-widget
Project-URL: Repository, https://github.com/peter-gy/d2-widget
Project-URL: Documentation, https://github.com/peter-gy/d2-widget#readme
Project-URL: Bug Tracker, https://github.com/peter-gy/d2-widget/issues
Author-email: Péter Ferenc Gyarmati <dev.petergy@gmail.com>
License: Copyright © 2025 Péter Ferenc Gyarmati
        
        Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
        
        The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
        
        THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
License-File: LICENSE
Keywords: anywidget,d2,diagram,jupyter,widget
Classifier: Development Status :: 4 - Beta
Classifier: Framework :: Jupyter
Classifier: Intended Audience :: Developers
Classifier: Intended Audience :: Science/Research
Classifier: License :: OSI Approved :: MIT License
Classifier: Programming Language :: Python
Classifier: Programming Language :: Python :: 3
Classifier: Programming Language :: Python :: 3.9
Classifier: Programming Language :: Python :: 3.10
Classifier: Programming Language :: Python :: 3.11
Classifier: Programming Language :: Python :: 3.12
Classifier: Programming Language :: Python :: 3.13
Requires-Python: >=3.9
Requires-Dist: anywidget>=0.9
Requires-Dist: traitlets>=5
Description-Content-Type: text/markdown

[![PyPI](https://img.shields.io/pypi/v/d2-widget.svg)](https://pypi.org/project/d2-widget/)

# D2 Widget <img src="./assets/logo.png" align="right" alt="d2-widget logo" width="150" style="filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.3));"/>

> Bring the power of [D2](https://d2lang.com/) to Python notebooks.

**d2-widget** is an [AnyWidget](https://github.com/manzt/anywidget) for displaying declarative diagrams written in [D2](https://d2lang.com/).

## Installation

```sh
pip install d2-widget
```

or with [uv](https://github.com/astral-sh/uv):

```sh
uv add d2-widget
```

## Usage

The following examples demonstrate how to use Widget with increasing complexity.

### Basic Usage

The simplest way to use Widget is to pass a D2 diagram as a string to the constructor.

```python
from d2_widget import Widget

Widget("x -> y")
```

<img src="./assets/examples/simple.svg" alt="simple example" width="400"/>

### Inline Configuration

You can add direction and layout settings directly in the D2 markup.

```python
from d2_widget import Widget

Widget("""
direction: right
x -> y
""")
```

<img src="./assets/examples/simple-inline-config.svg" alt="simple example with inline configuration" width="400"/>

### Compile Options

You can specify compile options using the second argument to the constructor.
You can read about the semantics of the options in the [D2 documentation](https://www.npmjs.com/package/@terrastruct/d2#compileoptions).

```python
from d2_widget import Widget

Widget("""
direction: right
x -> y
""",
  {
      "themeID": 200,  # ID of the "Dark mauve" theme
      "pad": 0,        # Disable padding
      "sketch": True,  # Enable sketch mode
  },
)
```

<img src="./assets/examples/compile-options.svg" alt="example with compile options" width="400"/>

### Accessing the SVG

You can access the generated SVG using the `svg` attribute.

```python
from d2_widget import Widget

w = Widget("x -> y")
w.svg
```

### `%%d2` Cell Magic

You can use the `%%d2` cell magic to display a D2 diagram in a Jupyter notebook.

First, you need to load the extension:

```python
%load_ext d2_widget
```

Then, you can use the `%%d2` cell magic to display a D2 diagram.
You can pass compile options to the cell magic using keyword arguments.

```python
%%d2 sketch=True themeID=200
direction: right
x -> y
y -> z { style.animated: true }
z -> x
```

<img src="./assets/examples/cell-magic.gif" alt="example with cell magic" width="100%"/>

## 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
pnpm install
```

While developing, you can run the following in a separate terminal to automatically
rebuild JavaScript as you make changes:

```sh
pnpm 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.
