diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/workflow.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/workflow.html.twig
index 6f09b36355056..dfe7beac0932f 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/workflow.html.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/workflow.html.twig
@@ -137,20 +137,22 @@
             {{ source('@WebProfiler/Script/Mermaid/mermaid-flowchart-v2.min.js') }}
             const isDarkMode = document.querySelector('body').classList.contains('theme-dark');
             mermaid.initialize({
-                flowchart: { useMaxWidth: false },
+                flowchart: {
+                    useMaxWidth: true,
+                },
                 securityLevel: 'loose',
-                'theme': 'base',
-                'themeVariables': {
+                theme: 'base',
+                themeVariables: {
                     darkMode: isDarkMode,
-                    'fontFamily': 'var(--font-family-system)',
-                    'fontSize': 'var(--font-size-body)',
+                    fontFamily: 'var(--font-family-system)',
+                    fontSize: 'var(--font-size-body)',
                     // the properties below don't support CSS variables
-                    'primaryColor': isDarkMode ? 'lightsteelblue' : 'aliceblue',
-                    'primaryTextColor': isDarkMode ? '#000' : '#000',
-                    'primaryBorderColor': isDarkMode ? 'steelblue' : 'lightsteelblue',
-                    'lineColor': isDarkMode ? '#939393' : '#d4d4d4',
-                    'secondaryColor': isDarkMode ? 'lightyellow' : 'lightyellow',
-                    'tertiaryColor': isDarkMode ? 'lightSalmon' : 'lightSalmon',
+                    primaryColor: isDarkMode ? 'lightsteelblue' : 'aliceblue',
+                    primaryTextColor: isDarkMode ? '#000' : '#000',
+                    primaryBorderColor: isDarkMode ? 'steelblue' : 'lightsteelblue',
+                    lineColor: isDarkMode ? '#939393' : '#d4d4d4',
+                    secondaryColor: isDarkMode ? 'lightyellow' : 'lightyellow',
+                    tertiaryColor: isDarkMode ? 'lightSalmon' : 'lightSalmon',
                 }
             });
 
@@ -275,6 +277,7 @@
                                 click {{ nodeId }} showNodeDetails{{ collector.hash(name) }}
                             {% endfor %}
                         </pre>
+                        <a href="{{ collector.buildMermaidLiveLink(name) }}">View on mermaid.live</a>
 
                         <h3>Calls</h3>
                         <table>
diff --git a/src/Symfony/Component/Workflow/DataCollector/WorkflowDataCollector.php b/src/Symfony/Component/Workflow/DataCollector/WorkflowDataCollector.php
index febc97585636c..0cb7e2017b957 100644
--- a/src/Symfony/Component/Workflow/DataCollector/WorkflowDataCollector.php
+++ b/src/Symfony/Component/Workflow/DataCollector/WorkflowDataCollector.php
@@ -88,21 +88,39 @@ public function getCallsCount(): int
         return $i;
     }
 
+    public function hash(string $string): string
+    {
+        return hash('xxh128', $string);
+    }
+
+    public function buildMermaidLiveLink(string $name): string
+    {
+        $payload = [
+            'code' => $this->data['workflows'][$name]['dump'],
+            'mermaid' => '{"theme": "default"}',
+            'autoSync' => false,
+        ];
+
+        $compressed = zlib_encode(json_encode($payload), ZLIB_ENCODING_DEFLATE);
+
+        $suffix = rtrim(strtr(base64_encode($compressed), '+/', '-_'), '=');
+
+        return "https://mermaid.live/edit#pako:{$suffix}";
+    }
+
     protected function getCasters(): array
     {
         return [
             ...parent::getCasters(),
-            TransitionBlocker::class => function ($v, array $a, Stub $s, $isNested) {
-                unset(
-                    $a[\sprintf(Caster::PATTERN_PRIVATE, $v::class, 'code')],
-                    $a[\sprintf(Caster::PATTERN_PRIVATE, $v::class, 'parameters')],
-                );
+            TransitionBlocker::class => static function ($v, array $a, Stub $s) {
+                unset($a[\sprintf(Caster::PATTERN_PRIVATE, $v::class, 'code')]);
+                unset($a[\sprintf(Caster::PATTERN_PRIVATE, $v::class, 'parameters')]);
 
                 $s->cut += 2;
 
                 return $a;
             },
-            Marking::class => function ($v, array $a, Stub $s, $isNested) {
+            Marking::class => static function ($v, array $a) {
                 $a[Caster::PREFIX_VIRTUAL.'.places'] = array_keys($v->getPlaces());
 
                 return $a;
@@ -110,11 +128,6 @@ protected function getCasters(): array
         ];
     }
 
-    public function hash(string $string): string
-    {
-        return hash('xxh128', $string);
-    }
-
     private function getEventListeners(WorkflowInterface $workflow): array
     {
         $listeners = [];