Arazzo의 AsyncAPI 단계

<div class="viz"><h3>ASYNC STEP JOIN</h3><div class="flowline"><span class="box">send<br>K7</span><span class="arrow">→</span><span class="box" id="message">wait</span><span class="arrow">→</span><span class="box" id="next">next</span></div><div class="timeline"><i id="progress"></i></div><div class="muted" id="async-note">waiting for correlationId K7</div></div>

.viz{width:94%;height:88%;max-width:960px;padding:clamp(10px,2vmin,18px);border:1px solid var(--line);border-radius:14px;background:var(--surface);font:600 clamp(12px,1.35vw,16px)/1.35 var(--font-sans,system-ui,sans-serif);display:flex;flex-direction:column;gap:clamp(7px,1.8vmin,13px);overflow:hidden}.viz h3{margin:0;color:var(--accent);font:700 clamp(12px,1.35vw,16px)/1.2 var(--font-sans,system-ui,sans-serif);letter-spacing:.04em}.viz .row{display:flex;align-items:center;justify-content:center;gap:clamp(5px,1.4vmin,12px);flex:1;min-height:0}.viz .box{padding:clamp(5px,1.5vmin,12px);border:1px solid var(--line);border-radius:9px;background:var(--bg);text-align:center}.viz .muted{color:var(--muted)}.viz .accent{color:var(--accent)}.viz .code{font-family:ui-monospace,monospace}.viz .pill{padding:3px 7px;border:1px solid var(--line);border-radius:99px;white-space:nowrap}.viz .active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface))}.viz .arrow{color:var(--accent);font:700 18px ui-monospace,monospace}.flowline{display:flex;align-items:center;justify-content:center;gap:8px;flex:1}.flowline .box{min-width:22%}#next{opacity:.3}#next.ready{opacity:1;border-color:var(--accent)}.timeline{height:8px;border-radius:9px;background:var(--line);overflow:hidden}.timeline i{display:block;height:100%;background:var(--accent);transition:width .4s}

const steps=[['unrelated K8',32,'skip unrelated message',false],['confirm K7',76,'receive matched K7',false],['confirm K7',100,'dependsOn satisfied · continue',true]];let n=0;function draw(){const s=steps[n];document.getElementById('message').textContent=s[0];document.getElementById('progress').style.width=s[1]+'%';document.getElementById('async-note').textContent=s[2];document.getElementById('next').classList.toggle('ready',s[3]);n=(n+1)%steps.length}draw();setInterval(draw,800)