Add themes.

README.md

@@ -196,6 +196,7 @@ php artisan vendor:publish --provider="IcehouseVentures\LaravelMermaid\LaravelMe
 
 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.
 
 ## Background
 Icehouse Ventures is an early-stage venture capital firm based in New Zealand. We have an in-house technology platform built using Laravel and created this package to help streamline the generation of flowcharts, process diagrams and data visualisations inside our application using dynamic data. 

config/mermaid.php

@@ -10,33 +10,12 @@
     |
     */
 
-    'theme' => 'default',
+    // Mermaid theme to use for the diagram. Options: 'default', 'forest', 'dark', 'neutral', 'base' or to a custom theme file in the themes directory set to custom
+    'theme' => 'custom',
 
-    'themeVariables' => [
-        'primaryColor' => '#BB2528',
-    ],
+    // Custom theme file to use for the diagram. Must be a valid JSON file in the themes directory. Package comes with a bootstrap.json and tailwind.json theme files
+    'themeFile' => 'tailwind.json',
 
-    'flowchart' => [
-        'useMaxWidth' => false,
-        'htmlLabels' => true,
-    ],
-
-    'sequence' => [
-        'showSequenceNumbers' => true,
-    ],
-
-    'gantt' => [
-        'axisFormat' => '%m/%d/%Y',
-    ],
-
-    'class' => [
-        'defaultRenderer' => 'dagre',
-    ],
-
-    'git' => [
-        'showBranches' => true,
-        'showCommitLabel' => true,
-    ],
 ];
 
 

src/Support/Builder.php

@@ -9,12 +9,12 @@ class Builder
 {
 
     // Entry point for generating a diagram from an array
-    public static function generateDiagramFromArray(array $data, ?string $type = null): string
+    public static function generateDiagramFromArray(array $data, ?string $type = null, ?array $options = []): string
     {
 
         $diagram = self::formatArrayToLines($data);
         $diagram = self::setDiagramType($type) . $diagram;
-
+        $diagram = self::setTheme(config('mermaid.theme')) . $diagram;
         return $diagram;
     }
 
@@ -30,19 +30,50 @@ protected static function setDiagramType(?string $type): string
         return ($type ?? "graph LR") . ";\n";
     }
 
+    // Set the theme for the diagram
+    public static function setTheme(string $theme): string
+    {
+        $theme = config('mermaid.theme');
+
+        if (in_array($theme, ['base', 'forest', 'dark', 'neutral', 'default'])) {
+            return "%%{\n  
+            init: {\"theme\": \"$theme\"}
+            }%%\n";
+        }
+
+        if ($theme === 'custom') {
+            $themeFile = config('mermaid.themeFile');
+        }
+
+        if (!file_exists(__DIR__ . '/../Themes/' . $themeFile)) {
+            return null;
+        }
+
+        $themeConfig = json_decode(file_get_contents(__DIR__ . '/../Themes/' . $themeFile), true);
+
+        $themeJson = json_encode($themeConfig);
+
+        $themeString = 
+            "%%{\n  
+            init: $themeJson
+            }%%\n";
+
+        return $themeString;
+    }
+
     // Entry point for generating a diagram from a collection of models
-    public static function generateDiagramFromCollection(Collection $models, ?string $label = null, ?string $type = null): string
+    public static function generateDiagramFromCollection(Collection $models, ?string $label = null, ?string $type = null, ?array $options = []): string
     {
         $diagram = self::formatCollectionToLines($models, $label);
         $diagram = self::setDiagramType($type) . $diagram;
+        $diagram = self::setTheme(config('mermaid.theme')) . $diagram;
 
         return $diagram;
     }
 
     // Format the eloquent models into lines to match the mermaid data format
     protected static function formatCollectionToLines(Collection $models, ?string $label = null, $parentModel = null): string
     {
-
         $lines = [];
 
         foreach ($models as $model) {

src/Themes/bootstrap.json

@@ -0,0 +1,12 @@
+{
+  "theme": "base",
+  "themeName": "Bootstrap Inspired",
+  "themeVariables": {
+    "primaryColor": "#e9ecef",
+    "primaryBorderColor": "#343a40",
+    "primaryTextColor": "#212529",
+    "lineColor": "#6c757d",
+    "secondaryColor": "#6c757d",
+    "tertiaryColor": "#fff"
+  } 
+}

src/Themes/tailwind.json

@@ -0,0 +1,16 @@
+{
+  "theme": "base",
+  "themeName": "Tailwind Inspired",
+  "themeVariables": {
+    "primaryColor": "#f3f4f6",
+    "primaryBorderColor": "#4b5563",
+    "primaryTextColor": "#1f2937",
+    "lineColor": "#9ca3af", 
+    "secondaryColor": "#6b7280",
+    "tertiaryColor": "#fff",
+    "mainBkg": "#f9fafb",
+    "secondBkg": "#f3f4f6",
+    "mainContrastColor": "#1f2937",
+    "darkTextColor": "#1f2937"
+  }
+}