diff --git a/notes/pics/facade-movie.png b/notes/pics/facade-movie.png
new file mode 100644
index 00000000..226c6820
Binary files /dev/null and b/notes/pics/facade-movie.png differ
diff --git a/notes/设计模式 - 外观.md b/notes/设计模式 - 外观.md
index a503dcdf..517bd78a 100644
--- a/notes/设计模式 - 外观.md	
+++ b/notes/设计模式 - 外观.md	
@@ -6,7 +6,7 @@
 
 ### Class Diagram
 
-<div align="center"> <img src="https://cs-notes-1256109796.cos.ap-guangzhou.myqcloud.com/f9978fa6-9f49-4a0f-8540-02d269ac448f.png"/> </div><br>
+<div align="center"> <img src="pics/facade-movie.png" width="740px"/> </div><br>
 
 ### Implementation
 
diff --git a/tools/diagram/src/facade-movie.svg b/tools/diagram/src/facade-movie.svg
new file mode 100644
index 00000000..0d07afca
--- /dev/null
+++ b/tools/diagram/src/facade-movie.svg
@@ -0,0 +1,53 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="740" height="260" viewBox="0 0 740 260">
+  <style>
+    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; }
+    .sub { font-size: 11px; fill: #6E6E6E; }
+    .note { fill: #C0605A; }
+    .ok { fill: #6A9F68; }
+    .mono { font-family: Menlo, Consolas, monospace; }
+    .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: #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.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.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.5 L9.5,5 L1,8.5 z" fill="#6A9F68"/>
+    </marker>
+  </defs>
+  <rect width="100%" height="100%" fill="#FFFFFF"/>
+
+  <text x="370" y="28" class="title">外观：一个方法替客户端完成一串调用</text>
+  <rect x="30" y="100" width="110" height="44" rx="6" fill="#EAE9E7" stroke="#BFBEBA"/>
+  <text x="85" y="126.5" class="c sub b">Client</text>
+  <rect x="200" y="92" width="170" height="46" rx="4" fill="#C6ECE9" stroke="#7DBCB7"/>
+  <text x="285" y="110" class="c sub b" style="fill:#444">Facade</text>
+  <line x1="200" y1="118" x2="370" y2="118" stroke="#7DBCB7"/>
+  <text x="208" y="134" class="sub mono" style="fill:#444">watchMovie()</text>
+  <line x1="142" y1="122" x2="196" y2="122" class="arrow "/>
+  <rect x="430" y="46" width="280" height="170" rx="8" class="frame"/>
+  <text x="440" y="64" class="b">SubSystem</text>
+  <rect x="450" y="76" width="240" height="32" rx="6" fill="#C6E4FB" stroke="#7FB2D6"/>
+  <text x="570" y="96.5" class="c sub mono">① turnOnTV()</text>
+  <line x1="372" y1="128" x2="446" y2="92" class="arrow "/>
+  <rect x="450" y="120" width="240" height="32" rx="6" fill="#C6E4FB" stroke="#7FB2D6"/>
+  <text x="570" y="140.5" class="c sub mono">② setCD("a movie")</text>
+  <line x1="372" y1="128" x2="446" y2="136" class="arrow "/>
+  <rect x="450" y="164" width="240" height="32" rx="6" fill="#C6E4FB" stroke="#7FB2D6"/>
+  <text x="570" y="184.5" class="c sub mono">③ startWatching()</text>
+  <line x1="372" y1="128" x2="446" y2="180" class="arrow "/>
+  <text x="30" y="244" class="sub">客户端只调用 watchMovie()，不需要知道子系统中有哪些类、调用顺序是什么；需要精细控制时仍然可以直接使用子系统。</text>
+</svg>