D2 Widget

Visualization Opensource Full-stack Platform

April 2025 - Present

A Python widget that eliminates the friction of creating diagrams in notebooks by integrating the D2 declarative language directly into Jupyter and Marimo. It restores the interactive workflow by providing live, text-based diagramming with inline previews, removing the need for external tools and context switching.

The workflow for creating diagrams in computational notebooks is often a broken experience. It forces a context switch to external tools, reducing a dynamic process of thought and exploration into a static one of importing and managing images. This interruption breaks the very interactive loop that makes notebooks a powerful environment for analysis and documentation.

This widget was created to solve that problem by bringing the diagramming process back into the notebook. It integrates the declarative diagram language D2 directly into environments like Jupyter and Marimo , allowing you to write text-based diagrams and see live, interactive previews inline. The goal is to treat diagrams as code—versionable, reproducible, and seamlessly integrated with the surrounding analysis.

The implementation is designed to feel native to the notebook. It uses anywidget to bridge the Python backend with a lightweight frontend, ensuring a smooth user experience without heavy dependencies. By handling the complexities of different notebook environments behind the scenes, it provides a clean and simple API for both quick, ad-hoc visualizations and programmatic diagram generation.

Stack

While the problem is more important than the tools, the tech stack tells a story about the project's architecture and trade-offs. Here's what this project is built on:

Platforms & Runtimes

Python

Primary programming language for the widget backend and Jupyter notebook integration

TypeScript

Frontend language for the widget's JavaScript implementation with type safety

Diagram scripting language that renders declarative text into interactive SVG visualizations within notebook cells

Frontend & Visualization

Marimo

Powers the interactive playground application for testing and demonstrating D2 diagram capabilities and bindings supported by d2-widget

Jupyter

Environment for running and displaying the d2-widget within notebook cells

anywidget

Enables communication between the Python backend and JavaScript frontend for rendering D2 diagrams

External Services

PyPI

Python package registry for distributing the d2-widget package to users via pip install

Cloud & DevOps

GitHub Actions

Automates CI/CD workflows including linting, testing, and deployment of the playground to GitHub Pages

Development Tooling

Fast Python package installer and resolver for managing Python dependencies and virtual environments

Ruff

Fast Python linter and formatter for maintaining code quality in the widget backend

Hatch

Build backend for packaging the Python widget with integrated JavaScript assets

pnpm

Fast package manager for managing JavaScript dependencies and build artifacts

ESBuild

Bundles TypeScript widget code into optimized JavaScript modules for notebook integration

Biome

Provides code formatting and linting for JavaScript/TypeScript frontend code