1920 × 1080 Seen as a design The artboard itself, drawn live — sharp at any zoom Structure, margins and columns overlaid
1920 × 1080 Seen as a design The artboard itself, drawn live — sharp at any zoom Structure, margins and columns overlaid
Copy and paste, or save a file and hand it over. For a machine with no network, one “Everything” file is enough.
Everything in this panel, including the contents behind each URL, in one Markdown file — Large, so it goes as a file (copy is for 32 KB and under)
Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 82 right 120 bottom 82 left 120 ## Type (px against a 1920px canvas) title 44px / 700 / tracking 0.01em subtitle 22px / 400 groupLabel 20px / 500 nodeLabel 23px / 700 singleLabel 24px / 700 singleMeta 20px / 500 edgeLabel 20px / 500 legendTitle 22px / 700 legendBody 20px / 400 conclusion 26px / 500 ## Colour Ground #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9 / #2F6FB5 / #A85A2E / #1C8C79 ## Constraints — dropping these breaks it - Every element in a series path is required; failure of one prevents that path from completing. - Read each parallel group as able to serve through any one path. Shared failure causes and failover behavior require separate analysis. - Emphasize the single queue shared by every route. Counting only downstream replicas overstates end-to-end availability. - This is a fictional topology; it does not claim availability or independent-failure probabilities. Replace the content with [your content]. Keep the measurements and colours as given. For an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/reliability-block-single-queue/pattern.html.
/ai/designs/reliability-block-single-queue.json
format: slide-16x9
density: medium
layout:
kind: flow
canvas:
w: 1920
h: 1080
margin:
top: 82
right: 120
bottom: 82
left: 120
type:
title:
size: 44
weight: 700
tracking: 0.01em
subtitle:
size: 22
weight: 400
groupLabel:
size: 20
weight: 500
nodeLabel:
size: 23
weight: 700
singleLabel:
size: 24
weight: 700
singleMeta:
size: 20
weight: 500
edgeLabel:
size: 20
weight: 500
legendTitle:
size: 22
weight: 700
legendBody:
size: 20
weight: 400
conclusion:
size: 26
weight: 500
colors:
ground: "#FFFFFF"
surface: "#F4F6F9"
ink: "#131820"
muted: "#667183"
accent: "#1F5FA8"
rule: "#DBE1E9"
series:
- "#2F6FB5"
- "#A85A2E"
- "#1C8C79"
rules:
- Every element in a series path is required; failure of one prevents that path from completing.
- Read each parallel group as able to serve through any one path. Shared failure causes and failover behavior require separate analysis.
- Emphasize the single queue shared by every route. Counting only downstream replicas overstates end-to-end availability.
- This is a fictional topology; it does not claim availability or independent-failure probabilities.{
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "flow",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 82,
"right": 120,
"bottom": 82,
"left": 120
}
},
"type": {
"title": {
"size": 44,
"weight": 700,
"tracking": "0.01em"
},
"subtitle": {
"size": 22,
"weight": 400
},
"groupLabel": {
"size": 20,
"weight": 500
},
"nodeLabel": {
"size": 23,
"weight": 700
},
"singleLabel": {
"size": 24,
"weight": 700
},
"singleMeta": {
"size": 20,
"weight": 500
},
"edgeLabel": {
"size": 20,
"weight": 500
},
"legendTitle": {
"size": 22,
"weight": 700
},
"legendBody": {
"size": 20,
"weight": 400
},
"conclusion": {
"size": 26,
"weight": 500
}
},
"colors": {
"ground": "#FFFFFF",
"surface": "#F4F6F9",
"ink": "#131820",
"muted": "#667183",
"accent": "#1F5FA8",
"rule": "#DBE1E9",
"series": [
"#2F6FB5",
"#A85A2E",
"#1C8C79"
]
},
"rules": [
"Every element in a series path is required; failure of one prevents that path from completing.",
"Read each parallel group as able to serve through any one path. Shared failure causes and failover behavior require separate analysis.",
"Emphasize the single queue shared by every route. Counting only downstream replicas overstates end-to-end availability.",
"This is a fictional topology; it does not claim availability or independent-failure probabilities."
]
} /designs/reliability-block-single-queue/pattern.html — The artboard itself, font subset included — open it and this picture draws.
<!doctype html>
<meta charset="utf-8">
<title>並列化した入口とワーカー — 単一キューが全経路を止める</title>
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080" data-artboard="true">
<style>
:root {
--ground: #FFFFFF; --surface: #F4F6F9; --ink: #131820;
--muted: #667183; --accent: #1F5FA8; --rule: #DBE1E9;
--series-1: #2F6FB5; --series-2: #A85A2E; --series-3: #1C8C79;
--plot-color-1: #FBF3EF;
}
svg { font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif; }
.ground { fill: var(--ground); }
.ink { fill: var(--ink); }
.muted { fill: var(--muted); }
.accent { fill: var(--accent); }
.rule { stroke: var(--rule); }
.title { font-size: 44px; font-weight: 700; letter-spacing: .01em; }
.subtitle { font-size: 22px; font-weight: 400; }
.group-label { font-size: 20px; font-weight: 500; }
.node-label { font-size: 23px; font-weight: 700; }
.node-meta { font-size: 20px; font-weight: 400; }
.single-label { font-size: 24px; font-weight: 700; }
.single-meta { font-size: 20px; font-weight: 500; }
.edge-label { font-size: 20px; font-weight: 500; }
.legend-title { font-size: 22px; font-weight: 700; }
.legend-body { font-size: 20px; font-weight: 400; }
.conclusion { font-size: 26px; font-weight: 500; }
.parallel-frame { fill: var(--ground); stroke: var(--rule); stroke-width: 2; }
.parallel-node { fill: var(--surface); stroke: var(--series-1); stroke-width: 2; }
.critical-node { fill: var(--plot-color-1); stroke: var(--series-2); stroke-width: 3; }
.edge { fill: none; stroke: var(--muted); stroke-width: 3; }
.arrow { fill: var(--muted); }
</style>
<defs>
<marker id="flow-arrowhead-main" markerWidth="12" markerHeight="12" refX="9" refY="6" orient="auto" markerUnits="userSpaceOnUse">
<path class="arrow" d="M1 1 L10 6 L1 11 z"/>
</marker>
</defs>
<rect class="ground" x="0" y="0" width="1920" height="1080"/>
<g transform="translate(120 82)" data-content="true">
<rect x="0" y="0" width="1680" height="916" fill="transparent"/>
<text class="title ink" data-type="title" x="0" y="56">並列化した入口とワーカー — 単一キューが全経路を止める</text>
<text class="subtitle muted" data-type="subtitle" x="0" y="106">架空のイベント処理基盤 / 直列の工程はすべて必要、並列の組はどれか1系統で通過</text>
<line class="rule" x1="0" y1="144" x2="1680" y2="144" stroke-width="2"/>
<text class="group-label muted" data-type="groupLabel" x="342" y="225" text-anchor="middle">入口プール · いずれか1台</text>
<text class="group-label muted" x="1066" y="225" text-anchor="middle">ワーカープール · いずれか1台</text>
<text class="group-label muted" x="0" y="505">イベント</text>
<!-- Event enters through either gateway. The bus makes the parallel choice explicit. -->
<path class="edge" d="M90 515 H162 M162 424 V606 M162 424 H220 M162 606 H220"/>
<path class="edge" d="M162 424 H220" marker-end="url(#flow-arrowhead-main)"/>
<path class="edge" d="M162 606 H220" marker-end="url(#flow-arrowhead-main)"/>
<rect class="parallel-frame" x="220" y="354" width="244" height="330" rx="14"/>
<rect class="parallel-node" x="247" y="386" width="190" height="76" rx="10"/>
<rect class="parallel-node" x="247" y="568" width="190" height="76" rx="10"/>
<text class="node-label ink" data-type="nodeLabel" x="342" y="432" text-anchor="middle">入口 A</text>
<text class="node-label ink" x="342" y="614" text-anchor="middle">入口 B</text>
<text class="edge-label accent" data-type="edgeLabel" x="342" y="500" text-anchor="middle">OR</text>
<!-- Both entry nodes converge on the same single queue. -->
<path class="edge" d="M437 424 H490 M437 606 H490 M490 424 V606 M490 515 H558"/>
<path class="edge" d="M490 515 H558" marker-end="url(#flow-arrowhead-main)"/>
<rect class="critical-node" x="558" y="465" width="200" height="100" rx="12"/>
<text class="single-label ink" data-type="singleLabel" x="658" y="510" text-anchor="middle">キュー</text>
<text class="single-meta" data-type="singleMeta" x="658" y="542" text-anchor="middle" fill="var(--series-2)">1系統 · 単一障害点</text>
<!-- A queued event can be processed by either stateless worker. -->
<path class="edge" d="M758 515 H808 M808 424 V606 M808 424 H858 M808 606 H858"/>
<path class="edge" d="M808 424 H858" marker-end="url(#flow-arrowhead-main)"/>
<path class="edge" d="M808 606 H858" marker-end="url(#flow-arrowhead-main)"/>
<rect class="parallel-frame" x="858" y="354" width="244" height="330" rx="14"/>
<rect class="parallel-node" x="885" y="386" width="190" height="76" rx="10"/>
<rect class="parallel-node" x="885" y="568" width="190" height="76" rx="10"/>
<text class="node-label ink" x="980" y="432" text-anchor="middle">ワーカー A</text>
<text class="node-label ink" x="980" y="614" text-anchor="middle">ワーカー B</text>
<text class="edge-label accent" x="980" y="500" text-anchor="middle">OR</text>
<!-- Either worker can complete the example job. -->
<path class="edge" d="M1075 424 H1140 M1075 606 H1140 M1140 424 V606 M1140 515 H1210"/>
<path class="edge" d="M1140 515 H1210" marker-end="url(#flow-arrowhead-main)"/>
<rect class="parallel-frame" x="1210" y="354" width="244" height="330" rx="14"/>
<rect class="parallel-node" x="1237" y="386" width="190" height="76" rx="10"/>
<rect class="parallel-node" x="1237" y="568" width="190" height="76" rx="10"/>
<text class="node-label ink" x="1332" y="432" text-anchor="middle">結果先 A</text>
<text class="node-label ink" x="1332" y="614" text-anchor="middle">結果先 B</text>
<text class="edge-label accent" x="1332" y="500" text-anchor="middle">OR</text>
<path class="edge" d="M1427 424 H1468 M1427 606 H1468 M1468 424 V606 M1468 515 H1530"/>
<path class="edge" d="M1468 515 H1530" marker-end="url(#flow-arrowhead-main)"/>
<rect x="1530" y="478" width="132" height="74" rx="37" fill="var(--accent)"/>
<text x="1596" y="524" text-anchor="middle" fill="var(--ground)" font-size="22" font-weight="700">応答</text>
<line class="rule" x1="0" y1="754" x2="1680" y2="754" stroke-width="2"/>
<text class="legend-title ink" data-type="legendTitle" x="0" y="802">読み方</text>
<rect class="critical-node" x="122" y="778" width="26" height="26" rx="5"/>
<text class="legend-body ink" data-type="legendBody" x="164" y="800">直列の1ブロックが停止すると、後段へ進めない</text>
<rect class="parallel-node" x="752" y="778" width="26" height="26" rx="5"/>
<text class="legend-body ink" x="794" y="800">並列の組はどれか1系統で処理を続けられる想定</text>
<text class="conclusion ink" data-type="conclusion" x="0" y="877">入口とワーカーを二重化しても、共有キューが止まればイベント処理は止まる。</text>
</g>
</svg>
/designs/reliability-block-single-queue/font.css — Not in Everything
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
* font Zen Kaku Gothic New 400;500;700
* chars 100 (0490a7f865e3a504)
*
* pattern.html の文字だけを含む部分集合。描画時に外部へ取りに行かないよう同梱する。
* 版の文字を変えたら取り直すこと — 忘れると足りない字が豆腐になる。
* その取り忘れは pattern-entries.test.ts が上の指紋で検出する。
*/
@font-face {
font-family: 'Zen Kaku Gothic New';
font-style: normal;
font-weight: 400;
font-display: block;
src: url(./font-0.woff2) format('woff2');
unicode-range: U+2f, U+31, U+41-42, U+4f, U+52, U+b7, U+2014, U+3001-3002, U+3044, U+304b-304c, U+3051-3052, U+3057-305a, U+305f-3060, U+3066-306a, U+306e-3071, U+3078-307a, U+307e-307f, U+3081-3082, U+3089, U+308b-308c, U+3092, U+3099-309a, U+30a4, U+30ab-30b0, U+30c3, U+30c8-30c9, U+30d5-30da, U+30e5, U+30eb, U+30ed, U+30ef, U+30f3, U+30f7, U+30fc, U+4e00, U+4e26, U+4e8c, U+505c, U+5148, U+5165, U+5168, U+5171, U+51e6, U+5217, U+5316, U+5358, U+53e3, U+53f0, U+57fa, U+5b9a, U+5bb3, U+5de5, U+5f8c, U+5fc5, U+5fdc, U+60f3, U+65b9, U+6709, U+679c, U+67b6, U+6b62, U+6bb5, U+70b9, U+7406, U+76e4, U+76f4, U+7a0b, U+7a7a, U+7b54, U+7cfb, U+7d44, U+7d4c, U+7d50, U+7d71, U+7d9a, U+8981, U+8aad, U+8def, U+901a, U+9032, U+904e, U+91cd, U+969c;
}
@font-face {
font-family: 'Zen Kaku Gothic New';
font-style: normal;
font-weight: 500;
font-display: block;
src: url(./font-1.woff2) format('woff2');
unicode-range: U+2f, U+31, U+41-42, U+4f, U+52, U+b7, U+2014, U+3001-3002, U+3044, U+304b-304c, U+3051-3052, U+3057-305a, U+305f-3060, U+3066-306a, U+306e-3071, U+3078-307a, U+307e-307f, U+3081-3082, U+3089, U+308b-308c, U+3092, U+3099-309a, U+30a4, U+30ab-30b0, U+30c3, U+30c8-30c9, U+30d5-30da, U+30e5, U+30eb, U+30ed, U+30ef, U+30f3, U+30f7, U+30fc, U+4e00, U+4e26, U+4e8c, U+505c, U+5148, U+5165, U+5168, U+5171, U+51e6, U+5217, U+5316, U+5358, U+53e3, U+53f0, U+57fa, U+5b9a, U+5bb3, U+5de5, U+5f8c, U+5fc5, U+5fdc, U+60f3, U+65b9, U+6709, U+679c, U+67b6, U+6b62, U+6bb5, U+70b9, U+7406, U+76e4, U+76f4, U+7a0b, U+7a7a, U+7b54, U+7cfb, U+7d44, U+7d4c, U+7d50, U+7d71, U+7d9a, U+8981, U+8aad, U+8def, U+901a, U+9032, U+904e, U+91cd, U+969c;
}
@font-face {
font-family: 'Zen Kaku Gothic New';
font-style: normal;
font-weight: 700;
font-display: block;
src: url(./font-2.woff2) format('woff2');
unicode-range: U+2f, U+31, U+41-42, U+4f, U+52, U+b7, U+2014, U+3001-3002, U+3044, U+304b-304c, U+3051-3052, U+3057-305a, U+305f-3060, U+3066-306a, U+306e-3071, U+3078-307a, U+307e-307f, U+3081-3082, U+3089, U+308b-308c, U+3092, U+3099-309a, U+30a4, U+30ab-30b0, U+30c3, U+30c8-30c9, U+30d5-30da, U+30e5, U+30eb, U+30ed, U+30ef, U+30f3, U+30f7, U+30fc, U+4e00, U+4e26, U+4e8c, U+505c, U+5148, U+5165, U+5168, U+5171, U+51e6, U+5217, U+5316, U+5358, U+53e3, U+53f0, U+57fa, U+5b9a, U+5bb3, U+5de5, U+5f8c, U+5fc5, U+5fdc, U+60f3, U+65b9, U+6709, U+679c, U+67b6, U+6b62, U+6bb5, U+70b9, U+7406, U+76e4, U+76f4, U+7a0b, U+7a7a, U+7b54, U+7cfb, U+7d44, U+7d4c, U+7d50, U+7d71, U+7d9a, U+8981, U+8aad, U+8def, U+901a, U+9032, U+904e, U+91cd, U+969c;
}
この図はイベント処理の「成功経路」をブロックで表したもの。入口・ワーカー・結果先はそれぞれ どれか1台で処理できる並列群だが、すべての要求は同じキューを通る。
そのため入口やワーカーを増やしても、キューが止まれば後段へ進めない。現実の可用性を計算する には共通電源・ネットワーク・ソフトウェア障害や切替動作も確認する必要があり、この図は構造上の 単一障害点を読むための架空例に限る。