{
"id": "sequence-diagram-idempotent-payment-authorization",
"schemaVersion": 2,
"title": {
"ja": "決済の重複与信を防ぐ — 同一キーなら保存済み結果を返す",
"en": "Prevent Duplicate Authorizations — Reuse the Stored Result for an Idempotency Key"
},
"summary": {
"ja": "縦の時間順に参加者間の要求・応答を結び、与信前のキー照会と登録済み分岐の戻り先を示すシーケンス図",
"en": "A sequence diagram connects requests and responses across participants in time order, showing the pre-authorization key check and duplicate branch."
},
"capturedAt": "2026-09-25",
"categories": [
"presentation"
],
"tags": [
"data-viz",
"minimal"
],
"useCases": [
"architecture",
"requirements"
],
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "flow",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 100,
"right": 140,
"bottom": 100,
"left": 140
}
},
"type": {
"title": {
"size": 46,
"weight": 700,
"tracking": "0.01em"
},
"subtitle": {
"size": 22,
"weight": 500
},
"axisTitle": {
"size": 22,
"weight": 700
},
"participant": {
"size": 20,
"weight": 700
},
"message": {
"size": 20,
"weight": 500
},
"condition": {
"size": 20,
"weight": 700
},
"takeaway": {
"size": 28,
"weight": 500
},
"note": {
"size": 20,
"weight": 400
}
},
"colors": {
"ground": "#FFFFFF",
"surface": "#F4F6F9",
"ink": "#131820",
"muted": "#667183",
"accent": "#1F5FA8",
"rule": "#DBE1E9",
"series": [
"#1C8C79",
"#A85A2E"
]
},
"rules": [
{
"ja": "縦の位置はメッセージの順番、縦破線は参加者の継続時間を示す",
"en": "Vertical position is message order; dashed lifelines show each participant's span."
},
{
"ja": "実線右向きは要求、破線左向きは応答を示す",
"en": "Solid rightward arrows are requests; dashed leftward arrows are responses."
},
{
"ja": "同一キー登録済みの分岐では保存結果を返し、決済ゲートウェイを再呼出ししない",
"en": "When the same key is already registered, return the stored result without calling the payment gateway again."
},
{
"ja": "架空シーケンス。実装時は並行要求の排他と失敗再試行の規則を定義する",
"en": "Fictional sequence. Define concurrency control and retry rules for failures in a real implementation."
}
],
"cover": "https://design-vault.pages.dev/_astro/cover.Bx5TWlZb.png",
"assets": [],
"shortlist": false,
"status": "published",
"relations": {
"similar": []
},
"license": "Original",
"publishedAt": null,
"reproduction": {
"spec": {
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "flow",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 100,
"right": 140,
"bottom": 100,
"left": 140
}
},
"type": {
"title": {
"size": 46,
"weight": 700,
"tracking": "0.01em"
},
"subtitle": {
"size": 22,
"weight": 500
},
"axisTitle": {
"size": 22,
"weight": 700
},
"participant": {
"size": 20,
"weight": 700
},
"message": {
"size": 20,
"weight": 500
},
"condition": {
"size": 20,
"weight": 700
},
"takeaway": {
"size": 28,
"weight": 500
},
"note": {
"size": 20,
"weight": 400
}
},
"colors": {
"ground": "#FFFFFF",
"surface": "#F4F6F9",
"ink": "#131820",
"muted": "#667183",
"accent": "#1F5FA8",
"rule": "#DBE1E9",
"series": [
"#1C8C79",
"#A85A2E"
]
},
"rules": [
"Vertical position is message order; dashed lifelines show each participant's span.",
"Solid rightward arrows are requests; dashed leftward arrows are responses.",
"When the same key is already registered, return the stored result without calling the payment gateway again.",
"Fictional sequence. Define concurrency control and retry rules for failures in a real implementation."
]
},
"prompt": {
"ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 100 右 140 下 100 左 140\n\n## 文字（版面 1920px に対する px）\ntitle 46px / 700 / 字間 0.01em\nsubtitle 22px / 500\naxisTitle 22px / 700\nparticipant 20px / 700\nmessage 20px / 500\ncondition 20px / 700\ntakeaway 28px / 500\nnote 20px / 400\n\n## 配色\n地 #FFFFFF / 面 #F4F6F9 / 文字 #131820 / 補助 #667183 / 強調 #1F5FA8 / 罫 #DBE1E9 / #1C8C79 / #A85A2E\n\n## 外すと崩れる点\n- 縦の位置はメッセージの順番、縦破線は参加者の継続時間を示す\n- 実線右向きは要求、破線左向きは応答を示す\n- 同一キー登録済みの分岐では保存結果を返し、決済ゲートウェイを再呼出ししない\n- 架空シーケンス。実装時は並行要求の排他と失敗再試行の規則を定義する\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/sequence-diagram-idempotent-payment-authorization/pattern.html",
"en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 100 right 140 bottom 100 left 140\n\n## Type (px against a 1920px canvas)\ntitle 46px / 700 / tracking 0.01em\nsubtitle 22px / 500\naxisTitle 22px / 700\nparticipant 20px / 700\nmessage 20px / 500\ncondition 20px / 700\ntakeaway 28px / 500\nnote 20px / 400\n\n## Colour\nGround #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9 / #1C8C79 / #A85A2E\n\n## Constraints — dropping these breaks it\n- Vertical position is message order; dashed lifelines show each participant's span.\n- Solid rightward arrows are requests; dashed leftward arrows are responses.\n- When the same key is already registered, return the stored result without calling the payment gateway again.\n- Fictional sequence. Define concurrency control and retry rules for failures in a real implementation.\n\nReplace the content with [your content]. Keep the measurements and colours as given.\nFor an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/sequence-diagram-idempotent-payment-authorization/pattern.html."
},
"code": {
"html": "決済の重複与信を防ぐ — 同一キーなら保存済み結果を返す