jaakko/agentic-studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mermaid-kaavio LR (vaakasuunta) + tooltipsit joka vaiheelle

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
jaakko
2026-04-07 11:33:23 +03:00
parent 4e4efda67d
commit 01622a960f
1 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
network-poc/static/index.html
View File

@@ -2853,18 +2853,21 @@ mermaid.initialize({ startOnLoad: true, theme: 'dark', themeVariables: { primary
function generateMermaidDiagram(steps) { function generateMermaidDiagram(steps) {
const agentLabels = { manager: 'Manageri', coder: 'Koodari', tester: 'DevOps', qa: 'QA', data: 'Data' }; 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 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; let prevId = null;
const usedAgents = new Set();
steps.forEach((s, i) => { steps.forEach((s, i) => {
const id = `S${i}`; const id = `S${i}`;
const agent = agentLabels[s.agent] || s.agent; const agent = agentLabels[s.agent] || s.agent;
const label = s.label.replace(/"/g, "'"); const label = s.label.replace(/"/g, "'").replace(/[<>]/g, '');
usedAgents.add(s.agent); 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}<br/>${label}"]`);
// Mermaid tooltip: click event + title
lines.push(` click ${id} callback "${desc}${outputPreview ? ' — ' + outputPreview : ''}"`);
if (prevId) { if (prevId) {
lines.push(` ${prevId} --> ${id}`); lines.push(` ${prevId} --> ${id}`);
} }