npm package: @speajus/diblob-visualizer
Description: Interactive dependency injection graph visualization for diblob
Author: Justin Spears
Latest version: 1.0.3

# 🎨 Diblob Visualizer

Interactive dependency injection graph visualization for [diblob](https://github.com/speajus/diblob).

Visualize your dependency injection container as an interactive graph with nodes representing blobs and edges showing dependencies between them.

## ✨ Features

- 📊 **Interactive Graph Visualization** - Pan, zoom, and drag nodes
- 🔄 **Real-time Updates** - Watch the graph update as you modify your container
- 🎯 **Lifecycle Indicators** - Visual distinction between Singleton and Transient services
- 📈 **Statistics Dashboard** - See counts of nodes, edges, and lifecycle types
- 🎨 **Clean UI** - Modern, responsive design with clear visual hierarchy
- 🔌 **Embeddable** - Easy to integrate into any Svelte application
- 🏷️ **Metadata Support** - Display custom names, descriptions, and metadata for blobs

## 📸 Screenshots

### Dependency Graph Visualization
![Dependency Graph](https://speajus.github.io/diblob/screenshot-graph.png)

The visualizer displays your dependency injection container as an interactive graph, showing:
- Blob nodes with their metadata (name, description)
- Dependencies between services
- Lifecycle indicators (Singleton/Transient)
- Real-time statistics

### Metadata Display
![Metadata Display](https://speajus.github.io/diblob/screenshot-metadata.png)

Blobs with metadata show rich information:
- Custom names instead of generic blob IDs
- Descriptions for better understanding
- Any custom metadata properties you define

## 📦 Installation

```bash
npm install @speajus/diblob-visualizer @speajus/diblob
```

## 🚀 Quick Start

### Standalone Demo

```bash
npm install
npm run dev
```

Open http://localhost:5173 to see the visualizer in action.

### Embedding in Your Application

```svelte
<script lang="ts">
  import { DiblobVisualizer } from '@speajus/diblob-visualizer';
  import { createContainer, createBlob } from '@speajus/diblob';

  const container = createContainer();
  const logger = createBlob<Logger>();
  container.register(logger, ConsoleLogger);
</script>

<DiblobVisualizer {container} />
```

## 📖 Usage Examples

See `src/App.svelte` for a complete working example with multiple services.

### Using Metadata for Better Visualization

Add metadata to your blobs to make the visualizer more informative:

```typescript
import { createBlob, createContainer } from '@speajus/diblob';

// Create blobs with metadata
const logger = createBlob<Logger>('logger', {
  name: 'Console Logger',
  description: 'Logs messages to the console'
});

const userService = createBlob<UserService>('userService', {
  name: 'User Service',
  description: 'Manages user data and operations',
  version: '1.0.0'
});

// Create container with metadata
const container = createContainer({
  name: 'Application Container',
  description: 'Main DI container'
});

// Register services
container.register(logger, ConsoleLogger);
container.register(userService, UserServiceImpl, logger);
```

The visualizer will display the metadata names and descriptions, making it much easier to understand your dependency graph at a glance.

### Component Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `container` | `Container` | **required** | The diblob container to visualize |
| `autoRefresh` | `boolean` | `false` | Auto-refresh at intervals |
| `refreshInterval` | `number` | `1000` | Refresh interval (ms) |

### Graph Legend

- **🔒 Blue nodes** - Singleton services
- **⚡ Orange nodes** - Transient services  
- **Red nodes** - Unregistered dependencies
- **Arrows** - Dependencies between services

## 🏗️ Architecture

Built with Svelte 5, Svelte Flow, TypeScript, and Vite.

## 🔧 Development

```bash
npm install
npm run dev      # Start dev server
npm run build    # Build library
npm run check    # Type check
```

## 📝 License

MIT