From fd46de728d106b68e0cad0ac3f1eb9cacf7c05fa Mon Sep 17 00:00:00 2001
From: felixwidjaja <fwidjaja@datum.net>
Date: Thu, 12 Nov 2026 16:09:23 +0700
Subject: [PATCH] feat(mermaid): style sequence diagrams in the plain
 text-diagram theme

Thin grey dashed lifelines, mono labels, wrapped long messages and no
repeated actors at the bottom, matching the flowchart look.
---
 src/plugins/mermaidBrandTheme.mjs | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/plugins/mermaidBrandTheme.mjs b/src/plugins/mermaidBrandTheme.mjs
index 7577dcdb..08f7a442 100644
--- a/src/plugins/mermaidBrandTheme.mjs
+++ b/src/plugins/mermaidBrandTheme.mjs
@@ -42,6 +42,12 @@ const themeCSS = `
   .flowchart-link { stroke-width: 1px; }
   .edge-pattern-dotted, .edge-pattern-dashed { stroke: ${PINE_FORGE}; stroke-width: 1px; stroke-dasharray: 4 3; }
   .arrowMarkerPath { stroke-dasharray: none !important; }
+  /* Sequence diagrams: thin grey lifelines, mono labels, no repeated actors at the bottom. */
+  .actor { fill: #ffffff; stroke: ${SHARK_GRAY}; stroke-width: 1px; }
+  .actor-line { stroke: ${SILVER_KEYLINE}; stroke-width: 1px; stroke-dasharray: 3 4; }
+  .messageLine0, .messageLine1 { stroke-width: 1px; }
+  .messageText { font-family: ${MONO}; font-size: 12.5px; fill: ${UTILITY_SLATE}; stroke: none; }
+  .actor, text.actor > tspan { font-family: ${MONO}; font-size: 13px; }
 `;
 
 export const mermaidBrandConfig = {
@@ -51,6 +57,14 @@ export const mermaidBrandConfig = {
     wrappingWidth: 360,
     subGraphTitleMargin: { top: 4, bottom: 12 },
   },
+  sequence: {
+    mirrorActors: false,
+    actorMargin: 90,
+    width: 150,
+    messageMargin: 44,
+    wrap: true,
+    useMaxWidth: true,
+  },
   themeCSS,
   themeVariables: {
     fontFamily: MONO,