DongHyeonkaandClaude Opus 5
75bed382c8
The originating repository's SVGs were drawn by hand and every one of them
put a title, a subtitle and an explanation band inside the canvas. This
repository forbids both, so they could not be carried over — the whole set
was rebuilt through the skill's pipeline instead.
Each diagram went through prepare, references, prompt, a VizSpec 1.1 citing
document line ranges, lint, and render. All 28 pass lint and produce the
same eight formats the existing keycloak project has. Sentences moved out of
the canvas into <desc> and the paragraph beside each figure; the drawings
carry names only.
Two lint rules did real work rather than formatting work:
edge-through-node caught arrows crossing an unrelated
node and implying an adjacency that
does not exist — four diagrams had to
be restructured, not just relaid out
evidence-outside-prepared-context caught a diagram citing another
section; its anchor moved from B-0 to
B-1 so all three sections it draws on
are inside the prepared context
lab-topology also had to change profile: its context offers a different
candidate set, and query-fanout with shard roles is what the section
actually shows — one entry point spreading to two Keycloak nodes.
The document now carries all 28 inline, one per claim that needed one, and
the section recording what was still missing is updated: the diagram gap is
closed, Studio records remain.
verify-pipeline.py passes. audit-records.py reports no issues.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
85 lines
7.1 KiB
XML
85 lines
7.1 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="680" height="690" viewBox="0 0 680 690" role="img" aria-labelledby="diagram-title diagram-description">
|
|
<title id="diagram-title">백채널 로그아웃은 양쪽이 있어야 한다</title>
|
|
<desc id="diagram-description">C-1 에서 로그아웃이 다른 앱으로 퍼지지 않는 것을 관측했고 원인은 단순했다. 두 클라이언트 모두 backchannelLogoutUrl 이 비어 있어 Keycloak 은 부를 주소를 몰랐고, BFF 소스에는 oidcLogout 설정이 없어 주소를 알려줘도 받을 곳이 없었다. Keycloak 파드에서 앱 URL 로 요청하면 200 이 돌아오므로 네트워크 문제도 아니다. 설정이 빠졌다와 기능이 없다는 다르게 고쳐야 하는데 여기는 둘 다였다.</desc>
|
|
<metadata>{"techviz":{"spec_version":"1.1","id":"c2-backchannel-both-sides","profile":"component-flow"},"source_context":{"document":"docs/keycloak-session-store/final/document.md","document_sha256":"1d44cba1905544d92f1d26ae36a8deb64a3db3914d6b488fd30d6ae7f8cfbabe","anchor":{"kind":"heading","value":"C층 — SSO 와 로그아웃 전파","line":464}},"evidence_policy":"Each factual element cites source lines or is marked assumption.","diagram_only":true}</metadata>
|
|
<defs>
|
|
<marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
|
|
<path d="M 0 0 L 10 5 L 0 10 z" />
|
|
</marker>
|
|
<style>
|
|
:root { color-scheme: light; }
|
|
text { font-family: Inter, Pretendard, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; fill: #111827; }
|
|
.canvas { fill: #ffffff; }
|
|
.group-box { fill: #ffffff; stroke: #9ca3af; stroke-width: 1.4; stroke-dasharray: 7 5; }
|
|
.group-label-bg { fill: #ffffff; }
|
|
.group-label { font-size: 13px; font-weight: 650; fill: #374151; }
|
|
.edge { fill: none; stroke: #374151; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; marker-end: url(#arrow); }
|
|
.edge.style-dashed, .edge.semantic-dashed, .edge.assumption { stroke-dasharray: 7 5; }
|
|
.edge.style-dotted { stroke-dasharray: 2 5; }
|
|
.edge.emphasis-primary { stroke: #2563eb; stroke-width: 2.2; }
|
|
.edge.emphasis-muted { stroke: #9ca3af; }
|
|
.edge.emphasis-warning, .edge.kind-failure, .edge.kind-error { stroke: #dc2626; stroke-width: 2.2; }
|
|
.edge-label-bg { fill: #ffffff; }
|
|
.edge-label { font-size: 12px; font-weight: 560; text-anchor: middle; }
|
|
.node-shape { fill: #ffffff; stroke: #4b5563; stroke-width: 1.7; }
|
|
.node-shape.emphasis-primary { stroke: #2563eb; stroke-width: 2.2; }
|
|
.node-shape.emphasis-muted { stroke: #9ca3af; fill: #f9fafb; }
|
|
.node-shape.emphasis-warning { stroke: #d97706; stroke-width: 2; fill: #fffdf5; }
|
|
.node-shape.kind-database, .node-shape.kind-datastore, .node-shape.kind-storage { fill: #f8fafc; }
|
|
.node-shape.kind-queue, .node-shape.kind-event, .node-shape.kind-topic { fill: #fafafa; }
|
|
.node-shape.assumption { stroke-dasharray: 4 4; }
|
|
.storage-bottom, .controller-divider { fill: none; stroke: #4b5563; stroke-width: 1.4; }
|
|
.controller-led { fill: #4b5563; }
|
|
.actor-symbol { fill: none; stroke: #4b5563; stroke-width: 1.8; stroke-linecap: round; }
|
|
.actor-symbol.emphasis-primary { stroke: #2563eb; stroke-width: 2.2; }
|
|
.node-label { font-size: 14px; font-weight: 650; text-anchor: middle; }
|
|
.node-role { font-size: 10px; letter-spacing: 0.04em; text-anchor: middle; fill: #6b7280; }
|
|
.node-detail-divider { stroke: #d1d5db; stroke-width: 1; }
|
|
.node-detail { font-size: 11px; fill: #374151; }
|
|
.assumption-badge { font-size: 9px; font-weight: 700; fill: #92400e; }
|
|
.failure-mark { stroke: #dc2626; stroke-width: 4; stroke-linecap: round; }
|
|
.lifeline { stroke: #9ca3af; stroke-width: 1.2; stroke-dasharray: 5 5; }
|
|
.timeline-axis { stroke: #374151; stroke-width: 1.8; marker-end: url(#arrow); }
|
|
.timeline-stem { stroke: #6b7280; stroke-width: 1.3; }
|
|
.timeline-marker { fill: #ffffff; stroke: #374151; stroke-width: 1.7; }
|
|
.timeline-marker.primary { fill: #2563eb; stroke: #2563eb; }
|
|
.timeline-marker.warning { fill: #dc2626; stroke: #dc2626; }
|
|
.timeline-label { font-size: 13px; font-weight: 650; text-anchor: middle; }
|
|
.timeline-detail { font-size: 11px; fill: #4b5563; text-anchor: middle; }
|
|
</style>
|
|
</defs>
|
|
<rect class="canvas" width="680" height="690" />
|
|
<polyline class="edge kind-blocked style-solid emphasis-normal" points="160.5,311.0 160.5,359.0 160.5,359.0 160.5,407.0" data-evidence="458-466" />
|
|
<rect class="edge-label-bg" x="138.7" y="345.0" width="91.7" height="22" rx="3" />
|
|
<text class="edge-label" x="184.5" y="360.0">주소가 있어야 부른다</text>
|
|
<polyline class="edge kind-blocked style-solid emphasis-normal" points="160.5,478.0 160.5,526.0 160.5,526.0 160.5,574.0" data-evidence="458-466" />
|
|
<rect class="edge-label-bg" x="131.9" y="512.0" width="105.1" height="22" rx="3" />
|
|
<text class="edge-label" x="184.5" y="527.0">받을 곳이 있어야 지운다</text>
|
|
<polyline class="edge kind-request style-solid emphasis-normal" points="160.5,144.0 160.5,192.0 160.5,192.0 160.5,240.0" data-evidence="458-466" />
|
|
<rect class="edge-label-bg" x="138.7" y="178.0" width="91.7" height="22" rx="3" />
|
|
<text class="edge-label" x="184.5" y="193.0">통지할 주소를 찾는다</text>
|
|
<g id="node-logout">
|
|
<g class="actor-symbol emphasis-primary" data-evidence="458-465"><circle cx="160.5" cy="80.0" r="11.0" /><line x1="160.5" y1="96.0" x2="160.5" y2="105.0" /><line x1="142.5" y1="106.0" x2="178.5" y2="106.0" /><line x1="160.5" y1="105.0" x2="145.5" y2="122.0" /><line x1="160.5" y1="105.0" x2="175.5" y2="122.0" /></g>
|
|
<text class="node-label" x="160.5" y="137.0">한 앱에서 로그아웃</text>
|
|
</g>
|
|
<g id="node-kc-config">
|
|
<rect class="node-shape kind-component emphasis-warning role-control" data-evidence="458-466" x="70.0" y="240.0" width="181.0" height="71.0" rx="7" />
|
|
<text class="node-label" x="160.5" y="267.0">backchannelLogoutUrl</text>
|
|
<line class="node-detail-divider" x1="84.0" y1="288.0" x2="237.0" y2="288.0" />
|
|
<text class="node-detail" x="86.0" y="305.0">Keycloak 은 부를 주소를 모른다</text>
|
|
</g>
|
|
<g id="node-app-endpoint">
|
|
<rect class="node-shape kind-component emphasis-warning role-control" data-evidence="458-466" x="85.5" y="407.0" width="150.0" height="71.0" rx="7" />
|
|
<text class="node-label" x="160.5" y="434.0">앱의 수신 엔드포인트</text>
|
|
<line class="node-detail-divider" x1="99.5" y1="455.0" x2="221.5" y2="455.0" />
|
|
<text class="node-detail" x="101.5" y="472.0">oidcLogout 설정 없음</text>
|
|
</g>
|
|
<g id="node-app-session">
|
|
<rect class="node-shape kind-component emphasis-warning role-target" data-evidence="458-466" x="85.5" y="574.0" width="150.0" height="71.0" rx="7" />
|
|
<text class="node-label" x="160.5" y="601.0">다른 앱의 세션</text>
|
|
<line class="node-detail-divider" x1="99.5" y1="622.0" x2="221.5" y2="622.0" />
|
|
<text class="node-detail" x="101.5" y="639.0">네트워크는 200 으로 닿는다</text>
|
|
</g>
|
|
</svg>
|