Metadata-Version: 2.4
Name: d2-widget
Version: 0.1.0
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/)
[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/peter-gy/d2-widget/blob/main/LICENSE)

# D2 Widget <img src="https://raw.githubusercontent.com/peter-gy/d2-widget/refs/heads/main/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/).

- 🎨 **D2 Diagram Rendering**: Create and display interactive D2 diagrams directly in Python notebooks
- ⚙️ **Configurability**: Support for all D2 compilation options including themes, layouts, and rendering configurations
- 📤 **SVG Export**: Programmatically access the SVG representation for use in other documents
- ✨ **Jupyter Cell Magic**: Use the convenient `%%d2` cell magic for quick diagram creation
- 🧩 **Notebook Compatibility**: Works in Jupyter, Google Colab, Marimo, and other [AnyWidget](https://github.com/manzt/anywidget)-enabled Python notebook environments
- 🎬 **Animation Support**: Create animated diagrams with D2's native animation capabilities

## Playground

Visit the interactive [playground](https://d2-widget.peter.gy) to try out what `d2-widget` can do.

<img src="https://raw.githubusercontent.com/peter-gy/d2-widget/refs/heads/main/assets/examples/playground.gif" alt="playground" width="100%"/>

## 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="https://raw.githubusercontent.com/peter-gy/d2-widget/refs/heads/main/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="https://raw.githubusercontent.com/peter-gy/d2-widget/refs/heads/main/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="https://raw.githubusercontent.com/peter-gy/d2-widget/refs/heads/main/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="https://raw.githubusercontent.com/peter-gy/d2-widget/refs/heads/main/assets/examples/cell-magic.gif" alt="example with cell magic" width="100%"/>

## Contributing

Contributor setup, dev workflow, and QA commands are in [`CONTRIBUTING.md`](CONTRIBUTING.md).
