[TikiWiki-commits] [Git][tikiwiki/tiki][master] [UPD] Tiki Transition diagram: migrate Dracula/Raphael to Mermaid (stateDiagram-v2)

Benoit Grégoire pushed to branch master at Tiki Wiki CMS Groupware / Tiki


Commits:
abc17f1e by Alvin Bauma at 2025-11-12T20:44:30+00:00
[UPD] Tiki Transition diagram: migrate Dracula/Raphael to Mermaid (stateDiagram-v2)
---
* [UPD] Tiki Transition diagram: migrate Dracula/Raphael to Mermaid (stateDiagram-v2)

See merge request tikiwiki/tiki!8623

- - - - -


2 changed files:

- templates/tiki-admin_transitions.tpl
- tiki-admin_transitions.php


Changes:

=====================================
templates/tiki-admin_transitions.tpl
=====================================
@@ -90,20 +90,26 @@
 
     {if $available_states|@count > 0}
         {tab name="{tr}Transitions{/tr}"}
-            <h2>{tr}Transitions{/tr}</h2>
-            {* former add_dracula() *}
-            {$headerlib->add_jsfile('lib/dracula/raphael-min.js', true)}
-            {$headerlib->add_jsfile('lib/dracula/graffle.js')}
-            {$headerlib->add_jsfile('lib/dracula/graph.js')}
-            <div id="graph-canvas" class="graph-canvas" data-graph-nodes="{$graph_nodes|escape}" data-graph-edges="{$graph_edges|escape}"></div>
-            <a href="#" id="graph-draw" class="button" role="button">{tr}Draw Transition Diagram{/tr}</a>
+            <div class="d-flex justify-content-between align-items-center mb-3">    
+                <h2>{tr}Transitions{/tr}</h2>
+                <button type="button" id="toggle-diagram" class="btn btn-light">
+                    {tr}Hide Transition Diagram{/tr}
+                </button>
+            </div>
+
+            <div id="transitions-diagram" class="mermaid-container p-3 mb-3 card card-body">
+                <textarea class="code d-none">{$mermaid_transition_data|escape}</textarea>
+                <div class="mermaid"></div>
+            </div>
+
             {jq}
-            $('#graph-draw').on("click", function( e ) {
-                $(this).hide();
-                $('#graph-canvas').drawGraph();
-                return false;
-            } );
+            $('#toggle-diagram').on('click', function() {
+                $('#transitions-diagram').toggle();
+                const isVisible = $('#transitions-diagram').is(':visible');
+                $(this).text(isVisible ? '{tr}Hide Transition Diagram{/tr}' : '{tr}Show Transition Diagram{/tr}');
+            });
             {/jq}
+
             <div class="{if $js}table-responsive{/if}"> {* table-responsive class cuts off css drop-down menus *}
                 <table class="table table-striped table-hover">
                     <thead>


=====================================
tiki-admin_transitions.php
=====================================
@@ -148,6 +148,51 @@ foreach ($transitions as & $trans) {
     $trans['to_label'] = transition_label_finder($trans['to']);
 }
 
+// Setup Mermaid diagram data
+if (count($available_states) > 0) {
+    $cleanStringData = function (string $s): string {
+        $s = preg_replace('/\s+/u', ' ', $s ?? '');
+        $s = str_replace(['"', "\r", "\n"], ['\"', '', ''], $s);
+        return trim($s);
+    };
+
+    $buildMermaidData = function (array $states, array $transitions) use ($cleanStringData): string {
+        $lines = ['stateDiagram-v2'];
+        $idMap = [];
+        $n = 1;
+
+        // Map DB ids to short Mermaid ids and declare states with labels safely
+        foreach ($states as $stateId => $label) {
+            $mid = 'S' . $n++;
+            $idMap[$stateId] = $mid;
+            $lines[] = "state \"{$cleanStringData((string)$label)}\" as {$mid}";
+        }
+
+        // Edges (label optional)
+        foreach ($transitions as $tr) {
+            $from = $idMap[$tr['from']] ?? null;
+            $to = $idMap[$tr['to']] ?? null;
+            if (! $from || ! $to) {
+                continue;
+            }
+
+            $edge = $cleanStringData((string)($tr['name'] ?? ''));
+            if (! empty($tr['preserve'])) {
+                $edge = trim($edge . ' (preserve)');
+            }
+
+            $lines[] = $edge ? "{$from} --> {$to} : {$edge}" : "{$from} --> {$to}";
+        }
+
+        return implode("\n", $lines);
+    };
+
+    $smarty->assign('mermaid_transition_data', $buildMermaidData($available_states, $transitions));
+
+    $headerlib->add_js_module("import handleMermaid from '@mermaidPack'; handleMermaid();");
+}
+
+
 // Setup Smarty & Session
 $_SESSION['transition'] = [
                 'mode' => $transition_mode,
@@ -174,25 +219,8 @@ $smarty->assign('available_states', $available_states);
 $smarty->assign('transitions', $transitions);
 $smarty->assign('guards', $guards);
 $smarty->assign('selected_transition', $selected_transition);
-
 $smarty->assign('cat_tree', $cat_tree);
 
-// Graph setup
-if (count($available_states) > 0) {
-    $edges = [];
-    foreach ($transitions as $tr) {
-        $edges[] = [
-                        'from' => $tr['from_label'],
-                        'to' => $tr['to_label'],
-                        'label' => $tr['name'],
-                        'preserve' => (bool) $tr['preserve']
-        ];
-    }
-
-    $smarty->assign('graph_nodes', json_encode(array_values($available_states)));
-    $smarty->assign('graph_edges', json_encode($edges));
-}
-
 $smarty->assign('mid', 'tiki-admin_transitions.tpl');
 $smarty->display('tiki.tpl');
 



View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/abc17f1eb4ab686553e3dd5ee1929e226bb5f2cb

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/abc17f1eb4ab686553e3dd5ee1929e226bb5f2cb
You're receiving this email because of your account on gitlab.com.

_______________________________________________
TikiWiki-cvs mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs