PHPackages                             codenzia/filament-diagrammer - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. codenzia/filament-diagrammer

ActiveLibrary[Utility & Helpers](/categories/utility)

codenzia/filament-diagrammer
============================

A ReactFlow-inspired diagramming plugin for Filament 4+ with nodes, connections, and canvas

00PHP

Since Apr 16Pushed 2w agoCompare

[ Source](https://github.com/Codenzia/filament-diagrammer)[ Packagist](https://packagist.org/packages/codenzia/filament-diagrammer)[ RSS](/packages/codenzia-filament-diagrammer/feed)WikiDiscussions main Synced 1w ago

READMEChangelogDependenciesVersions (1)Used By (0)

Filament Diagrammer
===================

[](#filament-diagrammer)

A powerful, interactive node-based diagramming plugin for [Filament 4+](https://filamentphp.com) — built on jsPlumb v6 Community Edition with schema-driven node rendering, zoom/pan, snap-to-grid, full dark mode support, and deep Filament action integration.

Requirements
------------

[](#requirements)

- PHP 8.3+
- Laravel 12+
- Filament 4.0+
- Livewire 3.0+

Installation
------------

[](#installation)

```
composer require codenzia/filament-diagrammer
```

Publish the config (optional):

```
php artisan vendor:publish --tag=filament-diagrammer-config
```

Publish the assets:

```
php artisan vendor:publish --tag=filament-diagrammer-assets
```

### Tailwind v4 Custom Theme

[](#tailwind-v4-custom-theme)

If your Filament panel uses a custom theme (Tailwind CSS v4), add the package's source paths so that utility classes used in the package's blade templates are compiled:

```
/* resources/css/filament/{panel}/theme.css */
@source '../../../../vendor/codenzia/*/src/**/*.php';
@source '../../../../vendor/codenzia/*/resources/views/**/*.blade.php';
```

This wildcard pattern covers all Codenzia packages at once. Alternatively, use package-specific paths if preferred.

Then rebuild your assets (`npm run build`).

Quick Start
-----------

[](#quick-start)

### 1. Create a Diagram Page

[](#1-create-a-diagram-page)

Extend the base `Diagram` page or use the `HasDiagram` trait on any Filament page:

```