40 lines
2.8 KiB
XML
40 lines
2.8 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 420" role="img" aria-labelledby="title desc">
|
|
<title id="title">Диагностика рассинхрона UI и API</title>
|
|
<desc id="desc">Четыре наблюдения сравниваются последовательно: намерение, запрос, ответ и вход в рендер. Несовпадение ведёт к проверке соответствующей границы.</desc>
|
|
<rect width="720" height="420" rx="24" fill="#f7f3ea"/>
|
|
<g font-family="Arial, sans-serif" fill="#202124">
|
|
<text x="42" y="48" font-size="24" font-weight="700">Сравниваем соседние границы</text>
|
|
<text x="42" y="76" font-size="16" fill="#5f6368">intent → request → response → render input</text>
|
|
<g font-size="17" font-weight="700">
|
|
<circle cx="120" cy="184" r="54" fill="#d7e8ff" stroke="#2b5f9e" stroke-width="3"/>
|
|
<circle cx="290" cy="184" r="54" fill="#d7e8ff" stroke="#2b5f9e" stroke-width="3"/>
|
|
<circle cx="460" cy="184" r="54" fill="#d9f1e1" stroke="#2e7d51" stroke-width="3"/>
|
|
<circle cx="630" cy="184" r="54" fill="#d9f1e1" stroke="#2e7d51" stroke-width="3"/>
|
|
<text x="120" y="178" text-anchor="middle">intent</text>
|
|
<text x="120" y="201" text-anchor="middle">action</text>
|
|
<text x="290" y="178" text-anchor="middle">request</text>
|
|
<text x="290" y="201" text-anchor="middle">HTTP</text>
|
|
<text x="460" y="178" text-anchor="middle">response</text>
|
|
<text x="460" y="201" text-anchor="middle">contract</text>
|
|
<text x="630" y="178" text-anchor="middle">render</text>
|
|
<text x="630" y="201" text-anchor="middle">input</text>
|
|
</g>
|
|
<g stroke="#2b5f9e" stroke-width="3" fill="none">
|
|
<path d="M174 184h62m170 0h62m170 0h2"/>
|
|
<path d="m226 177 10 7-10 7m170-7 10 7-10 7m164-7 10 7-10 7"/>
|
|
</g>
|
|
<g font-size="16">
|
|
<rect x="104" y="292" width="152" height="58" rx="12" fill="#fff" stroke="#b7b7b7"/>
|
|
<rect x="284" y="292" width="152" height="58" rx="12" fill="#fff" stroke="#b7b7b7"/>
|
|
<rect x="464" y="292" width="152" height="58" rx="12" fill="#ffe2dc" stroke="#b84b3b" stroke-width="2"/>
|
|
<text x="180" y="317" text-anchor="middle">mapping формы</text>
|
|
<text x="180" y="338" text-anchor="middle">и безопасный input</text>
|
|
<text x="360" y="317" text-anchor="middle">route, status,</text>
|
|
<text x="360" y="338" text-anchor="middle">Content-Type</text>
|
|
<text x="540" y="317" text-anchor="middle">stale state,</text>
|
|
<text x="540" y="338" text-anchor="middle">selector или race</text>
|
|
</g>
|
|
<text x="42" y="392" font-size="15" fill="#5f6368">Снимок одного слоя не доказывает причину расхождения в другом.</text>
|
|
</g>
|
|
</svg>
|