Viewer: switch from Mermaid mindmap to flowchart TD with class styling

157848fb7c09e679fa6b63bfd874d47fb2700106 · 2026-05-06 12:08:10 -0700 · Steve
Files touched

M server.js
Diff

commit 157848fb7c09e679fa6b63bfd874d47fb2700106
Author: Steve <steve@designerwallcoverings.com>
Date:   Wed May 6 12:08:10 2026 -0700

    Viewer: switch from Mermaid mindmap to flowchart TD with class styling
---
 server.js | 39 ++++++++++++++++++++++-----------------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/server.js b/server.js
index 509d74f..bcce6bd 100644
--- a/server.js
+++ b/server.js
@@ -35,29 +35,34 @@ function parseYaml(text) {
   return out;
 }
 
-function buildMermaidMindmap(cabinet) {
-  const colorByVp = {
-    'vp-operations': 'fill:#dbeafe,stroke:#1d4ed8,color:#1e3a8a',
-    'vp-dw-commerce': 'fill:#dcfce7,stroke:#16a34a,color:#14532d',
-    'vp-directories': 'fill:#ffedd5,stroke:#ea580c,color:#7c2d12',
-    'vp-engineering': 'fill:#ede9fe,stroke:#7c3aed,color:#4c1d95',
-    'vp-research-content': 'fill:#cffafe,stroke:#0891b2,color:#164e63',
-    'vp-compliance-policy': 'fill:#fee2e2,stroke:#dc2626,color:#7f1d1d',
-  };
-  const lines = ['mindmap', '  root((Steve<br/>President))'];
+function buildMermaidFlowchart(cabinet) {
+  const lines = ['flowchart TD'];
+  // Root
+  lines.push('  Steve(["👔 STEVE<br/>President"]):::president');
+  // VPs
   for (const v of cabinet.cabinet) {
-    lines.push(`    ${v.vp}[${v.vp}]`);
-    for (const d of v.directors.slice(0, 14)) { // cap per-VP
-      const safe = d.name.replace(/[^a-zA-Z0-9_-]/g, '');
-      const label = `${d.kind === 'skill' ? '/' : '@'}${d.name}`;
-      lines.push(`      ${safe}_${v.vp}(${label})`);
+    const cls = v.vp.replace(/-/g, '_');
+    lines.push(`  ${cls}["${v.vp}<br/><i>${(v.domain || '').slice(0, 60)}…</i>"]:::vp`);
+    lines.push(`  Steve --> ${cls}`);
+    for (const d of v.directors.slice(0, 12)) {
+      const safe = d.name.replace(/[^a-zA-Z0-9_]/g, '_');
+      const id = `${safe}__${cls}`;
+      const label = d.kind === 'skill' ? `/${d.name}` : `@${d.name}`;
+      const klass = d.kind === 'skill' ? 'skill' : 'subagent';
+      lines.push(`  ${id}["${label}"]:::${klass}`);
+      lines.push(`  ${cls} --> ${id}`);
     }
   }
+  // Class styles
+  lines.push('  classDef president fill:#000,stroke:#000,color:#fff,font-weight:900,font-size:16px;');
+  lines.push('  classDef vp fill:#fef3c7,stroke:#000,stroke-width:3px,color:#000,font-weight:800;');
+  lines.push('  classDef skill fill:#dcfce7,stroke:#16a34a,color:#14532d;');
+  lines.push('  classDef subagent fill:#ede9fe,stroke:#7c3aed,color:#4c1d95;');
   return lines.join('\n');
 }
 
 function render(cabinet) {
-  const mm = buildMermaidMindmap(cabinet);
+  const mm = buildMermaidFlowchart(cabinet);
   const stats = {
     vpCount: cabinet.cabinet.length,
     skillCount: cabinet.cabinet.reduce((a, v) => a + v.directors.filter(d => d.kind === 'skill').length, 0),
@@ -126,7 +131,7 @@ ${mm}
 </main>
 <footer>Steve = President &middot; Last rendered ${new Date().toLocaleString()}</footer>
 
-<script>mermaid.initialize({startOnLoad:true, theme:'default', securityLevel:'loose', mindmap:{padding:18}});</script>
+<script>mermaid.initialize({startOnLoad:true, theme:'default', securityLevel:'loose', flowchart:{padding:18, useMaxWidth:false, htmlLabels:true, curve:'basis', nodeSpacing:30, rankSpacing:55}});</script>
 </body></html>`;
 }
← 73d8421 Cabinet: restore plugin-loaded skills (claude-api, simplify, · back to Agent Cabinet · Game Mode: /game route — 6 dept HQs + 134 cards w/ avatars, eca07f1 →