From 01622a960f03750cf8a70af80a59ac8ffe66186e Mon Sep 17 00:00:00 2001 From: jaakko Date: Tue, 7 Apr 2026 11:33:23 +0300 Subject: [PATCH] Mermaid-kaavio LR (vaakasuunta) + tooltipsit joka vaiheelle MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit graph TD → graph LR: kaavio kiemurtelee vasemmalta oikealle. Hover näyttää vaiheen selityksen ja output-esikatselun. Co-Authored-By: Claude Opus 4.6 (1M context) --- network-poc/static/index.html | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/network-poc/static/index.html b/network-poc/static/index.html index d1909c8..acd0e12 100644 --- a/network-poc/static/index.html +++ b/network-poc/static/index.html @@ -2853,18 +2853,21 @@ mermaid.initialize({ startOnLoad: true, theme: 'dark', themeVariables: { primary function generateMermaidDiagram(steps) { const agentLabels = { manager: 'Manageri', coder: 'Koodari', tester: 'DevOps', qa: 'QA', data: 'Data' }; const agentStyles = { manager: 'fill:#1c1206,stroke:#d29922,color:#d29922', coder: 'fill:#0d1a0d,stroke:#3fb950,color:#3fb950', tester: 'fill:#0d1117,stroke:#58a6ff,color:#58a6ff', qa: 'fill:#170d22,stroke:#a371f7,color:#a371f7', data: 'fill:#1a0d22,stroke:#d2a8ff,color:#d2a8ff' }; + const stepDescs = { 'Suunnittelu': 'Jakaa projektin tiedostoiksi', 'Review': 'Tarkistaa koodin laadun', 'Testit': 'Kirjoittaa pytest-testit', 'Dockerfile': 'Generoi Docker-imagen', 'Compose': 'Palvelumääritys', 'README': 'Käyttöohjeet', 'Validointi': 'Tarkistaa yhteensopivuuden', 'Korjaukset': 'Korjaa löydetyt ongelmat' }; - let lines = ['graph TD']; + let lines = ['graph LR']; let prevId = null; - const usedAgents = new Set(); steps.forEach((s, i) => { const id = `S${i}`; const agent = agentLabels[s.agent] || s.agent; - const label = s.label.replace(/"/g, "'"); - usedAgents.add(s.agent); + const label = s.label.replace(/"/g, "'").replace(/[<>]/g, ''); + const desc = stepDescs[s.label] || s.label; + const outputPreview = (s.output || '').substring(0, 80).replace(/"/g, "'").replace(/\n/g, ' ').replace(/[<>]/g, ''); - lines.push(` ${id}["${agent}: ${label}"]`); + lines.push(` ${id}["${agent}
${label}"]`); + // Mermaid tooltip: click event + title + lines.push(` click ${id} callback "${desc}${outputPreview ? ' — ' + outputPreview : ''}"`); if (prevId) { lines.push(` ${prevId} --> ${id}`); }