PHPackages                             trecenode/filament-mermaid-field - 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. trecenode/filament-mermaid-field

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

trecenode/filament-mermaid-field
================================

Filament Mermaid Field

2.0.0(6mo ago)217MITJavaScriptPHP ^8.0|^8.1

Since Mar 16Pushed 6mo ago1 watchersCompare

[ Source](https://github.com/trecenode/filament-mermaid-field)[ Packagist](https://packagist.org/packages/trecenode/filament-mermaid-field)[ RSS](/packages/trecenode-filament-mermaid-field/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (2)Dependencies (1)Versions (3)Used By (0)

Filament Mermaid Field
======================

[](#filament-mermaid-field)

A custom field for Filament that allows creating and visualizing Mermaid diagrams with zoom and pan functionality created by 13Node.com

Features
--------

[](#features)

- ✨ Integrated text editor with Filament
- 🖼️ Real-time Mermaid diagram rendering
- 🔍 Interactive zoom and pan using local files
- 🌙 Light and dark theme support
- 📱 Responsive design
- 🚀 Easy Livewire integration

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

[](#installation)

1. Install the package:

```
composer require trecenode/filament-mermaid-field
```

2. Publish the assets:

```
php artisan vendor:publish --tag=filament-mermaid-field-assets
```

This will copy the CSS and JavaScript files to your public directory.

Usage
-----

[](#usage)

### In your Resource or Form

[](#in-your-resource-or-form)

```
use Trecenode\FilamentMermaidField\FilamentMermaidField;

FilamentMermaidField::make('diagram_content')
    ->label('Mermaid Diagram')
    ->placeholder('graph TD\n    A[Start] --> B[Process]\n    B --> C[End]')
    ->rows(10)
```

### Complete example

[](#complete-example)

```