init: technical-visualization-haness 하네스 설계
This commit is contained in:
DongHyeonka
@@ -0,0 +1,5 @@
|
||||
# 대체 설명
|
||||
|
||||
클라이언트부터 체크아웃 API, 결제 제공자, 주문 DB, 이벤트 버스까지의 결제 승인 시퀀스.
|
||||
|
||||
전역 제목·부제·footer는 보이는 캔버스에 포함하지 않는다. 접근성용 SVG `<title>`과 `<desc>`는 보이지 않는 메타데이터로 유지한다.
|
||||
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"id": "payment-approval-sequence",
|
||||
"visual_grammar": "sequence",
|
||||
"reader_question": "결제 승인·상태 저장·이벤트 발행은 어떤 시간 순서로 수행되는가?",
|
||||
"diagram_only": true,
|
||||
"visible_text_scope": [
|
||||
"node labels",
|
||||
"boundary labels",
|
||||
"edge labels",
|
||||
"state/time annotations required to decode the relation"
|
||||
],
|
||||
"forbidden_visible_elements": [
|
||||
"global title",
|
||||
"subtitle paragraph",
|
||||
"footer",
|
||||
"takeaway band",
|
||||
"pattern number",
|
||||
"generator watermark",
|
||||
"decorative metric card",
|
||||
"gradient",
|
||||
"drop shadow",
|
||||
"glow"
|
||||
],
|
||||
"palette_policy": "grayscale plus one primary accent; status colors only when semantic",
|
||||
"required_renderer_capabilities": [
|
||||
"lifeline",
|
||||
"activation",
|
||||
"numbered messages",
|
||||
"dashed response"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
# Context
|
||||
|
||||
독자가 확인해야 할 질문: **결제 승인·상태 저장·이벤트 발행은 어떤 시간 순서로 수행되는가?**
|
||||
|
||||
이 fixture는 문서 본문이 이미 문제와 결론을 설명한다고 가정한다. 따라서 SVG에는 다이어그램 관계를 해독하는 데 필요한 기술 레이블만 둔다.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
@@ -0,0 +1,66 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="720" viewBox="0 0 1440 720" role="img" aria-labelledby="title desc">
|
||||
<title id="title">Sequence</title>
|
||||
<desc id="desc">클라이언트부터 체크아웃 API, 결제 제공자, 주문 DB, 이벤트 버스까지의 결제 승인 시퀀스.</desc>
|
||||
<metadata>{"generator":"examples/build_examples.py","version":"0.3.0","canvas_policy":"diagram-only","decorative_effects":false}</metadata>
|
||||
<defs>
|
||||
<marker id="arrow-ink" markerWidth="10" markerHeight="8" refX="9" refY="4" orient="auto" markerUnits="strokeWidth"><path d="M 0 0 L 10 4 L 0 8 z" fill="#24272B"/></marker>
|
||||
<marker id="arrow-muted" markerWidth="10" markerHeight="8" refX="9" refY="4" orient="auto" markerUnits="strokeWidth"><path d="M 0 0 L 10 4 L 0 8 z" fill="#667085"/></marker>
|
||||
<marker id="arrow-blue" markerWidth="10" markerHeight="8" refX="9" refY="4" orient="auto" markerUnits="strokeWidth"><path d="M 0 0 L 10 4 L 0 8 z" fill="#1677FF"/></marker>
|
||||
<marker id="arrow-green" markerWidth="10" markerHeight="8" refX="9" refY="4" orient="auto" markerUnits="strokeWidth"><path d="M 0 0 L 10 4 L 0 8 z" fill="#00A86B"/></marker>
|
||||
<marker id="arrow-red" markerWidth="10" markerHeight="8" refX="9" refY="4" orient="auto" markerUnits="strokeWidth"><path d="M 0 0 L 10 4 L 0 8 z" fill="#D94B4B"/></marker>
|
||||
<marker id="arrow-purple" markerWidth="10" markerHeight="8" refX="9" refY="4" orient="auto" markerUnits="strokeWidth"><path d="M 0 0 L 10 4 L 0 8 z" fill="#7556D8"/></marker>
|
||||
<marker id="arrow-white" markerWidth="10" markerHeight="8" refX="9" refY="4" orient="auto" markerUnits="strokeWidth"><path d="M 0 0 L 10 4 L 0 8 z" fill="#FFFFFF"/></marker>
|
||||
<marker id="arrow-yellow" markerWidth="10" markerHeight="8" refX="9" refY="4" orient="auto" markerUnits="strokeWidth"><path d="M 0 0 L 10 4 L 0 8 z" fill="#E7C51D"/></marker>
|
||||
</defs>
|
||||
<rect width="1440" height="720" fill="#FFFFFF"/>
|
||||
<rect x="35" y="35" width="170" height="58" fill="#FAFAFA" stroke="#535A63" stroke-width="1.4" rx="8" />
|
||||
<text x="120" y="69" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="15" font-weight="700" fill="#24272B" text-anchor="middle">Client</text>
|
||||
<path d="M 120 93 L 120 670" fill="none" stroke="#B3B8BF" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="6 6" />
|
||||
<rect x="305" y="35" width="170" height="58" fill="#FAFAFA" stroke="#535A63" stroke-width="1.4" rx="8" />
|
||||
<text x="390" y="69" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="15" font-weight="700" fill="#24272B" text-anchor="middle">Checkout API</text>
|
||||
<path d="M 390 93 L 390 670" fill="none" stroke="#B3B8BF" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="6 6" />
|
||||
<rect x="595" y="35" width="170" height="58" fill="#FAFAFA" stroke="#535A63" stroke-width="1.4" rx="8" />
|
||||
<text x="680" y="69" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="15" font-weight="700" fill="#24272B" text-anchor="middle">Payment Provider</text>
|
||||
<path d="M 680 93 L 680 670" fill="none" stroke="#B3B8BF" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="6 6" />
|
||||
<rect x="885" y="35" width="170" height="58" fill="#FAFAFA" stroke="#535A63" stroke-width="1.4" rx="8" />
|
||||
<text x="970" y="69" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="15" font-weight="700" fill="#24272B" text-anchor="middle">Order DB</text>
|
||||
<path d="M 970 93 L 970 670" fill="none" stroke="#B3B8BF" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="6 6" />
|
||||
<rect x="1155" y="35" width="170" height="58" fill="#FAFAFA" stroke="#535A63" stroke-width="1.4" rx="8" />
|
||||
<text x="1240" y="69" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="15" font-weight="700" fill="#24272B" text-anchor="middle">Event Bus</text>
|
||||
<path d="M 1240 93 L 1240 670" fill="none" stroke="#B3B8BF" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="6 6" />
|
||||
<rect x="380" y="135" width="20" height="405" fill="#EAF3FF" stroke="#1677FF" stroke-width="1.3" rx="2" />
|
||||
<rect x="670" y="205" width="20" height="105" fill="#F3F3F3" stroke="#6D737B" stroke-width="1.2" rx="2" />
|
||||
<path d="M 120 150 L 380 150" fill="none" stroke="#1677FF" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#arrow-blue)" />
|
||||
<circle cx="35" cy="150" r="14" fill="#1677FF" />
|
||||
<text x="35" y="155" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="11" font-weight="700" fill="#FFFFFF" text-anchor="middle">1</text>
|
||||
<rect x="195.4" y="126" width="109.3" height="21" fill="#FFFFFF" rx="2" />
|
||||
<text x="250" y="140" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="12" font-weight="600" fill="#1677FF" text-anchor="middle">POST /payments</text>
|
||||
<path d="M 400 220 L 670 220" fill="none" stroke="#24272B" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#arrow-ink)" />
|
||||
<circle cx="35" cy="220" r="14" fill="#24272B" />
|
||||
<text x="35" y="225" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="11" font-weight="700" fill="#FFFFFF" text-anchor="middle">2</text>
|
||||
<rect x="456.6" y="196" width="156.8" height="21" fill="#FFFFFF" rx="2" />
|
||||
<text x="535" y="210" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="12" font-weight="600" fill="#24272B" text-anchor="middle">authorize(payment key)</text>
|
||||
<path d="M 670 290 L 400 290" fill="none" stroke="#24272B" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="6 5" marker-end="url(#arrow-ink)" />
|
||||
<circle cx="35" cy="290" r="14" fill="#24272B" />
|
||||
<text x="35" y="295" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="11" font-weight="700" fill="#FFFFFF" text-anchor="middle">3</text>
|
||||
<rect x="501.6" y="266" width="66.8" height="21" fill="#FFFFFF" rx="2" />
|
||||
<text x="535" y="280" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="12" font-weight="600" fill="#24272B" text-anchor="middle">approved</text>
|
||||
<path d="M 400 380 L 970 380" fill="none" stroke="#1677FF" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#arrow-blue)" />
|
||||
<circle cx="35" cy="380" r="14" fill="#1677FF" />
|
||||
<text x="35" y="385" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="11" font-weight="700" fill="#FFFFFF" text-anchor="middle">4</text>
|
||||
<rect x="609" y="356" width="152" height="21" fill="#FFFFFF" rx="2" />
|
||||
<text x="685" y="370" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="12" font-weight="600" fill="#1677FF" text-anchor="middle">UPDATE status = PAID</text>
|
||||
<path d="M 400 470 L 1240 470" fill="none" stroke="#7556D8" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#arrow-purple)" />
|
||||
<circle cx="35" cy="470" r="14" fill="#7556D8" />
|
||||
<text x="35" y="475" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="11" font-weight="700" fill="#FFFFFF" text-anchor="middle">5</text>
|
||||
<rect x="735" y="446" width="170.0" height="21" fill="#FFFFFF" rx="2" />
|
||||
<text x="820" y="460" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="12" font-weight="600" fill="#7556D8" text-anchor="middle">publish payment.approved</text>
|
||||
<path d="M 380 590 L 120 590" fill="none" stroke="#24272B" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="6 5" marker-end="url(#arrow-ink)" />
|
||||
<circle cx="35" cy="590" r="14" fill="#24272B" />
|
||||
<text x="35" y="595" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="11" font-weight="700" fill="#FFFFFF" text-anchor="middle">6</text>
|
||||
<rect x="207.2" y="566" width="85.5" height="21" fill="#FFFFFF" rx="2" />
|
||||
<text x="250" y="580" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="12" font-weight="600" fill="#24272B" text-anchor="middle">201 Created</text>
|
||||
<rect x="955" y="360" width="30" height="55" fill="#EAF3FF" stroke="#1677FF" stroke-width="1.2" rx="2" />
|
||||
<rect x="1225" y="450" width="30" height="55" fill="#F1EDFF" stroke="#7556D8" stroke-width="1.2" rx="2" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.6 KiB |
Reference in New Issue
Block a user