init: technical-visualization-haness 하네스 설계
This commit is contained in:
DongHyeonka
@@ -0,0 +1,5 @@
|
||||
# 대체 설명
|
||||
|
||||
사용자 쿼리를 파싱한 뒤 시간 범위와 필터를 기준으로 세 개의 저장소 샤드에 fan-out하는 데이터 조회 구조.
|
||||
|
||||
전역 제목·부제·footer는 보이는 캔버스에 포함하지 않는다. 접근성용 SVG `<title>`과 `<desc>`는 보이지 않는 메타데이터로 유지한다.
|
||||
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"id": "metrics-query-fanout",
|
||||
"visual_grammar": "query_fanout",
|
||||
"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": [
|
||||
"query annotation",
|
||||
"fan-out junction",
|
||||
"repeated shard group"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
# Context
|
||||
|
||||
독자가 확인해야 할 질문: **범위 쿼리가 어떤 저장소 샤드로 분산되는가?**
|
||||
|
||||
이 fixture는 문서 본문이 이미 문제와 결론을 설명한다고 가정한다. 따라서 SVG에는 다이어그램 관계를 해독하는 데 필요한 기술 레이블만 둔다.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
@@ -0,0 +1,99 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="560" viewBox="0 0 1440 560" role="img" aria-labelledby="title desc">
|
||||
<title id="title">Query fan-out</title>
|
||||
<desc id="desc">사용자 쿼리를 파싱한 뒤 시간 범위와 필터를 기준으로 세 개의 저장소 샤드에 fan-out하는 데이터 조회 구조.</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="560" fill="#FFFFFF"/>
|
||||
<circle cx="55" cy="245" r="13.2" fill="none" stroke="#4B5563" stroke-width="2.2" />
|
||||
<path d="M 27.5 297.8 C 30.8 269.2, 79.2 269.2, 82.5 297.8" fill="none" stroke="#4B5563" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M 27.5 297.8 L 82.5 297.8" fill="none" stroke="#4B5563" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<rect x="45" y="35" width="475" height="105" fill="#FFFFFF" stroke="#6B7280" stroke-width="1.5" rx="16" />
|
||||
<polygon points="82,140 105,140 91,185" fill="#FFFFFF" stroke="#6B7280" stroke-width="1.3" />
|
||||
<text x="78" y="69" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="13" font-weight="500" fill="#667085" text-anchor="start">사용자 범위 쿼리</text>
|
||||
<text x="78" y="97" font-family='"Noto Sans Mono CJK KR", "D2Coding", monospace' font-size="16" font-weight="600" fill="#24272B" text-anchor="start">rate(http_requests_total{container="search-api"}[5m])</text>
|
||||
<text x="78" y="122" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="12" font-weight="450" fill="#667085" text-anchor="start">2026/06/22 15:00 – 15:10</text>
|
||||
<path d="M 92 245 L 260 245" fill="none" stroke="#24272B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#arrow-ink)" />
|
||||
<rect x="260" y="205" width="180" height="80" fill="#E9F8F0" stroke="#00A86B" stroke-width="2" rx="8" />
|
||||
<text x="350" y="250" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="17" font-weight="700" fill="#087A4E" text-anchor="middle">vmselect</text>
|
||||
<rect x="300" y="325" width="100" height="44" fill="#FFFFFF" stroke="#A7ADB5" stroke-width="1.2" rx="8" />
|
||||
<text x="350" y="352" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="12" font-weight="700" fill="#24272B" text-anchor="middle">query parser</text>
|
||||
<path d="M 350 285 L 350 325" fill="none" stroke="#A7ADB5" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M 440 245 L 690 245" fill="none" stroke="#24272B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<rect x="448.7" y="218" width="232.5" height="21" fill="#FFFFFF" rx="2" />
|
||||
<text x="565" y="232" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="12" font-weight="600" fill="#24272B" text-anchor="middle">FILTERS & TIMERANGE(start, end)</text>
|
||||
<circle cx="690" cy="245" r="4" fill="#24272B" />
|
||||
<rect x="820" y="35" width="550" height="135" fill="#DDF1FF" stroke="#2585C7" stroke-width="1.8" rx="10" />
|
||||
<rect x="845" y="72" width="58" height="33" fill="#0B659D" />
|
||||
<ellipse cx="874" cy="72" rx="29" ry="11" fill="#0B659D" stroke="#0B659D" stroke-width="1.6" />
|
||||
<path d="M 845 72 L 845 105" fill="none" stroke="#0B659D" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M 903 72 L 903 105" fill="none" stroke="#0B659D" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M 845 105 C 856.6 118, 891.4 118, 903 105" fill="none" stroke="#0B659D" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<text x="874" y="91.5" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="16" font-weight="700" fill="#24272B" text-anchor="middle"></text>
|
||||
<rect x="930" y="70" width="105" height="55" fill="#BFE7FF" stroke="#1778B7" stroke-width="1.5" rx="8" />
|
||||
<text x="982.5" y="102.5" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="15" font-weight="700" fill="#24272B" text-anchor="middle">IndexDB</text>
|
||||
<rect x="1080" y="70" width="100" height="55" fill="#BFE7FF" stroke="#1778B7" stroke-width="1.5" rx="8" />
|
||||
<text x="1130" y="102.5" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="15" font-weight="700" fill="#24272B" text-anchor="middle">TSID</text>
|
||||
<rect x="1230" y="70" width="100" height="55" fill="#BFE7FF" stroke="#1778B7" stroke-width="1.5" rx="8" />
|
||||
<text x="1280" y="102.5" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="15" font-weight="700" fill="#24272B" text-anchor="middle">Data</text>
|
||||
<path d="M 903 97 L 930 97" fill="none" stroke="#24272B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#arrow-ink)" />
|
||||
<path d="M 1035 97 L 1080 97" fill="none" stroke="#24272B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#arrow-ink)" />
|
||||
<path d="M 1180 97 L 1230 97" fill="none" stroke="#24272B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#arrow-ink)" />
|
||||
<text x="830" y="154" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="13" font-weight="600" fill="#174D6B" text-anchor="start">vmstorage A</text>
|
||||
<path d="M 690 245 L 820 102" fill="none" stroke="#24272B" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#arrow-ink)" />
|
||||
<rect x="820" y="205" width="550" height="135" fill="#DDF1FF" stroke="#2585C7" stroke-width="1.8" rx="10" />
|
||||
<rect x="845" y="242" width="58" height="33" fill="#0B659D" />
|
||||
<ellipse cx="874" cy="242" rx="29" ry="11" fill="#0B659D" stroke="#0B659D" stroke-width="1.6" />
|
||||
<path d="M 845 242 L 845 275" fill="none" stroke="#0B659D" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M 903 242 L 903 275" fill="none" stroke="#0B659D" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M 845 275 C 856.6 288, 891.4 288, 903 275" fill="none" stroke="#0B659D" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<text x="874" y="261.5" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="16" font-weight="700" fill="#24272B" text-anchor="middle"></text>
|
||||
<rect x="930" y="240" width="105" height="55" fill="#BFE7FF" stroke="#1778B7" stroke-width="1.5" rx="8" />
|
||||
<text x="982.5" y="272.5" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="15" font-weight="700" fill="#24272B" text-anchor="middle">IndexDB</text>
|
||||
<rect x="1080" y="240" width="100" height="55" fill="#BFE7FF" stroke="#1778B7" stroke-width="1.5" rx="8" />
|
||||
<text x="1130" y="272.5" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="15" font-weight="700" fill="#24272B" text-anchor="middle">TSID</text>
|
||||
<rect x="1230" y="240" width="100" height="55" fill="#BFE7FF" stroke="#1778B7" stroke-width="1.5" rx="8" />
|
||||
<text x="1280" y="272.5" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="15" font-weight="700" fill="#24272B" text-anchor="middle">Data</text>
|
||||
<path d="M 903 267 L 930 267" fill="none" stroke="#24272B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#arrow-ink)" />
|
||||
<path d="M 1035 267 L 1080 267" fill="none" stroke="#24272B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#arrow-ink)" />
|
||||
<path d="M 1180 267 L 1230 267" fill="none" stroke="#24272B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#arrow-ink)" />
|
||||
<text x="830" y="324" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="13" font-weight="600" fill="#174D6B" text-anchor="start">vmstorage B</text>
|
||||
<path d="M 690 245 L 820 272" fill="none" stroke="#24272B" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#arrow-ink)" />
|
||||
<rect x="820" y="375" width="550" height="135" fill="#DDF1FF" stroke="#2585C7" stroke-width="1.8" rx="10" />
|
||||
<rect x="845" y="412" width="58" height="33" fill="#0B659D" />
|
||||
<ellipse cx="874" cy="412" rx="29" ry="11" fill="#0B659D" stroke="#0B659D" stroke-width="1.6" />
|
||||
<path d="M 845 412 L 845 445" fill="none" stroke="#0B659D" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M 903 412 L 903 445" fill="none" stroke="#0B659D" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M 845 445 C 856.6 458, 891.4 458, 903 445" fill="none" stroke="#0B659D" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<text x="874" y="431.5" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="16" font-weight="700" fill="#24272B" text-anchor="middle"></text>
|
||||
<rect x="930" y="410" width="105" height="55" fill="#BFE7FF" stroke="#1778B7" stroke-width="1.5" rx="8" />
|
||||
<text x="982.5" y="442.5" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="15" font-weight="700" fill="#24272B" text-anchor="middle">IndexDB</text>
|
||||
<rect x="1080" y="410" width="100" height="55" fill="#BFE7FF" stroke="#1778B7" stroke-width="1.5" rx="8" />
|
||||
<text x="1130" y="442.5" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="15" font-weight="700" fill="#24272B" text-anchor="middle">TSID</text>
|
||||
<rect x="1230" y="410" width="100" height="55" fill="#BFE7FF" stroke="#1778B7" stroke-width="1.5" rx="8" />
|
||||
<text x="1280" y="442.5" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="15" font-weight="700" fill="#24272B" text-anchor="middle">Data</text>
|
||||
<path d="M 903 437 L 930 437" fill="none" stroke="#24272B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#arrow-ink)" />
|
||||
<path d="M 1035 437 L 1080 437" fill="none" stroke="#24272B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#arrow-ink)" />
|
||||
<path d="M 1180 437 L 1230 437" fill="none" stroke="#24272B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#arrow-ink)" />
|
||||
<text x="830" y="494" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="13" font-weight="600" fill="#174D6B" text-anchor="start">vmstorage C</text>
|
||||
<path d="M 690 245 L 820 442" fill="none" stroke="#24272B" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" marker-end="url(#arrow-ink)" />
|
||||
<rect x="220" y="415" width="380" height="110" fill="#FAFAFA" stroke="#E3E5E8" stroke-width="1" rx="6" />
|
||||
<text x="245" y="445" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="10" font-weight="700" fill="#858B94" text-anchor="start">FUNC</text>
|
||||
<text x="245" y="475" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="13" font-weight="600" fill="#24272B" text-anchor="start">rate</text>
|
||||
<text x="355" y="445" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="10" font-weight="700" fill="#858B94" text-anchor="start">FILTERS</text>
|
||||
<text x="355" y="475" font-family='"Noto Sans Mono CJK KR", "D2Coding", monospace' font-size="11" font-weight="500" fill="#24272B" text-anchor="start">
|
||||
<tspan x="355" dy="0">__name__="http_requests_total"</tspan>
|
||||
<tspan x="355" dy="15.9">container="search-api"</tspan>
|
||||
</text>
|
||||
<text x="545" y="445" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="10" font-weight="700" fill="#858B94" text-anchor="start">WINDOW</text>
|
||||
<text x="545" y="475" font-family='"Noto Sans CJK KR", "Apple SD Gothic Neo", sans-serif' font-size="13" font-weight="600" fill="#24272B" text-anchor="start">5m</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 14 KiB |
Reference in New Issue
Block a user