PHPackages icehouse-ventures/laravel-mermaid - 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. icehouse-ventures/laravel-mermaid ActiveLibrary[Utility & Helpers](/categories/utility) icehouse-ventures/laravel-mermaid ================================= Simple package to generate diagrams in Laravel using the Mermaid.js library v1.4(1y ago)2630.0k↓46.1%9MITPHPPHP >=5.6.4 Since May 7Pushed 1y ago2 watchersCompare [ Source](https://github.com/icehouse-ventures/laravel-mermaid)[ Packagist](https://packagist.org/packages/icehouse-ventures/laravel-mermaid)[ RSS](/packages/icehouse-ventures-laravel-mermaid/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (9)Dependencies (1)Versions (9)Used By (0) laravel-mermaid =============== [](#laravel-mermaid) Simple Mermaid diagrams for Laravel applications. Laravel Mermaid is a package that allows you to easily generate Mermaid diagrams in your Laravel applications. Diagram types include flowcharts, user journeys, entity relationship diagrams, business process diagrams and mind maps. Mermaid Diagrams ---------------- [](#mermaid-diagrams) Mermaid is a powerful digram and charting library that provides a syntax similar to markdown to generate data visualisations. Mermaid is now supported inside Github markdown and natively inside Notion pages so it is a familar syntax for business users. ``` %%{init: {'theme': 'neutral' } }%% graph TD; 1[Install Laravel Mermaid Package]; 2[Prepare Static Formatted Data]; 3[Pull Dynamic Data from Database]; 4[Insert Blade Presentation Component]; 5[Diagram Shown to User]; 1 --> 2; 1 --> 3; 2 --> 4; 3 --> 4; 4 --> 5; ``` Loading You can find out more about the Mermaid JS library at Installation ------------ [](#installation) You can install the package via composer: ``` composer require icehouse-ventures/laravel-mermaid ``` Quickstart: Blade Component Slot -------------------------------- [](#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). ``` graph TD; A-->B; A-->C; B-->D; C-->D; ``` ``` graph TD; A-->B; A-->C; B-->D; C-->D; ``` Loading Passing mermaid syntax to the Blade Component using the Data Attribute ---------------------------------------------------------------------- [](#passing-mermaid-syntax-to-the-blade-component-using-the-data-attribute) You can pass data directly to the Blade component using the `data` attribute. The data should be a string that represent the Mermaid diagram. Here is an example of how you can pass data to the Blade component. You'll need to use the Mermaid syntax to generate the diagram using this method. ``` // In your controller public function index() { $data = 'graph LR; A[Label 1]; A-->B; A-->C; B[Label 2]; B-->D; C[Label 3]; C-->D; D[Label 4];'; return view('your-view', compact('data')); } // Your page blade file ``` ``` graph LR; A[Label 1]; A-->B; A-->C; B[Label 2]; B-->D; C[Label 3]; C-->D; D[Label 4]; ``` Loading Passing an Array to the Blade Component --------------------------------------- [](#passing-an-array-to-the-blade-component) Laravel and php provide a lot of helpers and convinience methods for working with arrays. If you want to create dynamic diagrams from your business data, then an array is a more dynamic data format to pass into the Mermaid digram. You can pass an array into the Mermaid Blade component using the Generate Diagram From Array method. The package will automatically convert the array to a single string to generate the Mermaid diagram. Here is an example of how you can pass an array to the Blade component: ``` // In your controller use IcehouseVentures\LaravelMermaid\Facades\Mermaid; public function index() { $data = [ 'A-->B', 'A-->C', 'B-->D', 'C-->D' ]; Mermaid::build()->generateDiagramFromArray($data); return view('your-view', compact('data')); } // Your page blade file ``` ``` graph TD; A-->B; A-->C; B-->D; C-->D; ``` Loading Passing in an Eloquent Collection --------------------------------- [](#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: ``` // In your controller use IcehouseVentures\LaravelMermaid\Facades\Mermaid; public function index() { $collection = User::with('posts')->get(); $data = Mermaid::build()->generateDiagramFromCollection($collection); return view('your-view', compact('data')); } // Your page blade file ``` ``` graph LR; User1[User 1]; User1-->Post1; User1-->Post2; Post1[Post 1]; User2[User 2]; User2-->Post2; Post2[Post 2]; User2-->Post3; Post3[Post 2]; ``` Loading Custom collections, models and relationships -------------------------------------------- [](#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. ``` use IcehouseVentures\LaravelMermaid\Facades\Mermaid; $users = User::with('posts')->take(3)->get(); $data = []; $data[] = "classDef user fill:#e0f2fe,stroke:#bae6fd,stroke-width:4px"; $data[] = "classDef post fill:#f0fdf4,stroke:#86efac,stroke-width:4px,color:#1e3a8a,stroke-dasharray: 5 5"; foreach ($users as $user) { $data[] = "U{$user->id}(($user->name))"; foreach ($user->posts as $post) { $data[] = "P{$post->id}[$post->title]"; $data[] = "U{$user->id} --> P{$post->id}"; } } $data[] = "class U1,U2 user"; $data[] = "class P1,P2,P3 post"; $data[] = "linkStyle default stroke:#94a3b8,stroke-width:4px"; $data = Mermaid::build()->generateDiagramFromArray($data); ``` ``` graph TD; classDef user fill:#e0f2fe,stroke:#bae6fd,stroke-width:4px; classDef post fill:#f0fdf4,stroke:#86efac,stroke-width:4px,color:#1e3a8a,stroke-dasharray: 5 5; U1((User 1)); P1[Post 1]; U1 --> P1; U2((User 2)); P2[Post 2]; U2 --> P2; U2 --> P3; P3[Post 3]; class U1,U2 user; class P1,P2,P3 post; linkStyle default stroke:#94a3b8,stroke-width:4px; ``` Loading Configuration ------------- [](#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: ``` php artisan vendor:publish --provider="IcehouseVentures\LaravelMermaid\ServiceProvider" --tag="config" ``` This will create a `mermaid.php` file in your `config` directory. For example the configuration file allows you to set the default theme for the Mermaid diagrams. The default theme is `default` but you can change this to `forest`, `dark`, `neutral` or `base`. By default the package uses a Tailwind inspired theme. You can change the theme by updating the `theme` key in the configuration file. Canvas Style ------------ [](#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 -------- [](#livewire) This package includes a Livewire compatible component that will re-render a diagram when a property on your Livewire component is updated. This allows you to create dynamic interactive diagrams and visualisations that can be updated when a user interacts with your application. Here's an example of using this in a Livewire component when when you increase the 'limit', more users will be loaded and added to the diagram. ``` // Your Livewire Class: