From 6dd3d0718c4dd2a0849b8f151a198f46892eb18e Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 27 Oct 2024 19:09:03 +0900
Subject: [PATCH] =?UTF-8?q?=E7=94=BB=E5=83=8F=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/http/overview/http-layers.svg | 878 ++++++++++++++++++++-
 1 file changed, 874 insertions(+), 4 deletions(-)

diff --git a/files/ja/web/http/overview/http-layers.svg b/files/ja/web/http/overview/http-layers.svg
index ca0b6e0ce3836e..9638302c0752cf 100644
--- a/files/ja/web/http/overview/http-layers.svg
+++ b/files/ja/web/http/overview/http-layers.svg
@@ -1,4 +1,874 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!-- Do not edit this file with editors other than draw.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="599px" height="338px" viewBox="-0.5 -0.5 599 338" content="&lt;mxfile host=&quot;Electron&quot; agent=&quot;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/24.7.17 Chrome/128.0.6613.36 Electron/32.0.1 Safari/537.36&quot; scale=&quot;1&quot; border=&quot;0&quot; version=&quot;24.7.17&quot;&gt;&#10;  &lt;diagram name=&quot;Page-1&quot; id=&quot;efa7a0a1-bf9b-a30e-e6df-94a7791c09e9&quot;&gt;&#10;    &lt;mxGraphModel dx=&quot;1100&quot; dy=&quot;894&quot; grid=&quot;1&quot; gridSize=&quot;10&quot; guides=&quot;1&quot; tooltips=&quot;1&quot; connect=&quot;1&quot; arrows=&quot;1&quot; fold=&quot;1&quot; page=&quot;1&quot; pageScale=&quot;1&quot; pageWidth=&quot;826&quot; pageHeight=&quot;1169&quot; background=&quot;#FFFFFF&quot; math=&quot;0&quot; shadow=&quot;0&quot;&gt;&#10;      &lt;root&gt;&#10;        &lt;mxCell id=&quot;0&quot; /&gt;&#10;        &lt;mxCell id=&quot;1&quot; parent=&quot;0&quot; /&gt;&#10;        &lt;mxCell id=&quot;oMBeN4IvPGKr6_LYo95F-5&quot; value=&quot;HTML&quot; style=&quot;text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#fff2cc;strokeColor=#d6b656;arcSize=3;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;120&quot; y=&quot;40&quot; width=&quot;120&quot; height=&quot;160&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;itvtTAMVvJ-Au7iy1GT8-2&quot; value=&quot;CSS&quot; style=&quot;text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#ffe6cc;strokeColor=#d79b00;arcSize=3;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;240&quot; y=&quot;40&quot; width=&quot;120&quot; height=&quot;160&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;itvtTAMVvJ-Au7iy1GT8-3&quot; value=&quot;Web API&quot; style=&quot;text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#f8cecc;strokeColor=#b85450;arcSize=3;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;360&quot; y=&quot;40&quot; width=&quot;120&quot; height=&quot;80&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;itvtTAMVvJ-Au7iy1GT8-4&quot; value=&quot;JavaScript&quot; style=&quot;text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#d5e8d4;strokeColor=#82b366;arcSize=3;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;360&quot; y=&quot;120&quot; width=&quot;120&quot; height=&quot;80&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;itvtTAMVvJ-Au7iy1GT8-6&quot; value=&quot;DNS&quot; style=&quot;text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#cfe3f5;fontColor=#333333;strokeColor=default;arcSize=3;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;120&quot; y=&quot;240&quot; width=&quot;120&quot; height=&quot;40&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;itvtTAMVvJ-Au7iy1GT8-7&quot; value=&quot;UDP&quot; style=&quot;text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#cfe3f5;fontColor=#333333;strokeColor=default;arcSize=3;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;120&quot; y=&quot;280&quot; width=&quot;120&quot; height=&quot;40&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;itvtTAMVvJ-Au7iy1GT8-8&quot; value=&quot;TCP&quot; style=&quot;text;html=1;align=center;verticalAlign=bottom;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#cfe3f5;fontColor=#333333;strokeColor=default;arcSize=3;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;labelPosition=center;verticalLabelPosition=middle;horizontal=1;strokeWidth=1;perimeterSpacing=0;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;240&quot; y=&quot;240&quot; width=&quot;240&quot; height=&quot;80&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;itvtTAMVvJ-Au7iy1GT8-9&quot; value=&quot;IP&quot; style=&quot;text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#e1d5e7;strokeColor=#9673a6;arcSize=3;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;120&quot; y=&quot;320&quot; width=&quot;360&quot; height=&quot;40&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;itvtTAMVvJ-Au7iy1GT8-10&quot; value=&quot;TLS&quot; style=&quot;text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#cfe3f5;fontColor=#333333;strokeColor=default;arcSize=3;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;360&quot; y=&quot;240&quot; width=&quot;120&quot; height=&quot;40&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;itvtTAMVvJ-Au7iy1GT8-12&quot; value=&quot;&amp;lt;div&amp;gt;クライアント&amp;lt;br&amp;gt;&amp;lt;/div&amp;gt;&quot; style=&quot;text;html=1;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontFamily=Helvetica;fontSize=12;fontColor=default;labelBackgroundColor=none;strokeWidth=1;dashed=1;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;520&quot; y=&quot;125.5&quot; width=&quot;90&quot; height=&quot;30&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;itvtTAMVvJ-Au7iy1GT8-13&quot; value=&quot;&quot; style=&quot;shape=curlyBracket;whiteSpace=wrap;html=1;rounded=1;labelPosition=left;verticalLabelPosition=middle;align=right;verticalAlign=middle;strokeColor=default;arcSize=3;fontFamily=Helvetica;fontSize=12;fontColor=default;labelBackgroundColor=none;fillColor=default;rotation=-180;strokeWidth=1;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;493&quot; y=&quot;42.5&quot; width=&quot;14&quot; height=&quot;196&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;itvtTAMVvJ-Au7iy1GT8-15&quot; style=&quot;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=0.1;entryY=0.5;entryDx=0;entryDy=0;entryPerimeter=0;endArrow=none;endFill=0;strokeWidth=1;align=left;verticalAlign=middle;&quot; parent=&quot;1&quot; source=&quot;itvtTAMVvJ-Au7iy1GT8-12&quot; target=&quot;itvtTAMVvJ-Au7iy1GT8-13&quot; edge=&quot;1&quot;&gt;&#10;          &lt;mxGeometry relative=&quot;1&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;itvtTAMVvJ-Au7iy1GT8-5&quot; value=&quot;HTTP&quot; style=&quot;text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;arcSize=3;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#666666;strokeWidth=1;perimeterSpacing=0;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;120&quot; y=&quot;200&quot; width=&quot;360&quot; height=&quot;40&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;itvtTAMVvJ-Au7iy1GT8-29&quot; value=&quot;&amp;lt;div&amp;gt;アプリケーション/&amp;lt;br&amp;gt;トランスポート&amp;lt;/div&amp;gt;&quot; style=&quot;text;html=1;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontFamily=Helvetica;fontSize=12;fontColor=default;labelBackgroundColor=none;strokeWidth=1;dashed=1;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;518&quot; y=&quot;265.63&quot; width=&quot;112&quot; height=&quot;30&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;itvtTAMVvJ-Au7iy1GT8-30&quot; value=&quot;&quot; style=&quot;shape=curlyBracket;whiteSpace=wrap;html=1;rounded=1;labelPosition=left;verticalLabelPosition=middle;align=left;verticalAlign=middle;strokeColor=default;arcSize=3;fontFamily=Helvetica;fontSize=12;fontColor=default;labelBackgroundColor=none;fillColor=default;rotation=-180;strokeWidth=1;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;492&quot; y=&quot;242.38&quot; width=&quot;14&quot; height=&quot;76.5&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;itvtTAMVvJ-Au7iy1GT8-31&quot; style=&quot;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=0.1;entryY=0.5;entryDx=0;entryDy=0;entryPerimeter=0;endArrow=none;endFill=0;strokeWidth=1;align=left;verticalAlign=middle;&quot; parent=&quot;1&quot; source=&quot;itvtTAMVvJ-Au7iy1GT8-29&quot; target=&quot;itvtTAMVvJ-Au7iy1GT8-30&quot; edge=&quot;1&quot;&gt;&#10;          &lt;mxGeometry relative=&quot;1&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;itvtTAMVvJ-Au7iy1GT8-32&quot; value=&quot;&amp;lt;div&amp;gt;IP レイヤー&amp;lt;br&amp;gt;&amp;lt;/div&amp;gt;&quot; style=&quot;text;html=1;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontFamily=Helvetica;fontSize=12;fontColor=default;labelBackgroundColor=none;strokeWidth=1;dashed=1;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;516&quot; y=&quot;325.5&quot; width=&quot;74&quot; height=&quot;30&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;itvtTAMVvJ-Au7iy1GT8-33&quot; value=&quot;&quot; style=&quot;shape=curlyBracket;whiteSpace=wrap;html=1;rounded=1;labelPosition=left;verticalLabelPosition=middle;align=left;verticalAlign=middle;strokeColor=default;arcSize=3;fontFamily=Helvetica;fontSize=12;fontColor=default;labelBackgroundColor=none;fillColor=default;rotation=-180;strokeWidth=1;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;492&quot; y=&quot;322.5&quot; width=&quot;14&quot; height=&quot;36&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;itvtTAMVvJ-Au7iy1GT8-34&quot; style=&quot;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=0.1;entryY=0.5;entryDx=0;entryDy=0;entryPerimeter=0;endArrow=none;endFill=0;strokeWidth=1;align=left;verticalAlign=middle;&quot; parent=&quot;1&quot; source=&quot;itvtTAMVvJ-Au7iy1GT8-32&quot; target=&quot;itvtTAMVvJ-Au7iy1GT8-33&quot; edge=&quot;1&quot;&gt;&#10;          &lt;mxGeometry relative=&quot;1&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;itvtTAMVvJ-Au7iy1GT8-35&quot; value=&quot;ウェブ&quot; style=&quot;text;html=1;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontFamily=Helvetica;fontSize=12;fontColor=default;labelBackgroundColor=none;strokeWidth=1;dashed=1;&quot; parent=&quot;1&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry x=&quot;50&quot; y=&quot;180&quot; width=&quot;60&quot; height=&quot;30&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;        &lt;mxCell id=&quot;itvtTAMVvJ-Au7iy1GT8-36&quot; value=&quot;&quot; style=&quot;endArrow=block;startArrow=block;html=1;rounded=0;startFill=1;endFill=1;&quot; parent=&quot;1&quot; edge=&quot;1&quot;&gt;&#10;          &lt;mxGeometry width=&quot;100&quot; height=&quot;100&quot; relative=&quot;1&quot; as=&quot;geometry&quot;&gt;&#10;            &lt;mxPoint x=&quot;40&quot; y=&quot;360&quot; as=&quot;sourcePoint&quot; /&gt;&#10;            &lt;mxPoint x=&quot;40&quot; y=&quot;40&quot; as=&quot;targetPoint&quot; /&gt;&#10;          &lt;/mxGeometry&gt;&#10;        &lt;/mxCell&gt;&#10;      &lt;/root&gt;&#10;    &lt;/mxGraphModel&gt;&#10;  &lt;/diagram&gt;&#10;&lt;/mxfile&gt;&#10;" style="background-color: rgb(255, 255, 255);"><defs/><rect fill="#FFFFFF" width="100%" height="100%" x="0" y="0"/><g><g data-cell-id="0"><g data-cell-id="1"><g data-cell-id="oMBeN4IvPGKr6_LYo95F-5"><g><rect x="88" y="8" width="120" height="160" rx="3.6" ry="3.6" fill="#fff2cc" stroke="#d6b656" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 114px; height: 1px; padding-top: 88px; margin-left: 91px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 16px; font-family: Monospace; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">HTML</div></div></div></foreignObject><text x="148" y="93" fill="rgb(0, 0, 0)" font-family="&quot;Monospace&quot;" font-size="16px" text-anchor="middle">HTML</text></switch></g></g></g><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-2"><g><rect x="208" y="8" width="120" height="160" rx="3.6" ry="3.6" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 114px; height: 1px; padding-top: 88px; margin-left: 211px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 16px; font-family: Monospace; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">CSS</div></div></div></foreignObject><text x="268" y="93" fill="rgb(0, 0, 0)" font-family="&quot;Monospace&quot;" font-size="16px" text-anchor="middle">CSS</text></switch></g></g></g><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-3"><g><rect x="328" y="8" width="120" height="80" rx="2.4" ry="2.4" fill="#f8cecc" stroke="#b85450" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 114px; height: 1px; padding-top: 48px; margin-left: 331px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 16px; font-family: Monospace; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Web API</div></div></div></foreignObject><text x="388" y="53" fill="rgb(0, 0, 0)" font-family="&quot;Monospace&quot;" font-size="16px" text-anchor="middle">Web API</text></switch></g></g></g><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-4"><g><rect x="328" y="88" width="120" height="80" rx="2.4" ry="2.4" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 114px; height: 1px; padding-top: 128px; margin-left: 331px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 16px; font-family: Monospace; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">JavaScript</div></div></div></foreignObject><text x="388" y="133" fill="rgb(0, 0, 0)" font-family="&quot;Monospace&quot;" font-size="16px" text-anchor="middle">JavaScript</text></switch></g></g></g><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-6"><g><rect x="88" y="208" width="120" height="40" rx="1.2" ry="1.2" fill="#cfe3f5" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 114px; height: 1px; padding-top: 228px; margin-left: 91px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 16px; font-family: Monospace; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">DNS</div></div></div></foreignObject><text x="148" y="233" fill="#333333" font-family="&quot;Monospace&quot;" font-size="16px" text-anchor="middle">DNS</text></switch></g></g></g><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-7"><g><rect x="88" y="248" width="120" height="40" rx="1.2" ry="1.2" fill="#cfe3f5" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 114px; height: 1px; padding-top: 268px; margin-left: 91px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 16px; font-family: Monospace; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">UDP</div></div></div></foreignObject><text x="148" y="273" fill="#333333" font-family="&quot;Monospace&quot;" font-size="16px" text-anchor="middle">UDP</text></switch></g></g></g><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-8"><g><rect x="208" y="208" width="240" height="80" rx="2.4" ry="2.4" fill="#cfe3f5" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 234px; height: 1px; padding-top: 283px; margin-left: 211px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 16px; font-family: Monospace; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">TCP</div></div></div></foreignObject><text x="328" y="283" fill="#333333" font-family="&quot;Monospace&quot;" font-size="16px" text-anchor="middle">TCP</text></switch></g></g></g><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-9"><g><rect x="88" y="288" width="360" height="40" rx="1.2" ry="1.2" fill="#e1d5e7" stroke="#9673a6" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 354px; height: 1px; padding-top: 308px; margin-left: 91px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 16px; font-family: Monospace; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">IP</div></div></div></foreignObject><text x="268" y="313" fill="rgb(0, 0, 0)" font-family="&quot;Monospace&quot;" font-size="16px" text-anchor="middle">IP</text></switch></g></g></g><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-10"><g><rect x="328" y="208" width="120" height="40" rx="1.2" ry="1.2" fill="#cfe3f5" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 114px; height: 1px; padding-top: 228px; margin-left: 331px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 16px; font-family: Monospace; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">TLS</div></div></div></foreignObject><text x="388" y="233" fill="#333333" font-family="&quot;Monospace&quot;" font-size="16px" text-anchor="middle">TLS</text></switch></g></g></g><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-12"><g><rect x="488" y="93.5" width="90" height="30" fill="none" stroke="none" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 88px; height: 1px; padding-top: 109px; margin-left: 490px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><div>クライアント<br /></div></div></div></div></foreignObject><text x="490" y="112" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px">クライアント&#xa;</text></switch></g></g></g><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-13"><g><path d="M 475 10.5 L 469.5 10.5 Q 468 10.5 468 12 L 468 107 Q 468 108.5 466.5 108.5 L 462.5 108.5 Q 461 108.5 462.5 108.5 L 466.5 108.5 Q 468 108.5 468 110 L 468 205 Q 468 206.5 469.5 206.5 L 475 206.5" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" transform="rotate(-180,468,108.5)" pointer-events="all"/></g></g><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-15"><g><path d="M 488 108.5 L 473.6 108.5" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/></g></g><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-5"><g><rect x="88" y="168" width="360" height="40" rx="1.2" ry="1.2" fill="#f5f5f5" stroke="#666666" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 354px; height: 1px; padding-top: 188px; margin-left: 91px;"><div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 16px; font-family: Monospace; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">HTTP</div></div></div></foreignObject><text x="268" y="193" fill="#333333" font-family="&quot;Monospace&quot;" font-size="16px" text-anchor="middle">HTTP</text></switch></g></g></g><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-29"><g><rect x="486" y="233.63" width="112" height="30" fill="none" stroke="none" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 110px; height: 1px; padding-top: 249px; margin-left: 488px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><div>アプリケーション/<br />トランスポート</div></div></div></div></foreignObject><text x="488" y="252" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px">アプリケーション/...</text></switch></g></g></g><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-30"><g><path d="M 474 210.38 L 468.5 210.38 Q 467 210.38 467 211.88 L 467 247.13 Q 467 248.63 465.5 248.63 L 461.5 248.63 Q 460 248.63 461.5 248.63 L 465.5 248.63 Q 467 248.63 467 250.13 L 467 285.38 Q 467 286.88 468.5 286.88 L 474 286.88" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" transform="rotate(-180,467,248.63)" pointer-events="all"/></g></g><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-31"><g><path d="M 486 248.63 L 472.6 248.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/></g></g><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-32"><g><rect x="484" y="293.5" width="74" height="30" fill="none" stroke="none" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 72px; height: 1px; padding-top: 309px; margin-left: 486px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><div>IP レイヤー<br /></div></div></div></div></foreignObject><text x="486" y="312" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px">IP レイヤー&#xa;</text></switch></g></g></g><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-33"><g><path d="M 474 290.5 L 468.5 290.5 Q 467 290.5 467 292 L 467 307 Q 467 308.5 465.5 308.5 L 461.5 308.5 Q 460 308.5 461.5 308.5 L 465.5 308.5 Q 467 308.5 467 310 L 467 325 Q 467 326.5 468.5 326.5 L 474 326.5" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" transform="rotate(-180,467,308.5)" pointer-events="all"/></g></g><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-34"><g><path d="M 484 308.5 L 472.6 308.5" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/></g></g><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-35"><g><rect x="18" y="148" width="60" height="30" fill="none" stroke="none" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 58px; height: 1px; padding-top: 163px; margin-left: 20px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">ウェブ</div></div></div></foreignObject><text x="20" y="167" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px">ウェブ</text></switch></g></g></g><g data-cell-id="itvtTAMVvJ-Au7iy1GT8-36"><g><path d="M 8 319.88 L 8 16.12" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 8 326.88 L 4.5 319.88 L 11.5 319.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 8 9.12 L 11.5 16.12 L 4.5 16.12 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g></g></g></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.drawio.com/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Text is not SVG - cannot display</text></a></switch></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   width="599px"
+   height="338px"
+   viewBox="-0.5 -0.5 599 338"
+   style="background-color: rgb(255, 255, 255);"
+   id="svg75"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:xhtml="http://www.w3.org/1999/xhtml">
+  <defs
+     id="defs1" />
+  <rect
+     fill="#FFFFFF"
+     width="100%"
+     height="100%"
+     x="0"
+     y="0"
+     id="rect1" />
+  <g
+     id="g75">
+    <g
+       data-cell-id="0"
+       id="g74">
+      <g
+         data-cell-id="1"
+         id="g73">
+        <g
+           data-cell-id="oMBeN4IvPGKr6_LYo95F-5"
+           id="g5">
+          <g
+             id="g2">
+            <rect
+               x="88"
+               y="8"
+               width="120"
+               height="160"
+               rx="3.6"
+               ry="3.6"
+               fill="#fff2cc"
+               stroke="#d6b656"
+               pointer-events="all"
+               id="rect2" />
+          </g>
+          <g
+             id="g4">
+            <g
+               transform="translate(-0.5 -0.5)"
+               id="g3">
+              <switch
+                 id="switch2">
+                <foreignObject
+                   pointer-events="none"
+                   width="100%"
+                   height="100%"
+                   requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
+                   style="overflow: visible; text-align: left;">
+                  <xhtml:div
+                     style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 114px; height: 1px; padding-top: 88px; margin-left: 91px;">
+                    <xhtml:div
+                       data-drawio-colors="color: rgb(0, 0, 0); "
+                       style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                      <xhtml:div
+                         style="display: inline-block; font-size: 16px; font-family: Monospace; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">HTML</xhtml:div>
+                    </xhtml:div>
+                  </xhtml:div>
+                </foreignObject>
+                <text
+                   x="148"
+                   y="93"
+                   fill="rgb(0, 0, 0)"
+                   font-family="&quot;Monospace&quot;"
+                   font-size="16px"
+                   text-anchor="middle"
+                   id="text2">HTML</text>
+              </switch>
+            </g>
+          </g>
+        </g>
+        <g
+           data-cell-id="itvtTAMVvJ-Au7iy1GT8-2"
+           id="g9">
+          <g
+             id="g6">
+            <rect
+               x="208"
+               y="8"
+               width="120"
+               height="160"
+               rx="3.6"
+               ry="3.6"
+               fill="#ffe6cc"
+               stroke="#d79b00"
+               pointer-events="all"
+               id="rect5" />
+          </g>
+          <g
+             id="g8">
+            <g
+               transform="translate(-0.5 -0.5)"
+               id="g7">
+              <switch
+                 id="switch6">
+                <foreignObject
+                   pointer-events="none"
+                   width="100%"
+                   height="100%"
+                   requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
+                   style="overflow: visible; text-align: left;">
+                  <xhtml:div
+                     style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 114px; height: 1px; padding-top: 88px; margin-left: 211px;">
+                    <xhtml:div
+                       data-drawio-colors="color: rgb(0, 0, 0); "
+                       style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                      <xhtml:div
+                         style="display: inline-block; font-size: 16px; font-family: Monospace; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">CSS</xhtml:div>
+                    </xhtml:div>
+                  </xhtml:div>
+                </foreignObject>
+                <text
+                   x="268"
+                   y="93"
+                   fill="rgb(0, 0, 0)"
+                   font-family="&quot;Monospace&quot;"
+                   font-size="16px"
+                   text-anchor="middle"
+                   id="text6">CSS</text>
+              </switch>
+            </g>
+          </g>
+        </g>
+        <g
+           data-cell-id="itvtTAMVvJ-Au7iy1GT8-3"
+           id="g13">
+          <g
+             id="g10">
+            <rect
+               x="328"
+               y="8"
+               width="120"
+               height="80"
+               rx="2.4"
+               ry="2.4"
+               fill="#f8cecc"
+               stroke="#b85450"
+               pointer-events="all"
+               id="rect9" />
+          </g>
+          <g
+             id="g12">
+            <g
+               transform="translate(-0.5 -0.5)"
+               id="g11">
+              <switch
+                 id="switch10">
+                <foreignObject
+                   pointer-events="none"
+                   width="100%"
+                   height="100%"
+                   requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
+                   style="overflow: visible; text-align: left;">
+                  <xhtml:div
+                     style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 114px; height: 1px; padding-top: 48px; margin-left: 331px;">
+                    <xhtml:div
+                       data-drawio-colors="color: rgb(0, 0, 0); "
+                       style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                      <xhtml:div
+                         style="display: inline-block; font-size: 16px; font-family: Monospace; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Web API</xhtml:div>
+                    </xhtml:div>
+                  </xhtml:div>
+                </foreignObject>
+                <text
+                   x="388"
+                   y="53"
+                   fill="rgb(0, 0, 0)"
+                   font-family="&quot;Monospace&quot;"
+                   font-size="16px"
+                   text-anchor="middle"
+                   id="text10">Web API</text>
+              </switch>
+            </g>
+          </g>
+        </g>
+        <g
+           data-cell-id="itvtTAMVvJ-Au7iy1GT8-4"
+           id="g17">
+          <g
+             id="g14">
+            <rect
+               x="328"
+               y="88"
+               width="120"
+               height="80"
+               rx="2.4"
+               ry="2.4"
+               fill="#d5e8d4"
+               stroke="#82b366"
+               pointer-events="all"
+               id="rect13" />
+          </g>
+          <g
+             id="g16">
+            <g
+               transform="translate(-0.5 -0.5)"
+               id="g15">
+              <switch
+                 id="switch14">
+                <foreignObject
+                   pointer-events="none"
+                   width="100%"
+                   height="100%"
+                   requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
+                   style="overflow: visible; text-align: left;">
+                  <xhtml:div
+                     style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 114px; height: 1px; padding-top: 128px; margin-left: 331px;">
+                    <xhtml:div
+                       data-drawio-colors="color: rgb(0, 0, 0); "
+                       style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                      <xhtml:div
+                         style="display: inline-block; font-size: 16px; font-family: Monospace; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">JavaScript</xhtml:div>
+                    </xhtml:div>
+                  </xhtml:div>
+                </foreignObject>
+                <text
+                   x="388"
+                   y="133"
+                   fill="rgb(0, 0, 0)"
+                   font-family="&quot;Monospace&quot;"
+                   font-size="16px"
+                   text-anchor="middle"
+                   id="text14">JavaScript</text>
+              </switch>
+            </g>
+          </g>
+        </g>
+        <g
+           data-cell-id="itvtTAMVvJ-Au7iy1GT8-6"
+           id="g21">
+          <g
+             id="g18">
+            <rect
+               x="88"
+               y="208"
+               width="120"
+               height="40"
+               rx="1.2"
+               ry="1.2"
+               fill="#cfe3f5"
+               stroke="rgb(0, 0, 0)"
+               pointer-events="all"
+               id="rect17" />
+          </g>
+          <g
+             id="g20">
+            <g
+               transform="translate(-0.5 -0.5)"
+               id="g19">
+              <switch
+                 id="switch18">
+                <foreignObject
+                   pointer-events="none"
+                   width="100%"
+                   height="100%"
+                   requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
+                   style="overflow: visible; text-align: left;">
+                  <xhtml:div
+                     style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 114px; height: 1px; padding-top: 228px; margin-left: 91px;">
+                    <xhtml:div
+                       data-drawio-colors="color: #333333; "
+                       style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                      <xhtml:div
+                         style="display: inline-block; font-size: 16px; font-family: Monospace; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">DNS</xhtml:div>
+                    </xhtml:div>
+                  </xhtml:div>
+                </foreignObject>
+                <text
+                   x="148"
+                   y="233"
+                   fill="#333333"
+                   font-family="&quot;Monospace&quot;"
+                   font-size="16px"
+                   text-anchor="middle"
+                   id="text18">DNS</text>
+              </switch>
+            </g>
+          </g>
+        </g>
+        <g
+           data-cell-id="itvtTAMVvJ-Au7iy1GT8-7"
+           id="g25">
+          <g
+             id="g22">
+            <rect
+               x="88"
+               y="248"
+               width="120"
+               height="40"
+               rx="1.2"
+               ry="1.2"
+               fill="#cfe3f5"
+               stroke="rgb(0, 0, 0)"
+               pointer-events="all"
+               id="rect21" />
+          </g>
+          <g
+             id="g24">
+            <g
+               transform="translate(-0.5 -0.5)"
+               id="g23">
+              <switch
+                 id="switch22">
+                <foreignObject
+                   pointer-events="none"
+                   width="100%"
+                   height="100%"
+                   requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
+                   style="overflow: visible; text-align: left;">
+                  <xhtml:div
+                     style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 114px; height: 1px; padding-top: 268px; margin-left: 91px;">
+                    <xhtml:div
+                       data-drawio-colors="color: #333333; "
+                       style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                      <xhtml:div
+                         style="display: inline-block; font-size: 16px; font-family: Monospace; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">UDP</xhtml:div>
+                    </xhtml:div>
+                  </xhtml:div>
+                </foreignObject>
+                <text
+                   x="148"
+                   y="273"
+                   fill="#333333"
+                   font-family="&quot;Monospace&quot;"
+                   font-size="16px"
+                   text-anchor="middle"
+                   id="text22">UDP</text>
+              </switch>
+            </g>
+          </g>
+        </g>
+        <g
+           data-cell-id="itvtTAMVvJ-Au7iy1GT8-8"
+           id="g29">
+          <g
+             id="g26">
+            <rect
+               x="208"
+               y="208"
+               width="240"
+               height="80"
+               rx="2.4"
+               ry="2.4"
+               fill="#cfe3f5"
+               stroke="rgb(0, 0, 0)"
+               pointer-events="all"
+               id="rect25" />
+          </g>
+          <g
+             id="g28">
+            <g
+               transform="translate(-0.5 -0.5)"
+               id="g27">
+              <switch
+                 id="switch26">
+                <foreignObject
+                   pointer-events="none"
+                   width="100%"
+                   height="100%"
+                   requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
+                   style="overflow: visible; text-align: left;">
+                  <xhtml:div
+                     style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 234px; height: 1px; padding-top: 283px; margin-left: 211px;">
+                    <xhtml:div
+                       data-drawio-colors="color: #333333; "
+                       style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                      <xhtml:div
+                         style="display: inline-block; font-size: 16px; font-family: Monospace; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">TCP</xhtml:div>
+                    </xhtml:div>
+                  </xhtml:div>
+                </foreignObject>
+                <text
+                   x="328"
+                   y="283"
+                   fill="#333333"
+                   font-family="&quot;Monospace&quot;"
+                   font-size="16px"
+                   text-anchor="middle"
+                   id="text26">TCP</text>
+              </switch>
+            </g>
+          </g>
+        </g>
+        <g
+           data-cell-id="itvtTAMVvJ-Au7iy1GT8-9"
+           id="g33">
+          <g
+             id="g30">
+            <rect
+               x="88"
+               y="288"
+               width="360"
+               height="40"
+               rx="1.2"
+               ry="1.2"
+               fill="#e1d5e7"
+               stroke="#9673a6"
+               pointer-events="all"
+               id="rect29" />
+          </g>
+          <g
+             id="g32">
+            <g
+               transform="translate(-0.5 -0.5)"
+               id="g31">
+              <switch
+                 id="switch30">
+                <foreignObject
+                   pointer-events="none"
+                   width="100%"
+                   height="100%"
+                   requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
+                   style="overflow: visible; text-align: left;">
+                  <xhtml:div
+                     style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 354px; height: 1px; padding-top: 308px; margin-left: 91px;">
+                    <xhtml:div
+                       data-drawio-colors="color: rgb(0, 0, 0); "
+                       style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                      <xhtml:div
+                         style="display: inline-block; font-size: 16px; font-family: Monospace; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">IP</xhtml:div>
+                    </xhtml:div>
+                  </xhtml:div>
+                </foreignObject>
+                <text
+                   x="268"
+                   y="313"
+                   fill="rgb(0, 0, 0)"
+                   font-family="&quot;Monospace&quot;"
+                   font-size="16px"
+                   text-anchor="middle"
+                   id="text30">IP</text>
+              </switch>
+            </g>
+          </g>
+        </g>
+        <g
+           data-cell-id="itvtTAMVvJ-Au7iy1GT8-10"
+           id="g37">
+          <g
+             id="g34">
+            <rect
+               x="328"
+               y="208"
+               width="120"
+               height="40"
+               rx="1.2"
+               ry="1.2"
+               fill="#cfe3f5"
+               stroke="rgb(0, 0, 0)"
+               pointer-events="all"
+               id="rect33" />
+          </g>
+          <g
+             id="g36">
+            <g
+               transform="translate(-0.5 -0.5)"
+               id="g35">
+              <switch
+                 id="switch34">
+                <foreignObject
+                   pointer-events="none"
+                   width="100%"
+                   height="100%"
+                   requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
+                   style="overflow: visible; text-align: left;">
+                  <xhtml:div
+                     style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 114px; height: 1px; padding-top: 228px; margin-left: 331px;">
+                    <xhtml:div
+                       data-drawio-colors="color: #333333; "
+                       style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                      <xhtml:div
+                         style="display: inline-block; font-size: 16px; font-family: Monospace; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">TLS</xhtml:div>
+                    </xhtml:div>
+                  </xhtml:div>
+                </foreignObject>
+                <text
+                   x="388"
+                   y="233"
+                   fill="#333333"
+                   font-family="&quot;Monospace&quot;"
+                   font-size="16px"
+                   text-anchor="middle"
+                   id="text34">TLS</text>
+              </switch>
+            </g>
+          </g>
+        </g>
+        <g
+           data-cell-id="itvtTAMVvJ-Au7iy1GT8-12"
+           id="g41">
+          <g
+             id="g38">
+            <rect
+               x="488"
+               y="93.5"
+               width="90"
+               height="30"
+               fill="none"
+               stroke="none"
+               pointer-events="all"
+               id="rect37" />
+          </g>
+          <g
+             id="g40">
+            <g
+               transform="translate(-0.5 -0.5)"
+               id="g39">
+              <switch
+                 id="switch38">
+                <foreignObject
+                   pointer-events="none"
+                   width="100%"
+                   height="100%"
+                   requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
+                   style="overflow: visible; text-align: left;">
+                  <xhtml:div
+                     style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 88px; height: 1px; padding-top: 109px; margin-left: 490px;">
+                    <xhtml:div
+                       data-drawio-colors="color: rgb(0, 0, 0); "
+                       style="box-sizing: border-box; font-size: 0px; text-align: left;">
+                      <xhtml:div
+                         style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                        <xhtml:div>クライアント<xhtml:br />
+</xhtml:div>
+                      </xhtml:div>
+                    </xhtml:div>
+                  </xhtml:div>
+                </foreignObject>
+                <text
+                   x="490"
+                   y="112"
+                   fill="rgb(0, 0, 0)"
+                   font-family="&quot;Helvetica&quot;"
+                   font-size="12px"
+                   id="text38">クライアント
+</text>
+              </switch>
+            </g>
+          </g>
+        </g>
+        <g
+           data-cell-id="itvtTAMVvJ-Au7iy1GT8-13"
+           id="g43">
+          <g
+             id="g42">
+            <path
+               d="M 475 10.5 L 469.5 10.5 Q 468 10.5 468 12 L 468 107 Q 468 108.5 466.5 108.5 L 462.5 108.5 Q 461 108.5 462.5 108.5 L 466.5 108.5 Q 468 108.5 468 110 L 468 205 Q 468 206.5 469.5 206.5 L 475 206.5"
+               fill="none"
+               stroke="rgb(0, 0, 0)"
+               stroke-miterlimit="10"
+               transform="rotate(-180,468,108.5)"
+               pointer-events="all"
+               id="path41" />
+          </g>
+        </g>
+        <g
+           data-cell-id="itvtTAMVvJ-Au7iy1GT8-15"
+           id="g45">
+          <g
+             id="g44">
+            <path
+               d="M 488 108.5 L 473.6 108.5"
+               fill="none"
+               stroke="rgb(0, 0, 0)"
+               stroke-miterlimit="10"
+               pointer-events="stroke"
+               id="path43" />
+          </g>
+        </g>
+        <g
+           data-cell-id="itvtTAMVvJ-Au7iy1GT8-5"
+           id="g49">
+          <g
+             id="g46">
+            <rect
+               x="88"
+               y="168"
+               width="360"
+               height="40"
+               rx="1.2"
+               ry="1.2"
+               fill="#f5f5f5"
+               stroke="#666666"
+               pointer-events="all"
+               id="rect45" />
+          </g>
+          <g
+             id="g48">
+            <g
+               transform="translate(-0.5 -0.5)"
+               id="g47">
+              <switch
+                 id="switch46">
+                <foreignObject
+                   pointer-events="none"
+                   width="100%"
+                   height="100%"
+                   requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
+                   style="overflow: visible; text-align: left;">
+                  <xhtml:div
+                     style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 354px; height: 1px; padding-top: 188px; margin-left: 91px;">
+                    <xhtml:div
+                       data-drawio-colors="color: #333333; "
+                       style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                      <xhtml:div
+                         style="display: inline-block; font-size: 16px; font-family: Monospace; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">HTTP</xhtml:div>
+                    </xhtml:div>
+                  </xhtml:div>
+                </foreignObject>
+                <text
+                   x="268"
+                   y="193"
+                   fill="#333333"
+                   font-family="&quot;Monospace&quot;"
+                   font-size="16px"
+                   text-anchor="middle"
+                   id="text46">HTTP</text>
+              </switch>
+            </g>
+          </g>
+        </g>
+        <g
+           data-cell-id="itvtTAMVvJ-Au7iy1GT8-29"
+           id="g53">
+          <g
+             id="g50">
+            <rect
+               x="486"
+               y="233.63"
+               width="112"
+               height="30"
+               fill="none"
+               stroke="none"
+               pointer-events="all"
+               id="rect49" />
+          </g>
+          <g
+             id="g52">
+            <g
+               transform="translate(-0.5 -0.5)"
+               id="g51">
+              <switch
+                 id="switch50">
+                <foreignObject
+                   pointer-events="none"
+                   width="100%"
+                   height="100%"
+                   requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
+                   style="overflow: visible; text-align: left;">
+                  <xhtml:div
+                     style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 110px; height: 1px; padding-top: 249px; margin-left: 488px;">
+                    <xhtml:div
+                       data-drawio-colors="color: rgb(0, 0, 0); "
+                       style="box-sizing: border-box; font-size: 0px; text-align: left;">
+                      <xhtml:div
+                         style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                        <xhtml:div>アプリケーション/<xhtml:br />
+トランスポート</xhtml:div>
+                      </xhtml:div>
+                    </xhtml:div>
+                  </xhtml:div>
+                </foreignObject>
+                <text
+                   x="488"
+                   y="252"
+                   fill="rgb(0, 0, 0)"
+                   font-family="&quot;Helvetica&quot;"
+                   font-size="12px"
+                   id="text50">アプリケーション/...</text>
+              </switch>
+            </g>
+          </g>
+        </g>
+        <g
+           data-cell-id="itvtTAMVvJ-Au7iy1GT8-30"
+           id="g55">
+          <g
+             id="g54">
+            <path
+               d="M 474 210.38 L 468.5 210.38 Q 467 210.38 467 211.88 L 467 247.13 Q 467 248.63 465.5 248.63 L 461.5 248.63 Q 460 248.63 461.5 248.63 L 465.5 248.63 Q 467 248.63 467 250.13 L 467 285.38 Q 467 286.88 468.5 286.88 L 474 286.88"
+               fill="none"
+               stroke="rgb(0, 0, 0)"
+               stroke-miterlimit="10"
+               transform="rotate(-180,467,248.63)"
+               pointer-events="all"
+               id="path53" />
+          </g>
+        </g>
+        <g
+           data-cell-id="itvtTAMVvJ-Au7iy1GT8-31"
+           id="g57">
+          <g
+             id="g56">
+            <path
+               d="M 486 248.63 L 472.6 248.63"
+               fill="none"
+               stroke="rgb(0, 0, 0)"
+               stroke-miterlimit="10"
+               pointer-events="stroke"
+               id="path55" />
+          </g>
+        </g>
+        <g
+           data-cell-id="itvtTAMVvJ-Au7iy1GT8-32"
+           id="g61">
+          <g
+             id="g58">
+            <rect
+               x="484"
+               y="293.5"
+               width="74"
+               height="30"
+               fill="none"
+               stroke="none"
+               pointer-events="all"
+               id="rect57" />
+          </g>
+          <g
+             id="g60">
+            <g
+               transform="translate(-0.5 -0.5)"
+               id="g59">
+              <switch
+                 id="switch58">
+                <foreignObject
+                   pointer-events="none"
+                   width="100%"
+                   height="100%"
+                   requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
+                   style="overflow: visible; text-align: left;">
+                  <xhtml:div
+                     style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 72px; height: 1px; padding-top: 309px; margin-left: 486px;">
+                    <xhtml:div
+                       data-drawio-colors="color: rgb(0, 0, 0); "
+                       style="box-sizing: border-box; font-size: 0px; text-align: left;">
+                      <xhtml:div
+                         style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                        <xhtml:div>IP レイヤー<xhtml:br />
+</xhtml:div>
+                      </xhtml:div>
+                    </xhtml:div>
+                  </xhtml:div>
+                </foreignObject>
+                <text
+                   x="486"
+                   y="312"
+                   fill="rgb(0, 0, 0)"
+                   font-family="&quot;Helvetica&quot;"
+                   font-size="12px"
+                   id="text58">IP レイヤー
+</text>
+              </switch>
+            </g>
+          </g>
+        </g>
+        <g
+           data-cell-id="itvtTAMVvJ-Au7iy1GT8-33"
+           id="g63">
+          <g
+             id="g62">
+            <path
+               d="M 474 290.5 L 468.5 290.5 Q 467 290.5 467 292 L 467 307 Q 467 308.5 465.5 308.5 L 461.5 308.5 Q 460 308.5 461.5 308.5 L 465.5 308.5 Q 467 308.5 467 310 L 467 325 Q 467 326.5 468.5 326.5 L 474 326.5"
+               fill="none"
+               stroke="rgb(0, 0, 0)"
+               stroke-miterlimit="10"
+               transform="rotate(-180,467,308.5)"
+               pointer-events="all"
+               id="path61" />
+          </g>
+        </g>
+        <g
+           data-cell-id="itvtTAMVvJ-Au7iy1GT8-34"
+           id="g65">
+          <g
+             id="g64">
+            <path
+               d="M 484 308.5 L 472.6 308.5"
+               fill="none"
+               stroke="rgb(0, 0, 0)"
+               stroke-miterlimit="10"
+               pointer-events="stroke"
+               id="path63" />
+          </g>
+        </g>
+        <g
+           data-cell-id="itvtTAMVvJ-Au7iy1GT8-35"
+           id="g69">
+          <g
+             id="g66">
+            <rect
+               x="18"
+               y="148"
+               width="60"
+               height="30"
+               fill="none"
+               stroke="none"
+               pointer-events="all"
+               id="rect65" />
+          </g>
+          <g
+             id="g68">
+            <g
+               transform="translate(-0.5 -0.5)"
+               id="g67">
+              <switch
+                 id="switch66">
+                <foreignObject
+                   pointer-events="none"
+                   width="100%"
+                   height="100%"
+                   requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"
+                   style="overflow: visible; text-align: left;">
+                  <xhtml:div
+                     style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 58px; height: 1px; padding-top: 163px; margin-left: 20px;">
+                    <xhtml:div
+                       data-drawio-colors="color: rgb(0, 0, 0); "
+                       style="box-sizing: border-box; font-size: 0px; text-align: left;">
+                      <xhtml:div
+                         style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">ウェブ</xhtml:div>
+                    </xhtml:div>
+                  </xhtml:div>
+                </foreignObject>
+                <text
+                   x="20"
+                   y="167"
+                   fill="rgb(0, 0, 0)"
+                   font-family="&quot;Helvetica&quot;"
+                   font-size="12px"
+                   id="text66">ウェブ</text>
+              </switch>
+            </g>
+          </g>
+        </g>
+        <g
+           data-cell-id="itvtTAMVvJ-Au7iy1GT8-36"
+           id="g72">
+          <g
+             id="g71">
+            <path
+               d="M 8 319.88 L 8 16.12"
+               fill="none"
+               stroke="rgb(0, 0, 0)"
+               stroke-miterlimit="10"
+               pointer-events="stroke"
+               id="path69" />
+            <path
+               d="M 8 326.88 L 4.5 319.88 L 11.5 319.88 Z"
+               fill="rgb(0, 0, 0)"
+               stroke="rgb(0, 0, 0)"
+               stroke-miterlimit="10"
+               pointer-events="all"
+               id="path70" />
+            <path
+               d="M 8 9.12 L 11.5 16.12 L 4.5 16.12 Z"
+               fill="rgb(0, 0, 0)"
+               stroke="rgb(0, 0, 0)"
+               stroke-miterlimit="10"
+               pointer-events="all"
+               id="path71" />
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>