Download the PHP package icehouse-ventures/laravel-mermaid without Composer

laravel-mermaid

Simple Mermaid diagrams for Laravel applications. Laravel Mermaid generates flowcharts, user journeys, entity relationship diagrams, business process diagrams, mind maps, and the other diagram types supported by Mermaid 11.

The current release supports PHP 8.2+ and Laravel 12 or 13.

Mermaid Diagrams

Mermaid is a diagramming and charting library with a Markdown-like syntax for generating data visualisations. Mermaid diagrams are also supported in GitHub Markdown and Notion, making the syntax familiar to many users.

You can find out more in the Mermaid documentation.

Installation

You can install the package via composer:

Quickstart: Blade Component Slot

The package provides a Blade component that you can use to generate Mermaid diagrams in your views. Here is an example of how you can use the Blade component to generate a simple flowchart diagram. The component can be wrapped around any standard Mermaid diagram string (similar to Markdown strings).

Passing Mermaid syntax to the Blade component

You can pass a Mermaid diagram string directly to the component using the data attribute.

Passing an Array to the Blade Component

Laravel and PHP provide convenient helpers for working with arrays. The builder converts an array of Mermaid statements into a diagram string:

Passing in an Eloquent Collection

You can also pass in an Eloquent collection to the Blade component. This allows you to visualise complex business data and relationships straight from your Eloquent models and their relationships. The package will automatically convert the collection to an array of strings that represent the Mermaid diagram using the Generate Diagram From Collection method. Here is an example of how you can pass an Eloquent collection to the Blade component:

Custom collections, models and relationships

You can also pass in custom collections, models and relationships to the Blade component by flattening the data into an array, then using the array method in the package to generate the diagram. This method is useful if you want more complex dynamic data such as links or custom formatting.

Configuration

You can customize the Mermaid configuration by publishing the mermaid.php config file and changing the settings as needed. You can publish the configuration file using the following command:

This creates config/mermaid.php. Set theme to default, forest, dark, neutral, base, or custom.

By default the package uses its Tailwind-inspired custom theme. When theme is custom, select bootstrap, tailwind, or darkmode with themeFile.

The bundled browser runtime is pinned to Mermaid major version 11:

You can replace cdn with an exact version, a self-hosted asset, or an approved internal CDN. Keep securityLevel set to strict unless every diagram and HTML label is trusted.

Canvas Style

You can also set the canvas style for the Mermaid diagram by passing in a class to the Blade component. This allows you to style the diagram using your own CSS.

Livewire

This package includes a Livewire-compatible component that re-renders a diagram when a component property changes. The current release and demo application are tested with Livewire 4. In this example, increasing the limit loads more users into the diagram.

Background

Icehouse Ventures created this package for dynamic diagrams in Laravel and now maintains it with its community of contributors.

Contributing

Contributions from first-time and returning contributors are welcome. Bug reproductions, new diagram examples, documentation fixes, tests, accessibility improvements, and compatibility updates are all useful. Open an issue for a design discussion or send a focused pull request for a well-understood change.

Development

composer check runs Pint, PHPStan and the Pest test suite. GitHub Actions exercises Laravel 12–13 across PHP 8.2–8.5.

License

The MIT License (MIT). Please see License File for more information.