Alawn/Interview-Notebook
1
0
Fork 0
mirror of https://github.com/CyC2018/Interview-Notebook.git synced 2026-10-27 13:33:43 +00:00
Code Issues Releases Wiki Activity

Update 系统设计基础.md

Browse Source 
调整配图的配色和画法：换成更浅的蓝、青、紫和暖灰，去掉阴影，方框加同色细描边，箭头改为实心。
This commit is contained in:
CyC2018
2026-10-26 06:02:06 +08:00
parent 2cd2fa90e5
commit dcea264dd4
8 changed files with 77 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
notes/pics/circuit-breaker.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 74 KiB

After

Width:  |  Height:  |  Size: 75 KiB

notes/pics/massive-topk.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 141 KiB

After

Width:  |  Height:  |  Size: 142 KiB

notes/pics/rate-limit.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 104 KiB

After

Width:  |  Height:  |  Size: 106 KiB

notes/pics/seckill.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 138 KiB

After

Width:  |  Height:  |  Size: 145 KiB

tools/diagram/src/circuit-breaker.svg
+6 -9
View File
@@ -1,35 +1,32 @@
<svg xmlns="http://www.w3.org/2000/svg" width="520" height="270" viewBox="0 0 520 270">
<style>
text { font-family: "PingFang SC", "Microsoft YaHei", Helvetica, Arial, sans-serif; fill: #666; font-size: 12px; }
.title { font-weight: bold; font-size: 15px; fill: #777; text-anchor: middle; }
text { font-family: "PingFang SC", "Microsoft YaHei", Helvetica, Arial, sans-serif; fill: #3F3F3F; font-size: 12px; }
.title { font-weight: bold; font-size: 15px; fill: #333; text-anchor: middle; }
.state { font-weight: bold; font-size: 14px; text-anchor: middle; }
.en { font-size: 10px; fill: #888; text-anchor: middle; }
.arrow { stroke: #666; stroke-width: 1.3; fill: none; marker-end: url(#a); }
.arrow { stroke: #555; stroke-width: 1.1; fill: none; marker-end: url(#a); }
.shadow { fill: #DADADA; }
</style>
<defs>
<marker id="a" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto">
<path d="M1,1 L9,5 L1,9" fill="none" stroke="#666" stroke-width="1.6"/>
<path d="M1,1.5 L9.5,5 L1,8.5 z" fill="#555"/>
</marker>
</defs>
<rect width="100%" height="100%" fill="#FFFFFF"/>
<text x="260" y="28" class="title">熔断器状态</text>
<!-- 关闭：正常调用 -->
<rect x="57" y="80" width="110" height="44" rx="6" class="shadow"/>
<rect x="55" y="78" width="110" height="44" rx="6" fill="#B0E3E6"/>
<rect x="55" y="78" width="110" height="44" rx="6" fill="#C6ECE9" stroke="#7DBCB7"/>
<text x="110" y="98" class="state">关闭</text>
<text x="110" y="114" class="en">Closed，正常调用</text>
<!-- 打开：直接返回默认结果 -->
<rect x="357" y="80" width="110" height="44" rx="6" class="shadow"/>
<rect x="355" y="78" width="110" height="44" rx="6" fill="#F3C6C2"/>
<text x="410" y="98" class="state">打开</text>
<text x="410" y="114" class="en">Open，直接返回</text>
<!-- 半开：放行少量试探请求 -->
<rect x="207" y="192" width="110" height="44" rx="6" class="shadow"/>
<rect x="205" y="190" width="110" height="44" rx="6" fill="#B1DDF0"/>
<rect x="205" y="190" width="110" height="44" rx="6" fill="#C6E4FB" stroke="#7FB2D6"/>
<text x="260" y="210" class="state">半开</text>
<text x="260" y="226" class="en">Half-Open，少量试探</text>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

tools/diagram/src/massive-topk.svg
+24 -24
View File
@@ -1,31 +1,31 @@
<svg xmlns="http://www.w3.org/2000/svg" width="720" height="312" viewBox="0 0 720 312">
<style>
text { font-family: "PingFang SC", "Microsoft YaHei", Helvetica, Arial, sans-serif; fill: #666; font-size: 12px; }
.title { font-weight: bold; font-size: 15px; fill: #777; text-anchor: middle; }
text { font-family: "PingFang SC", "Microsoft YaHei", Helvetica, Arial, sans-serif; fill: #3F3F3F; font-size: 12px; }
.title { font-weight: bold; font-size: 15px; fill: #333; text-anchor: middle; }
.b { font-weight: bold; }
.c { text-anchor: middle; }
.e { text-anchor: end; }
.note { fill: #C0605A; }
.ok { fill: #6A9F68; }
.sub { font-size: 11px; fill: #888; }
.sub { font-size: 11px; fill: #6E6E6E; }
.mono { font-family: Menlo, Consolas, monospace; }
.arrow { stroke: #666; stroke-width: 1.3; fill: none; marker-end: url(#a); }
.arrow { stroke: #555; stroke-width: 1.1; fill: none; marker-end: url(#a); }
.red { stroke: #C0605A; marker-end: url(#r); }
.green { stroke: #6A9F68; marker-end: url(#g); }
.dash { stroke-dasharray: 5 4; }
.line { stroke: #666; stroke-width: 1.3; fill: none; }
.line { stroke: #555; stroke-width: 1.1; fill: none; }
.frame { fill: none; stroke: #999; stroke-width: 1; stroke-dasharray: 4 3; }
.shadow { fill: #DADADA; }
</style>
<defs>
<marker id="a" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<path d="M1,1 L9,5 L1,9" fill="none" stroke="#666" stroke-width="1.6"/>
<path d="M1,1.5 L9.5,5 L1,8.5 z" fill="#555"/>
</marker>
<marker id="r" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<path d="M1,1 L9,5 L1,9" fill="none" stroke="#C0605A" stroke-width="1.6"/>
<path d="M1,1.5 L9.5,5 L1,8.5 z" fill="#C0605A"/>
</marker>
<marker id="g" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<path d="M1,1 L9,5 L1,9" fill="none" stroke="#6A9F68" stroke-width="1.6"/>
<path d="M1,1.5 L9.5,5 L1,8.5 z" fill="#6A9F68"/>
</marker>
</defs>
<rect width="100%" height="100%" fill="#FFFFFF"/>
@@ -53,7 +53,7 @@
<line x1="342" y1="62" x2="342" y2="92" stroke="#BBB" stroke-width="0.8"/>
<text x="368" y="80" class="sub">HashMap 计数</text>
<line x1="272" y1="77" x2="316" y2="77" class="arrow "/>
<rect x="470" y="66" width="48" height="22" rx="4" fill="#DDD7F6" stroke="#A99FD8" stroke-width="1.2"/>
<rect x="470" y="66" width="48" height="22" rx="4" fill="#E6E3FA" stroke="#B8B0DE" stroke-width="1.2"/>
<text x="494" y="81" class="c sub">前 10</text>
<line x1="452" y1="77" x2="466" y2="77" class="arrow "/>
<line x1="520" y1="77" x2="586" y2="150" class="arrow "/>
@@ -70,7 +70,7 @@
<line x1="342" y1="132" x2="342" y2="162" stroke="#BBB" stroke-width="0.8"/>
<text x="368" y="150" class="sub">HashMap 计数</text>
<line x1="272" y1="147" x2="316" y2="147" class="arrow "/>
<rect x="470" y="136" width="48" height="22" rx="4" fill="#DDD7F6" stroke="#A99FD8" stroke-width="1.2"/>
<rect x="470" y="136" width="48" height="22" rx="4" fill="#E6E3FA" stroke="#B8B0DE" stroke-width="1.2"/>
<text x="494" y="151" class="c sub">前 10</text>
<line x1="452" y1="147" x2="466" y2="147" class="arrow "/>
<line x1="520" y1="147" x2="586" y2="150" class="arrow "/>
@@ -87,24 +87,24 @@
<line x1="342" y1="222" x2="342" y2="252" stroke="#BBB" stroke-width="0.8"/>
<text x="368" y="240" class="sub">HashMap 计数</text>
<line x1="272" y1="237" x2="316" y2="237" class="arrow "/>
<rect x="470" y="226" width="48" height="22" rx="4" fill="#DDD7F6" stroke="#A99FD8" stroke-width="1.2"/>
<rect x="470" y="226" width="48" height="22" rx="4" fill="#E6E3FA" stroke="#B8B0DE" stroke-width="1.2"/>
<text x="494" y="241" class="c sub">前 10</text>
<line x1="452" y1="237" x2="466" y2="237" class="arrow "/>
<line x1="520" y1="237" x2="586" y2="150" class="arrow "/>
<text x="204" y="196" class="c b">⋮</text>
<line x1="630" y1="126" x2="608" y2="148" stroke="#78BFC4" stroke-width="1.2"/>
<line x1="630" y1="126" x2="652" y2="148" stroke="#78BFC4" stroke-width="1.2"/>
<line x1="608" y1="148" x2="597" y2="170" stroke="#78BFC4" stroke-width="1.2"/>
<line x1="608" y1="148" x2="619" y2="170" stroke="#78BFC4" stroke-width="1.2"/>
<line x1="652" y1="148" x2="641" y2="170" stroke="#78BFC4" stroke-width="1.2"/>
<line x1="652" y1="148" x2="663" y2="170" stroke="#78BFC4" stroke-width="1.2"/>
<circle cx="630" cy="126" r="8" fill="#DDD7F6" stroke="#A99FD8" stroke-width="1.2"/>
<circle cx="608" cy="148" r="7" fill="#B0E3E6" stroke="#78BFC4" stroke-width="1.2"/>
<circle cx="652" cy="148" r="7" fill="#B0E3E6" stroke="#78BFC4" stroke-width="1.2"/>
<circle cx="597" cy="170" r="7" fill="#B0E3E6" stroke="#78BFC4" stroke-width="1.2"/>
<circle cx="619" cy="170" r="7" fill="#B0E3E6" stroke="#78BFC4" stroke-width="1.2"/>
<circle cx="641" cy="170" r="7" fill="#B0E3E6" stroke="#78BFC4" stroke-width="1.2"/>
<circle cx="663" cy="170" r="7" fill="#B0E3E6" stroke="#78BFC4" stroke-width="1.2"/>
<line x1="630" y1="126" x2="608" y2="148" stroke="#7DBCB7" stroke-width="1.2"/>
<line x1="630" y1="126" x2="652" y2="148" stroke="#7DBCB7" stroke-width="1.2"/>
<line x1="608" y1="148" x2="597" y2="170" stroke="#7DBCB7" stroke-width="1.2"/>
<line x1="608" y1="148" x2="619" y2="170" stroke="#7DBCB7" stroke-width="1.2"/>
<line x1="652" y1="148" x2="641" y2="170" stroke="#7DBCB7" stroke-width="1.2"/>
<line x1="652" y1="148" x2="663" y2="170" stroke="#7DBCB7" stroke-width="1.2"/>
<circle cx="630" cy="126" r="8" fill="#E6E3FA" stroke="#B8B0DE" stroke-width="1.2"/>
<circle cx="608" cy="148" r="7" fill="#C6ECE9" stroke="#7DBCB7" stroke-width="1.2"/>
<circle cx="652" cy="148" r="7" fill="#C6ECE9" stroke="#7DBCB7" stroke-width="1.2"/>
<circle cx="597" cy="170" r="7" fill="#C6ECE9" stroke="#7DBCB7" stroke-width="1.2"/>
<circle cx="619" cy="170" r="7" fill="#C6ECE9" stroke="#7DBCB7" stroke-width="1.2"/>
<circle cx="641" cy="170" r="7" fill="#C6ECE9" stroke="#7DBCB7" stroke-width="1.2"/>
<circle cx="663" cy="170" r="7" fill="#C6ECE9" stroke="#7DBCB7" stroke-width="1.2"/>
<text x="630" y="196" class="c b">小顶堆</text>
<text x="630" y="212" class="c sub">全局前 10</text>
<text x="204" y="278" class="c sub">① 约 1 GB / 份</text>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.6 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

tools/diagram/src/rate-limit.svg
+18 -19
View File
@@ -1,31 +1,31 @@
<svg xmlns="http://www.w3.org/2000/svg" width="640" height="300" viewBox="0 0 640 300">
<style>
text { font-family: "PingFang SC", "Microsoft YaHei", Helvetica, Arial, sans-serif; fill: #666; font-size: 12px; }
.title { font-weight: bold; font-size: 15px; fill: #777; text-anchor: middle; }
text { font-family: "PingFang SC", "Microsoft YaHei", Helvetica, Arial, sans-serif; fill: #3F3F3F; font-size: 12px; }
.title { font-weight: bold; font-size: 15px; fill: #333; text-anchor: middle; }
.b { font-weight: bold; }
.c { text-anchor: middle; }
.e { text-anchor: end; }
.note { fill: #C0605A; }
.ok { fill: #6A9F68; }
.sub { font-size: 11px; fill: #888; }
.sub { font-size: 11px; fill: #6E6E6E; }
.mono { font-family: Menlo, Consolas, monospace; }
.arrow { stroke: #666; stroke-width: 1.3; fill: none; marker-end: url(#a); }
.arrow { stroke: #555; stroke-width: 1.1; fill: none; marker-end: url(#a); }
.red { stroke: #C0605A; marker-end: url(#r); }
.green { stroke: #6A9F68; marker-end: url(#g); }
.dash { stroke-dasharray: 5 4; }
.line { stroke: #666; stroke-width: 1.3; fill: none; }
.line { stroke: #555; stroke-width: 1.1; fill: none; }
.frame { fill: none; stroke: #999; stroke-width: 1; stroke-dasharray: 4 3; }
.shadow { fill: #DADADA; }
</style>
<defs>
<marker id="a" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<path d="M1,1 L9,5 L1,9" fill="none" stroke="#666" stroke-width="1.6"/>
<path d="M1,1.5 L9.5,5 L1,8.5 z" fill="#555"/>
</marker>
<marker id="r" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<path d="M1,1 L9,5 L1,9" fill="none" stroke="#C0605A" stroke-width="1.6"/>
<path d="M1,1.5 L9.5,5 L1,8.5 z" fill="#C0605A"/>
</marker>
<marker id="g" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<path d="M1,1 L9,5 L1,9" fill="none" stroke="#6A9F68" stroke-width="1.6"/>
<path d="M1,1.5 L9.5,5 L1,8.5 z" fill="#6A9F68"/>
</marker>
</defs>
<rect width="100%" height="100%" fill="#FFFFFF"/>
@@ -39,10 +39,10 @@
<line x1="185" y1="80" x2="185" y2="108" class="arrow "/>
<text x="140" y="75" class="c sub">请求</text>
<path d="M90,110 L102,210 L188,210 L200,110" class="line"/>
<rect x="104" y="185" width="82" height="18" rx="3" fill="#B1DDF0"/>
<rect x="104" y="163" width="82" height="18" rx="3" fill="#B1DDF0"/>
<rect x="104" y="141" width="82" height="18" rx="3" fill="#B1DDF0"/>
<rect x="104" y="119" width="82" height="18" rx="3" fill="#B1DDF0"/>
<rect x="104" y="185" width="82" height="18" rx="3" fill="#C6E4FB" stroke="#7FB2D6"/>
<rect x="104" y="163" width="82" height="18" rx="3" fill="#C6E4FB" stroke="#7FB2D6"/>
<rect x="104" y="141" width="82" height="18" rx="3" fill="#C6E4FB" stroke="#7FB2D6"/>
<rect x="104" y="119" width="82" height="18" rx="3" fill="#C6E4FB" stroke="#7FB2D6"/>
<text x="82" y="170" class="e sub">排队</text>
<line x1="205" y1="116" x2="250" y2="116" class="arrow red"/>
<text x="255" y="120" class="note">桶满丢弃</text>
@@ -53,14 +53,13 @@
<line x1="430" y1="80" x2="430" y2="108" class="arrow "/>
<text x="440" y="92" class="sub">固定速率放入令牌</text>
<path d="M380,110 L392,210 L478,210 L490,110" class="line"/>
<circle cx="410" cy="195" r="9" fill="#DDD7F6" stroke="#9188D8"/>
<circle cx="435" cy="195" r="9" fill="#DDD7F6" stroke="#9188D8"/>
<circle cx="460" cy="195" r="9" fill="#DDD7F6" stroke="#9188D8"/>
<circle cx="422" cy="175" r="9" fill="#DDD7F6" stroke="#9188D8"/>
<circle cx="448" cy="175" r="9" fill="#DDD7F6" stroke="#9188D8"/>
<circle cx="410" cy="195" r="9" fill="#E6E3FA" stroke="#9F94D5"/>
<circle cx="435" cy="195" r="9" fill="#E6E3FA" stroke="#9F94D5"/>
<circle cx="460" cy="195" r="9" fill="#E6E3FA" stroke="#9F94D5"/>
<circle cx="422" cy="175" r="9" fill="#E6E3FA" stroke="#9F94D5"/>
<circle cx="448" cy="175" r="9" fill="#E6E3FA" stroke="#9F94D5"/>
<text x="435" y="140" class="c sub">桶满后不再放入</text>
<rect x="512" y="142" width="80" height="30" rx="6" class="shadow"/>
<rect x="510" y="140" width="80" height="30" rx="6" fill="#B0E3E6"/>
<rect x="510" y="140" width="80" height="30" rx="6" fill="#C6ECE9" stroke="#7DBCB7"/>
<text x="550" y="159.5" class="b c">请求</text>
<line x1="507" y1="165" x2="470" y2="190" class="arrow "/>
<text x="500" y="196" class="sub">取走令牌</text>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

tools/diagram/src/seckill.svg
+29 -29
View File
@@ -1,70 +1,70 @@
<svg xmlns="http://www.w3.org/2000/svg" width="720" height="300" viewBox="0 0 720 300">
<style>
text { font-family: "PingFang SC", "Microsoft YaHei", Helvetica, Arial, sans-serif; fill: #666; font-size: 12px; }
.title { font-weight: bold; font-size: 15px; fill: #777; text-anchor: middle; }
text { font-family: "PingFang SC", "Microsoft YaHei", Helvetica, Arial, sans-serif; fill: #3F3F3F; font-size: 12px; }
.title { font-weight: bold; font-size: 15px; fill: #333; text-anchor: middle; }
.b { font-weight: bold; }
.c { text-anchor: middle; }
.e { text-anchor: end; }
.note { fill: #C0605A; }
.ok { fill: #6A9F68; }
.sub { font-size: 11px; fill: #888; }
.sub { font-size: 11px; fill: #6E6E6E; }
.mono { font-family: Menlo, Consolas, monospace; }
.arrow { stroke: #666; stroke-width: 1.3; fill: none; marker-end: url(#a); }
.arrow { stroke: #555; stroke-width: 1.1; fill: none; marker-end: url(#a); }
.red { stroke: #C0605A; marker-end: url(#r); }
.green { stroke: #6A9F68; marker-end: url(#g); }
.dash { stroke-dasharray: 5 4; }
.line { stroke: #666; stroke-width: 1.3; fill: none; }
.line { stroke: #555; stroke-width: 1.1; fill: none; }
.frame { fill: none; stroke: #999; stroke-width: 1; stroke-dasharray: 4 3; }
.shadow { fill: #DADADA; }
</style>
<defs>
<marker id="a" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<path d="M1,1 L9,5 L1,9" fill="none" stroke="#666" stroke-width="1.6"/>
<path d="M1,1.5 L9.5,5 L1,8.5 z" fill="#555"/>
</marker>
<marker id="r" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<path d="M1,1 L9,5 L1,9" fill="none" stroke="#C0605A" stroke-width="1.6"/>
<path d="M1,1.5 L9.5,5 L1,8.5 z" fill="#C0605A"/>
</marker>
<marker id="g" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<path d="M1,1 L9,5 L1,9" fill="none" stroke="#6A9F68" stroke-width="1.6"/>
<path d="M1,1.5 L9.5,5 L1,8.5 z" fill="#6A9F68"/>
</marker>
</defs>
<rect width="100%" height="100%" fill="#FFFFFF"/>
<text x="360" y="28" class="title">秒杀：层层过滤请求</text>
<path d="M20,70 L250,92 L330,120 L700,124 L700,140 L330,144 L250,172 L20,194 Z" fill="#B1DDF0" opacity="0.35"/>
<path d="M20,70 L250,92 L330,120 L700,124 L700,140 L330,144 L250,172 L20,194 Z" fill="#C6E4FB" opacity="0.35" stroke="#7FB2D6"/>
<text x="30" y="128" class="b">10 万个请求</text>
<text x="30" y="144" class="sub">同时到达</text>
<path d="M170,104 L189,113 V124.7 C189,139.88 176,147 170,150 C164,147 151,139.88 151,124.7 V113 Z" fill="#B1DDF0" stroke="#7FB4D0" stroke-width="1.2"/>
<path d="M161,126.08 l6,6 l12,-13" fill="none" stroke="#7FB4D0" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M170,104 L189,113 V124.7 C189,139.88 176,147 170,150 C164,147 151,139.88 151,124.7 V113 Z" fill="#C6E4FB" stroke="#7FB2D6" stroke-width="1.2"/>
<path d="M161,126.08 l6,6 l12,-13" fill="none" stroke="#7FB2D6" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
<text x="170" y="90" class="c b">前端与网关</text>
<text x="170" y="74" class="c sub">防重复提交、按用户限流</text>
<path d="M307,112 v34 a23,6 0 0 0 46,0 v-34" fill="#B0E3E6" stroke="#78BFC4" stroke-width="1.2"/>
<ellipse cx="330" cy="112" rx="23" ry="6" fill="#B0E3E6" stroke="#78BFC4" stroke-width="1.2"/>
<path d="M307,129 a23,6 0 0 0 46,0" fill="none" stroke="#78BFC4" stroke-width="1"/>
<path d="M307,112 v34 a23,6 0 0 0 46,0 v-34" fill="#C6ECE9" stroke="#7DBCB7" stroke-width="1.2"/>
<ellipse cx="330" cy="112" rx="23" ry="6" fill="#C6ECE9" stroke="#7DBCB7" stroke-width="1.2"/>
<path d="M307,129 a23,6 0 0 0 46,0" fill="none" stroke="#7DBCB7" stroke-width="1"/>
<text x="330" y="90" class="c b">Redis + Lua</text>
<text x="330" y="58" class="c sub">判断库存和是否已购，</text>
<text x="330" y="74" class="c sub">原子扣减 100 → 0</text>
<rect x="430" y="119" width="90" height="26" rx="13" fill="#FFFFFF" stroke="#BBBBBB" stroke-width="1.2"/>
<rect x="440" y="123" width="20.6667" height="18" rx="3" fill="#DDD7F6" stroke="#A99FD8" stroke-width="1.2"/>
<rect x="440" y="123" width="20.6667" height="18" rx="3" fill="#E6E3FA" stroke="#B8B0DE" stroke-width="1.2"/>
<text x="450.333" y="136" class="c sub"></text>
<rect x="464.667" y="123" width="20.6667" height="18" rx="3" fill="#DDD7F6" stroke="#A99FD8" stroke-width="1.2"/>
<rect x="464.667" y="123" width="20.6667" height="18" rx="3" fill="#E6E3FA" stroke="#B8B0DE" stroke-width="1.2"/>
<text x="475" y="136" class="c sub"></text>
<rect x="489.333" y="123" width="20.6667" height="18" rx="3" fill="#DDD7F6" stroke="#A99FD8" stroke-width="1.2"/>
<rect x="489.333" y="123" width="20.6667" height="18" rx="3" fill="#E6E3FA" stroke="#B8B0DE" stroke-width="1.2"/>
<text x="499.667" y="136" class="c sub"></text>
<text x="475" y="108" class="c sub">消息队列 100 条</text>
<rect x="570" y="108" width="40" height="13" rx="3" fill="#B1DDF0" stroke="#7FB4D0" stroke-width="1.2"/>
<circle cx="577" cy="114.5" r="2" fill="#7FB4D0"/>
<line x1="584" y1="114.5" x2="603" y2="114.5" stroke="#7FB4D0" stroke-width="1"/>
<rect x="570" y="124" width="40" height="13" rx="3" fill="#B1DDF0" stroke="#7FB4D0" stroke-width="1.2"/>
<circle cx="577" cy="130.5" r="2" fill="#7FB4D0"/>
<line x1="584" y1="130.5" x2="603" y2="130.5" stroke="#7FB4D0" stroke-width="1"/>
<rect x="570" y="140" width="40" height="13" rx="3" fill="#B1DDF0" stroke="#7FB4D0" stroke-width="1.2"/>
<circle cx="577" cy="146.5" r="2" fill="#7FB4D0"/>
<line x1="584" y1="146.5" x2="603" y2="146.5" stroke="#7FB4D0" stroke-width="1"/>
<rect x="570" y="108" width="40" height="13" rx="3" fill="#C6E4FB" stroke="#7FB2D6" stroke-width="1.2"/>
<circle cx="577" cy="114.5" r="2" fill="#7FB2D6"/>
<line x1="584" y1="114.5" x2="603" y2="114.5" stroke="#7FB2D6" stroke-width="1"/>
<rect x="570" y="124" width="40" height="13" rx="3" fill="#C6E4FB" stroke="#7FB2D6" stroke-width="1.2"/>
<circle cx="577" cy="130.5" r="2" fill="#7FB2D6"/>
<line x1="584" y1="130.5" x2="603" y2="130.5" stroke="#7FB2D6" stroke-width="1"/>
<rect x="570" y="140" width="40" height="13" rx="3" fill="#C6E4FB" stroke="#7FB2D6" stroke-width="1.2"/>
<circle cx="577" cy="146.5" r="2" fill="#7FB2D6"/>
<line x1="584" y1="146.5" x2="603" y2="146.5" stroke="#7FB2D6" stroke-width="1"/>
<text x="590" y="172" class="c b">订单服务</text>
<path d="M650,114 v30 a20,6 0 0 0 40,0 v-30" fill="#B1DDF0" stroke="#7FB4D0" stroke-width="1.2"/>
<ellipse cx="670" cy="114" rx="20" ry="6" fill="#B1DDF0" stroke="#7FB4D0" stroke-width="1.2"/>
<path d="M650,129 a20,6 0 0 0 40,0" fill="none" stroke="#7FB4D0" stroke-width="1"/>
<path d="M650,114 v30 a20,6 0 0 0 40,0 v-30" fill="#C6E4FB" stroke="#7FB2D6" stroke-width="1.2"/>
<ellipse cx="670" cy="114" rx="20" ry="6" fill="#C6E4FB" stroke="#7FB2D6" stroke-width="1.2"/>
<path d="M650,129 a20,6 0 0 0 40,0" fill="none" stroke="#7FB2D6" stroke-width="1"/>
<text x="670" y="172" class="c b">MySQL</text>
<line x1="522" y1="132" x2="568" y2="132" class="arrow "/>
<line x1="612" y1="132" x2="648" y2="132" class="arrow "/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB