{"id":4240,"date":"2026-06-02T16:13:49","date_gmt":"2026-06-02T08:13:49","guid":{"rendered":"https:\/\/www.go2posts.com\/cn\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/"},"modified":"2026-09-09T20:59:33","modified_gmt":"2026-09-09T12:59:33","slug":"mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams","status":"publish","type":"post","link":"https:\/\/www.go2posts.com\/cn\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/","title":{"rendered":"\u638c\u63e1\u4ee3\u7801\u5373\u56fe\u8868\uff1a\u9762\u5411\u73b0\u4ee3\u5f00\u53d1\u56e2\u961f\u7684\u5b8c\u6574 VPasCode \u6559\u7a0b"},"content":{"rendered":"<h2>\u5f15\u8a00\uff1a\u6587\u6863\u9769\u547d\u7531\u6b64\u5f00\u542f<\/h2>\n<p>\u5728\u5feb\u8282\u594f\u7684\u8f6f\u4ef6\u5f00\u53d1\u751f\u6001\u4e2d\uff0c\u6211\u4eec\u6bcf\u4e2a\u4eba\u90fd\u9762\u4e34\u7740\u4e00\u4e2a\u4ee4\u4eba\u4e0d\u5b89\u7684\u4e8b\u5b9e\uff1a<strong>\u6211\u4eec\u7684\u6587\u6863\u51e0\u4e4e\u603b\u662f\u8fc7\u65f6\u7684<\/strong>\u6211\u4eec\u66fe\u82b1\u8d39\u65e0\u6570\u65f6\u95f4\u4e0e\u62d6\u653e\u5f0f\u56fe\u8868\u5de5\u5177\u640f\u6597\uff0c painstakingly \u5bf9\u9f50\u65b9\u6846\u548c\u7bad\u5934\uff0c\u5374\u773c\u7741\u7741\u770b\u7740\u7cbe\u5fc3\u5236\u4f5c\u7684\u56fe\u8868\u5728\u4ee3\u7801\u53d8\u66f4\u7684\u77ac\u95f4\u53d8\u5f97\u8fc7\u65f6\u3002<br \/>\n\u4f46\u5982\u679c\u6587\u6863\u80fd\u8ddf\u4e0a\u5f00\u53d1\u8282\u594f\u5462\uff1f\u5982\u679c\u521b\u5efa\u4e13\u4e1a\u67b6\u6784\u56fe\u5c31\u50cf\u7f16\u5199\u4e00\u4e2a\u51fd\u6570\u4e00\u6837\u7b80\u5355\u5462\uff1f<br \/>\n\u6b22\u8fce\u6765\u5230\u4ee3\u7801\u5373\u56fe\u8868\u7684\u9769\u547d\u65f6\u4ee3\u3002\u672c\u6559\u7a0b\u5c06\u5e26\u60a8\u4e86\u89e3<strong>VPasCode<\/strong>\uff0c\u8fd9\u662f Visual Paradigm \u63a8\u51fa\u7684\u57fa\u4e8e\u6d4f\u89c8\u5668\u7684\u5e73\u53f0\uff0c\u5f7b\u5e95\u6539\u53d8\u4e86\u56e2\u961f\u521b\u5efa\u3001\u5171\u4eab\u548c\u7ef4\u62a4\u7cfb\u7edf\u67b6\u6784\u56fe\u7684\u65b9\u5f0f\u3002\u901a\u8fc7\u5c06\u56fe\u8868\u89c6\u4e3a\u4ee3\u7801\uff0c\u60a8\u5c06\u5b66\u4f1a\u5982\u4f55\u5728\u51e0\u5206\u949f\u5185\uff08\u800c\u975e\u6570\u5c0f\u65f6\uff09\u751f\u6210\u51fa\u7248\u7ea7\u8d28\u91cf\u7684\u53ef\u89c6\u5316\u56fe\u8868\uff0c\u540c\u65f6\u786e\u4fdd\u60a8\u7684\u6587\u6863\u80fd\u968f\u7cfb\u7edf\u65e0\u7f1d\u6f14\u8fdb\u3002<br \/>\n\u65e0\u8bba\u60a8\u662f\u6b63\u5728\u8bb0\u5f55\u5fae\u670d\u52a1\u7684\u5f00\u53d1\u4eba\u5458\u3001\u5411\u5229\u76ca\u76f8\u5173\u8005\u5c55\u793a\u67b6\u6784\u7684\u67b6\u6784\u5e08\uff0c\u8fd8\u662f\u6b63\u5728\u6620\u5c04\u57fa\u7840\u8bbe\u65bd\u7684 DevOps \u5de5\u7a0b\u5e08\uff0c\u672c\u5168\u9762\u6307\u5357\u90fd\u5c06\u52a9\u60a8\u638c\u63e1 VPasCode\uff0c\u5168\u9762\u63d0\u5347\u56e2\u961f\u7684\u6587\u6863\u6c34\u5e73\u3002<\/p>\n<hr\/>\n<h2>1. \u5feb\u901f\u5165\u95e8\uff1a5 \u5206\u949f\u5b8c\u6210\u60a8\u7684\u7b2c\u4e00\u5f20\u56fe\u8868 {#getting-started}<\/h2>\n<h3>\u65e0\u9700\u5b89\u88c5\uff0c\u65e0\u9700\u914d\u7f6e\uff0c\u53ea\u9700\u4ee3\u7801<\/h3>\n<p>VPasCode \u6700\u5f3a\u5927\u7684\u529f\u80fd\u4e4b\u4e00\u662f\u5176\u96f6\u6469\u64e6\u7684\u5165\u95e8\u4f53\u9a8c\u3002\u65e0\u9700\u5b89\u88c5\u4efb\u4f55\u5185\u5bb9\uff0c\u65e0\u9700\u521b\u5efa\u8d26\u6237\uff0c\u4e5f\u65e0\u9700\u590d\u6742\u914d\u7f6e\u3002\u73b0\u5728\uff0c\u8ba9\u6211\u4eec\u7acb\u5373\u521b\u5efa\u60a8\u7684\u7b2c\u4e00\u5f20\u56fe\u8868\u3002<br \/>\n<strong>\u5206\u6b65\u5feb\u901f\u542f\u52a8\uff1a<\/strong><\/p>\n<ol>\n<li>\n<p><strong>\u8bbf\u95ee VPasCode<\/strong>\uff1a\u6253\u5f00\u6d4f\u89c8\u5668\u5e76\u8bbf\u95ee<a href=\"https:\/\/www.vpascode.com\/editor\/\">https:\/\/www.vpascode.com\/editor\/<\/a><\/p>\n<\/li>\n<li>\n<p><strong>\u9009\u62e9\u60a8\u7684\u5f15\u64ce<\/strong>\uff1a\u4ece\u4e0b\u62c9\u83dc\u5355\u4e2d\u9009\u62e9\uff1a<\/p>\n<ul>\n<li>\n<p><strong>Mermaid<\/strong>\u2014\u2014\u6700\u9002\u5408\u6d41\u7a0b\u56fe\u548c\u73b0\u4ee3\u6587\u6863<\/p>\n<\/li>\n<li>\n<p><strong>PlantUML<\/strong>\u2014\u2014\u975e\u5e38\u9002\u5408 UML \u548c\u4f01\u4e1a\u67b6\u6784<\/p>\n<\/li>\n<li>\n<p><strong>Graphviz<\/strong>\u2014\u2014\u5b8c\u7f8e\u9002\u7528\u4e8e\u590d\u6742\u7f51\u7edc\u62d3\u6251<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u52a0\u8f7d\u6a21\u677f<\/strong>\uff1a\u70b9\u51fb\u201c\u793a\u4f8b\u201d\u5e76\u9009\u62e9\u4e00\u4e2a\u5165\u95e8\u6a21\u677f<\/p>\n<\/li>\n<li>\n<p><strong>\u7f16\u8f91\u4e0e\u9884\u89c8<\/strong>\uff1a\u4fee\u6539\u5de6\u4fa7\u9762\u677f\u4e2d\u7684\u4ee3\u7801\uff1b\u53f3\u4fa7\u56fe\u8868\u5c06\u5b9e\u65f6\u66f4\u65b0<\/p>\n<\/li>\n<li>\n<p><strong>\u5bfc\u51fa\u6216\u5206\u4eab<\/strong>\uff1a\u4e0b\u8f7d\u4e3a SVG\/PNG \u683c\u5f0f\uff0c\u6216\u590d\u5236\u53ef\u5206\u4eab\u7684\u94fe\u63a5<\/p>\n<\/li>\n<\/ol>\n<p><img alt=\"VPasCode\uff1a\u901a\u8fc7\u56fe\u8868\u5373\u4ee3\u7801\u5b9e\u73b0\u7cfb\u7edf\u67b6\u6784\u6587\u6863\u5316\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/06\/img_6a1e86c394c18.png\"\/><br \/>\n<em>\u56fe 1\uff1aVPasCode \u53ef\u5373\u65f6\u5c06\u57fa\u4e8e\u6587\u672c\u7684\u4ee3\u7801\u8f6c\u6362\u4e3a\u4e13\u4e1a\u7684\u67b6\u6784\u56fe<\/em><\/p>\n<hr\/>\n<h2>2. \u4e86\u89e3 VPasCode \u754c\u9762 {#interface}<\/h2>\n<p>\u5728\u6df1\u5165\u8bed\u6cd5\u4e4b\u524d\uff0c\u8ba9\u6211\u4eec\u5148\u719f\u6089\u4e00\u4e0b\u5de5\u4f5c\u533a\u3002<br \/>\n<img alt=\"VPasCode \u7684\u7528\u6237\u754c\u9762\u2014\u2014\u4e00\u6b3e\u96c6\u6587\u672c\u8f6c\u56fe\u8868\uff08\u6216\u56fe\u8868\u5373\u4ee3\u7801\uff09\u4e8e\u4e00\u4f53\u7684\u7f16\u8f91\u5668\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/06\/img_6a17bfb3eef7d.png\"\/><br \/>\n<em>\u56fe 2\uff1a\u53cc\u9762\u677f VPasCode \u754c\u9762\u2014\u2014\u5de6\u4fa7\u4e3a\u4ee3\u7801\uff0c\u53f3\u4fa7\u4e3a\u5b9e\u65f6\u9884\u89c8<\/em><\/p>\n<h3>\u754c\u9762\u7ec4\u4ef6\u8be6\u89e3\uff1a<\/h3>\n<p><strong>\u5de6\u4fa7\u9762\u677f\uff08\u4ee3\u7801\u7f16\u8f91\u5668\uff09\uff1a<\/strong><\/p>\n<ul>\n<li>\n<p>\u8bed\u6cd5\u9ad8\u4eae\u6587\u672c\u7f16\u8f91\u5668<\/p>\n<\/li>\n<li>\n<p>\u884c\u53f7\u4ee5\u4fbf\u8f7b\u677e\u53c2\u8003<\/p>\n<\/li>\n<li>\n<p>\u81ea\u52a8\u8865\u5168\u652f\u6301<\/p>\n<\/li>\n<li>\n<p>\u5b9e\u65f6\u9519\u8bef\u9ad8\u4eae\u663e\u793a<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u53f3\u4fa7\u9762\u677f\uff08\u5b9e\u65f6\u9884\u89c8\uff09\uff1a<\/strong><\/p>\n<ul>\n<li>\n<p>\u5373\u65f6\u89c6\u89c9\u6e32\u67d3<\/p>\n<\/li>\n<li>\n<p>\u5e73\u79fb\u548c\u7f29\u653e\u63a7\u4ef6<\/p>\n<\/li>\n<li>\n<p>\u57fa\u4e8e\u77e2\u91cf\u7684\u663e\u793a\uff08\u4efb\u610f\u7f29\u653e\u7ea7\u522b\u4e0b\u5747\u6e05\u6670\u9510\u5229\uff09<\/p>\n<\/li>\n<li>\n<p>\u70b9\u51fb\u68c0\u67e5\u5143\u7d20<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u9876\u90e8\u5de5\u5177\u680f\uff1a<\/strong><\/p>\n<ul>\n<li>\n<p>\u5f15\u64ce\u9009\u62e9\u5668\uff08Mermaid\/PlantUML\/Graphviz\uff09<\/p>\n<\/li>\n<li>\n<p>\u6a21\u677f\u5e93<\/p>\n<\/li>\n<li>\n<p>\u5bfc\u51fa\u9009\u9879\uff08SVG\u3001PNG\u3001PDF\uff09<\/p>\n<\/li>\n<li>\n<p>\u5206\u4eab\u6309\u94ae\uff08\u751f\u6210\u6c38\u4e45\u94fe\u63a5\uff09<\/p>\n<\/li>\n<li>\n<p>\u8bbe\u7f6e\u4e0e\u504f\u597d<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u5e95\u90e8\u72b6\u6001\u680f\uff1a<\/strong><\/p>\n<ul>\n<li>\n<p>\u8bed\u6cd5\u9a8c\u8bc1\u72b6\u6001<\/p>\n<\/li>\n<li>\n<p>\u5b57\u7b26\u8ba1\u6570<\/p>\n<\/li>\n<li>\n<p>\u4e0a\u6b21\u4fdd\u5b58\u65f6\u95f4\u6233<\/p>\n<\/li>\n<li>\n<p>\u952e\u76d8\u5feb\u6377\u952e\u53c2\u8003<\/p>\n<\/li>\n<\/ul>\n<h3>\u6838\u5fc3\u5de5\u4f5c\u6d41\u7a0b\u539f\u5219\uff1a<\/h3>\n<pre><code>\u7f16\u5199\u4ee3\u7801 \u2192 \u67e5\u770b\u5373\u65f6\u9884\u89c8 \u2192 \u4f18\u5316 \u2192 \u5bfc\u51fa\/\u5206\u4eab\n<\/code><\/pre>\n<p>\u8fd9\u79cd\u5373\u65f6\u53cd\u9988\u5faa\u73af\u6b63\u662f VPasCode \u5982\u6b64\u5f3a\u5927\u7684\u539f\u56e0\u3002\u65e0\u9700\u70b9\u51fb\u201c\u6e32\u67d3\u201d\u6309\u94ae\uff0c\u4e5f\u65e0\u9700\u7b49\u5f85\u7f16\u8bd1\u2014\u2014\u53ea\u9700\u5728\u8f93\u5165\u65f6\u5373\u53ef\u83b7\u5f97\u7eaf\u7cb9\u3001\u5373\u65f6\u7684\u89c6\u89c9\u53cd\u9988\u3002<\/p>\n<hr\/>\n<h2>3. \u638c\u63e1 Mermaid.js\uff1a\u6d41\u7a0b\u56fe\u53ca\u5176\u4ed6 {#mermaid-tutorial}<\/h2>\n<p>Mermaid.js \u5df2\u6210\u4e3a\u9762\u5411\u5f00\u53d1\u8005\u7684\u56fe\u8868\u7ed8\u5236\u4e8b\u5b9e\u6807\u51c6\u3002\u5176\u8bed\u6cd5\u76f4\u89c2\u3001\u6613\u8bfb\uff0c\u975e\u5e38\u9002\u5408\u4e0e\u4ee3\u7801\u5171\u5b58\u7684\u6280\u672f\u6587\u6863\u3002<\/p>\n<h3>\u6559\u7a0b 1\uff1a\u521b\u5efa\u7528\u6237\u8ba4\u8bc1\u6d41\u7a0b<\/h3>\n<p>\u8ba9\u6211\u4eec\u6784\u5efa\u4e00\u4e2a\u5b9e\u7528\u7684\u8ba4\u8bc1\u6d41\u7a0b\u56fe\uff0c\u4f60\u53ef\u4ee5\u5728\u4e0b\u4e00\u6b21\u51b2\u523a\u89c4\u5212\u4e2d\u4f7f\u7528\u5b83\u3002<br \/>\n<strong>\u793a\u4f8b\u4ee3\u7801\uff1a<\/strong><\/p>\n<p><img alt=\"\u7528\u6237\u8ba4\u8bc1\u6d41\u7a0b\u56fe\uff0c\u5c55\u793a\u51ed\u8bc1\u9a8c\u8bc1\u3001JWT \u4ee4\u724c\u751f\u6210\u4ee5\u53ca\u5e26\u9519\u8bef\u5904\u7406\u5faa\u73af\u7684\u63a7\u5236\u53f0\u91cd\u5b9a\u5411\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8b6724da1.png\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpNj99rwkAMgN8H+x8Cvk7QrVXxYaP2hzrYBlY3RvHh1kvXw+5OcnHD6f731bZK8xAI+ZIv+SSxzWEZXF9BGV6yskgQakay4BNK1KxEYdfQ7d7D5PAqCiUhMvQl+OGvHpqcesdncwQ\/iXPzAxUkWBkNIZGhdZt7R3uEIIlRS2AD3o5ziJG+VYoN51cury6CqggPrVvgSXCan+3hxR4lC+QdaXB6fVhpUW42pH5Rrttk5Z8mU9RIghEe35awNBvUDTWthLMkZkNYd0BpmDFvX3SxB9+YjTqfOqvgeSmWijDl00eBsPmHEXTWRu136mx5XyB4kKmiGHewn7lZdmOZStm40+sNBmnaBucNKB2UUlzA25EYOm4bjBowG8lhC5Tpneu4\/12qjr4=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 Mermaid<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpNj99rwkAMgN8H+x8Cvk7QrVXxYaP2hzrYBlY3RvHh1kvXw+5OcnHD6f731bZK8xAI+ZIv+SSxzWEZXF9BGV6yskgQakay4BNK1KxEYdfQ7d7D5PAqCiUhMvQl+OGvHpqcesdncwQ\/iXPzAxUkWBkNIZGhdZt7R3uEIIlRS2AD3o5ziJG+VYoN51cury6CqggPrVvgSXCan+3hxR4lC+QdaXB6fVhpUW42pH5Rrttk5Z8mU9RIghEe35awNBvUDTWthLMkZkNYd0BpmDFvX3SxB9+YjTqfOqvgeSmWijDl00eBsPmHEXTWRu136mx5XyB4kKmiGHewn7lZdmOZStm40+sNBmnaBucNKB2UUlzA25EYOm4bjBowG8lhC5Tpneu4\/12qjr4=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 Mermaid<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpNz81KAlEUB\/B9T3HAbYLWjIqLwG9t00ZoMbgQZ6bEIUVnIxpkUY6hqWRgNWaCxSDoBC36UPRlvNeZVa\/QdEds7uJyuPd3+J9zlE\/mjiEe3ALj+JhVR8HShza\/RZcvqDrGjUkC7PY98Jfw8wzNmliu4TvpZ9Y\/JQ3+v88yar2WIcDg7nw1\/NZHdU2t6J17TVUTFoS7ahmCDGq29bOKVn3XJkPDYbmBrgemC5AkH6mDpA6VzBlQ\/Uu\/bGxSQ\/+pYUZbdNDjE1AOJ2B5hG8k3LtIWBjJjRiL9bHUgv3DOCynw1WtbpoIyYky6O3KfEbjLjpXkKxAVBRzBydCEQLZbCbNwfJzbPZESU+M0asNNHlArbaxzXI60gYK7i1MErasQq6CWBQ48AGfFgSvjXPyNM9vF8R8NsN5bQ6Hy5VKWVxs7ViKY9nkxu14km6Ktrjw2vEe1m1xbGqXpuhf6EbEmg==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">graph TD\n    A[\u7528\u6237\u8f93\u5165\u51ed\u636e] --&gt; B{\u683c\u5f0f\u6709\u6548\uff1f}\n    B --&gt;|\u5426| C[\u663e\u793a\u9a8c\u8bc1\u9519\u8bef]\n    B --&gt;|\u662f| D[\u53d1\u9001\u81f3\u8ba4\u8bc1\u670d\u52a1]\n    C --&gt; A\n    D --&gt; E{\u51ed\u636e\u5339\u914d\uff1f}\n    E --&gt;|\u5426| F[\u8fd4\u56de 401 \u672a\u6388\u6743]\n    E --&gt;|\u662f| G[\u751f\u6210 JWT \u4ee4\u724c]\n    G --&gt; H[\u5c06\u4ee4\u724c\u5b58\u50a8\u5728 HttpOnly Cookie \u4e2d]\n    H --&gt; I[\u91cd\u5b9a\u5411\u81f3\u4eea\u8868\u677f]\n    F --&gt; A\n    \n    style A fill:#e1f5ff,stroke:#0066cc\n    style I fill:#d4edda,stroke:#28a745\n    style F fill:#f8d7da,stroke:#dc3545\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpNz81KAlEUB\/B9T3HAbYLWjIqLwG9t00ZoMbgQZ6bEIUVnIxpkUY6hqWRgNWaCxSDoBC36UPRlvNeZVa\/QdEds7uJyuPd3+J9zlE\/mjiEe3ALj+JhVR8HShza\/RZcvqDrGjUkC7PY98Jfw8wzNmliu4TvpZ9Y\/JQ3+v88yar2WIcDg7nw1\/NZHdU2t6J17TVUTFoS7ahmCDGq29bOKVn3XJkPDYbmBrgemC5AkH6mDpA6VzBlQ\/Uu\/bGxSQ\/+pYUZbdNDjE1AOJ2B5hG8k3LtIWBjJjRiL9bHUgv3DOCynw1WtbpoIyYky6O3KfEbjLjpXkKxAVBRzBydCEQLZbCbNwfJzbPZESU+M0asNNHlArbaxzXI60gYK7i1MErasQq6CWBQ48AGfFgSvjXPyNM9vF8R8NsN5bQ6Hy5VKWVxs7ViKY9nkxu14km6Ktrjw2vEe1m1xbGqXpuhf6EbEmg==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpNj99rwkAMgN8H+x8Cvk7QrVXxYaP2hzrYBlY3RvHh1kvXw+5OcnHD6f731bZK8xAI+ZIv+SSxzWEZXF9BGV6yskgQakay4BNK1KxEYdfQ7d7D5PAqCiUhMvQl+OGvHpqcesdncwQ\/iXPzAxUkWBkNIZGhdZt7R3uEIIlRS2AD3o5ziJG+VYoN51cury6CqggPrVvgSXCan+3hxR4lC+QdaXB6fVhpUW42pH5Rrttk5Z8mU9RIghEe35awNBvUDTWthLMkZkNYd0BpmDFvX3SxB9+YjTqfOqvgeSmWijDl00eBsPmHEXTWRu136mx5XyB4kKmiGHewn7lZdmOZStm40+sNBmnaBucNKB2UUlzA25EYOm4bjBowG8lhC5Tpneu4\/12qjr4=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 Mermaid<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpNj99rwkAMgN8H+x8Cvk7QrVXxYaP2hzrYBlY3RvHh1kvXw+5OcnHD6f731bZK8xAI+ZIv+SSxzWEZXF9BGV6yskgQakay4BNK1KxEYdfQ7d7D5PAqCiUhMvQl+OGvHpqcesdncwQ\/iXPzAxUkWBkNIZGhdZt7R3uEIIlRS2AD3o5ziJG+VYoN51cury6CqggPrVvgSXCan+3hxR4lC+QdaXB6fVhpUW42pH5Rrttk5Z8mU9RIghEe35awNBvUDTWthLMkZkNYd0BpmDFvX3SxB9+YjTqfOqvgeSmWijDl00eBsPmHEXTWRu136mx5XyB4kKmiGHewn7lZdmOZStm40+sNBmnaBucNKB2UUlzA25EYOm4bjBowG8lhC5Tpneu4\/12qjr4=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 Mermaid<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>\u672c\u793a\u4f8b\u5c55\u793a\u7684\u5185\u5bb9\uff1a<\/strong><\/p>\n<ul>\n<li>\n<p>\u51b3\u7b56\u8282\u70b9\uff08\u5e26<code data-backticks=\"1\">{?}<\/code>)<\/p>\n<\/li>\n<li>\n<p>\u65b9\u5411\u6d41\u7a0b\uff08<code data-backticks=\"1\">TD<\/code> = \u81ea\u4e0a\u800c\u4e0b\uff09<\/p>\n<\/li>\n<li>\n<p>\u4f7f\u7528\u989c\u8272\u7684\u81ea\u5b9a\u4e49\u6837\u5f0f<\/p>\n<\/li>\n<li>\n<p>\u81ea\u5f15\u7528\u5faa\u73af<\/p>\n<\/li>\n<li>\n<p>\u6e05\u6670\u7684\u6807\u7b7e<\/p>\n<\/li>\n<\/ul>\n<h3>\u6559\u7a0b 2\uff1a\u5fae\u670d\u52a1\u67b6\u6784\u56fe<\/h3>\n<p>\u73b0\u5728\u8ba9\u6211\u4eec\u521b\u5efa\u4e00\u4e2a\u66f4\u590d\u6742\u7684\u7cfb\u7edf\u67b6\u6784\u56fe\uff0c\u5c55\u793a\u670d\u52a1\u4e4b\u95f4\u7684\u5173\u7cfb\u3002<br \/>\n<strong>\u793a\u4f8b\u4ee3\u7801\uff1a<\/strong><\/p>\n<p><img alt=\"\u5fae\u670d\u52a1\u67b6\u6784\u56fe\uff0c\u5c55\u793a\u5ba2\u6237\u7aef\u5c42\u3001API \u7f51\u5173\u3001\u4e1a\u52a1\u670d\u52a1\u5c42\u548c\u6570\u636e\u5c42\uff0c\u4ee5\u53ca PostgreSQL\u3001MongoDB \u548c Redis \u7684\u8fde\u63a5\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8b8990079.png\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqNUt9rwjAQfh\/sfwj1RUGZiHNOhmAtG2OOucrYQ9hDml41rFpJ0on\/\/ZpfXWndZqCX5rvvkvvubs3JfoMW4eUFKpbIo7UG5imDncSe2dGCHIF7H4ak1jtEuPjQbL+\/i\/jVNARCZcX\/nEUsBWy2knWf5lICtzzYxean9vZs+Yi9wqAHIuFAjtV3LYTRU7ZbuxOqEGa53GBl0Ar4F6NQ8YUFHSuDFmzL\/k\/E3iCw5+eC7UCIEqrm9CaAY2VOPPnC48Kp7QnvkmdxTiW2+ykGOW5VI+xeY\/yWeEAkwZ6yzc6pRAMft3XCga\/7ssyEXHNYvS469dwV1aRvuc9F4bPA7zRlKKpT8ufFc0I3gNshxEyYQ+e0IDVhvd7U9dmAdqYauBsG5VAD0ERV6w2qh0BBqgo1SKutYVaWQXXlXHDg10Ctx2CmbuWdjvoD264a2JWu8p6LcN1vXGX7Lo9FQZzShKXppJUko2gUdYXk2SdMWvR2QAakS7M045PDhrlCmFAjxEYOgcZ0WEb2xzfJdVRl2wzOpZdazg3QFSxlwGgUl+SkP6b9\/jc5B1T5\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 Mermaid<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqNUt9rwjAQfh\/sfwj1RUGZiHNOhmAtG2OOucrYQ9hDml41rFpJ0on\/\/ZpfXWndZqCX5rvvkvvubs3JfoMW4eUFKpbIo7UG5imDncSe2dGCHIF7H4ak1jtEuPjQbL+\/i\/jVNARCZcX\/nEUsBWy2knWf5lICtzzYxean9vZs+Yi9wqAHIuFAjtV3LYTRU7ZbuxOqEGa53GBl0Ar4F6NQ8YUFHSuDFmzL\/k\/E3iCw5+eC7UCIEqrm9CaAY2VOPPnC48Kp7QnvkmdxTiW2+ykGOW5VI+xeY\/yWeEAkwZ6yzc6pRAMft3XCga\/7ssyEXHNYvS469dwV1aRvuc9F4bPA7zRlKKpT8ufFc0I3gNshxEyYQ+e0IDVhvd7U9dmAdqYauBsG5VAD0ERV6w2qh0BBqgo1SKutYVaWQXXlXHDg10Ctx2CmbuWdjvoD264a2JWu8p6LcN1vXGX7Lo9FQZzShKXppJUko2gUdYXk2SdMWvR2QAakS7M045PDhrlCmFAjxEYOgcZ0WEb2xzfJdVRl2wzOpZdazg3QFSxlwGgUl+SkP6b9\/jc5B1T5\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 Mermaid<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqNUl1rE0EUfd9fsWxfGmhpKDW2oRSaBkVsMaYUHwYfZmdnk8U1K7MTSx4rFKQQUJJCK31pERoQE0VESfXfZHbjv3BmdrIf2aJd2K97z7n3nnOnQeCrpr5b13R++W2zIf93XAe3KDDY8Cp4+yP8NGJf3xjPJUZcz7AJ+K2zcT\/sDzZNsrJVxxDRBLHnmY6LQXh9w04GKdgDt00pJhEQtyz5zvberj0CBn\/o4e\/37Phbqu1DSPEh7IDHXquhsklyu02bYDr8OB0dBRdddnKZpOqcB\/6cvwu+H7Hzwb9672Py2kHYB8bk5wdeI6qUGuHAxwRwMdyV+S5PiMVz0+EV657O52rEs9qIgsn4mvVy89Vg56WwO+iPJjdn6eztU1YhhcAITr8E3WF2MWK8agUsqgkjxLgnra95Pm0QvP90tzA3tGCouTOMPe6zV60UcjoEQUn5f4sdiJoYLNax5fh6+KvHPp8VblEnztPy8tZsyVpyinJh9S3jYu25oFi4Ntu8jAhjshGpPBtS6rSZkzGzWsnGpCQt9i+pp4BJVK1WS5mXbqXwCpWrE62ddrgHM3m247rlBdsumSVzyafEe4HLC2hjFa7CJeS5HikfNh2lPmJGAhRxDSMLrcXE4vp9+56ZAqvud0THKu6Il77FEnCpZMVYu7iOisW\/NEWTKA==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">graph LR\n    subgraph Client[\"\u5ba2\u6237\u7aef\u5c42\"]\n        Web[Web \u5e94\u7528&lt;br\/&gt;React]\n        Mobile[\u79fb\u52a8\u5e94\u7528&lt;br\/&gt;Flutter]\n    end\n    \n    subgraph API[\"API \u7f51\u5173\"]\n        Gateway[Kong \u7f51\u5173]\n        Auth[\u8ba4\u8bc1\u670d\u52a1]\n        Rate[\u9650\u6d41\u5668]\n    end\n    \n    subgraph Services[\"\u4e1a\u52a1\u670d\u52a1\"]\n        User[\u7528\u6237\u670d\u52a1]\n        Order[\u8ba2\u5355\u670d\u52a1]\n        Product[\u4ea7\u54c1\u670d\u52a1]\n        Payment[\u652f\u4ed8\u670d\u52a1]\n    end\n    \n    subgraph Data[\"\u6570\u636e\u5c42\"]\n        UserDB[(\u7528\u6237\u6570\u636e\u5e93&lt;br\/&gt;PostgreSQL)]\n        OrderDB[(\u8ba2\u5355\u6570\u636e\u5e93&lt;br\/&gt;MongoDB)]\n        ProductDB[(\u4ea7\u54c1\u6570\u636e\u5e93&lt;br\/&gt;PostgreSQL)]\n        Cache[(Redis \u7f13\u5b58)]\n    end\n    \n    Web --&gt; Gateway\n    Mobile --&gt; Gateway\n    Gateway --&gt; Auth\n    Gateway --&gt; Rate\n    Rate --&gt; User\n    Rate --&gt; Order\n    Rate --&gt; Product\n    User --&gt; UserDB\n    User --&gt; Cache\n    Order --&gt; OrderDB\n    Order --&gt; Payment\n    Product --&gt; ProductDB\n    Payment --&gt; OrderDB\n    \n    style Gateway fill:#ff6b6b,stroke:#c92a2a,color:white\n    style UserDB fill:#4ecdc4,stroke:#087f5b\n    style OrderDB fill:#4ecdc4,stroke:#087f5b\n    style ProductDB fill:#4ecdc4,stroke:#087f5b\n    style Cache fill:#ffe66d,stroke:#f08c00\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqNUl1rE0EUfd9fsWxfGmhpKDW2oRSaBkVsMaYUHwYfZmdnk8U1K7MTSx4rFKQQUJJCK31pERoQE0VESfXfZHbjv3BmdrIf2aJd2K97z7n3nnOnQeCrpr5b13R++W2zIf93XAe3KDDY8Cp4+yP8NGJf3xjPJUZcz7AJ+K2zcT\/sDzZNsrJVxxDRBLHnmY6LQXh9w04GKdgDt00pJhEQtyz5zvberj0CBn\/o4e\/37Phbqu1DSPEh7IDHXquhsklyu02bYDr8OB0dBRdddnKZpOqcB\/6cvwu+H7Hzwb9672Py2kHYB8bk5wdeI6qUGuHAxwRwMdyV+S5PiMVz0+EV657O52rEs9qIgsn4mvVy89Vg56WwO+iPJjdn6eztU1YhhcAITr8E3WF2MWK8agUsqgkjxLgnra95Pm0QvP90tzA3tGCouTOMPe6zV60UcjoEQUn5f4sdiJoYLNax5fh6+KvHPp8VblEnztPy8tZsyVpyinJh9S3jYu25oFi4Ntu8jAhjshGpPBtS6rSZkzGzWsnGpCQt9i+pp4BJVK1WS5mXbqXwCpWrE62ddrgHM3m247rlBdsumSVzyafEe4HLC2hjFa7CJeS5HikfNh2lPmJGAhRxDSMLrcXE4vp9+56ZAqvud0THKu6Il77FEnCpZMVYu7iOisW\/NEWTKA==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqNUt9rwjAQfh\/sfwj1RUGZiHNOhmAtG2OOucrYQ9hDml41rFpJ0on\/\/ZpfXWndZqCX5rvvkvvubs3JfoMW4eUFKpbIo7UG5imDncSe2dGCHIF7H4ak1jtEuPjQbL+\/i\/jVNARCZcX\/nEUsBWy2knWf5lICtzzYxean9vZs+Yi9wqAHIuFAjtV3LYTRU7ZbuxOqEGa53GBl0Ar4F6NQ8YUFHSuDFmzL\/k\/E3iCw5+eC7UCIEqrm9CaAY2VOPPnC48Kp7QnvkmdxTiW2+ykGOW5VI+xeY\/yWeEAkwZ6yzc6pRAMft3XCga\/7ssyEXHNYvS469dwV1aRvuc9F4bPA7zRlKKpT8ufFc0I3gNshxEyYQ+e0IDVhvd7U9dmAdqYauBsG5VAD0ERV6w2qh0BBqgo1SKutYVaWQXXlXHDg10Ctx2CmbuWdjvoD264a2JWu8p6LcN1vXGX7Lo9FQZzShKXppJUko2gUdYXk2SdMWvR2QAakS7M045PDhrlCmFAjxEYOgcZ0WEb2xzfJdVRl2wzOpZdazg3QFSxlwGgUl+SkP6b9\/jc5B1T5\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 Mermaid<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqNUt9rwjAQfh\/sfwj1RUGZiHNOhmAtG2OOucrYQ9hDml41rFpJ0on\/\/ZpfXWndZqCX5rvvkvvubs3JfoMW4eUFKpbIo7UG5imDncSe2dGCHIF7H4ak1jtEuPjQbL+\/i\/jVNARCZcX\/nEUsBWy2knWf5lICtzzYxean9vZs+Yi9wqAHIuFAjtV3LYTRU7ZbuxOqEGa53GBl0Ar4F6NQ8YUFHSuDFmzL\/k\/E3iCw5+eC7UCIEqrm9CaAY2VOPPnC48Kp7QnvkmdxTiW2+ykGOW5VI+xeY\/yWeEAkwZ6yzc6pRAMft3XCga\/7ssyEXHNYvS469dwV1aRvuc9F4bPA7zRlKKpT8ufFc0I3gNshxEyYQ+e0IDVhvd7U9dmAdqYauBsG5VAD0ERV6w2qh0BBqgo1SKutYVaWQXXlXHDg10Ctx2CmbuWdjvoD264a2JWu8p6LcN1vXGX7Lo9FQZzShKXppJUko2gUdYXk2SdMWvR2QAakS7M045PDhrlCmFAjxEYOgcZ0WEb2xzfJdVRl2wzOpZdazg3QFSxlwGgUl+SkP6b9\/jc5B1T5\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 Mermaid<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>\u6838\u5fc3\u6982\u5ff5\uff1a<\/strong><\/p>\n<ul>\n<li>\n<p><code data-backticks=\"1\">\u5b50\u56fe<\/code>\u7528\u4e8e\u903b\u8f91\u5206\u7ec4<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">LR<\/code>\u7528\u4e8e\u4ece\u5de6\u5230\u53f3\u7684\u5e03\u5c40<\/p>\n<\/li>\n<li>\n<p>\u4f7f\u7528 \u5b9e\u73b0\u591a\u884c\u6807\u7b7e<code data-backticks=\"1\">&lt;br\/&gt;<\/code><\/p>\n<\/li>\n<li>\n<p>\u4f7f\u7528 \u8868\u793a\u6570\u636e\u5e93\u5706\u67f1\u4f53\u7b26\u53f7<code data-backticks=\"1\">[( )]<\/code><\/p>\n<\/li>\n<li>\n<p>\u590d\u6742\u7684\u8def\u7531\u548c\u5173\u7cfb<\/p>\n<\/li>\n<\/ul>\n<h3>\u6559\u7a0b 3\uff1a\u8ba2\u5355\u5904\u7406\u5e8f\u5217\u56fe<\/h3>\n<p>\u5e8f\u5217\u56fe\u5bf9\u4e8e\u7406\u89e3\u7ec4\u4ef6\u4e4b\u95f4\u7684\u65f6\u5e8f\u4ea4\u4e92\u81f3\u5173\u91cd\u8981\u3002<br \/>\n<strong>\u793a\u4f8b\u4ee3\u7801\uff1a<\/strong><\/p>\n<p><img alt=\"\u5e8f\u5217\u56fe\uff0c\u8bf4\u660e\u5ba2\u6237\u3001Web \u5e94\u7528\u3001\u8ba2\u5355\u670d\u52a1\u3001\u652f\u4ed8\u670d\u52a1\u3001\u5e93\u5b58\u670d\u52a1\u548c\u901a\u77e5\u670d\u52a1\u4e4b\u95f4\u7684\u8ba2\u5355\u5904\u7406\u6d41\u7a0b\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8bb593914.png\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1klFrgzAUhd8H+w+XPm3Qrl0fZRSK3YMvKuugzzHeaqgmLokdpfS\/78YorrQVEeN3cu+5Jxr8aVFy3AhWaFY\/PwFdrLVKtnWG2q8bpq3gomHSQgjMQNgaq+p7eOfwDjNYN80tTRxNdI4atqiPguOtJnWalJ1qpMVDVeRUkTySSOnTY13sdLGyYi84s0LJa6l\/hrPVahfAOs9BWKwNWAWcilzRsBL8AJOwRH5QrZ14uCOYBJAm22+YKzeZgXNXZAqmFE0jZHHx0oSkUQBfaMgBghjMexrNfCWPvVWu5F7oGvOxQEq9tOJoDI3ZZeRZ2m8fgjMtd6J9W417CYcamUXojIJGTi8jjwMKR+Y97Zt3Trwmdj3CAD5rJqo7PJn5pJaL975RDueuWJRfhrh8iW2pfgePNEhxdRx0XGTxSB6Saeo8CzpOVoFB7pp9ZHq+qukPhAzBaiYN676zflQay4IuMvayXCym0D3c\/bZ89YJ\/WYYl0wW6w85HNmT5PdaGaOM55fMHOQD0Aw==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 Mermaid<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1klFrgzAUhd8H+w+XPm3Qrl0fZRSK3YMvKuugzzHeaqgmLokdpfS\/78YorrQVEeN3cu+5Jxr8aVFy3AhWaFY\/PwFdrLVKtnWG2q8bpq3gomHSQgjMQNgaq+p7eOfwDjNYN80tTRxNdI4atqiPguOtJnWalJ1qpMVDVeRUkTySSOnTY13sdLGyYi84s0LJa6l\/hrPVahfAOs9BWKwNWAWcilzRsBL8AJOwRH5QrZ14uCOYBJAm22+YKzeZgXNXZAqmFE0jZHHx0oSkUQBfaMgBghjMexrNfCWPvVWu5F7oGvOxQEq9tOJoDI3ZZeRZ2m8fgjMtd6J9W417CYcamUXojIJGTi8jjwMKR+Y97Zt3Trwmdj3CAD5rJqo7PJn5pJaL975RDueuWJRfhrh8iW2pfgePNEhxdRx0XGTxSB6Saeo8CzpOVoFB7pp9ZHq+qukPhAzBaiYN676zflQay4IuMvayXCym0D3c\/bZ89YJ\/WYYl0wW6w85HNmT5PdaGaOM55fMHOQD0Aw==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 Mermaid<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1kU9PGkEYxu9+ivdoE6yUI2m44GUvLEmbcF5gQvfAgrOLF2OyWsSVxtQGSNBqLIh\/muhqUlvT3Wi\/i+Gd2f0W3Z1BSkOcbCbZ9\/c8M+\/7jElWG8QokRVdq1CtugDR0hpWzWhUi4SK37pGLb2k1zXDgixoJqA7ZM79HCvErECKgF6Xdy\/nuBrzwB3iXo8d7WF7MKfIxwrWvRn7\/RcUirjf6+D1S4pcrAjtQ35yNqMQW3Ypkymkgd372P6GvRZ2NtG5De6u+e734OF8VsO3fuOO\/2Qfcb8T3J0\/2ceCFiKqpiGvvnsPyzVaJtSEdd0iVTMB5ge9XteNyoZQqpFSSUM4bPLegWxY1JUleYQEfOAG7mhqyKcBR02+35IZiHp+YpjE4uxj+2RqiOrofEXfk7EG7i0+9KY0F9HPX0J7U9KZy3Lxodmoiy137P\/6rws5fyr5BrKUaBYpw7oYVClvTCKQVtZ\/5CNP9hMOfobHw39B52oWgdoaoaAm4pm2f4RdN\/x4iU7rbZEuZ\/DPdjjwWf9m7H2KXojZF\/ywKZyUlCyglaK2mEomEyC2+HudeiX4TFJs95RdPU6rzzmNvRHrd0BZEYQY5b9fyDG\/\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">sequenceDiagram\n    autonumber\n    participant C as \u5ba2\u6237\n    participant W as Web \u5e94\u7528\n    participant O as \u8ba2\u5355\u670d\u52a1\n    participant P as \u652f\u4ed8\u670d\u52a1\n    participant I as \u5e93\u5b58\u670d\u52a1\n    participant N as \u901a\u77e5\u670d\u52a1\n    \n    C-&gt;&gt;W: \u6dfb\u52a0\u5546\u54c1\u5230\u8d2d\u7269\u8f66\n    C-&gt;&gt;W: \u70b9\u51fb\u201c\u7ed3\u8d26\u201d\n    W-&gt;&gt;O: POST \/orders {items, shipping}\n    O-&gt;&gt;I: \u9884\u7559\u5e93\u5b58\n    I--&gt;&gt;O: \u9884\u7559\u786e\u8ba4\n    O-&gt;&gt;P: \u5904\u7406\u652f\u4ed8\n    P--&gt;&gt;O: \u652f\u4ed8\u6210\u529f\n    O-&gt;&gt;O: \u521b\u5efa\u8ba2\u5355\u8bb0\u5f55\n    O-&gt;&gt;N: \u53d1\u9001\u8ba2\u5355\u786e\u8ba4\n    N--&gt;&gt;C: \u90ae\u4ef6\u786e\u8ba4\n    O--&gt;&gt;W: 201 Created {orderId}\n    W--&gt;&gt;C: \u663e\u793a\u6210\u529f\u9875\u9762\n    \n    Note over O,P: \u5173\u952e\u90e8\u5206&lt;br\/&gt;\u5fc5\u987b\u662f\u4e8b\u52a1\u6027\u7684\n    rect rgba(200, 200, 0, 0.2)\n        O-&gt;&gt;P: \u6263\u6b3e\n        P--&gt;&gt;O: \u4ea4\u6613 ID\n    end\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1kU9PGkEYxu9+ivdoE6yUI2m44GUvLEmbcF5gQvfAgrOLF2OyWsSVxtQGSNBqLIh\/muhqUlvT3Wi\/i+Gd2f0W3Z1BSkOcbCbZ9\/c8M+\/7jElWG8QokRVdq1CtugDR0hpWzWhUi4SK37pGLb2k1zXDgixoJqA7ZM79HCvErECKgF6Xdy\/nuBrzwB3iXo8d7WF7MKfIxwrWvRn7\/RcUirjf6+D1S4pcrAjtQ35yNqMQW3Ypkymkgd372P6GvRZ2NtG5De6u+e734OF8VsO3fuOO\/2Qfcb8T3J0\/2ceCFiKqpiGvvnsPyzVaJtSEdd0iVTMB5ge9XteNyoZQqpFSSUM4bPLegWxY1JUleYQEfOAG7mhqyKcBR02+35IZiHp+YpjE4uxj+2RqiOrofEXfk7EG7i0+9KY0F9HPX0J7U9KZy3Lxodmoiy137P\/6rws5fyr5BrKUaBYpw7oYVClvTCKQVtZ\/5CNP9hMOfobHw39B52oWgdoaoaAm4pm2f4RdN\/x4iU7rbZEuZ\/DPdjjwWf9m7H2KXojZF\/ywKZyUlCyglaK2mEomEyC2+HudeiX4TFJs95RdPU6rzzmNvRHrd0BZEYQY5b9fyDG\/\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1klFrgzAUhd8H+w+XPm3Qrl0fZRSK3YMvKuugzzHeaqgmLokdpfS\/78YorrQVEeN3cu+5Jxr8aVFy3AhWaFY\/PwFdrLVKtnWG2q8bpq3gomHSQgjMQNgaq+p7eOfwDjNYN80tTRxNdI4atqiPguOtJnWalJ1qpMVDVeRUkTySSOnTY13sdLGyYi84s0LJa6l\/hrPVahfAOs9BWKwNWAWcilzRsBL8AJOwRH5QrZ14uCOYBJAm22+YKzeZgXNXZAqmFE0jZHHx0oSkUQBfaMgBghjMexrNfCWPvVWu5F7oGvOxQEq9tOJoDI3ZZeRZ2m8fgjMtd6J9W417CYcamUXojIJGTi8jjwMKR+Y97Zt3Trwmdj3CAD5rJqo7PJn5pJaL975RDueuWJRfhrh8iW2pfgePNEhxdRx0XGTxSB6Saeo8CzpOVoFB7pp9ZHq+qukPhAzBaiYN676zflQay4IuMvayXCym0D3c\/bZ89YJ\/WYYl0wW6w85HNmT5PdaGaOM55fMHOQD0Aw==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 Mermaid<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp1klFrgzAUhd8H+w+XPm3Qrl0fZRSK3YMvKuugzzHeaqgmLokdpfS\/78YorrQVEeN3cu+5Jxr8aVFy3AhWaFY\/PwFdrLVKtnWG2q8bpq3gomHSQgjMQNgaq+p7eOfwDjNYN80tTRxNdI4atqiPguOtJnWalJ1qpMVDVeRUkTySSOnTY13sdLGyYi84s0LJa6l\/hrPVahfAOs9BWKwNWAWcilzRsBL8AJOwRH5QrZ14uCOYBJAm22+YKzeZgXNXZAqmFE0jZHHx0oSkUQBfaMgBghjMexrNfCWPvVWu5F7oGvOxQEq9tOJoDI3ZZeRZ2m8fgjMtd6J9W417CYcamUXojIJGTi8jjwMKR+Y97Zt3Trwmdj3CAD5rJqo7PJn5pJaL975RDueuWJRfhrh8iW2pfgePNEhxdRx0XGTxSB6Saeo8CzpOVoFB7pp9ZHq+qukPhAzBaiYN676zflQay4IuMvayXCym0D3c\/bZ89YJ\/WYYl0wW6w85HNmT5PdaGaOM55fMHOQD0Aw==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 Mermaid<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>\u5e8f\u5217\u56fe\u529f\u80fd\uff1a<\/strong><\/p>\n<ul>\n<li>\n<p><code data-backticks=\"1\">autonumber<\/code>\u7528\u4e8e\u81ea\u52a8\u6b65\u9aa4\u7f16\u53f7<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">participant<\/code>\u58f0\u660e<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">-&gt;&gt;<\/code>\u7528\u4e8e\u540c\u6b65\u8c03\u7528<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">--&gt;&gt;<\/code>\u7528\u4e8e\u54cd\u5e94<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">\u6ce8\u610f\u8986\u76d6<\/code>\u7528\u4e8e\u6ce8\u91ca<\/p>\n<\/li>\n<li>\n<p><code data-backticks=\"1\">\u77e9\u5f62<\/code>\u7528\u4e8e\u9ad8\u4eae\u663e\u793a\u90e8\u5206<\/p>\n<\/li>\n<\/ul>\n<h3>\u6559\u7a0b 4\uff1a\u51b2\u523a\u8ba1\u5212\u7684\u7518\u7279\u56fe<\/h3>\n<p>Mermaid \u8fd8\u652f\u6301\u9879\u76ee\u65f6\u95f4\u7ebf\u53ef\u89c6\u5316\u3002<br \/>\n<strong>\u793a\u4f8b\u4ee3\u7801\uff1a<\/strong><\/p>\n<p><img alt=\"\u8ba4\u8bc1\u6a21\u5757\u7b2c 24 \u6b21\u51b2\u523a\u7518\u7279\u56fe\uff0c\u5c55\u793a 6 \u6708 1 \u65e5\u81f3 6 \u6708 17 \u65e5\u671f\u95f4\u540e\u7aef\u3001\u524d\u7aef\u548c\u96c6\u6210\u56e2\u961f\u7684\u65f6\u95f4\u7ebf\u4efb\u52a1\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8bd9463b2.png\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFkUFrwzAMhe+D\/QddemtY64QdettoCx0rFNoxdvQSNROr7eIoZfv3U+IkTaBhOhhj5XvSe8m1Zb6\/AykmPiHsz54sg0oggqeSv9AypZrJWdi6rDxh+DjTjGvnjWaAD6lou42Wy9DTP1S0vYl5mGThOZwFprXYs06\/0TatJRaUW3jabSB1lr1OuYBQi8xZnNYjsZhPQc1UEs0eo1l1b\/CNOZ\/QyKbw8n6QCf5CKTa4SNGlEhBc9fB4CnE7XbP+1AWCodwHq20tupvggugjo2+lGvzNEgNjwWRzGNSATnp0fKWHqay92O9ieXU5WUnEnCUDcXdL+VgR89vGDk4iBqOtzkM8Y7xqd+vUGoWddyyrYQbeleJxVCEeKKgxfxtx12QcGtUvp+vjTYtUr9SFl1zFV2r1X\/LUcxeE2nT2mJae+Bd0mRGPwXEPrm39ASby08A=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 Mermaid<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">Mermaid<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFkUFrwzAMhe+D\/QddemtY64QdettoCx0rFNoxdvQSNROr7eIoZfv3U+IkTaBhOhhj5XvSe8m1Zb6\/AykmPiHsz54sg0oggqeSv9AypZrJWdi6rDxh+DjTjGvnjWaAD6lou42Wy9DTP1S0vYl5mGThOZwFprXYs06\/0TatJRaUW3jabSB1lr1OuYBQi8xZnNYjsZhPQc1UEs0eo1l1b\/CNOZ\/QyKbw8n6QCf5CKTa4SNGlEhBc9fB4CnE7XbP+1AWCodwHq20tupvggugjo2+lGvzNEgNjwWRzGNSATnp0fKWHqay92O9ieXU5WUnEnCUDcXdL+VgR89vGDk4iBqOtzkM8Y7xqd+vUGoWddyyrYQbeleJxVCEeKKgxfxtx12QcGtUvp+vjTYtUr9SFl1zFV2r1X\/LUcxeE2nT2mJae+Bd0mRGPwXEPrm39ASby08A=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 Mermaid<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp9ks9LwzAUx+\/+Fe+y24pbWzzsJoigMBAUxGNxnRRcK10Qr8NtbNPNiZbhjwmFqQOhnQcVVnT\/zNLU\/8I0XUsLne8Qkpd8vi\/flxxJKkIrQAMp6FiG3RNdURHwInDgWSPPrrljEw8H7EhJQvKmplckBHBAgysWuY0NtiWdKdVwK1NZzZRYlg1V+RApmgq43yNvNkt51o9nmbC+swX4+ZpMXyCIQklT5SwrJVfzWeBzvMjl1ricPw8ksfVEehPY3t8D97GLO+aClGiRU5+lJB8jhSwIAekaE7dr4emNN6uRVwfCKEQzitLjUhnJeiizKNo1cOPc\/bjwbAMSkYDFGCxEcLIJ7W7YBHLn4G+DOPW585mqWNY1FeVTvcydEWlfEssk\/eZSlA+vEwkt3FwN5rOh2xmR+7r3ZZPb96USQkKCT\/f0+9B0W32W8l80WKY6Utg1oh6JkR7tCW5N6Ph\/j5WYqUBLCH9FGzfG2DL9b7WEFGIkc\/IHEdX2eA==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">gantt\n    title Sprint 24 - \u8ba4\u8bc1\u6a21\u5757\n    dateFormat  YYYY-MM-DD\n    axisFormat  %m\/%d\n    \n    section \u540e\u7aef\n    \u8bbe\u8ba1 API \u5951\u7ea6       :done,    des1, 2024-06-01, 2d\n    \u5b9e\u73b0 JWT \u670d\u52a1      :active,  des2, 2024-06-03, 3d\n    \u6570\u636e\u5e93\u8fc1\u79fb         :         des3, after des2, 2d\n    \u5355\u5143\u6d4b\u8bd5              :         des4, after des3, 2d\n    \n    section \u524d\u7aef\n    \u767b\u5f55\u7ec4\u4ef6           :         front1, 2024-06-03, 3d\n    \u4ee4\u724c\u7ba1\u7406          :         front2, after front1, 2d\n    \u53d7\u4fdd\u62a4\u7684\u8def\u7531          :         front3, after front2, 2d\n    \n    section \u96c6\u6210\n    API \u96c6\u6210           :         int1, after des4, 2d\n    \u7aef\u5230\u7aef\u6d4b\u8bd5              :         int2, after int1, 3d\n    \u5b89\u5168\u5ba1\u8ba1           :         int3, after int2, 2d\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp9ks9LwzAUx+\/+Fe+y24pbWzzsJoigMBAUxGNxnRRcK10Qr8NtbNPNiZbhjwmFqQOhnQcVVnT\/zNLU\/8I0XUsLne8Qkpd8vi\/flxxJKkIrQAMp6FiG3RNdURHwInDgWSPPrrljEw8H7EhJQvKmplckBHBAgysWuY0NtiWdKdVwK1NZzZRYlg1V+RApmgq43yNvNkt51o9nmbC+swX4+ZpMXyCIQklT5SwrJVfzWeBzvMjl1ricPw8ksfVEehPY3t8D97GLO+aClGiRU5+lJB8jhSwIAekaE7dr4emNN6uRVwfCKEQzitLjUhnJeiizKNo1cOPc\/bjwbAMSkYDFGCxEcLIJ7W7YBHLn4G+DOPW585mqWNY1FeVTvcydEWlfEssk\/eZSlA+vEwkt3FwN5rOh2xmR+7r3ZZPb96USQkKCT\/f0+9B0W32W8l80WKY6Utg1oh6JkR7tCW5N6Ph\/j5WYqUBLCH9FGzfG2DL9b7WEFGIkc\/IHEdX2eA==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFkUFrwzAMhe+D\/QddemtY64QdettoCx0rFNoxdvQSNROr7eIoZfv3U+IkTaBhOhhj5XvSe8m1Zb6\/AykmPiHsz54sg0oggqeSv9AypZrJWdi6rDxh+DjTjGvnjWaAD6lou42Wy9DTP1S0vYl5mGThOZwFprXYs06\/0TatJRaUW3jabSB1lr1OuYBQi8xZnNYjsZhPQc1UEs0eo1l1b\/CNOZ\/QyKbw8n6QCf5CKTa4SNGlEhBc9fB4CnE7XbP+1AWCodwHq20tupvggugjo2+lGvzNEgNjwWRzGNSATnp0fKWHqay92O9ieXU5WUnEnCUDcXdL+VgR89vGDk4iBqOtzkM8Y7xqd+vUGoWddyyrYQbeleJxVCEeKKgxfxtx12QcGtUvp+vjTYtUr9SFl1zFV2r1X\/LUcxeE2nT2mJae+Bd0mRGPwXEPrm39ASby08A=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 Mermaid<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFkUFrwzAMhe+D\/QddemtY64QdettoCx0rFNoxdvQSNROr7eIoZfv3U+IkTaBhOhhj5XvSe8m1Zb6\/AykmPiHsz54sg0oggqeSv9AypZrJWdi6rDxh+DjTjGvnjWaAD6lou42Wy9DTP1S0vYl5mGThOZwFprXYs06\/0TatJRaUW3jabSB1lr1OuYBQi8xZnNYjsZhPQc1UEs0eo1l1b\/CNOZ\/QyKbw8n6QCf5CKTa4SNGlEhBc9fB4CnE7XbP+1AWCodwHq20tupvggugjo2+lGvzNEgNjwWRzGNSATnp0fKWHqay92O9ieXU5WUnEnCUDcXdL+VgR89vGDk4iBqOtzkM8Y7xqd+vUGoWddyyrYQbeleJxVCEeKKgxfxtx12QcGtUvp+vjTYtUr9SFl1zFV2r1X\/LUcxeE2nT2mJae+Bd0mRGPwXEPrm39ASby08A=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 Mermaid<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<hr\/>\n<h2>4. PlantUML \u6df1\u5165\u63a2\u8ba8\uff1a\u4f01\u4e1a\u67b6\u6784 {#plantuml-tutorial}<\/h2>\n<p>PlantUML \u64c5\u957f\u7ed8\u5236\u6b63\u5f0f\u7684 UML \u56fe\u548c\u4f01\u4e1a\u67b6\u6784\u6587\u6863\u3002\u8ba9\u6211\u4eec\u63a2\u7d22\u4e00\u4e9b\u5b9e\u7528\u793a\u4f8b\u3002<\/p>\n<h3>\u6559\u7a0b 1\uff1a\u7535\u5b50\u5546\u52a1\u5e73\u53f0\u7ec4\u4ef6\u56fe<\/h3>\n<p><strong>\u793a\u4f8b\u4ee3\u7801\uff1a<\/strong><\/p>\n<p><img alt=\"\u7535\u5546\u5e73\u53f0\u5206\u5c42\u67b6\u6784\u56fe\uff0c\u8be6\u7ec6\u8bf4\u660e\u8868\u793a\u5c42\u3001API \u5c42\u3001\u4e1a\u52a1\u670d\u52a1\u5c42\u548c\u6570\u636e\u5c42\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8bf0e526c.png\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:VLHBRzGm4BvRydyOblFsm953rNrGXDI5BIl40VNW9DEDrTWEVXH5YF_Es76UIFZa-RvlFC_apdbXVL0DPszyZGgXROJKdBaNgLjXXO92b2zNQuAk3gOn5jxUfpENb4QrHgFs5zyr2FJSEyuuyzAJjVcmFHYbq9O8vqRuPsCLRE4m-C3EbhNqMFfWSHFzMeeehkHvjkX88Rmq6Xv4XtO3lpa3EZ--Om7trcYFkde2uO20J9rC8IdmhcqJqPkPsrLAQZWALnT6sDupOPpzMSJUdJ-jGqRee_3uItJ9Bzy7Db03jPTbIhT_cA3CVYKjF4X5XTh4HI3Pwy3xuAH6v-22zbMMwAO43iABnbm79hsJiQpuOYkq2puXcJsBJiMEp_cCPSMbbcqhzJB406RDP-FbSovpeKj4jwxdI0ckEbaHL0YN9cogK7euxZSf6JAF-xMeBofBal6lvfkR9F4-A7u634IVgA4ncyTe9j7fCISQ5scxlPsccTTdWVLhiu0uozS4zwEU8xC1p-5nNdCm3ucpljG8ZNEPe6aE4pRqdBDXEP9pxkEa6ziM4qt8q2NEXhMukRcbji1xQ4FHI5S3lXBiE1ktObIuKBZIoW97JP_8_nIStT6tIZ-7lm00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 PlantUML<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:VLHBRzGm4BvRydyOblFsm953rNrGXDI5BIl40VNW9DEDrTWEVXH5YF_Es76UIFZa-RvlFC_apdbXVL0DPszyZGgXROJKdBaNgLjXXO92b2zNQuAk3gOn5jxUfpENb4QrHgFs5zyr2FJSEyuuyzAJjVcmFHYbq9O8vqRuPsCLRE4m-C3EbhNqMFfWSHFzMeeehkHvjkX88Rmq6Xv4XtO3lpa3EZ--Om7trcYFkde2uO20J9rC8IdmhcqJqPkPsrLAQZWALnT6sDupOPpzMSJUdJ-jGqRee_3uItJ9Bzy7Db03jPTbIhT_cA3CVYKjF4X5XTh4HI3Pwy3xuAH6v-22zbMMwAO43iABnbm79hsJiQpuOYkq2puXcJsBJiMEp_cCPSMbbcqhzJB406RDP-FbSovpeKj4jwxdI0ckEbaHL0YN9cogK7euxZSf6JAF-xMeBofBal6lvfkR9F4-A7u634IVgA4ncyTe9j7fCISQ5scxlPsccTTdWVLhiu0uozS4zwEU8xC1p-5nNdCm3ucpljG8ZNEPe6aE4pRqdBDXEP9pxkEa6ziM4qt8q2NEXhMukRcbji1xQ4FHI5S3lXBiE1ktObIuKBZIoW97JP_8_nIStT6tIZ-7lm00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 PlantUML<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TLDRRzCm67tthp3bkNlWaOTfOmY4n60m8HuG3-uIscYvaJX25KAYi4tTKBLEQqKtBbFHq0g8TcZQ68ac_amSj_y2ntOQ1qGK9VOvnz_vBicSZv670yi4bt1DjtJeciYmWRzgs2xoa0KhQ6MrwZc1hIqufkF1opVufIXM7CjrRDt6oxXkwf35kW80DZ1RbsZdb7nla-u6sUgJNoTa-nYM8OtMukWi-SZkjH80BdD0LIOUzmVqC2G_NfNWSm3PzUYXNe5aiqM_ZHv3v4Es5JWzYiZMW8GTsXbmPj6f6AOkoM6VjZVYw2kBbtpupVbvpM9LlL3CvfTkGTKgtTEB7R9-mW_SH5X_Xkg26myFnwE621JWcW0dU-taj47sH0BtcVwsOHcuO1AVxxF2a_SjzfmwqNT3Sj4L83-xW30odMhczOcqLFQkf-cUu9BEA8vw2hU4wXPhl8ox-OKbfB3BDSDr3Li6dhpSfmUV5VgEWuqdzKA-IVSuQGsLjcWijGhoqrB28xBRa89mjyJjFKUxVkqleIoW8EGr_ADamqkQFulA1_vK-3JGWpIdisRI64rw1wJvbaiMxwKvfvz6kJmx7PJu0WeG7te10NB1GJvA5SXdgABPT5HCp0Jm5mUoGUJ8jFav91iEP4HnKBGm5sMjIhFZWEm8a1PmPcQMjG1UXMHxXvo_ZiCtx6S2cLrEipbCUkkI5jR_8S6SRclij_q3\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\n!theme plain\nskinparam backgroundColor #FFFFFF\nskinparam componentStyle uml2\n\ntitle \"\u7535\u5b50\u5546\u52a1\u5e73\u53f0 - \u7ec4\u4ef6\u67b6\u6784\"\n\npackage \"\u8868\u793a\u5c42\" {\n    [Web \u524d\u7aef] as Web\n    [\u79fb\u52a8\u5e94\u7528] as Mobile\n    [\u7ba1\u7406\u4eea\u8868\u677f] as Admin\n}\n\npackage \"API \u5c42\" {\n    [API \u7f51\u5173] as Gateway\n    [\u8ba4\u8bc1] as Auth\n    [\u9650\u6d41\u5668] as RateLimit\n}\n\npackage \"\u4e1a\u52a1\u670d\u52a1\" {\n    [\u76ee\u5f55\u670d\u52a1] as Catalog\n    [\u8ba2\u5355\u670d\u52a1] as Order\n    [\u652f\u4ed8\u670d\u52a1] as Payment\n    [\u7269\u6d41\u670d\u52a1] as Shipping\n    [\u901a\u77e5\u670d\u52a1] as Notify\n}\n\npackage \"\u6570\u636e\u5c42\" {\n    database \"\u4ea7\u54c1\u6570\u636e\u5e93\" as ProdDB\n    database \"\u8ba2\u5355\u6570\u636e\u5e93\" as OrderDB\n    database \"\u7528\u6237\u6570\u636e\u5e93\" as UserDB\n    queue \"\u6d88\u606f\u961f\u5217\" as MQ\n}\n\nWeb --&gt; Gateway\nMobile --&gt; Gateway\nAdmin --&gt; Gateway\n\nGateway --&gt; Auth\nGateway --&gt; RateLimit\nGateway --&gt; Catalog\nGateway --&gt; Order\n\nOrder --&gt; Payment\nOrder --&gt; Shipping\nOrder --&gt; Notify\n\nCatalog --&gt; ProdDB\nOrder --&gt; OrderDB\nAuth --&gt; UserDB\n\nPayment ..&gt; MQ : \u53d1\u5e03\u4e8b\u4ef6\nShipping ..&gt; MQ : \u8ba2\u9605\u4e8b\u4ef6\nNotify ..&gt; MQ : \u8ba2\u9605\u4e8b\u4ef6\n\n@enduml\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TLDRRzCm67tthp3bkNlWaOTfOmY4n60m8HuG3-uIscYvaJX25KAYi4tTKBLEQqKtBbFHq0g8TcZQ68ac_amSj_y2ntOQ1qGK9VOvnz_vBicSZv670yi4bt1DjtJeciYmWRzgs2xoa0KhQ6MrwZc1hIqufkF1opVufIXM7CjrRDt6oxXkwf35kW80DZ1RbsZdb7nla-u6sUgJNoTa-nYM8OtMukWi-SZkjH80BdD0LIOUzmVqC2G_NfNWSm3PzUYXNe5aiqM_ZHv3v4Es5JWzYiZMW8GTsXbmPj6f6AOkoM6VjZVYw2kBbtpupVbvpM9LlL3CvfTkGTKgtTEB7R9-mW_SH5X_Xkg26myFnwE621JWcW0dU-taj47sH0BtcVwsOHcuO1AVxxF2a_SjzfmwqNT3Sj4L83-xW30odMhczOcqLFQkf-cUu9BEA8vw2hU4wXPhl8ox-OKbfB3BDSDr3Li6dhpSfmUV5VgEWuqdzKA-IVSuQGsLjcWijGhoqrB28xBRa89mjyJjFKUxVkqleIoW8EGr_ADamqkQFulA1_vK-3JGWpIdisRI64rw1wJvbaiMxwKvfvz6kJmx7PJu0WeG7te10NB1GJvA5SXdgABPT5HCp0Jm5mUoGUJ8jFav91iEP4HnKBGm5sMjIhFZWEm8a1PmPcQMjG1UXMHxXvo_ZiCtx6S2cLrEipbCUkkI5jR_8S6SRclij_q3\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:VLHBRzGm4BvRydyOblFsm953rNrGXDI5BIl40VNW9DEDrTWEVXH5YF_Es76UIFZa-RvlFC_apdbXVL0DPszyZGgXROJKdBaNgLjXXO92b2zNQuAk3gOn5jxUfpENb4QrHgFs5zyr2FJSEyuuyzAJjVcmFHYbq9O8vqRuPsCLRE4m-C3EbhNqMFfWSHFzMeeehkHvjkX88Rmq6Xv4XtO3lpa3EZ--Om7trcYFkde2uO20J9rC8IdmhcqJqPkPsrLAQZWALnT6sDupOPpzMSJUdJ-jGqRee_3uItJ9Bzy7Db03jPTbIhT_cA3CVYKjF4X5XTh4HI3Pwy3xuAH6v-22zbMMwAO43iABnbm79hsJiQpuOYkq2puXcJsBJiMEp_cCPSMbbcqhzJB406RDP-FbSovpeKj4jwxdI0ckEbaHL0YN9cogK7euxZSf6JAF-xMeBofBal6lvfkR9F4-A7u634IVgA4ncyTe9j7fCISQ5scxlPsccTTdWVLhiu0uozS4zwEU8xC1p-5nNdCm3ucpljG8ZNEPe6aE4pRqdBDXEP9pxkEa6ziM4qt8q2NEXhMukRcbji1xQ4FHI5S3lXBiE1ktObIuKBZIoW97JP_8_nIStT6tIZ-7lm00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 PlantUML<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:VLHBRzGm4BvRydyOblFsm953rNrGXDI5BIl40VNW9DEDrTWEVXH5YF_Es76UIFZa-RvlFC_apdbXVL0DPszyZGgXROJKdBaNgLjXXO92b2zNQuAk3gOn5jxUfpENb4QrHgFs5zyr2FJSEyuuyzAJjVcmFHYbq9O8vqRuPsCLRE4m-C3EbhNqMFfWSHFzMeeehkHvjkX88Rmq6Xv4XtO3lpa3EZ--Om7trcYFkde2uO20J9rC8IdmhcqJqPkPsrLAQZWALnT6sDupOPpzMSJUdJ-jGqRee_3uItJ9Bzy7Db03jPTbIhT_cA3CVYKjF4X5XTh4HI3Pwy3xuAH6v-22zbMMwAO43iABnbm79hsJiQpuOYkq2puXcJsBJiMEp_cCPSMbbcqhzJB406RDP-FbSovpeKj4jwxdI0ckEbaHL0YN9cogK7euxZSf6JAF-xMeBofBal6lvfkR9F4-A7u634IVgA4ncyTe9j7fCISQ5scxlPsccTTdWVLhiu0uozS4zwEU8xC1p-5nNdCm3ucpljG8ZNEPe6aE4pRqdBDXEP9pxkEa6ziM4qt8q2NEXhMukRcbji1xQ4FHI5S3lXBiE1ktObIuKBZIoW97JP_8_nIStT6tIZ-7lm00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 PlantUML<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><img alt=\"PlantUML \u7ec4\u4ef6\u56fe\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/06\/img_6a1e8451e511f.png\"\/><br \/>\n<em>\u56fe 3\uff1a\u5c55\u793a\u5206\u5c42\u67b6\u6784\u7684 PlantUML \u7ec4\u4ef6\u56fe<\/em><\/p>\n<h3>\u6559\u7a0b 2\uff1a\u4e91\u57fa\u7840\u8bbe\u65bd\u90e8\u7f72\u56fe<\/h3>\n<p><strong>\u793a\u4f8b\u4ee3\u7801\uff1a<\/strong><\/p>\n<h3>\u6559\u7a0b 3\uff1aC4 \u6a21\u578b \u2013 \u5bb9\u5668\u56fe<\/h3>\n<p>C4 \u6a21\u578b\u975e\u5e38\u9002\u5408\u5728\u591a\u4e2a\u62bd\u8c61\u7ea7\u522b\u4e0a\u6c9f\u901a\u8f6f\u4ef6\u67b6\u6784\u3002<br \/>\n<strong>\u793a\u4f8b\u4ee3\u7801\uff1a<\/strong><\/p>\n<p><img alt=\"C4 \u6a21\u578b\u5bb9\u5668\u56fe\uff0c\u5c55\u793a AWS \u4e91\u90e8\u7f72\u67b6\u6784\uff0c\u5305\u62ec\u516c\u5171\u548c\u79c1\u6709\u5b50\u7f51\u3001Web \u670d\u52a1\u5668\u3001API \u670d\u52a1\u5668\u53ca\u5b58\u50a8\u7ec4\u4ef6\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8cec25f51.png\"\/><br \/>\n@startuml<br \/>\n!define AWS_COLOR FF9900<br \/>\n!define DOCKER_COLOR 0DB7ED<br \/>\nskinparam componentStyle uml2<br \/>\nskinparam backgroundColor #FAFAFA<br \/>\ntitle\u201c\u4e91\u90e8\u7f72\u67b6\u6784\u201d<br \/>\npackage\u201cAWS \u533a\u57df\uff1aus-east-1\u201d{<br \/>\npackage\u201c\u516c\u5171\u5b50\u7f51\u201d{<br \/>\n[CloudFront CDN] as CDN<br \/>\n[\u5e94\u7528\u8d1f\u8f7d\u5747\u8861\u5668] as ALB #AWS_COLOR<br \/>\n}<br \/>\npackage\u201c\u79c1\u6709\u5b50\u7f51 1\u201d{<br \/>\n[Web \u670d\u52a1\u5668 1] as Web1 #DOCKER_COLOR<br \/>\n[Web \u670d\u52a1\u5668 2] as Web2 #DOCKER_COLOR<br \/>\n}<br \/>\npackage\u201c\u79c1\u6709\u5b50\u7f51 2\u201d{<br \/>\n[API \u670d\u52a1\u5668 1] as API1 #DOCKER_COLOR<br \/>\n[API \u670d\u52a1\u5668 2] as API2 #DOCKER_COLOR<br \/>\n}<br \/>\npackage\u201c\u6570\u636e\u5c42\u201d{<br \/>\ndatabase\u201cRDS \u4e3b\u5b9e\u4f8b\u201das RDS1 #AWS_COLOR<br \/>\ndatabase\u201cRDS \u53ea\u8bfb\u526f\u672c\u201das RDS2 #AWS_COLOR<br \/>\n[ElastiCache Redis] as Cache #AWS_COLOR<br \/>\n}<br \/>\npackage\u201c\u5b58\u50a8\u201d{<br \/>\n[S3 \u5b58\u50a8\u6876] as S3 #AWS_COLOR<br \/>\n[EFS \u5171\u4eab\u5b58\u50a8] as EFS #AWS_COLOR<br \/>\n}<br \/>\n}<br \/>\n\u4e92\u8054\u7f51 \u2013&gt; CDN<br \/>\nCDN \u2013&gt; ALB<br \/>\nALB \u2013&gt; Web1<br \/>\nALB \u2013&gt; Web2<br \/>\nWeb1 \u2013&gt; API1<br \/>\nWeb1 \u2013&gt; API2<br \/>\nWeb2 \u2013&gt; API1<br \/>\nWeb2 \u2013&gt; API2<br \/>\nAPI1 \u2013&gt; RDS1<br \/>\nAPI2 \u2013&gt; RDS1<br \/>\nRDS1 -[\u865a\u7ebf]&gt; RDS2<br \/>\nAPI1 \u2013&gt; \u7f13\u5b58<br \/>\nAPI2 \u2013&gt; \u7f13\u5b58<br \/>\nAPI1 \u2013&gt; S3<br \/>\nAPI2 \u2013&gt; S3<br \/>\nWeb1 \u2013&gt; EFS<br \/>\nWeb2 \u2013&gt; EFS<br \/>\n@enduml<\/p>\n<h3>\u6559\u7a0b 4\uff1a\u5de5\u4f5c\u6d41\u6d3b\u52a8\u56fe<\/h3>\n<p><strong>\u793a\u4f8b\u4ee3\u7801\uff1a<\/strong><\/p>\n<p><img alt=\"\u5de5\u4f5c\u6d41\u6d3b\u52a8\u56fe\uff0c\u5c55\u793a\u5728\u7ebf\u8ba2\u5355\u4e2d\u5ba2\u6237\u4e0e\u7cfb\u7edf\u7684\u4ea4\u4e92\uff0c\u5305\u62ec\u9a8c\u8bc1\u3001\u652f\u4ed8\u53ca\u540e\u53f0\u4efb\u52a1\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8d19bd807.png\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:XL9DJ-Gm3BrNwd-mE0r_eNFWengXMMa1RPVTSqXT6aqQLuupg8Bzx-ka349muEXd-_czbrn6CInfydNrsgOeD26_rbL1wwgvPdgE2FTCVR8IjmfTzJq8GQi3kTIMHLoX4Us1KeQLhLkYuAHSpH_ZNMy4omxi5Ir4hV4s-Op_9Z5U8JV0fhJXwcYSDuyUByv1HWomMJ2UrnL0ymiZyX5X7uuOX7ZHHVGgSXDedUX6UeQx9403T4BsiCsmUfjrClHkAFe-k6rsGP2X6zqyk_04Qf4n5f4TUhG2zsQPz1hyH1cf_somP13ZQUhDoMcdIpPtX-I_ccaPSm1tt2DlL_6g45eAW-F9YAC0kqcpM9iFSydn6-kdmpjcMbbx56F73-wRxFNzx8ctr1gPaPJDhudLrQpFvegKisjZ3qzCIJN-eCTu1Y_bx0q6v3Tbv2okQcz9tB30NyCuKeeP_PVvBbM6_hZ_\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 PlantUML<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:XL9DJ-Gm3BrNwd-mE0r_eNFWengXMMa1RPVTSqXT6aqQLuupg8Bzx-ka349muEXd-_czbrn6CInfydNrsgOeD26_rbL1wwgvPdgE2FTCVR8IjmfTzJq8GQi3kTIMHLoX4Us1KeQLhLkYuAHSpH_ZNMy4omxi5Ir4hV4s-Op_9Z5U8JV0fhJXwcYSDuyUByv1HWomMJ2UrnL0ymiZyX5X7uuOX7ZHHVGgSXDedUX6UeQx9403T4BsiCsmUfjrClHkAFe-k6rsGP2X6zqyk_04Qf4n5f4TUhG2zsQPz1hyH1cf_somP13ZQUhDoMcdIpPtX-I_ccaPSm1tt2DlL_6g45eAW-F9YAC0kqcpM9iFSydn6-kdmpjcMbbx56F73-wRxFNzx8ctr1gPaPJDhudLrQpFvegKisjZ3qzCIJN-eCTu1Y_bx0q6v3Tbv2okQcz9tB30NyCuKeeP_PVvBbM6_hZ_\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 PlantUML<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:VLBBJi905DtFLpIiu1VeXbyn4I89ef6w4fDYaBGWjgG5GI0LmaDCQ9k849dAr_JEJ5V-WjCMCIR6vJttSSwvzsPAqj65T7bQG6MmnqJPb15uCimRA4tUD3PNe5q3eoBoS8EX_WIAorPBgYxOnuo3e3PX9rDii1KFKPc-OegjCae7BtVCgHnA3rEOFQBs0v5nC1wAA9yJad6A35IscdzwLagGJh958KcwJWe9GZeOLscx1ri3bbqHPGkbB6_HPr6ET7TqigNUbhUA7E0woD12sU9nFeT-3ANPpe3RAJ7Nl0u6BWnbhYIGLT9O4DFnSPTqti7JVXc0IPNgjJWT2zsNAZhKhJ-4Wj87l6Ns69fjCGAqLY1NwCXczYIuiNsyZc3INv6E-v-Xc2WmUynnmXPGQdI6lss5SoE_-qan8wslYSmNl5y1EkTNpKlviwAG0FqUDDV7_7oZX70Lyb3J2dreBJfzZaG5yYErfZusk2uHNIEKuMpyAxu0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\n|\u5ba2\u6237|\n\u5f00\u59cb\n:\u6d4f\u89c8\u5546\u54c1;\n:\u6dfb\u52a0\u5230\u8d2d\u7269\u8f66;\n:\u524d\u5f80\u7ed3\u8d26;\n\n|\u7cfb\u7edf|\n:\u9a8c\u8bc1\u8d2d\u7269\u8f66\u5546\u54c1;\n:\u8ba1\u7b97\u603b\u989d;\nif (\u5546\u54c1\u6709\u8d27\uff1f) then (\u662f)\n  :\u9884\u7559\u5e93\u5b58;\nelse (\u5426)\n  :\u663e\u793a\u7f3a\u8d27;\n  \u7ed3\u675f\nendif\n\n|\u5ba2\u6237|\n:\u8f93\u5165\u6536\u8d27\u5730\u5740;\n:\u9009\u62e9\u652f\u4ed8\u65b9\u5f0f;\n\n|\u7cfb\u7edf|\n:\u5904\u7406\u652f\u4ed8;\nif (\u652f\u4ed8\u6210\u529f\uff1f) then (\u662f)\n  :\u521b\u5efa\u8ba2\u5355;\n  :\u53d1\u9001\u786e\u8ba4\u90ae\u4ef6;\n  :\u66f4\u65b0\u5e93\u5b58;\nelse (\u5426)\n  :\u663e\u793a\u652f\u4ed8\u9519\u8bef;\n  \u5206\u79bb\nendif\n\n:\u53d1\u8d27;\n:\u66f4\u65b0\u8ba2\u5355\u72b6\u6001;\n\u7ed3\u675f\n\npartition \"\u540e\u53f0\u4efb\u52a1\" {\n  :\u751f\u6210\u53d1\u7968;\n  :\u901a\u77e5\u4ed3\u5e93;\n}\n\n@enduml<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:VLBBJi905DtFLpIiu1VeXbyn4I89ef6w4fDYaBGWjgG5GI0LmaDCQ9k849dAr_JEJ5V-WjCMCIR6vJttSSwvzsPAqj65T7bQG6MmnqJPb15uCimRA4tUD3PNe5q3eoBoS8EX_WIAorPBgYxOnuo3e3PX9rDii1KFKPc-OegjCae7BtVCgHnA3rEOFQBs0v5nC1wAA9yJad6A35IscdzwLagGJh958KcwJWe9GZeOLscx1ri3bbqHPGkbB6_HPr6ET7TqigNUbhUA7E0woD12sU9nFeT-3ANPpe3RAJ7Nl0u6BWnbhYIGLT9O4DFnSPTqti7JVXc0IPNgjJWT2zsNAZhKhJ-4Wj87l6Ns69fjCGAqLY1NwCXczYIuiNsyZc3INv6E-v-Xc2WmUynnmXPGQdI6lss5SoE_-qan8wslYSmNl5y1EkTNpKlviwAG0FqUDDV7_7oZX70Lyb3J2dreBJfzZaG5yYErfZusk2uHNIEKuMpyAxu0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:XL9DJ-Gm3BrNwd-mE0r_eNFWengXMMa1RPVTSqXT6aqQLuupg8Bzx-ka349muEXd-_czbrn6CInfydNrsgOeD26_rbL1wwgvPdgE2FTCVR8IjmfTzJq8GQi3kTIMHLoX4Us1KeQLhLkYuAHSpH_ZNMy4omxi5Ir4hV4s-Op_9Z5U8JV0fhJXwcYSDuyUByv1HWomMJ2UrnL0ymiZyX5X7uuOX7ZHHVGgSXDedUX6UeQx9403T4BsiCsmUfjrClHkAFe-k6rsGP2X6zqyk_04Qf4n5f4TUhG2zsQPz1hyH1cf_somP13ZQUhDoMcdIpPtX-I_ccaPSm1tt2DlL_6g45eAW-F9YAC0kqcpM9iFSydn6-kdmpjcMbbx56F73-wRxFNzx8ctr1gPaPJDhudLrQpFvegKisjZ3qzCIJN-eCTu1Y_bx0q6v3Tbv2okQcz9tB30NyCuKeeP_PVvBbM6_hZ_\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 PlantUML<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:XL9DJ-Gm3BrNwd-mE0r_eNFWengXMMa1RPVTSqXT6aqQLuupg8Bzx-ka349muEXd-_czbrn6CInfydNrsgOeD26_rbL1wwgvPdgE2FTCVR8IjmfTzJq8GQi3kTIMHLoX4Us1KeQLhLkYuAHSpH_ZNMy4omxi5Ir4hV4s-Op_9Z5U8JV0fhJXwcYSDuyUByv1HWomMJ2UrnL0ymiZyX5X7uuOX7ZHHVGgSXDedUX6UeQx9403T4BsiCsmUfjrClHkAFe-k6rsGP2X6zqyk_04Qf4n5f4TUhG2zsQPz1hyH1cf_somP13ZQUhDoMcdIpPtX-I_ccaPSm1tt2DlL_6g45eAW-F9YAC0kqcpM9iFSydn6-kdmpjcMbbx56F73-wRxFNzx8ctr1gPaPJDhudLrQpFvegKisjZ3qzCIJN-eCTu1Y_bx0q6v3Tbv2okQcz9tB30NyCuKeeP_PVvBbM6_hZ_\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 PlantUML<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<hr\/>\n<h2>5. Graphviz \u57fa\u7840\uff1a\u590d\u6742\u7f51\u7edc\u53ef\u89c6\u5316 {#graphviz-tutorial}<\/h2>\n<p>Graphviz\uff08DOT \u8bed\u8a00\uff09\u64c5\u957f\u53ef\u89c6\u5316\u590d\u6742\u5173\u7cfb\u548c\u7f51\u7edc\u62d3\u6251\uff0c\u5176\u4e2d\u5e03\u5c40\u7b97\u6cd5\u81f3\u5173\u91cd\u8981\u3002<\/p>\n<h3>\u6559\u7a0b 1\uff1a\u5fae\u670d\u52a1\u4f9d\u8d56\u56fe<\/h3>\n<p><strong>\u793a\u4f8b\u4ee3\u7801\uff1a<\/strong><\/p>\n<p><img alt=\"\u5fae\u670d\u52a1\u4f9d\u8d56\u5173\u7cfb\u56fe\uff0c\u5c55\u793a API \u7f51\u5173\u3001\u670d\u52a1\u7f51\u683c\u4ee5\u53ca\u8fde\u63a5\u7684\u670d\u52a1\u3001\u6570\u636e\u5e93\u548c\u5916\u90e8\u7f51\u5173\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8d4a5db75.png\"\/><br \/>\n<em>\u56fe 4\uff1a\u5c55\u793a\u5fae\u670d\u52a1\u4f9d\u8d56\u5173\u7cfb\u548c\u6570\u636e\u6d41\u7684 Graphviz \u53ef\u89c6\u5316<\/em><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">DOT<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqVVU1vEzEQvSPxH6zlGlRoKaKqFqklFeohJSJwqnJw7HF2xMZe2U7bBfW\/11lnP2J7A+xhpZ15Ox\/Pbzwc15pWBZkh08qAfkAGZgoVSA6SIRjy5\/Ur4h5N5S+OOv9xfekNUnEg96agFeQr9TQhxtYl5JlWW\/cvnwgsS+DZhAglraQb57rSSMtsuQ8AfO0ChF6PN\/gb8vfvWqh\/n5yQu11SDgIlWlTSkEe0BWGqVNoMy9olb6x59gbOxKngXdrsan5LvlILj7TODpFCMM5Pe+TC80FmYIoIKi7Yhywq8IvSQFoe92F+um+yj5V1VWxd4aHxm+YJ6JzWG5A2st\/KB2dWuo48d8qiQEZ3HMWZJS1ri8yEnq6JKbV0RQ2Y+KRZXaI7Xu2OacAG+wQf2UVPXNPx9Droa2CYa8W3zA5NfVm9savo5smCdoCA2kiDB0d0BufiPOuEyakpel0uQ3ZbSbT2mw3FMiJvMVuM0vYdyoZxU2BlUmJ7+znQVFpoO1hSMzEsqaIYltZVjBtTWowc1V5K831Hw\/Melp5EHFY9aOQ4ZnwsEuB\/ny0Pj3UbRjgIG4oqOZjNH2m5jeMTQkxMthfJ6GSlGEmnvPdD5GdoebT3\/wjQjc5iu2r2kHG3vyZrt0MqlGvv3i+gdgnlxm2Ly96WHJXRK\/Z5mPhvkZNjc+xKPn4tu9zPL0KfHeo=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 DOT<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">DOT<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqVVU1vEzEQvSPxH6zlGlRoKaKqFqklFeohJSJwqnJw7HF2xMZe2U7bBfW\/11lnP2J7A+xhpZ15Ox\/Pbzwc15pWBZkh08qAfkAGZgoVSA6SIRjy5\/Ur4h5N5S+OOv9xfekNUnEg96agFeQr9TQhxtYl5JlWW\/cvnwgsS+DZhAglraQb57rSSMtsuQ8AfO0ChF6PN\/gb8vfvWqh\/n5yQu11SDgIlWlTSkEe0BWGqVNoMy9olb6x59gbOxKngXdrsan5LvlILj7TODpFCMM5Pe+TC80FmYIoIKi7Yhywq8IvSQFoe92F+um+yj5V1VWxd4aHxm+YJ6JzWG5A2st\/KB2dWuo48d8qiQEZ3HMWZJS1ri8yEnq6JKbV0RQ2Y+KRZXaI7Xu2OacAG+wQf2UVPXNPx9Droa2CYa8W3zA5NfVm9savo5smCdoCA2kiDB0d0BufiPOuEyakpel0uQ3ZbSbT2mw3FMiJvMVuM0vYdyoZxU2BlUmJ7+znQVFpoO1hSMzEsqaIYltZVjBtTWowc1V5K831Hw\/Melp5EHFY9aOQ4ZnwsEuB\/ny0Pj3UbRjgIG4oqOZjNH2m5jeMTQkxMthfJ6GSlGEmnvPdD5GdoebT3\/wjQjc5iu2r2kHG3vyZrt0MqlGvv3i+gdgnlxm2Ly96WHJXRK\/Z5mPhvkZNjc+xKPn4tu9zPL0KfHeo=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 DOT<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">DOT<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqNVUtv1DAQvlfiP1jmuqjQUkS1ClKrItTDwkoLp6oHYztdi6y9crKFUO2lD0RXKiDxOJQeAHHohQrRC20l+DPNpv0XpHkntlfkECkzn2e+mfnGIWxNon4XtBiWwqVynWHqLtE+5YRyzKgLNq5NgeiRiD8jTFqPF5uJgQtCwYrbRX1qPRUvGsD1fIdaUIpBdJY0bOY4lMAGsAX3OOpFrgXJkANX0wCUrEUB6t4E77KX1Lp1M4Mm7+lpcDHaDDdPgqP985Pd4O3o8tvBxe6vMp+rrFg4QlrwOp21Z2yS54ML7WXwAHn0OfJhFWnbmJCZAtlJGgFa1O0qUHse34YKs\/GX38HfrfHBXjD6mkZ5EvUTpKFgTmLgdRXjI0k00Dbye5R7in2Zr0dmIX3F81B4zGYYeUxwNTNHju8x7Bae2JFX8PHneO8oOH2vzhf7DouGKqPhlFqB79I7eD5qRancpcU0alpT8d2WggywV7IUhHJbxiX4\/uly6zDppl5tlZnM0jl7DuYSJMjtFgrM+GXtzCSQmu\/3EHNqLYGdVsfQpWDnODw+0wjqxr2abpo6LV2hqrowoapCMaFqyjHBFCmZgBptFeVXmRe1lEZaJq0DVPmWSpgIMbHSYQ2lqiEStKLK+vlK0Jp2tPsWH9CqygxX9aZZ10QWhqXRtUKfbyXZkmRJVidV\/f\/ns+0IPxyen74JXr8Kz7bD\/e3gx7vg85\/YuRG\/sz+J5UZXfjM36VZCc1vG9mGRcHJM3Wro79XCZRLacGr4DwrSLH8=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit DOT in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-dot\"><code class=\"language-dot\" data-language=\"dot\" class=\"language-dot\">digraph MicroservicesDependencies {\r\n    rankdir=TB;\r\n    node [shape=box, style=\"rounded,filled\", fontname=\"Arial\"];\r\n    edge [fontname=\"Arial\", fontsize=10];\r\n    \r\n    \/\/ \u8282\u70b9\u5b9a\u4e49\u53ca\u989c\u8272\r\n    node [fillcolor=\"#e3f2fd\"];\r\n    \"API Gateway\" [fillcolor=\"#ffcdd2\"];\r\n    \"Service Mesh\" [fillcolor=\"#fff9c4\"];\r\n    \r\n    \/\/ \u6838\u5fc3\u670d\u52a1\r\n    \"User Service\";\r\n    \"Auth Service\";\r\n    \"Order Service\";\r\n    \"Payment Service\";\r\n    \"Inventory Service\";\r\n    \"Notification Service\";\r\n    \"Analytics Service\";\n    \n    \/\/ \u6570\u636e\u5e93\r\n    node [shape=cylinder, fillcolor=\"#c8e6c9\"];\n    \"User DB\";\n    \"Order DB\";\n    \"Product DB\";\n    \"Analytics DB\";\n    \n    \/\/ \u5916\u90e8\u670d\u52a1\n    node [shape=box, fillcolor=\"#f3e5f5\", style=\"dashed,filled\"];\n    \"Payment Gateway\";\n    \"Email Service\";\n    \"SMS Service\";\n    \n    \/\/ \u5173\u7cfb\n    \"API Gateway\" -&gt; \"Service Mesh\";\n    \"Service Mesh\" -&gt; \"User Service\";\n    \"Service Mesh\" -&gt; \"Auth Service\";\n    \"Service Mesh\" -&gt; \"Order Service\";\n    \"Service Mesh\" -&gt; \"Payment Service\";\n    \"Service Mesh\" -&gt; \"Inventory Service\";\n    \n    \"User Service\" -&gt; \"User DB\";\n    \"Auth Service\" -&gt; \"User DB\";\n    \"Order Service\" -&gt; \"Order DB\";\n    \"Order Service\" -&gt; \"Inventory Service\";\n    \"Order Service\" -&gt; \"Payment Service\";\n    \"Inventory Service\" -&gt; \"Product DB\";\n    \"Payment Service\" -&gt; \"Payment Gateway\";\n    \"Notification Service\" -&gt; \"Email Service\";\n    \"Notification Service\" -&gt; \"SMS Service\";\n    \"Analytics Service\" -&gt; \"Analytics DB\";\n    \n    \"Order Service\" -&gt; \"Notification Service\" [style=dashed];\n    \"Payment Service\" -&gt; \"Notification Service\" [style=dashed];\n    \n    \/\/ \u7528\u4e8e\u5206\u7ec4\u7684\u5b50\u56fe\n    {\n        rank=same;\n        \"User Service\";\n        \"Auth Service\";\n    }\n    \n    {\n        rank=same;\n        \"Order Service\";\n        \"Payment Service\";\n        \"Inventory Service\";\n    }\n}<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqNVUtv1DAQvlfiP1jmuqjQUkS1ClKrItTDwkoLp6oHYztdi6y9crKFUO2lD0RXKiDxOJQeAHHohQrRC20l+DPNpv0XpHkntlfkECkzn2e+mfnGIWxNon4XtBiWwqVynWHqLtE+5YRyzKgLNq5NgeiRiD8jTFqPF5uJgQtCwYrbRX1qPRUvGsD1fIdaUIpBdJY0bOY4lMAGsAX3OOpFrgXJkANX0wCUrEUB6t4E77KX1Lp1M4Mm7+lpcDHaDDdPgqP985Pd4O3o8tvBxe6vMp+rrFg4QlrwOp21Z2yS54ML7WXwAHn0OfJhFWnbmJCZAtlJGgFa1O0qUHse34YKs\/GX38HfrfHBXjD6mkZ5EvUTpKFgTmLgdRXjI0k00Dbye5R7in2Zr0dmIX3F81B4zGYYeUxwNTNHju8x7Bae2JFX8PHneO8oOH2vzhf7DouGKqPhlFqB79I7eD5qRancpcU0alpT8d2WggywV7IUhHJbxiX4\/uly6zDppl5tlZnM0jl7DuYSJMjtFgrM+GXtzCSQmu\/3EHNqLYGdVsfQpWDnODw+0wjqxr2abpo6LV2hqrowoapCMaFqyjHBFCmZgBptFeVXmRe1lEZaJq0DVPmWSpgIMbHSYQ2lqiEStKLK+vlK0Jp2tPsWH9CqygxX9aZZ10QWhqXRtUKfbyXZkmRJVidV\/f\/ns+0IPxyen74JXr8Kz7bD\/e3gx7vg85\/YuRG\/sz+J5UZXfjM36VZCc1vG9mGRcHJM3Wro79XCZRLacGr4DwrSLH8=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit DOT in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqVVU1vEzEQvSPxH6zlGlRoKaKqFqklFeohJSJwqnJw7HF2xMZe2U7bBfW\/11lnP2J7A+xhpZ15Ox\/Pbzwc15pWBZkh08qAfkAGZgoVSA6SIRjy5\/Ur4h5N5S+OOv9xfekNUnEg96agFeQr9TQhxtYl5JlWW\/cvnwgsS+DZhAglraQb57rSSMtsuQ8AfO0ChF6PN\/gb8vfvWqh\/n5yQu11SDgIlWlTSkEe0BWGqVNoMy9olb6x59gbOxKngXdrsan5LvlILj7TODpFCMM5Pe+TC80FmYIoIKi7Yhywq8IvSQFoe92F+um+yj5V1VWxd4aHxm+YJ6JzWG5A2st\/KB2dWuo48d8qiQEZ3HMWZJS1ri8yEnq6JKbV0RQ2Y+KRZXaI7Xu2OacAG+wQf2UVPXNPx9Droa2CYa8W3zA5NfVm9savo5smCdoCA2kiDB0d0BufiPOuEyakpel0uQ3ZbSbT2mw3FMiJvMVuM0vYdyoZxU2BlUmJ7+znQVFpoO1hSMzEsqaIYltZVjBtTWowc1V5K831Hw\/Melp5EHFY9aOQ4ZnwsEuB\/ny0Pj3UbRjgIG4oqOZjNH2m5jeMTQkxMthfJ6GSlGEmnvPdD5GdoebT3\/wjQjc5iu2r2kHG3vyZrt0MqlGvv3i+gdgnlxm2Ly96WHJXRK\/Z5mPhvkZNjc+xKPn4tu9zPL0KfHeo=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 DOT<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqVVU1vEzEQvSPxH6zlGlRoKaKqFqklFeohJSJwqnJw7HF2xMZe2U7bBfW\/11lnP2J7A+xhpZ15Ox\/Pbzwc15pWBZkh08qAfkAGZgoVSA6SIRjy5\/Ur4h5N5S+OOv9xfekNUnEg96agFeQr9TQhxtYl5JlWW\/cvnwgsS+DZhAglraQb57rSSMtsuQ8AfO0ChF6PN\/gb8vfvWqh\/n5yQu11SDgIlWlTSkEe0BWGqVNoMy9olb6x59gbOxKngXdrsan5LvlILj7TODpFCMM5Pe+TC80FmYIoIKi7Yhywq8IvSQFoe92F+um+yj5V1VWxd4aHxm+YJ6JzWG5A2st\/KB2dWuo48d8qiQEZ3HMWZJS1ri8yEnq6JKbV0RQ2Y+KRZXaI7Xu2OacAG+wQf2UVPXNPx9Droa2CYa8W3zA5NfVm9savo5smCdoCA2kiDB0d0BufiPOuEyakpel0uQ3ZbSbT2mw3FMiJvMVuM0vYdyoZxU2BlUmJ7+znQVFpoO1hSMzEsqaIYltZVjBtTWowc1V5K831Hw\/Melp5EHFY9aOQ4ZnwsEuB\/ny0Pj3UbRjgIG4oqOZjNH2m5jeMTQkxMthfJ6GSlGEmnvPdD5GdoebT3\/wjQjc5iu2r2kHG3vyZrt0MqlGvv3i+gdgnlxm2Ly96WHJXRK\/Z5mPhvkZNjc+xKPn4tu9zPL0KfHeo=\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 DOT<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>\u6559\u7a0b 2\uff1a\u7ec4\u7ec7\u5c42\u7ea7\u7ed3\u6784<\/h3>\n<p><strong>\u793a\u4f8b\u4ee3\u7801\uff1a<\/strong><\/p>\n<p><img alt=\"\u7ec4\u7ec7\u5c42\u7ea7\u56fe\uff0c\u5c55\u793a\u9996\u5e2d\u6267\u884c\u5b98\u7ea6\u7ff0\u00b7\u53f2\u5bc6\u65af\u3001\u9ad8\u7ba1\u56e2\u961f\u3001\u4ea7\u54c1\u526f\u603b\u88c1\u548c\u5de5\u7a0b\u526f\u603b\u88c1\u5206\u522b\u9886\u5bfc\u540e\u7aef\u3001\u524d\u7aef\u3001\u8d28\u91cf\u4fdd\u8bc1\u548c DevOps \u56e2\u961f\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8d92f09cf.png\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">DOT<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqVVtFu2jAUfZ+0f7Cyl02iK4UCrSomtbRomoZIV9Q9tFPlxDeJVWMjO9B2U\/99duMkTkg2MBIK1znH99x7bENoLPEqQXMZTxIsU\/Tn\/Tukh8T8kVA5XlycZQEuCKA7leAVjAPx3EEqfWEw9qRYcwKkE1HGgHgdFAmecrzUU1+BbSClIfZ+WRIgsSZpeqODsJTiSdHfMO5+HuWA7PvwEF09Q7hO6QYQgw2wLD65mqM7hgNgY08\/3\/NvIuHoZknTxCSiMwoFE3LsfTg6HQ1Jz2Zng08JTcHbWmly8L1cQa2DrD4hW6sU5APoPPIamWFXL9NbAF56Z+ULWZkIVgkQJ5wndtoNcXTqAsqnycKRt9DybrDECTIileA1hcc9PIgGhZw3\/NTBTzV+RsMEA0MXutK74OcOfq7xV0vKXtAl3lC1A9p30L5GGxxBPyn7b\/Kv9ebzmHIASXnc1hYeN3WlxG23JDNsQ0ugH\/Ui0tySW\/9Bkxa6bn03t5qo4XEwiIaVmjg5NCh4SLV3lKvD0WJ8pdykHHOJNK0oqS5lxgUOH4GTIvH8t2G95x+PegisDvWpJiMICERBRYYZU6l3kktZBCznyd6Ul7CZr1RBaH9ausHedNfnBZV+tDTDvWhem\/3oS0HWYdrixVU22+BHi9vDi1EU9aHb6kVL6PoxX6OqLYqC0TGpaPNnRwUu55lhjmOQ99xnOI2EXG7RhOFJt0bTa6eZiYAy2IWk305yzjF70ZeE+jdPvUk\/QGuggquErlR5Xxx8MefqWTUwrQfm9YA\/r9wT5mjW4ew4sDP2bNBhu7u24vkW2ZrIrL4Vvj6vLurni9oalYC8aHpa97Ul3muJ9+tX4OXbgYKY3idK35jS2FF3R8i3gmavGfuUUvU\/A+co6hT+HQ3Mp+iRMYtTh51R\/f2Wev0L4Dlwzw==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 DOT<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">DOT<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqVVtFu2jAUfZ+0f7Cyl02iK4UCrSomtbRomoZIV9Q9tFPlxDeJVWMjO9B2U\/99duMkTkg2MBIK1znH99x7bENoLPEqQXMZTxIsU\/Tn\/Tukh8T8kVA5XlycZQEuCKA7leAVjAPx3EEqfWEw9qRYcwKkE1HGgHgdFAmecrzUU1+BbSClIfZ+WRIgsSZpeqODsJTiSdHfMO5+HuWA7PvwEF09Q7hO6QYQgw2wLD65mqM7hgNgY08\/3\/NvIuHoZknTxCSiMwoFE3LsfTg6HQ1Jz2Zng08JTcHbWmly8L1cQa2DrD4hW6sU5APoPPIamWFXL9NbAF56Z+ULWZkIVgkQJ5wndtoNcXTqAsqnycKRt9DybrDECTIileA1hcc9PIgGhZw3\/NTBTzV+RsMEA0MXutK74OcOfq7xV0vKXtAl3lC1A9p30L5GGxxBPyn7b\/Kv9ebzmHIASXnc1hYeN3WlxG23JDNsQ0ugH\/Ui0tySW\/9Bkxa6bn03t5qo4XEwiIaVmjg5NCh4SLV3lKvD0WJ8pdykHHOJNK0oqS5lxgUOH4GTIvH8t2G95x+PegisDvWpJiMICERBRYYZU6l3kktZBCznyd6Ul7CZr1RBaH9ausHedNfnBZV+tDTDvWhem\/3oS0HWYdrixVU22+BHi9vDi1EU9aHb6kVL6PoxX6OqLYqC0TGpaPNnRwUu55lhjmOQ99xnOI2EXG7RhOFJt0bTa6eZiYAy2IWk305yzjF70ZeE+jdPvUk\/QGuggquErlR5Xxx8MefqWTUwrQfm9YA\/r9wT5mjW4ew4sDP2bNBhu7u24vkW2ZrIrL4Vvj6vLurni9oalYC8aHpa97Ul3muJ9+tX4OXbgYKY3idK35jS2FF3R8i3gmavGfuUUvU\/A+co6hT+HQ3Mp+iRMYtTh51R\/f2Wev0L4Dlwzw==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 DOT<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">DOT<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqdVW1L20Acfz\/Ydzi6Nxt0s7a2VUoHWi1jIKko24sics1dmmB6KUnqw0SYGxPd6CyMMffAhnvAgqAOX2xrGfsyprHfYpcmaS9p1OoVSu5\/9\/v9n353h6SiCssi4NRiRoSqDtZu3gB0qJAsIklNz02kbANREAZ5TYRlnC4oK2Gg6asyTodUpUIQRmFBkmWMQmEgKEQnsESXHmB5CesSD0PzDglGRUoStCMMoKoqy5r0BKcj95Lzqc7+zt\/QEGgf7JqHe8bPZ2Zjv2PLTHEgL8MCltMh+k0eKiIBsyVJF60IaCi8IitqOnRreCyZQFEnLMe4LEo6DvlcZADltv10TFqlYFeGlyuajtUFvIJ5sNZZs4bj3Ins49f27pdQqrtqFwdBTcSoZ3WDGovwUBhjtnc\/MnNMXnMcmYUqFIGVnaYQX2ojURgX4m4eHXSWQWc5Mi3xIsQymKCVHQDNMWiOI1MlSV4Fk3BJ0i7H5hhsjiMWCoHHknxZ2OueJhi\/fpj1V+3n9fa7+jldIMX+JtiwvvLbkuwvP44JUQEFlf9RbmGKOsh7eI3to9bT5tm3DV8iiZFCXEiwVej5Dwh7QcewpDHBswn49cNoSNF1NgmPH2tMQH4RE9QLuvbaPDiyGcnt4SgwalUnkd9bd3w5FAoICwU2B2tkVXpYPJzbVYZz9BqUk3iJK2tdQmfqMsavwTgz3mWjny5T4opM6wEqPG3sG282LlJhWVVQhdf7lWhDB1aiIAgxHDlHiTnHSd7DfZ4aBaGQHEFsarnpYR\/WbO6YtU1i\/Dkxdo778Dw\/GvHio8F4c79pvKxTQQxAEQumaL09blUPja3N1ufahSy+++HFiXnS7L4Ad+9bF2bKM8\/65pxvnuOYe9+6bqnRPva23bkCqNU5WH6zezj8dlvSfuvMOOsu57pzetvd7faartK2BZujweaY9x07e\/\/BbPw726ub3xtGdef07yemaJYkepnR55y5YsJdVSbj1s\/tgCUDJu1BQbErOVr\/D7XnxRQ=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit DOT in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-dot\"><code class=\"language-dot\" data-language=\"dot\" class=\"language-dot\">digraph OrgChart {\r\n    rankdir=TB;\r\n    node [shape=box, style=\"rounded,filled\", fontname=\"Helvetica\"];\r\n    edge [fontname=\"Helvetica\", arrowsize=0.7];\n    \n    \/\/ \u9ad8\u7ba1\u5c42\u7ea7\n    CEO [label=\"CEOnJohn Smith\", fillcolor=\"#1976d2\", fontcolor=\"white\"];\n    \n    \/\/ C \u7ea7\u9ad8\u7ba1\n    subgraph cluster_exec {\n        label=\"\u9ad8\u7ba1\u56e2\u961f\";\n        style=dashed;\n        color=\"#90caf9\";\n        \n        CTO [label=\"CTOnSarah Johnson\", fillcolor=\"#42a5f5\"];\n        CFO [label=\"CFOnMichael Brown\", fillcolor=\"#42a5f5\"];\n        COO [label=\"COOnEmily Davis\", fillcolor=\"#42a5f5\"];\n        CPO [label=\"CPOnDavid Wilson\", fillcolor=\"#42a5f5\"];\n    }\n    \n    \/\/ \u5de5\u7a0b\u90e8\u95e8\n    subgraph cluster_eng {\n        label=\"\u5de5\u7a0b\";\n        style=filled;\n        color=\"#e3f2fd\";\n        \n        VP_Eng [label=\"\u5de5\u7a0b\u526f\u603b\u88c1\", fillcolor=\"#64b5f6\"];\n        \n        subgraph cluster_eng_teams {\n            label=\"\u56e2\u961f\";\n            style=dotted;\n            \n            Backend [label=\"\u540e\u7aef\u56e2\u961fn(12 \u540d\u5de5\u7a0b\u5e08)\", fillcolor=\"#bbdefb\"];\n            Frontend [label=\"\u524d\u7aef\u56e2\u961fn(8 \u540d\u5de5\u7a0b\u5e08)\", fillcolor=\"#bbdefb\"];\n            DevOps [label=\"DevOps \u56e2\u961fn(5 \u540d\u5de5\u7a0b\u5e08)\", fillcolor=\"#bbdefb\"];\n            QA [label=\"QA \u56e2\u961fn(6 \u540d\u5de5\u7a0b\u5e08)\", fillcolor=\"#bbdefb\"];\n        }\n    }\n    \n    \/\/ \u4ea7\u54c1\u90e8\u95e8\n    subgraph cluster_product {\n        label=\"\u4ea7\u54c1\";\n        style=filled;\n        color=\"#fff3e0\";\n        \n        VP_Product [label=\"\u4ea7\u54c1\u526f\u603b\u88c1\", fillcolor=\"#ffb74d\"];\n        PM1 [label=\"\u4ea7\u54c1\u7ecf\u7406n\u5e73\u53f0\", fillcolor=\"#ffcc80\"];\n        PM2 [label=\"\u4ea7\u54c1\u7ecf\u7406n\u79fb\u52a8\u7aef\", fillcolor=\"#ffcc80\"];\n        PM3 [label=\"\u4ea7\u54c1\u7ecf\u7406n\u6570\u636e\u5206\u6790\", fillcolor=\"#ffcc80\"];\n    }\n    \n    \/\/ \u5173\u7cfb\n    CEO -&gt; CTO;\n    CEO -&gt; CFO;\n    CEO -&gt; COO;\n    CEO -&gt; CPO;\n    \n    CTO -&gt; VP_Eng;\n    VP_Eng -&gt; Backend;\n    VP_Eng -&gt; Frontend;\n    VP_Eng -&gt; DevOps;\n    VP_Eng -&gt; QA;\n    \n    CPO -&gt; VP_Product;\n    VP_Product -&gt; PM1;\n    VP_Product -&gt; PM2;\n    VP_Product -&gt; PM3;\n    \n    \/\/ \u865a\u7ebf\u8868\u793a\u534f\u4f5c\u5173\u7cfb\n    PM1 -&gt; Backend [style=dotted, color=\"#757575\"];\n    PM2 -&gt; Frontend [style=dotted, color=\"#757575\"];\n    PM3 -&gt; Backend [style=dotted, color=\"#757575\"];\n}<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqdVW1L20Acfz\/Ydzi6Nxt0s7a2VUoHWi1jIKko24sics1dmmB6KUnqw0SYGxPd6CyMMffAhnvAgqAOX2xrGfsyprHfYpcmaS9p1OoVSu5\/9\/v9n353h6SiCssi4NRiRoSqDtZu3gB0qJAsIklNz02kbANREAZ5TYRlnC4oK2Gg6asyTodUpUIQRmFBkmWMQmEgKEQnsESXHmB5CesSD0PzDglGRUoStCMMoKoqy5r0BKcj95Lzqc7+zt\/QEGgf7JqHe8bPZ2Zjv2PLTHEgL8MCltMh+k0eKiIBsyVJF60IaCi8IitqOnRreCyZQFEnLMe4LEo6DvlcZADltv10TFqlYFeGlyuajtUFvIJ5sNZZs4bj3Ins49f27pdQqrtqFwdBTcSoZ3WDGovwUBhjtnc\/MnNMXnMcmYUqFIGVnaYQX2ojURgX4m4eHXSWQWc5Mi3xIsQymKCVHQDNMWiOI1MlSV4Fk3BJ0i7H5hhsjiMWCoHHknxZ2OueJhi\/fpj1V+3n9fa7+jldIMX+JtiwvvLbkuwvP44JUQEFlf9RbmGKOsh7eI3to9bT5tm3DV8iiZFCXEiwVej5Dwh7QcewpDHBswn49cNoSNF1NgmPH2tMQH4RE9QLuvbaPDiyGcnt4SgwalUnkd9bd3w5FAoICwU2B2tkVXpYPJzbVYZz9BqUk3iJK2tdQmfqMsavwTgz3mWjny5T4opM6wEqPG3sG282LlJhWVVQhdf7lWhDB1aiIAgxHDlHiTnHSd7DfZ4aBaGQHEFsarnpYR\/WbO6YtU1i\/Dkxdo778Dw\/GvHio8F4c79pvKxTQQxAEQumaL09blUPja3N1ufahSy+++HFiXnS7L4Ad+9bF2bKM8\/65pxvnuOYe9+6bqnRPva23bkCqNU5WH6zezj8dlvSfuvMOOsu57pzetvd7faartK2BZujweaY9x07e\/\/BbPw726ub3xtGdef07yemaJYkepnR55y5YsJdVSbj1s\/tgCUDJu1BQbErOVr\/D7XnxRQ=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit DOT in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqVVtFu2jAUfZ+0f7Cyl02iK4UCrSomtbRomoZIV9Q9tFPlxDeJVWMjO9B2U\/99duMkTkg2MBIK1znH99x7bENoLPEqQXMZTxIsU\/Tn\/Tukh8T8kVA5XlycZQEuCKA7leAVjAPx3EEqfWEw9qRYcwKkE1HGgHgdFAmecrzUU1+BbSClIfZ+WRIgsSZpeqODsJTiSdHfMO5+HuWA7PvwEF09Q7hO6QYQgw2wLD65mqM7hgNgY08\/3\/NvIuHoZknTxCSiMwoFE3LsfTg6HQ1Jz2Zng08JTcHbWmly8L1cQa2DrD4hW6sU5APoPPIamWFXL9NbAF56Z+ULWZkIVgkQJ5wndtoNcXTqAsqnycKRt9DybrDECTIileA1hcc9PIgGhZw3\/NTBTzV+RsMEA0MXutK74OcOfq7xV0vKXtAl3lC1A9p30L5GGxxBPyn7b\/Kv9ebzmHIASXnc1hYeN3WlxG23JDNsQ0ugH\/Ui0tySW\/9Bkxa6bn03t5qo4XEwiIaVmjg5NCh4SLV3lKvD0WJ8pdykHHOJNK0oqS5lxgUOH4GTIvH8t2G95x+PegisDvWpJiMICERBRYYZU6l3kktZBCznyd6Ul7CZr1RBaH9ausHedNfnBZV+tDTDvWhem\/3oS0HWYdrixVU22+BHi9vDi1EU9aHb6kVL6PoxX6OqLYqC0TGpaPNnRwUu55lhjmOQ99xnOI2EXG7RhOFJt0bTa6eZiYAy2IWk305yzjF70ZeE+jdPvUk\/QGuggquErlR5Xxx8MefqWTUwrQfm9YA\/r9wT5mjW4ew4sDP2bNBhu7u24vkW2ZrIrL4Vvj6vLurni9oalYC8aHpa97Ul3muJ9+tX4OXbgYKY3idK35jS2FF3R8i3gmavGfuUUvU\/A+co6hT+HQ3Mp+iRMYtTh51R\/f2Wev0L4Dlwzw==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 DOT<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqVVtFu2jAUfZ+0f7Cyl02iK4UCrSomtbRomoZIV9Q9tFPlxDeJVWMjO9B2U\/99duMkTkg2MBIK1znH99x7bENoLPEqQXMZTxIsU\/Tn\/Tukh8T8kVA5XlycZQEuCKA7leAVjAPx3EEqfWEw9qRYcwKkE1HGgHgdFAmecrzUU1+BbSClIfZ+WRIgsSZpeqODsJTiSdHfMO5+HuWA7PvwEF09Q7hO6QYQgw2wLD65mqM7hgNgY08\/3\/NvIuHoZknTxCSiMwoFE3LsfTg6HQ1Jz2Zng08JTcHbWmly8L1cQa2DrD4hW6sU5APoPPIamWFXL9NbAF56Z+ULWZkIVgkQJ5wndtoNcXTqAsqnycKRt9DybrDECTIileA1hcc9PIgGhZw3\/NTBTzV+RsMEA0MXutK74OcOfq7xV0vKXtAl3lC1A9p30L5GGxxBPyn7b\/Kv9ebzmHIASXnc1hYeN3WlxG23JDNsQ0ugH\/Ui0tySW\/9Bkxa6bn03t5qo4XEwiIaVmjg5NCh4SLV3lKvD0WJ8pdykHHOJNK0oqS5lxgUOH4GTIvH8t2G95x+PegisDvWpJiMICERBRYYZU6l3kktZBCznyd6Ul7CZr1RBaH9ausHedNfnBZV+tDTDvWhem\/3oS0HWYdrixVU22+BHi9vDi1EU9aHb6kVL6PoxX6OqLYqC0TGpaPNnRwUu55lhjmOQ99xnOI2EXG7RhOFJt0bTa6eZiYAy2IWk305yzjF70ZeE+jdPvUk\/QGuggquErlR5Xxx8MefqWTUwrQfm9YA\/r9wT5mjW4ew4sDP2bNBhu7u24vkW2ZrIrL4Vvj6vLurni9oalYC8aHpa97Ul3muJ9+tX4OXbgYKY3idK35jS2FF3R8i3gmavGfuUUvU\/A+co6hT+HQ3Mp+iRMYtTh51R\/f2Wev0L4Dlwzw==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 DOT<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>\u6559\u7a0b 3\uff1a\u6570\u636e\u6d41\u56fe<\/h3>\n<p><strong>\u793a\u4f8b\u4ee3\u7801\uff1a<\/strong><\/p>\n<p><img alt=\"\u6570\u636e\u6d41\u56fe\uff0c\u8bf4\u660e\u8fde\u63a5\u5ba2\u6237\u3001\u652f\u4ed8\u3001\u5e93\u5b58\u548c\u53d1\u7968\u7cfb\u7edf\u7684\u8ba2\u5355\u5904\u7406\u5de5\u4f5c\u6d41\u7a0b\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8da8555c4.png\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">DOT<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNp9VE2P0zAQvSPxH6xwZGEp\/RAVCtJuA6uVVlBtgcvCwbUnrVXXDrbb3YL479hx4zhOSw+V4nkzfvPmeShbKVytUYEN\/sTlI\/rz\/BmyP4XFhjKV392\/9wdCUtBQ5YPXb6IT9KDXuIIcOGeVhgukzYFDnpWMc6DZBSqlMAJv7dGVYphnP4\/JQFc2OY16vGa\/IZ82SP9\/eYk+PhlQAnMEwjDDQMc03IVEcqny7EVZErIktpjntpRPTa3ZThu5BYUeOF4Cz7PmIPD6DoLKNu4\/Q\/TaqhJi7oOJFVoctIFt1uM7V5KA1ud5kjHBMA08CVOEQ1NmPggXzTkmgL4oGvGcv23D\/h40x4etlaaFDAPkW0WxAXQr9hYg1aHFjALmBgSoI0oyAi1mHDCLNatSIpM2asVCn6VhJSPYMCn6mjibWY9I9R9V3sGETOPpDWlTp2hFqVloVFyHS4pWktBoJz7sjb0THsXpTgF0D0Qqqs+0UdrnohNfvfoQD67maKv82oGO5jJwsKiVhdMjldWDeiPsGdYDYzt4G6ACDGY8JW+BFt7xcZOQ8qxBp2vPpCiZ2naH7EtHrmvQix1xBk2ZDOsO2+IFEAVYA7J6kE1sY1d2lKh6pGCXTFJ2VJdt4Qu8P+HpGhV5txm5m+xJoskrqNzL70127JDJCgnoO\/edYCMGXxUm9T65FaVMKUwcuLe9OkrUw\/ghXqKm0Cnb6jVQxJkAbTetQpa+Cou0GCR93oDxrgxeavY7rQtFD6\/r+9kayAZd7W0OXjLOzOFc5jDJdFeGNmsh+ol\/\/wGp8e+9\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 DOT<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">DOT<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNp9VE2P0zAQvSPxH6xwZGEp\/RAVCtJuA6uVVlBtgcvCwbUnrVXXDrbb3YL479hx4zhOSw+V4nkzfvPmeShbKVytUYEN\/sTlI\/rz\/BmyP4XFhjKV392\/9wdCUtBQ5YPXb6IT9KDXuIIcOGeVhgukzYFDnpWMc6DZBSqlMAJv7dGVYphnP4\/JQFc2OY16vGa\/IZ82SP9\/eYk+PhlQAnMEwjDDQMc03IVEcqny7EVZErIktpjntpRPTa3ZThu5BYUeOF4Cz7PmIPD6DoLKNu4\/Q\/TaqhJi7oOJFVoctIFt1uM7V5KA1ud5kjHBMA08CVOEQ1NmPggXzTkmgL4oGvGcv23D\/h40x4etlaaFDAPkW0WxAXQr9hYg1aHFjALmBgSoI0oyAi1mHDCLNatSIpM2asVCn6VhJSPYMCn6mjibWY9I9R9V3sGETOPpDWlTp2hFqVloVFyHS4pWktBoJz7sjb0THsXpTgF0D0Qqqs+0UdrnohNfvfoQD67maKv82oGO5jJwsKiVhdMjldWDeiPsGdYDYzt4G6ACDGY8JW+BFt7xcZOQ8qxBp2vPpCiZ2naH7EtHrmvQix1xBk2ZDOsO2+IFEAVYA7J6kE1sY1d2lKh6pGCXTFJ2VJdt4Qu8P+HpGhV5txm5m+xJoskrqNzL70127JDJCgnoO\/edYCMGXxUm9T65FaVMKUwcuLe9OkrUw\/ghXqKm0Cnb6jVQxJkAbTetQpa+Cou0GCR93oDxrgxeavY7rQtFD6\/r+9kayAZd7W0OXjLOzOFc5jDJdFeGNmsh+ol\/\/wGp8e+9\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 DOT<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">DOT<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNp1VMtu00AU3SPxD5ZZUiglbUVUGQmIWLGoWLCpunDtSWvhxpEdxEtIaQttRSlplYegFYSUhEZIdQIUUiVq8zOZ8eQvGHtie8ZuvPBizpl775lzZlRt2ZSzK0JKzskPdeO58PrqFYF8ppx5qmqm9OjxHF3IGCqwQFaaunmLWREWrBU5CySg61rWAhOClXupA0lMa7oOVHFCSBuZXEZeJUv3TE3WxcXRZqAuk81RlPIt7RWQkotzHtH7TU4KsF4ZbjSh\/XVwXmTau40UQzdMSbyWTivKkkKK0JmWjBejGg+eWTljFZjCgi4vAV0SoX2EtjviCH4CMqoRgoOLQ9gtwfKmj98nZxGgw+I\/XPvg\/Ok5vaoYm\/Gts7eJ+1tOc2fMjMqMIoNkMKOimYoORmXmp8IZznawfQR3y36L+dvh8F4XVGoNep8COBHA6PAUVdqwW4QnITwdwE6pirb3YGHfaTQDeCYsXtjHp8cBMMsCw\/zaMH\/gVBtR3ajcRrs26QfXm+N03wGzSpL1JqGOqqRC2VTzqFy36PdJMeI9XXFGIuJtnDHNSiHisd2G5+XLpaC\/a3xwbtxl3aFj4lYH\/VoXQ\/MIidFCjyPiIiXFzPJGHvRraK3FUxnbqeG49QNtvOOmJhzC5ELqc9kBPcJlJZ2aje06EzSXlIiQ3My85wNPOK4YxputAmzvR5LnkZj80QOBnd98Wz+mbsWQPOh\/cY+RD6tH4pNJYGrcJQPGwh3xbcYlRZ4ASkTftpyTC57I9MX9c3z2k3fNvzWEGXt0qHIqO3NdGLudpBB\/PnC6fVxrOvUuqjZw68i\/Kbwg\/LEDCxU\/jl4y\/CdYla0VoIYXiE8w+p4ndWGh5ZSaKH88ZlcimnuvHZfW2MY3\/wHa5nYd\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit DOT in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-dot\"><code class=\"language-dot\" data-language=\"dot\" class=\"language-dot\">digraph DataFlow {\r\n    rankdir=LR;\r\n    nodesep=1.0;\r\n    node [shape=ellipse, style=\"filled\", fontname=\"Arial\"];\r\n    edge [fontname=\"Arial\", fontsize=9];\n    \n    \/\/ \u5916\u90e8\u5b9e\u4f53\n    node [fillcolor=\"#ffccbc\", shape=box];\n    Customer [label=\"\u5ba2\u6237\"];\n    Vendor [label=\"\u4f9b\u5e94\u5546\"];\n    Bank [label=\"\u94f6\u884c\u7cfb\u7edf\"];\n    \n    \/\/ \u5904\u7406\u8fc7\u7a0b\n    node [fillcolor=\"#c5cae9\", shape=circle];\n    P1 [label=\"\u4e0b\u8ba2\u5355\"];\n    P2 [label=\"\u5904\u7406\u652f\u4ed8\"];\n    P3 [label=\"\u66f4\u65b0\u5e93\u5b58\"];\n    P4 [label=\"\u751f\u6210\u53d1\u7968\"];\n    P5 [label=\"\u53d1\u8d27\"];\n    P6 [label=\"\u53d1\u9001\u901a\u77e5\"];\n    \n    \/\/ \u6570\u636e\u5b58\u50a8\n    node [fillcolor=\"#c8e6c9\", shape=box3d];\n    D1 [label=\"\u8ba2\u5355\u6570\u636e\u5e93\"];\n    D2 [label=\"\u5e93\u5b58\u6570\u636e\u5e93\"];\n    D3 [label=\"\u5ba2\u6237\u6570\u636e\u5e93\"];\n    D4 [label=\"\u53d1\u7968\u8bb0\u5f55\"];\n    \n    \/\/ \u6570\u636e\u6d41\n    Customer -&gt; P1 [label=\"\u8ba2\u5355\u8bf7\u6c42\"];\n    P1 -&gt; D1 [label=\"\u5b58\u50a8\u8ba2\u5355\"];\n    P1 -&gt; D3 [label=\"\u66f4\u65b0\u5ba2\u6237\u4fe1\u606f\"];\n    P1 -&gt; P2 [label=\"\u652f\u4ed8\u8be6\u60c5\"];\n    \n    P2 -&gt; Bank [label=\"\u652f\u4ed8\u8bf7\u6c42\"];\n    Bank -&gt; P2 [label=\"\u652f\u4ed8\u786e\u8ba4\"];\n    P2 -&gt; P3 [label=\"\u652f\u4ed8\u6210\u529f\"];\n    \n    P3 -&gt; D2 [label=\"\u51cf\u5c11\u5e93\u5b58\"];\n    P3 -&gt; P4 [label=\"\u8ba2\u5355\u5df2\u786e\u8ba4\"];\n    \n    P4 -&gt; D4 [label=\"\u4fdd\u5b58\u53d1\u7968\"];\n    P4 -&gt; P6 [label=\"\u53d1\u7968\u6570\u636e\"];\n    \n    P3 -&gt; P5 [label=\"\u53d1\u8d27\u8bf7\u6c42\"];\n    P5 -&gt; Vendor [label=\"\u53d1\u8d27\u6807\u7b7e\"];\n    P5 -&gt; P6 [label=\"\u8ffd\u8e2a\u4fe1\u606f\"];\n    \n    P6 -&gt; Customer [label=\"\u8ba2\u5355\u786e\u8ba4n+ \u8ffd\u8e2a\u4fe1\u606f\"];\n    \n    \/\/ \u865a\u7ebf\u8868\u793a\u67e5\u8be2\n    D1 -&gt; P5 [label=\"\u83b7\u53d6\u8ba2\u5355\u8be6\u60c5\", style=dashed];\n    D2 -&gt; P1 [label=\"\u68c0\u67e5\u53ef\u7528\u6027\", style=dashed];\n    D3 -&gt; P1 [label=\"\u83b7\u53d6\u5ba2\u6237\u4fe1\u606f\", style=dashed];\n}<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNp1VMtu00AU3SPxD5ZZUiglbUVUGQmIWLGoWLCpunDtSWvhxpEdxEtIaQttRSlplYegFYSUhEZIdQIUUiVq8zOZ8eQvGHtie8ZuvPBizpl775lzZlRt2ZSzK0JKzskPdeO58PrqFYF8ppx5qmqm9OjxHF3IGCqwQFaaunmLWREWrBU5CySg61rWAhOClXupA0lMa7oOVHFCSBuZXEZeJUv3TE3WxcXRZqAuk81RlPIt7RWQkotzHtH7TU4KsF4ZbjSh\/XVwXmTau40UQzdMSbyWTivKkkKK0JmWjBejGg+eWTljFZjCgi4vAV0SoX2EtjviCH4CMqoRgoOLQ9gtwfKmj98nZxGgw+I\/XPvg\/Ok5vaoYm\/Gts7eJ+1tOc2fMjMqMIoNkMKOimYoORmXmp8IZznawfQR3y36L+dvh8F4XVGoNep8COBHA6PAUVdqwW4QnITwdwE6pirb3YGHfaTQDeCYsXtjHp8cBMMsCw\/zaMH\/gVBtR3ajcRrs26QfXm+N03wGzSpL1JqGOqqRC2VTzqFy36PdJMeI9XXFGIuJtnDHNSiHisd2G5+XLpaC\/a3xwbtxl3aFj4lYH\/VoXQ\/MIidFCjyPiIiXFzPJGHvRraK3FUxnbqeG49QNtvOOmJhzC5ELqc9kBPcJlJZ2aje06EzSXlIiQ3My85wNPOK4YxputAmzvR5LnkZj80QOBnd98Wz+mbsWQPOh\/cY+RD6tH4pNJYGrcJQPGwh3xbcYlRZ4ASkTftpyTC57I9MX9c3z2k3fNvzWEGXt0qHIqO3NdGLudpBB\/PnC6fVxrOvUuqjZw68i\/Kbwg\/LEDCxU\/jl4y\/CdYla0VoIYXiE8w+p4ndWGh5ZSaKH88ZlcimnuvHZfW2MY3\/wHa5nYd\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit DOT in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNp9VE2P0zAQvSPxH6xwZGEp\/RAVCtJuA6uVVlBtgcvCwbUnrVXXDrbb3YL479hx4zhOSw+V4nkzfvPmeShbKVytUYEN\/sTlI\/rz\/BmyP4XFhjKV392\/9wdCUtBQ5YPXb6IT9KDXuIIcOGeVhgukzYFDnpWMc6DZBSqlMAJv7dGVYphnP4\/JQFc2OY16vGa\/IZ82SP9\/eYk+PhlQAnMEwjDDQMc03IVEcqny7EVZErIktpjntpRPTa3ZThu5BYUeOF4Cz7PmIPD6DoLKNu4\/Q\/TaqhJi7oOJFVoctIFt1uM7V5KA1ud5kjHBMA08CVOEQ1NmPggXzTkmgL4oGvGcv23D\/h40x4etlaaFDAPkW0WxAXQr9hYg1aHFjALmBgSoI0oyAi1mHDCLNatSIpM2asVCn6VhJSPYMCn6mjibWY9I9R9V3sGETOPpDWlTp2hFqVloVFyHS4pWktBoJz7sjb0THsXpTgF0D0Qqqs+0UdrnohNfvfoQD67maKv82oGO5jJwsKiVhdMjldWDeiPsGdYDYzt4G6ACDGY8JW+BFt7xcZOQ8qxBp2vPpCiZ2naH7EtHrmvQix1xBk2ZDOsO2+IFEAVYA7J6kE1sY1d2lKh6pGCXTFJ2VJdt4Qu8P+HpGhV5txm5m+xJoskrqNzL70127JDJCgnoO\/edYCMGXxUm9T65FaVMKUwcuLe9OkrUw\/ghXqKm0Cnb6jVQxJkAbTetQpa+Cou0GCR93oDxrgxeavY7rQtFD6\/r+9kayAZd7W0OXjLOzOFc5jDJdFeGNmsh+ol\/\/wGp8e+9\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 DOT<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNp9VE2P0zAQvSPxH6xwZGEp\/RAVCtJuA6uVVlBtgcvCwbUnrVXXDrbb3YL479hx4zhOSw+V4nkzfvPmeShbKVytUYEN\/sTlI\/rz\/BmyP4XFhjKV392\/9wdCUtBQ5YPXb6IT9KDXuIIcOGeVhgukzYFDnpWMc6DZBSqlMAJv7dGVYphnP4\/JQFc2OY16vGa\/IZ82SP9\/eYk+PhlQAnMEwjDDQMc03IVEcqny7EVZErIktpjntpRPTa3ZThu5BYUeOF4Cz7PmIPD6DoLKNu4\/Q\/TaqhJi7oOJFVoctIFt1uM7V5KA1ud5kjHBMA08CVOEQ1NmPggXzTkmgL4oGvGcv23D\/h40x4etlaaFDAPkW0WxAXQr9hYg1aHFjALmBgSoI0oyAi1mHDCLNatSIpM2asVCn6VhJSPYMCn6mjibWY9I9R9V3sGETOPpDWlTp2hFqVloVFyHS4pWktBoJz7sjb0THsXpTgF0D0Qqqs+0UdrnohNfvfoQD67maKv82oGO5jJwsKiVhdMjldWDeiPsGdYDYzt4G6ACDGY8JW+BFt7xcZOQ8qxBp2vPpCiZ2naH7EtHrmvQix1xBk2ZDOsO2+IFEAVYA7J6kE1sY1d2lKh6pGCXTFJ2VJdt4Qu8P+HpGhV5txm5m+xJoskrqNzL70127JDJCgnoO\/edYCMGXxUm9T65FaVMKUwcuLe9OkrUw\/ghXqKm0Cnb6jVQxJkAbTetQpa+Cou0GCR93oDxrgxeavY7rQtFD6\/r+9kayAZd7W0OXjLOzOFc5jDJdFeGNmsh+ol\/\/wGp8e+9\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 DOT<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<hr\/>\n<h2>6. \u73b0\u5b9e\u4e16\u754c\u5b9e\u65bd\u6a21\u5f0f {#implementation-patterns}<\/h2>\n<h3>\u6a21\u5f0f 1\uff1aCI\/CD \u6d41\u6c34\u7ebf\u6587\u6863<\/h3>\n<p><strong>\u793a\u4f8b\u4ee3\u7801\uff08Mermaid\uff09\uff1a<\/strong><\/p>\n<p><img alt=\"Mermaid \u56fe\u8868\uff0c\u8bf4\u660e\u4ece\u6e90\u4ee3\u7801\u63a7\u5236\u5230\u6301\u7eed\u96c6\u6210\u3001\u90e8\u7f72\u548c\u76d1\u63a7\u7684 CI\/CD \u7ba1\u9053\u5de5\u4f5c\u6d41\u7a0b\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8deb63fe2.png\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">\u7f8e\u4eba\u9c7c<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFU9FKKzEQfb\/gP4T6qiBWUfogVCsqKJTW+xR8SJN0DcakJhNh\/\/7OZFbJeoVm2WTmnElmcma3S2r3Kh5XB38Ejlw2XQXWsSRt5YRXcRMDpOgnLxxG486BxPe+bMTK7mJ2EFPf8MuVXBbvkfwoNsPA2GDY+JHv5kFOKIkLJZYsHgJYJMDF0OZ8dAEkTS50DfyM58u\/wUG1csNcF+eNrLOYJ3BbpUf8Wqsg11aX5KCv3r46F6M6F3bnY\/9uA7RlLuynZEZAJK\/NCKqzDUv++Da3p7cS3\/\/uskzRNBvJLZoU2lPyUwzUGzkZDMw20jR2WeIk5l2XbKeaE2k8WUhOZzmsYqHy6yaqZJqYubcJsqwLni7WfQb7\/ntZ+MmI4+Mr\/DzYX66qS01lgKwK0f0ZIqtCtZGMcU8JpK4xRlaFUHJG0OAYUn0IIrOCKDJDpHatCSUdqkKL60J1fkCDEox+yUIEyzDqAfTe1itvnfezw+0JPUcZ\/6U3OzucTqdtXM3AgebMGqO+A08v1cXZ+ZGOPqbZxiv91u7jvF8pLs1Fs9Po6fl45z\/t1RpT\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91\u7f8e\u4eba\u9c7c<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">\u7f8e\u4eba\u9c7c<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFU9FKKzEQfb\/gP4T6qiBWUfogVCsqKJTW+xR8SJN0DcakJhNh\/\/7OZFbJeoVm2WTmnElmcma3S2r3Kh5XB38Ejlw2XQXWsSRt5YRXcRMDpOgnLxxG486BxPe+bMTK7mJ2EFPf8MuVXBbvkfwoNsPA2GDY+JHv5kFOKIkLJZYsHgJYJMDF0OZ8dAEkTS50DfyM58u\/wUG1csNcF+eNrLOYJ3BbpUf8Wqsg11aX5KCv3r46F6M6F3bnY\/9uA7RlLuynZEZAJK\/NCKqzDUv++Da3p7cS3\/\/uskzRNBvJLZoU2lPyUwzUGzkZDMw20jR2WeIk5l2XbKeaE2k8WUhOZzmsYqHy6yaqZJqYubcJsqwLni7WfQb7\/ntZ+MmI4+Mr\/DzYX66qS01lgKwK0f0ZIqtCtZGMcU8JpK4xRlaFUHJG0OAYUn0IIrOCKDJDpHatCSUdqkKL60J1fkCDEox+yUIEyzDqAfTe1itvnfezw+0JPUcZ\/6U3OzucTqdtXM3AgebMGqO+A08v1cXZ+ZGOPqbZxiv91u7jvF8pLs1Fs9Po6fl45z\/t1RpT\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91\u7f8e\u4eba\u9c7c<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp9Ul1LG0EUfZ9fEeKrQjGKkodCraKCgmjfhj5sdsd0ccnK7kTwzRitSbUmwS9Q2viBGhWNWtpKVvHPZGbWf9HZmWx2ItJZdpc598zce8+5aUeb\/xKbmAYxvtxsKi32M3bW0RGM00a56Z2wwxzdPCeFP\/HPghasURND\/o5lU7Gmt0UaW1FoahrS9SIp7fr1v\/RuWQZQxhD\/zjwfx3mOjRzzrl8OvtJCWUkwYWYwbCU\/WaLV0yj0CbkYku87ZDVPf6\/79Z0oNJQ1LQPSnyvEazQb56x4EcVmdC0DyU2RrNZo8YqWSv+tbLhdWb7Gnu6VyobRApQgKdySxyVSqrDNOjnOK6mwlkYR6eV4hZPIQ\/41b6R3BLKrOqfw7+tephzbiO5g29WgIeWCtwuftDMmth0YZwcV7pqqqJ12Id07Jc97fm6flAtRaBJhx9R5dGONHq41vUv\/qEZ\/PEeEDxZysAtJ5Zt\/fcZ+ecyrvlEEH4hYT897PgFADoLYBU6C0FKBBAaC0EmBCN9A20GBBX6B0DiBcOVBywHJCGQGbcEFxiUFLWllLVxFEMop6+E6dCKt9oEihcBl14rIeNFCostZ07KSXbPvgqfbxY49h5JdiURCoYnbJc\/oQ4ahtXm9g9pAX3+3blu2k0xZmj6nHJM5wwSDxoBy0NAT\/Z0H\/wHG+l+U\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">graph LR\n    subgraph Source[\"\u6e90\u4ee3\u7801\u63a7\u5236\"]\n        Git[GitHub \u4ed3\u5e93]\n        PR[\u62c9\u53d6\u8bf7\u6c42]\n    end\n    \n    subgraph CI[\"\u6301\u7eed\u96c6\u6210\"]\n        Lint[\u4ee3\u7801\u68c0\u67e5]\n        Test[\u5355\u5143\u6d4b\u8bd5]\n        Build[\u6784\u5efa\u4ea7\u7269]\n        Scan[\u5b89\u5168\u626b\u63cf]\n    end\n    \n    subgraph CD[\"\u6301\u7eed\u90e8\u7f72\"]\n        Dev[\u90e8\u7f72\u5230\u5f00\u53d1\u73af\u5883]\n        Stage[\u90e8\u7f72\u5230\u9884\u53d1\u5e03\u73af\u5883]\n        E2E[\u7aef\u5230\u7aef\u6d4b\u8bd5]\n        Prod[\u90e8\u7f72\u5230\u751f\u4ea7\u73af\u5883]\n    end\n    \n    subgraph Monitor[\"\u76d1\u63a7\"]\n        Logs[\u65e5\u5fd7\u805a\u5408]\n        Metrics[\u6307\u6807\u4eea\u8868\u677f]\n        Alerts[\u544a\u8b66\u7cfb\u7edf]\n    end\n    \n    Git --&gt; PR\n    PR --&gt; Lint\n    Lint --&gt; Test\n    Test --&gt; Build\n    Build --&gt; Scan\n    Scan --&gt; Dev\n    Dev --&gt; Stage\n    Stage --&gt; E2E\n    E2E --&gt; Prod\n    Prod --&gt; Logs\n    Prod --&gt; Metrics\n    Metrics --&gt; Alerts\n    \n    style Git fill:#f0f0f0,stroke:#333\n    style Prod fill:#d4edda,stroke:#28a745,color:black\n    style Alerts fill:#f8d7da,stroke:#dc3545,color:black\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNp9Ul1LG0EUfZ9fEeKrQjGKkodCraKCgmjfhj5sdsd0ccnK7kTwzRitSbUmwS9Q2viBGhWNWtpKVvHPZGbWf9HZmWx2ItJZdpc598zce8+5aUeb\/xKbmAYxvtxsKi32M3bW0RGM00a56Z2wwxzdPCeFP\/HPghasURND\/o5lU7Gmt0UaW1FoahrS9SIp7fr1v\/RuWQZQxhD\/zjwfx3mOjRzzrl8OvtJCWUkwYWYwbCU\/WaLV0yj0CbkYku87ZDVPf6\/79Z0oNJQ1LQPSnyvEazQb56x4EcVmdC0DyU2RrNZo8YqWSv+tbLhdWb7Gnu6VyobRApQgKdySxyVSqrDNOjnOK6mwlkYR6eV4hZPIQ\/41b6R3BLKrOqfw7+tephzbiO5g29WgIeWCtwuftDMmth0YZwcV7pqqqJ12Id07Jc97fm6flAtRaBJhx9R5dGONHq41vUv\/qEZ\/PEeEDxZysAtJ5Zt\/fcZ+ecyrvlEEH4hYT897PgFADoLYBU6C0FKBBAaC0EmBCN9A20GBBX6B0DiBcOVBywHJCGQGbcEFxiUFLWllLVxFEMop6+E6dCKt9oEihcBl14rIeNFCostZ07KSXbPvgqfbxY49h5JdiURCoYnbJc\/oQ4ahtXm9g9pAX3+3blu2k0xZmj6nHJM5wwSDxoBy0NAT\/Z0H\/wHG+l+U\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFU9FKKzEQfb\/gP4T6qiBWUfogVCsqKJTW+xR8SJN0DcakJhNh\/\/7OZFbJeoVm2WTmnElmcma3S2r3Kh5XB38Ejlw2XQXWsSRt5YRXcRMDpOgnLxxG486BxPe+bMTK7mJ2EFPf8MuVXBbvkfwoNsPA2GDY+JHv5kFOKIkLJZYsHgJYJMDF0OZ8dAEkTS50DfyM58u\/wUG1csNcF+eNrLOYJ3BbpUf8Wqsg11aX5KCv3r46F6M6F3bnY\/9uA7RlLuynZEZAJK\/NCKqzDUv++Da3p7cS3\/\/uskzRNBvJLZoU2lPyUwzUGzkZDMw20jR2WeIk5l2XbKeaE2k8WUhOZzmsYqHy6yaqZJqYubcJsqwLni7WfQb7\/ntZ+MmI4+Mr\/DzYX66qS01lgKwK0f0ZIqtCtZGMcU8JpK4xRlaFUHJG0OAYUn0IIrOCKDJDpHatCSUdqkKL60J1fkCDEox+yUIEyzDqAfTe1itvnfezw+0JPUcZ\/6U3OzucTqdtXM3AgebMGqO+A08v1cXZ+ZGOPqbZxiv91u7jvF8pLs1Fs9Po6fl45z\/t1RpT\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91\u7f8e\u4eba\u9c7c<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqFU9FKKzEQfb\/gP4T6qiBWUfogVCsqKJTW+xR8SJN0DcakJhNh\/\/7OZFbJeoVm2WTmnElmcma3S2r3Kh5XB38Ejlw2XQXWsSRt5YRXcRMDpOgnLxxG486BxPe+bMTK7mJ2EFPf8MuVXBbvkfwoNsPA2GDY+JHv5kFOKIkLJZYsHgJYJMDF0OZ8dAEkTS50DfyM58u\/wUG1csNcF+eNrLOYJ3BbpUf8Wqsg11aX5KCv3r46F6M6F3bnY\/9uA7RlLuynZEZAJK\/NCKqzDUv++Da3p7cS3\/\/uskzRNBvJLZoU2lPyUwzUGzkZDMw20jR2WeIk5l2XbKeaE2k8WUhOZzmsYqHy6yaqZJqYubcJsqwLni7WfQb7\/ntZ+MmI4+Mr\/DzYX66qS01lgKwK0f0ZIqtCtZGMcU8JpK4xRlaFUHJG0OAYUn0IIrOCKDJDpHatCSUdqkKL60J1fkCDEox+yUIEyzDqAfTe1itvnfezw+0JPUcZ\/6U3OzucTqdtXM3AgebMGqO+A08v1cXZ+ZGOPqbZxiv91u7jvF8pLs1Fs9Po6fl45z\/t1RpT\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91\u7f8e\u4eba\u9c7c<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>\u6a21\u5f0f 2\uff1a\u6570\u636e\u5e93\u67b6\u6784\u8bbe\u8ba1<\/h3>\n<p><strong>\u793a\u4f8b\u4ee3\u7801\uff08PlantUML\uff09\uff1a<\/strong><\/p>\n<p><img alt=\"PlantUML \u5b9e\u4f53\u5173\u7cfb\u56fe\uff0c\u8bf4\u660e\u5305\u542b\u7528\u6237\u3001\u8ba2\u5355\u3001\u8ba2\u5355\u9879\u3001\u4ea7\u54c1\u548c\u652f\u4ed8\u8868\u7684\u7535\u5b50\u5546\u52a1\u6570\u636e\u5e93\u67b6\u6784\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8e0682d4f.png\"\/><br \/>\n<em>\u56fe 5\uff1a\u5c55\u793a\u7535\u5b50\u5546\u52a1\u6570\u636e\u5e93\u67b6\u6784\u7684\u5b9e\u4f53\u5173\u7cfb\u56fe<\/em><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:bLLTQzim57qt-3zex2M66j92NaefzRgOXJPTQDEnDwDAIYngIvuaqsP9__kkBDkn4sTGlmIT-w5pxprNkT46ArFccUzzeMp51KFBwDlzT2HmpWB4XE5cW-m1NLsXqVBiQnn7y0Ne-deVihWRlGVe7LmMTrqyRl6umdtF9N_MJEa0RNqFmGVH9G09fm6wHBE7fOF3qFso7FCC3B-YnziVqUFeOZ89dAN0Mhz9HPCKwtJGWoY63QC9Dc1UpkRJfsKqNpXRXhL9ChdcujW6NJ6b1dpwy3ptlOyzzOMIj2IcnxvmsAa2z6lP8JSPrzogfWwHfamJnGl3PSLi-hlELoXERCJtwUri7jsFpiTd5q73LvBNv4-9tRmw90ZKlvPg0-GQk5FDhRDorgkd4pDOq07py_6u7OW2nGnVzLFHWw5BYvow8nuMXOkXGF1uQ4OQd2KubwKmfzhK6si5fRmek5Wdc5B5j6uxVaXzPbZUeyy1-0_xmUhYas8Pcbqfk4bEJBqhIRp9eUrzIJhii_oQi9oPLD9Ueup2GcDYLUa6V2pSJxOUEa6WumFhMHLNFH9ejmj3kKLEFU1LP1Y2VAy6FcGOxhR8-LwY5vP9iTQ9aQs7JR2h4rGp13SYXS5SD6aSNANQeMR1mKsn5GD1L_UrSEsstnoRhpxyXLguw5qDt9lvMFQOq-HbOyiJ4ZIi-3erIAvS0ROjJqQ2314fOQLpfX0cn3Qric514IvDQbzbkDA-3x09sFSO66o-Dc_6LbLQHyJ6pg7UxWoXE08IiAOtRj9s3-3rWTPakf_q1Wxm9_4F\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 PlantUML<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:bLLTQzim57qt-3zex2M66j92NaefzRgOXJPTQDEnDwDAIYngIvuaqsP9__kkBDkn4sTGlmIT-w5pxprNkT46ArFccUzzeMp51KFBwDlzT2HmpWB4XE5cW-m1NLsXqVBiQnn7y0Ne-deVihWRlGVe7LmMTrqyRl6umdtF9N_MJEa0RNqFmGVH9G09fm6wHBE7fOF3qFso7FCC3B-YnziVqUFeOZ89dAN0Mhz9HPCKwtJGWoY63QC9Dc1UpkRJfsKqNpXRXhL9ChdcujW6NJ6b1dpwy3ptlOyzzOMIj2IcnxvmsAa2z6lP8JSPrzogfWwHfamJnGl3PSLi-hlELoXERCJtwUri7jsFpiTd5q73LvBNv4-9tRmw90ZKlvPg0-GQk5FDhRDorgkd4pDOq07py_6u7OW2nGnVzLFHWw5BYvow8nuMXOkXGF1uQ4OQd2KubwKmfzhK6si5fRmek5Wdc5B5j6uxVaXzPbZUeyy1-0_xmUhYas8Pcbqfk4bEJBqhIRp9eUrzIJhii_oQi9oPLD9Ueup2GcDYLUa6V2pSJxOUEa6WumFhMHLNFH9ejmj3kKLEFU1LP1Y2VAy6FcGOxhR8-LwY5vP9iTQ9aQs7JR2h4rGp13SYXS5SD6aSNANQeMR1mKsn5GD1L_UrSEsstnoRhpxyXLguw5qDt9lvMFQOq-HbOyiJ4ZIi-3erIAvS0ROjJqQ2314fOQLpfX0cn3Qric514IvDQbzbkDA-3x09sFSO66o-Dc_6LbLQHyJ6pg7UxWoXE08IiAOtRj9s3-3rWTPakf_q1Wxm9_4F\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 PlantUML<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:bLJFInj15BxlNp6bbomOY48k8c9g4neqDjXOUbl6dKaok3kpdPcbfaOmBK8F2gL5y5ma54gZXq9BI_yR4-9_qRSxkt5jreDxsCtxvdllVU_7P4rfB7NeUzOZGjkCKzIgFDci5ZZsgOqerqptK6IWbHLKQ2qyhjKgyDXeTNNcqTmexDje7nZDZGnScy6r2BPCu1r5fRBHWONW0SyGR8SH6osZ-bOhHel5-4Dzp3o0NrQsrvzLjWjBvR8T7mHOgJT24gUBLJUFu4gADIKErd3QgZUgBrgLHZC-yh3IZYSwZCyTGITqg02kRkqqhCDKS5CA4hewgpamKBvijHTcD9LBHbBSmXofX2fNia0p4GkglZAn0idSYF-qkbvlL3OBYwM59JjHATmzvtM8pMXkqxjGSaV87gXAq5a9w-Q8qMmH6NvE5V_fNIoLqjvBM8gS7CybkJjO4G7vmMkvOpSE16JDZKOBZJq7-oBa-fwkP6SN8rqM18nt74o8f4gbtRqhkAwfdnNDmBvNSrv5jVks8MT28MVQoP_ixRRXdWyDlhDj1dgGhDJ7fxehIBOlMcAki1ijd9dYt4e-gCrGl0lTdRziK55yrL6_NooA0sJs0oY1Xy73Ikn3KIps3v2XBgDTwWdUKOuMAI5oxoVkyRI0vGgkCUD948F6WVeelQt0ahHDOLcZP3CqOTrUY2XQOho58XZFvWNPwJmYuPWHPxTdMLp0YahMwMeasaOwz6By_Npyxkjuz6NouUVqnn3U4VZfP3gwc5uE9cTNazEHHJb1aNiInAFjE8R92VphNt-cmy7rxul9-UVfw6hyzomASd8y_lZjvlZqvcWmlHnEtXzdugp1J_Zx_WS0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\n!define TABLE(name) entity name &lt;&lt; (T,#FFAAAA) &gt;&gt;\n!define PK(x) x &lt;&lt;PK&gt;&gt;\n!define FK(x) x &lt;&lt;FK&gt;&gt;\n\nTABLE(Users) {\n    PK(user_id) : INT\n    --\n    email : VARCHAR(255)\n    password_hash : VARCHAR(255)\n    created_at : TIMESTAMP\n    last_login : TIMESTAMP\n    status : ENUM\n}\n\nTABLE(Products) {\n    PK(product_id) : INT\n    --\n    sku : VARCHAR(50)\n    name : VARCHAR(255)\n    description : TEXT\n    price : DECIMAL(10,2)\n    stock_quantity : INT\n    category_id : INT\n}\n\nTABLE(Categories) {\n    PK(category_id) : INT\n    --\n    name : VARCHAR(100)\n    parent_id : INT\n}\n\nTABLE(Orders) {\n    PK(order_id) : INT\n    --\n    FK(user_id) : INT\n    order_date : TIMESTAMP\n    total_amount : DECIMAL(10,2)\n    status : ENUM\n    shipping_address : TEXT\n}\n\nTABLE(OrderItems) {\n    PK(item_id) : INT\n    --\n    FK(order_id) : INT\n    FK(product_id) : INT\n    quantity : INT\n    unit_price : DECIMAL(10,2)\n}\n\nTABLE(Payments) {\n    PK(payment_id) : INT\n    --\n    FK(order_id) : INT\n    payment_method : ENUM\n    transaction_id : VARCHAR(255)\n    amount : DECIMAL(10,2)\n    status : ENUM\n    processed_at : TIMESTAMP\n}\n\nUsers ||--o{ Orders : places\nOrders }o--|{ Users : belongs_to\nOrders ||--|{ OrderItems : contains\nOrderItems }o--|| Products : references\nProducts }o--|| Categories : categorized_in\nOrders ||--o{ Payments : paid_by\n\nnote right of Users\n  \u5b58\u50a8\u5ba2\u6237\u8d26\u6237\n  \u548c\u8ba4\u8bc1\u6570\u636e\nend note\n\nnote left of Orders\n  \u4e3b\u8981\u4ea4\u6613\u8bb0\u5f55\n  \u5305\u542b\u914d\u9001\u8be6\u60c5\nend note\n\n@enduml\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:bLJFInj15BxlNp6bbomOY48k8c9g4neqDjXOUbl6dKaok3kpdPcbfaOmBK8F2gL5y5ma54gZXq9BI_yR4-9_qRSxkt5jreDxsCtxvdllVU_7P4rfB7NeUzOZGjkCKzIgFDci5ZZsgOqerqptK6IWbHLKQ2qyhjKgyDXeTNNcqTmexDje7nZDZGnScy6r2BPCu1r5fRBHWONW0SyGR8SH6osZ-bOhHel5-4Dzp3o0NrQsrvzLjWjBvR8T7mHOgJT24gUBLJUFu4gADIKErd3QgZUgBrgLHZC-yh3IZYSwZCyTGITqg02kRkqqhCDKS5CA4hewgpamKBvijHTcD9LBHbBSmXofX2fNia0p4GkglZAn0idSYF-qkbvlL3OBYwM59JjHATmzvtM8pMXkqxjGSaV87gXAq5a9w-Q8qMmH6NvE5V_fNIoLqjvBM8gS7CybkJjO4G7vmMkvOpSE16JDZKOBZJq7-oBa-fwkP6SN8rqM18nt74o8f4gbtRqhkAwfdnNDmBvNSrv5jVks8MT28MVQoP_ixRRXdWyDlhDj1dgGhDJ7fxehIBOlMcAki1ijd9dYt4e-gCrGl0lTdRziK55yrL6_NooA0sJs0oY1Xy73Ikn3KIps3v2XBgDTwWdUKOuMAI5oxoVkyRI0vGgkCUD948F6WVeelQt0ahHDOLcZP3CqOTrUY2XQOho58XZFvWNPwJmYuPWHPxTdMLp0YahMwMeasaOwz6By_Npyxkjuz6NouUVqnn3U4VZfP3gwc5uE9cTNazEHHJb1aNiInAFjE8R92VphNt-cmy7rxul9-UVfw6hyzomASd8y_lZjvlZqvcWmlHnEtXzdugp1J_Zx_WS0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:bLLTQzim57qt-3zex2M66j92NaefzRgOXJPTQDEnDwDAIYngIvuaqsP9__kkBDkn4sTGlmIT-w5pxprNkT46ArFccUzzeMp51KFBwDlzT2HmpWB4XE5cW-m1NLsXqVBiQnn7y0Ne-deVihWRlGVe7LmMTrqyRl6umdtF9N_MJEa0RNqFmGVH9G09fm6wHBE7fOF3qFso7FCC3B-YnziVqUFeOZ89dAN0Mhz9HPCKwtJGWoY63QC9Dc1UpkRJfsKqNpXRXhL9ChdcujW6NJ6b1dpwy3ptlOyzzOMIj2IcnxvmsAa2z6lP8JSPrzogfWwHfamJnGl3PSLi-hlELoXERCJtwUri7jsFpiTd5q73LvBNv4-9tRmw90ZKlvPg0-GQk5FDhRDorgkd4pDOq07py_6u7OW2nGnVzLFHWw5BYvow8nuMXOkXGF1uQ4OQd2KubwKmfzhK6si5fRmek5Wdc5B5j6uxVaXzPbZUeyy1-0_xmUhYas8Pcbqfk4bEJBqhIRp9eUrzIJhii_oQi9oPLD9Ueup2GcDYLUa6V2pSJxOUEa6WumFhMHLNFH9ejmj3kKLEFU1LP1Y2VAy6FcGOxhR8-LwY5vP9iTQ9aQs7JR2h4rGp13SYXS5SD6aSNANQeMR1mKsn5GD1L_UrSEsstnoRhpxyXLguw5qDt9lvMFQOq-HbOyiJ4ZIi-3erIAvS0ROjJqQ2314fOQLpfX0cn3Qric514IvDQbzbkDA-3x09sFSO66o-Dc_6LbLQHyJ6pg7UxWoXE08IiAOtRj9s3-3rWTPakf_q1Wxm9_4F\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 PlantUML<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:bLLTQzim57qt-3zex2M66j92NaefzRgOXJPTQDEnDwDAIYngIvuaqsP9__kkBDkn4sTGlmIT-w5pxprNkT46ArFccUzzeMp51KFBwDlzT2HmpWB4XE5cW-m1NLsXqVBiQnn7y0Ne-deVihWRlGVe7LmMTrqyRl6umdtF9N_MJEa0RNqFmGVH9G09fm6wHBE7fOF3qFso7FCC3B-YnziVqUFeOZ89dAN0Mhz9HPCKwtJGWoY63QC9Dc1UpkRJfsKqNpXRXhL9ChdcujW6NJ6b1dpwy3ptlOyzzOMIj2IcnxvmsAa2z6lP8JSPrzogfWwHfamJnGl3PSLi-hlELoXERCJtwUri7jsFpiTd5q73LvBNv4-9tRmw90ZKlvPg0-GQk5FDhRDorgkd4pDOq07py_6u7OW2nGnVzLFHWw5BYvow8nuMXOkXGF1uQ4OQd2KubwKmfzhK6si5fRmek5Wdc5B5j6uxVaXzPbZUeyy1-0_xmUhYas8Pcbqfk4bEJBqhIRp9eUrzIJhii_oQi9oPLD9Ueup2GcDYLUa6V2pSJxOUEa6WumFhMHLNFH9ejmj3kKLEFU1LP1Y2VAy6FcGOxhR8-LwY5vP9iTQ9aQs7JR2h4rGp13SYXS5SD6aSNANQeMR1mKsn5GD1L_UrSEsstnoRhpxyXLguw5qDt9lvMFQOq-HbOyiJ4ZIi-3erIAvS0ROjJqQ2314fOQLpfX0cn3Qric514IvDQbzbkDA-3x09sFSO66o-Dc_6LbLQHyJ6pg7UxWoXE08IiAOtRj9s3-3rWTPakf_q1Wxm9_4F\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 PlantUML<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>\u6a21\u5f0f 3\uff1a\u57fa\u7840\u8bbe\u65bd\u5373\u4ee3\u7801\u53ef\u89c6\u5316<\/h3>\n<p><strong>\u793a\u4f8b\u4ee3\u7801\uff08Mermaid\uff09\uff1a<\/strong><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">\u7f8e\u4eba\u9c7c<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqVVV1vmzAUfZ+0\/2Cl0p6WtYnXNommSoSmWaQ06kI2pll9cMAhVhBGxizLv981UD4M6Tqjay6He8y5\/rgEksZ7tJm+f4egJek2yADLdUgPOmSHIvXRItpJmiiZeiqVrPecR+vmc8k8xUVUjqFb5ZUjrpg6CnngUUB6lV8fSrcfTzYBQ4OrT9l1ObgxIhZzlywixWTEFJpTxY70ZISsrA0BO\/O2+VTqe0q3IfdIL78jJ93CBxJTn27WckqsOIYomiW+FNRHUxrSyGOyI34KMwdxpLijryJRRhiL\/LeJlPw3JAUqc+c1mdVaxvGGMwnrWROtkS6WbjPbGRDo0IYmBzQ4HzWsoobno3AVhTuiWrm382+kc08VzfPR3quJrO8dAoaeYMYDyZxvyy9beXn3mIaK961f51jM5wmZhXq5bOrtWY68RXoDaDx0nAhHCUkDWMzCMbOAiXMwmqbeAVY4E24lCbjoA2wp75DGpqTZg0PAkLOnkvkv4z\/\/hyLmpZKrE0gqPFOTaz0QMLROQ2Z+3pmTFxqaS9HWt7AeCRhaiyb5X7IeRcQhl6x0VD5Mw1IEQUcRsV2SlS2XKm9vvPu5pieiC9vP\/rpVGpyVQ8DQSii+K05Kp9DSyfvvCWzHWeRnTvKM+v27vHA+SBEpUrnIvl8V49VAHQ6TmuN6djUAVSYHwMkAfSpbyLCF4LowzclewCkokWELwU3E5Ordb7IbGDYxY4QXUSW9BuAGYBBhNxvMOoKbiMG1XYNaA3ADyHtdKOpolk5HnO3mileNzybqFDL9+0I7HoaTi91YXx\/hnykObHKBMS78\/pH7aj8Zxn\/qRL2ABXE3Hl9dlUTPu6Xw6IlQyMlxzxWr07TmnDZkt3g7KmkD+tkfnaXpbVrwxtf0mt6UvNvdyBv5fwEtfO9m\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91\u7f8e\u4eba\u9c7c<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">\u7f8e\u4eba\u9c7c<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqVVV1vmzAUfZ+0\/2Cl0p6WtYnXNommSoSmWaQ06kI2pll9cMAhVhBGxizLv981UD4M6Tqjay6He8y5\/rgEksZ7tJm+f4egJek2yADLdUgPOmSHIvXRItpJmiiZeiqVrPecR+vmc8k8xUVUjqFb5ZUjrpg6CnngUUB6lV8fSrcfTzYBQ4OrT9l1ObgxIhZzlywixWTEFJpTxY70ZISsrA0BO\/O2+VTqe0q3IfdIL78jJ93CBxJTn27WckqsOIYomiW+FNRHUxrSyGOyI34KMwdxpLijryJRRhiL\/LeJlPw3JAUqc+c1mdVaxvGGMwnrWROtkS6WbjPbGRDo0IYmBzQ4HzWsoobno3AVhTuiWrm382+kc08VzfPR3quJrO8dAoaeYMYDyZxvyy9beXn3mIaK961f51jM5wmZhXq5bOrtWY68RXoDaDx0nAhHCUkDWMzCMbOAiXMwmqbeAVY4E24lCbjoA2wp75DGpqTZg0PAkLOnkvkv4z\/\/hyLmpZKrE0gqPFOTaz0QMLROQ2Z+3pmTFxqaS9HWt7AeCRhaiyb5X7IeRcQhl6x0VD5Mw1IEQUcRsV2SlS2XKm9vvPu5pieiC9vP\/rpVGpyVQ8DQSii+K05Kp9DSyfvvCWzHWeRnTvKM+v27vHA+SBEpUrnIvl8V49VAHQ6TmuN6djUAVSYHwMkAfSpbyLCF4LowzclewCkokWELwU3E5Ordb7IbGDYxY4QXUSW9BuAGYBBhNxvMOoKbiMG1XYNaA3ADyHtdKOpolk5HnO3mileNzybqFDL9+0I7HoaTi91YXx\/hnykObHKBMS78\/pH7aj8Zxn\/qRL2ABXE3Hl9dlUTPu6Xw6IlQyMlxzxWr07TmnDZkt3g7KmkD+tkfnaXpbVrwxtf0mt6UvNvdyBv5fwEtfO9m\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91\u7f8e\u4eba\u9c7c<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqNVW1P01AU\/r5fcTO+OmGrwLYYklFeYgILUnQkN3zoum5raNal60S+AWEBjCIjKIJTXAKBREHxlbSZ\/pnetv4L721H13YscpvT3XP6PO1zzj33riCz5SKYGw0BPCrVbMH2UxkGhvEN6GodHalmc8W6+G28boUXbBwZOUHmOUWQStdkMtyJ+6Y0ryxJ8qJQKsCw2aqbWsPzDjIez9AQG4gO3LWv\/uiQH\/BgMgN1ddda3SP8Vh3VvvkB6dQcxAZueuZzXFEz1awocDCMap9Q7RKd72BqQBYZqalRiNQ9c+\/M+n5ktVro3YbVbKKDs27oKFshtYDoQxO939WvNKOh+lF8KXcbZbLwhFV4XKvTVaOx1VNaZ6XK5TmBl3EutlB0uXYDmoxxmolCfAO6pqFnTRDtCYt5YbGeMMoLo7phwYS7kvblMcYqrJOI8eqL8eKidyKzYwzEBmakilKQeebh1P2s3D+Cjg\/Ry8+kBM\/VHkQ+J1TguEiWima5Iu9E\/q\/c63vn3d3OKJLMFvDyofM3aO0skAEuGUMB55HR\/GnLtn6sG+qOfrWNjjd0reUnjE8wEBvATaqrHx3iwm2l8FxVFpRlrOViC9WCWjKpCYgNWKfraPMgoHMSOhxTWw\/sxdQ0xIZZu9bW19tKmZZKAi6Mcwa8rRvbpzhfY\/8E\/dkPqKIzkBalai7DKlzR\/2h+ll2G5Eiaj+BZQHCagdjA35VD8+ikW9b1r317VMFdZjRWTG0Td4ux+WsBRCIjwP7uhCyVFNiZAnos7bzOEyNoXLpQu4y2j4+KUPvIsH2y24KBWDBAdUQRvB3GnX0diAUDlC8Q4JFWDjC9ISoQ8rPbUlxqx6e8vp+EO9PP8gQoX8DPozN+WsenvH6ovdm9MVt\/F4jOOCLTnq9VlGWRJ38uIC+IYrIvnyDXnYoiS4t8so+iqPY8siTklGIyVn7q4ZFFavPyicTAgMvjuGEWu5wkSnJyqSgovIdFxDqsGD9MZeMuK8rey8V7sUg\/tmmJQXaQHXJpw\/k4F8\/9A1GEMN4=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">graph TB\n    subgraph AWS[\"AWS \u4e91\u57fa\u7840\u8bbe\u65bd\"]\n        direction TB\n        \n        subgraph Networking[\"\u7f51\u7edc\"]\n            VPC[VPC 10.0.0.0\/16]\n            IGW[\u4e92\u8054\u7f51\u7f51\u5173]\n            NAT[NAT \u7f51\u5173]\n            \n            subgraph Public[\"\u516c\u5171\u5b50\u7f51\"]\n                ALB[\u5e94\u7528\u8d1f\u8f7d\u5747\u8861\u5668]\n                Bastion[\u5821\u5792\u4e3b\u673a]\n            end\n            \n            subgraph Private[\"\u79c1\u6709\u5b50\u7f51\"]\n                subgraph AppTier[\"\u5e94\u7528\u5c42\"]\n                    ECS1[ECS \u4efb\u52a1 1]\n                    ECS2[ECS \u4efb\u52a1 2]\n                    ECS3[ECS \u4efb\u52a1 3]\n                end\n                \n                subgraph DataTier[\"\u6570\u636e\u5c42\"]\n                    RDS[RDS PostgreSQL&lt;br\/&gt;\u591a\u53ef\u7528\u533a]\n                    Redis[ElastiCache Redis]\n                end\n            end\n        end\n        \n        subgraph Storage[\"\u5b58\u50a8\"]\n            S3[S3 \u5b58\u50a8\u6876&lt;br\/&gt;\u8d44\u6e90\u4e0e\u5907\u4efd]\n            EFS[EFS \u5171\u4eab\u5b58\u50a8]\n        end\n        \n        subgraph Security[\"\u5b89\u5168\"]\n            WAF[WAF \u89c4\u5219]\n            SG[\u5b89\u5168\u7ec4]\n            IAM[IAM \u89d2\u8272]\n        end\n        \n        subgraph Monitoring[\"\u76d1\u63a7\u4e0e\u65e5\u5fd7\"]\n            CW[CloudWatch]\n            XRay[AWS X-Ray]\n            SNS[SNS \u901a\u77e5]\n        end\n    end\n    \n    User[\u6700\u7ec8\u7528\u6237] --&gt; CloudFront[CloudFront CDN]\n    CloudFront --&gt; WAF\n    WAF --&gt; ALB\n    ALB --&gt; ECS1\n    ALB --&gt; ECS2\n    ALB --&gt; ECS3\n    \n    ECS1 --&gt; RDS\n    ECS2 --&gt; RDS\n    ECS3 --&gt; RDS\n    \n    ECS1 --&gt; Redis\n    ECS2 --&gt; Redis\n    ECS3 --&gt; Redis\n    \n    ECS1 --&gt; S3\n    ECS2 --&gt; S3\n    ECS3 --&gt; S3\n    \n    ECS1 --&gt; EFS\n    ECS2 --&gt; EFS\n    ECS3 --&gt; EFS\n    \n    ECS1 --&gt; CW\n    ECS2 --&gt; CW\n    ECS3 --&gt; CW\n    \n    RDS --&gt; CW\n    Redis --&gt; CW\n    \n    CW --&gt; SNS\n    \n    style VPC fill:#f9f9f9,stroke:#333,stroke-width:2px\n    style ALB fill:#ff9900,stroke:#cc7a00,color:white\n    style RDS fill:#2e73b8,stroke:#1a4d80,color:white\n    style User fill:#95a5a6,stroke:#7f8c8d\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqNVW1P01AU\/r5fcTO+OmGrwLYYklFeYgILUnQkN3zoum5raNal60S+AWEBjCIjKIJTXAKBREHxlbSZ\/pnetv4L721H13YscpvT3XP6PO1zzj33riCz5SKYGw0BPCrVbMH2UxkGhvEN6GodHalmc8W6+G28boUXbBwZOUHmOUWQStdkMtyJ+6Y0ryxJ8qJQKsCw2aqbWsPzDjIez9AQG4gO3LWv\/uiQH\/BgMgN1ddda3SP8Vh3VvvkB6dQcxAZueuZzXFEz1awocDCMap9Q7RKd72BqQBYZqalRiNQ9c+\/M+n5ktVro3YbVbKKDs27oKFshtYDoQxO939WvNKOh+lF8KXcbZbLwhFV4XKvTVaOx1VNaZ6XK5TmBl3EutlB0uXYDmoxxmolCfAO6pqFnTRDtCYt5YbGeMMoLo7phwYS7kvblMcYqrJOI8eqL8eKidyKzYwzEBmakilKQeebh1P2s3D+Cjg\/Ry8+kBM\/VHkQ+J1TguEiWima5Iu9E\/q\/c63vn3d3OKJLMFvDyofM3aO0skAEuGUMB55HR\/GnLtn6sG+qOfrWNjjd0reUnjE8wEBvATaqrHx3iwm2l8FxVFpRlrOViC9WCWjKpCYgNWKfraPMgoHMSOhxTWw\/sxdQ0xIZZu9bW19tKmZZKAi6Mcwa8rRvbpzhfY\/8E\/dkPqKIzkBalai7DKlzR\/2h+ll2G5Eiaj+BZQHCagdjA35VD8+ikW9b1r317VMFdZjRWTG0Td4ux+WsBRCIjwP7uhCyVFNiZAnos7bzOEyNoXLpQu4y2j4+KUPvIsH2y24KBWDBAdUQRvB3GnX0diAUDlC8Q4JFWDjC9ISoQ8rPbUlxqx6e8vp+EO9PP8gQoX8DPozN+WsenvH6ovdm9MVt\/F4jOOCLTnq9VlGWRJ38uIC+IYrIvnyDXnYoiS4t8so+iqPY8siTklGIyVn7q4ZFFavPyicTAgMvjuGEWu5wkSnJyqSgovIdFxDqsGD9MZeMuK8rey8V7sUg\/tmmJQXaQHXJpw\/k4F8\/9A1GEMN4=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqVVV1vmzAUfZ+0\/2Cl0p6WtYnXNommSoSmWaQ06kI2pll9cMAhVhBGxizLv981UD4M6Tqjay6He8y5\/rgEksZ7tJm+f4egJek2yADLdUgPOmSHIvXRItpJmiiZeiqVrPecR+vmc8k8xUVUjqFb5ZUjrpg6CnngUUB6lV8fSrcfTzYBQ4OrT9l1ObgxIhZzlywixWTEFJpTxY70ZISsrA0BO\/O2+VTqe0q3IfdIL78jJ93CBxJTn27WckqsOIYomiW+FNRHUxrSyGOyI34KMwdxpLijryJRRhiL\/LeJlPw3JAUqc+c1mdVaxvGGMwnrWROtkS6WbjPbGRDo0IYmBzQ4HzWsoobno3AVhTuiWrm382+kc08VzfPR3quJrO8dAoaeYMYDyZxvyy9beXn3mIaK961f51jM5wmZhXq5bOrtWY68RXoDaDx0nAhHCUkDWMzCMbOAiXMwmqbeAVY4E24lCbjoA2wp75DGpqTZg0PAkLOnkvkv4z\/\/hyLmpZKrE0gqPFOTaz0QMLROQ2Z+3pmTFxqaS9HWt7AeCRhaiyb5X7IeRcQhl6x0VD5Mw1IEQUcRsV2SlS2XKm9vvPu5pieiC9vP\/rpVGpyVQ8DQSii+K05Kp9DSyfvvCWzHWeRnTvKM+v27vHA+SBEpUrnIvl8V49VAHQ6TmuN6djUAVSYHwMkAfSpbyLCF4LowzclewCkokWELwU3E5Ordb7IbGDYxY4QXUSW9BuAGYBBhNxvMOoKbiMG1XYNaA3ADyHtdKOpolk5HnO3mileNzybqFDL9+0I7HoaTi91YXx\/hnykObHKBMS78\/pH7aj8Zxn\/qRL2ABXE3Hl9dlUTPu6Xw6IlQyMlxzxWr07TmnDZkt3g7KmkD+tkfnaXpbVrwxtf0mt6UvNvdyBv5fwEtfO9m\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91\u7f8e\u4eba\u9c7c<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNqVVV1vmzAUfZ+0\/2Cl0p6WtYnXNommSoSmWaQ06kI2pll9cMAhVhBGxizLv981UD4M6Tqjay6He8y5\/rgEksZ7tJm+f4egJek2yADLdUgPOmSHIvXRItpJmiiZeiqVrPecR+vmc8k8xUVUjqFb5ZUjrpg6CnngUUB6lV8fSrcfTzYBQ4OrT9l1ObgxIhZzlywixWTEFJpTxY70ZISsrA0BO\/O2+VTqe0q3IfdIL78jJ93CBxJTn27WckqsOIYomiW+FNRHUxrSyGOyI34KMwdxpLijryJRRhiL\/LeJlPw3JAUqc+c1mdVaxvGGMwnrWROtkS6WbjPbGRDo0IYmBzQ4HzWsoobno3AVhTuiWrm382+kc08VzfPR3quJrO8dAoaeYMYDyZxvyy9beXn3mIaK961f51jM5wmZhXq5bOrtWY68RXoDaDx0nAhHCUkDWMzCMbOAiXMwmqbeAVY4E24lCbjoA2wp75DGpqTZg0PAkLOnkvkv4z\/\/hyLmpZKrE0gqPFOTaz0QMLROQ2Z+3pmTFxqaS9HWt7AeCRhaiyb5X7IeRcQhl6x0VD5Mw1IEQUcRsV2SlS2XKm9vvPu5pieiC9vP\/rpVGpyVQ8DQSii+K05Kp9DSyfvvCWzHWeRnTvKM+v27vHA+SBEpUrnIvl8V49VAHQ6TmuN6djUAVSYHwMkAfSpbyLCF4LowzclewCkokWELwU3E5Ordb7IbGDYxY4QXUSW9BuAGYBBhNxvMOoKbiMG1XYNaA3ADyHtdKOpolk5HnO3mileNzybqFDL9+0I7HoaTi91YXx\/hnykObHKBMS78\/pH7aj8Zxn\/qRL2ABXE3Hl9dlUTPu6Xw6IlQyMlxzxWr07TmnDZkt3g7KmkD+tkfnaXpbVrwxtf0mt6UvNvdyBv5fwEtfO9m\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91\u7f8e\u4eba\u9c7c<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><img alt=\"\u57fa\u7840\u8bbe\u65bd\u67b6\u6784\" decoding=\"async\" src=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/06\/img_6a1e8538cd989.png\"\/><br \/>\n<em>\u56fe 6\uff1aAWS \u4e91\u57fa\u7840\u8bbe\u65bd\u67b6\u6784\u56fe<\/em><\/p>\n<hr\/>\n<h2>7. \u9ad8\u7ea7\u6280\u672f\uff1a\u6837\u5f0f\u4e0e\u81ea\u5b9a\u4e49 {#advanced-techniques}<\/h2>\n<h3>Mermaid \u9ad8\u7ea7\u6837\u5f0f<\/h3>\n<p><strong>\u4e3b\u9898\u81ea\u5b9a\u4e49\uff1a<\/strong><\/p>\n<p><img alt=\"\u6d41\u7a0b\u56fe\uff0c\u5c55\u793a Mermaid \u7684\u9ad8\u7ea7\u6837\u5f0f\uff0c\u4f7f\u7528\u989c\u8272\u7f16\u7801\u7684\u5f62\u72b6\u8868\u793a\u5f00\u59cb\u3001\u51b3\u7b56\u3001\u5904\u7406\u548c\u7ed3\u675f\u72b6\u6001\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8e490dacf.png\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">\u7f8e\u4eba\u9c7c<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpdj11rgzAUhu8F\/0NAJDcWWrXaejFQYy7HYGVQpBfWHtcwa0oS2Ir636ez+LEEAud9njckplmziqkA1Vhd4QY4wOdMArbQMH9kgmXnEiTuFF1D3cJ3wW6ZeMS85KKLseHGId2usbXkB\/hRk1MUxX8h4uICYlKc3S5x4tEqWQUT9Lf9HqGEnFeXxSsojTdrfzQUCMUWQv8EXWvb1jR1Tdc+RXa\/ogMZ\/DB9V5lQJ7RavaCoJpAzyXjVDjTq4+YIskFx+iZ4DlKi8DSHr7xBZGTRk8V\/9yVpUl2eCRmSYRhOqR4loBAVrCwDw97sPepYUgn+BYGx2fsesa28\/0bwfWUK5qXkWaKu6zjeWCKOTW06L\/0CR6+G1w==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91\u7f8e\u4eba\u9c7c<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">\u7f8e\u4eba\u9c7c<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpdj11rgzAUhu8F\/0NAJDcWWrXaejFQYy7HYGVQpBfWHtcwa0oS2Ir636ez+LEEAud9njckplmziqkA1Vhd4QY4wOdMArbQMH9kgmXnEiTuFF1D3cJ3wW6ZeMS85KKLseHGId2usbXkB\/hRk1MUxX8h4uICYlKc3S5x4tEqWQUT9Lf9HqGEnFeXxSsojTdrfzQUCMUWQv8EXWvb1jR1Tdc+RXa\/ogMZ\/DB9V5lQJ7RavaCoJpAzyXjVDjTq4+YIskFx+iZ4DlKi8DSHr7xBZGTRk8V\/9yVpUl2eCRmSYRhOqR4loBAVrCwDw97sPepYUgn+BYGx2fsesa28\/0bwfWUK5qXkWaKu6zjeWCKOTW06L\/0CR6+G1w==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91\u7f8e\u4eba\u9c7c<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Mermaid<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpdj09LwzAchu+FfofAKLl0sDVbt\/Ug9F8+wfBSdui21AW7daQBHW3Bg+ziZSCIF\/EiehIPHvXrdP0arqa2mwkEfu\/zvCFRlISuKDdAAvmCLAk04NSPCVSBmM99Rv1pSGJ4UGQJHBZcM7r02caOwogdYtjq2Sbud6B6ysfkmjdOEAT\/BStic8IaBQ2HLrJrK6Qr0sBBv9w1jMksWs1PXoGx3e0MaoMTxumJUD5BlrIsUxRZkqUL5q8XYOwI3\/Ty75v87W4C2u0zYCX59rN4f8gEtMow3T9+pMD28pfbYrcF5uSY5bvXFDh\/zKqY\/XuZ6xVf9\/un5yp0RCgGccZ8ExJggoCGodHSuiMdIzXmLLokRqs7GuiOps7KfxhXC8rJccmtSrjXQ0ivSw7SsIaPSz9MlZIL\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-mermaid\"><code class=\"language-mermaid\" data-language=\"mermaid\" class=\"language-mermaid\">%%{init: {'theme':'base', 'themeVariables': {\r\n    'primaryColor': '#4CAF50',\r\n    'primaryTextColor': '#fff',\r\n    'primaryBorderColor': '#388E3C',\r\n    'lineColor': '#757575',\r\n    'secondaryColor': '#FFC107',\r\n    'tertiaryColor': '#fff'\r\n}}}%%\r\n\r\ngraph TD\r\n    A[\u5f00\u59cb] --&gt; B{\u51b3\u7b56}\r\n    B --&gt;|\u662f| C[\u5904\u7406 A]\r\n    B --&gt;|\u5426| D[\u5904\u7406 B]\r\n    C --&gt; E[\u7ed3\u675f]\r\n    D --&gt; E\r\n    \r\n    style A fill:#2196F3,stroke:#1976D2,color:white\r\n    style E fill:#F44336,stroke:#D32F2F,color:white\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpdj09LwzAchu+FfofAKLl0sDVbt\/Ug9F8+wfBSdui21AW7daQBHW3Bg+ziZSCIF\/EiehIPHvXrdP0arqa2mwkEfu\/zvCFRlISuKDdAAvmCLAk04NSPCVSBmM99Rv1pSGJ4UGQJHBZcM7r02caOwogdYtjq2Sbud6B6ysfkmjdOEAT\/BStic8IaBQ2HLrJrK6Qr0sBBv9w1jMksWs1PXoGx3e0MaoMTxumJUD5BlrIsUxRZkqUL5q8XYOwI3\/Ty75v87W4C2u0zYCX59rN4f8gEtMow3T9+pMD28pfbYrcF5uSY5bvXFDh\/zKqY\/XuZ6xVf9\/un5yp0RCgGccZ8ExJggoCGodHSuiMdIzXmLLokRqs7GuiOps7KfxhXC8rJccmtSrjXQ0ivSw7SsIaPSz9MlZIL\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpdj11rgzAUhu8F\/0NAJDcWWrXaejFQYy7HYGVQpBfWHtcwa0oS2Ir636ez+LEEAud9njckplmziqkA1Vhd4QY4wOdMArbQMH9kgmXnEiTuFF1D3cJ3wW6ZeMS85KKLseHGId2usbXkB\/hRk1MUxX8h4uICYlKc3S5x4tEqWQUT9Lf9HqGEnFeXxSsojTdrfzQUCMUWQv8EXWvb1jR1Tdc+RXa\/ogMZ\/DB9V5lQJ7RavaCoJpAzyXjVDjTq4+YIskFx+iZ4DlKi8DSHr7xBZGTRk8V\/9yVpUl2eCRmSYRhOqR4loBAVrCwDw97sPepYUgn+BYGx2fsesa28\/0bwfWUK5qXkWaKu6zjeWCKOTW06L\/0CR6+G1w==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91\u7f8e\u4eba\u9c7c<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#mermaid:eNpdj11rgzAUhu8F\/0NAJDcWWrXaejFQYy7HYGVQpBfWHtcwa0oS2Ir636ez+LEEAud9njckplmziqkA1Vhd4QY4wOdMArbQMH9kgmXnEiTuFF1D3cJ3wW6ZeMS85KKLseHGId2usbXkB\/hRk1MUxX8h4uICYlKc3S5x4tEqWQUT9Lf9HqGEnFeXxSsojTdrfzQUCMUWQv8EXWvb1jR1Tdc+RXa\/ogMZ\/DB9V5lQJ7RavaCoJpAzyXjVDjTq4+YIskFx+iZ4DlKi8DSHr7xBZGTRk8V\/9yVpUl2eCRmSYRhOqR4loBAVrCwDw97sPepYUgn+BYGx2fsesa28\/0bwfWUK5qXkWaKu6zjeWCKOTW06L\/0CR6+G1w==\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91\u7f8e\u4eba\u9c7c<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>PlantUML \u76ae\u80a4\u53c2\u6570<\/h3>\n<p><strong>\u4e13\u4e1a\u6837\u5f0f\uff1a<\/strong><\/p>\n<p><img alt=\"\u524d\u7aef React \u5e94\u7528\u548c Redux \u5b58\u50a8\u6d41\u5411\u540e\u7aef Node.js API\u3001Express \u670d\u52a1\u5668\u548c MongoDB\uff0c\u5c55\u793a\u96c6\u4e2d\u5f0f\u72b6\u6001\u7ba1\u7406\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8e5b529f3.png\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TPEnRjj038Pt0Ne78XqwfR2Yrh6N8euj5HqQ1FKOPA0bMbOZ7G-ySvEqwBkNikJOLkJRo9_7xpzIkd4UnM_hAWm-mhUALrY1ywzLQOemS4-biIXOmmgpfq9uQ_8vLopm8TsTunAtmPoVzHwiiN9qBEqkPYo61ABHiQ8Syg-MWCLlE0mQ5tEkBHioViX8zYR-3GFGSzjtbiJfLRheH9QSf1EYwVLuSTKACn5-xkN_jVXxROW53S5j9vr3wqJYP3I0JhzSpqUTaBBno_8FGVJvZNd7VX1eclnPMfHEaka0RJoPfl7aGElISJoUHad7t3_b8XMj89DVx3c72J_y9CmypAnz793oxGiiFGizzbisJizqlEESFlroCBl__hvdycA5d8CboM-IJi_HumeTmSCFDWKlRlUu8tTmUVcrR-aaR0jEuITXM_3EG3_JbXsCXC5kGr8M6m-yxdi0cEl312jTTwxxHQsjqUYGQiqt-beNupS46fP2WDPMPOQ-P1C6EiBT1z1WRZJGd_G_\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 PlantUML<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TPEnRjj038Pt0Ne78XqwfR2Yrh6N8euj5HqQ1FKOPA0bMbOZ7G-ySvEqwBkNikJOLkJRo9_7xpzIkd4UnM_hAWm-mhUALrY1ywzLQOemS4-biIXOmmgpfq9uQ_8vLopm8TsTunAtmPoVzHwiiN9qBEqkPYo61ABHiQ8Syg-MWCLlE0mQ5tEkBHioViX8zYR-3GFGSzjtbiJfLRheH9QSf1EYwVLuSTKACn5-xkN_jVXxROW53S5j9vr3wqJYP3I0JhzSpqUTaBBno_8FGVJvZNd7VX1eclnPMfHEaka0RJoPfl7aGElISJoUHad7t3_b8XMj89DVx3c72J_y9CmypAnz793oxGiiFGizzbisJizqlEESFlroCBl__hvdycA5d8CboM-IJi_HumeTmSCFDWKlRlUu8tTmUVcrR-aaR0jEuITXM_3EG3_JbXsCXC5kGr8M6m-yxdi0cEl312jTTwxxHQsjqUYGQiqt-beNupS46fP2WDPMPOQ-P1C6EiBT1z1WRZJGd_G_\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 PlantUML<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">PlantUML<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:VPFFJjj04CRlblmE8pXm0iKnXEI22CIME82gSaGzBF7Yk2GxrdeZe5KbMW5Leq8vKAa53kKMjKehH9KYwEDaRV4MTMA7_B7ftcQ-sVbzEwDTz0JXebwhgieKoCEclDxtl_sHVp-fYhVjC9TmKeDDKjwsETQPjOnLv31fzivmYLSX5kuup8OjKlNeiDIxM4REA0SjCwnK7KR5dai1kQYWgdGz1FS7dVjsqaCPQouooWIyLXK8pzAuAKCtisOf5f5RbCU2LfZFbRAHKEGSTyRoRoAo_7YOnBeXXTZqIMWu1jt8f43DkVdbJ2oOoCIwyug2Dlj8ys-Q3-yRII13yH-QPkQDGWejbo-OUdv0YzEwdYjeHipiFsL2VZWEVloQw5C6azruJabPWBmx2ywQBr9KgxuBilL5lkkgOqrFJvvekeOMdNdfGV7PIhAdiUjowddWNnxBnfNysiTQH91Dub7OM4LcOscf3npr2DFJ2mbZet5KCcfY98mAqeoa9AFYWITLwIsCEtP506ubl03udtztRhz7VeFpWuUBeyvjArnwq6Zx-s-3drV1wP6gK6RrLj_jk1W6uO_y1m00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">@startuml\r\n' \u5168\u5c40\u6837\u5f0f\r\nskinparam backgroundColor #FFFFFF\r\nskinparam shadowing false\r\nskinparam roundcorner 10\r\nskinparam linetype ortho\r\n\r\n' \u7ec4\u4ef6\u6837\u5f0f\r\nskinparam component {\r\n    BackgroundColor #E3F2FD\r\n    BorderColor #1976D2\r\n    ArrowColor #1976D2\r\n}\r\n\r\n' \u5305\u6837\u5f0f\r\nskinparam package {\r\n    BackgroundColor #FFF3E0\r\n    BorderColor #F57C00\r\n    FontSize 14\r\n}\r\n\r\n' \u6ce8\u91ca\u6837\u5f0f\r\nskinparam note {\r\n    BackgroundColor #F1F8E9\r\n    BorderColor #689F38\r\n    FontColor #33691E\r\n}\r\n\r\npackage \"\u524d\u7aef\" {\r\n    component [React \u5e94\u7528]\r\n    component [Redux \u5b58\u50a8]\r\n}\r\n\r\npackage \"\u540e\u7aef\" {\r\n    component [Node.js API]\r\n    component [Express \u670d\u52a1\u5668]\r\n    database [MongoDB]\r\n}\r\n\r\n[React \u5e94\u7528] --&gt; [Redux \u5b58\u50a8]\r\n[Redux \u5b58\u50a8] --&gt; [Node.js API]\r\n[Node.js API] --&gt; [Express \u670d\u52a1\u5668]\r\n[Express \u670d\u52a1\u5668] --&gt; [MongoDB]\r\n\r\nnote right of [Redux \u5b58\u50a8]\r\n  \u6574\u4e2a\u5e94\u7528\u7684\u96c6\u4e2d\u5f0f\u72b6\u6001\u7ba1\u7406\r\nend note\r\n\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:VPFFJjj04CRlblmE8pXm0iKnXEI22CIME82gSaGzBF7Yk2GxrdeZe5KbMW5Leq8vKAa53kKMjKehH9KYwEDaRV4MTMA7_B7ftcQ-sVbzEwDTz0JXebwhgieKoCEclDxtl_sHVp-fYhVjC9TmKeDDKjwsETQPjOnLv31fzivmYLSX5kuup8OjKlNeiDIxM4REA0SjCwnK7KR5dai1kQYWgdGz1FS7dVjsqaCPQouooWIyLXK8pzAuAKCtisOf5f5RbCU2LfZFbRAHKEGSTyRoRoAo_7YOnBeXXTZqIMWu1jt8f43DkVdbJ2oOoCIwyug2Dlj8ys-Q3-yRII13yH-QPkQDGWejbo-OUdv0YzEwdYjeHipiFsL2VZWEVloQw5C6azruJabPWBmx2ywQBr9KgxuBilL5lkkgOqrFJvvekeOMdNdfGV7PIhAdiUjowddWNnxBnfNysiTQH91Dub7OM4LcOscf3npr2DFJ2mbZet5KCcfY98mAqeoa9AFYWITLwIsCEtP506ubl03udtztRhz7VeFpWuUBeyvjArnwq6Zx-s-3drV1wP6gK6RrLj_jk1W6uO_y1m00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit PlantUML in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TPEnRjj038Pt0Ne78XqwfR2Yrh6N8euj5HqQ1FKOPA0bMbOZ7G-ySvEqwBkNikJOLkJRo9_7xpzIkd4UnM_hAWm-mhUALrY1ywzLQOemS4-biIXOmmgpfq9uQ_8vLopm8TsTunAtmPoVzHwiiN9qBEqkPYo61ABHiQ8Syg-MWCLlE0mQ5tEkBHioViX8zYR-3GFGSzjtbiJfLRheH9QSf1EYwVLuSTKACn5-xkN_jVXxROW53S5j9vr3wqJYP3I0JhzSpqUTaBBno_8FGVJvZNd7VX1eclnPMfHEaka0RJoPfl7aGElISJoUHad7t3_b8XMj89DVx3c72J_y9CmypAnz793oxGiiFGizzbisJizqlEESFlroCBl__hvdycA5d8CboM-IJi_HumeTmSCFDWKlRlUu8tTmUVcrR-aaR0jEuITXM_3EG3_JbXsCXC5kGr8M6m-yxdi0cEl312jTTwxxHQsjqUYGQiqt-beNupS46fP2WDPMPOQ-P1C6EiBT1z1WRZJGd_G_\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 PlantUML<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#plantuml:TPEnRjj038Pt0Ne78XqwfR2Yrh6N8euj5HqQ1FKOPA0bMbOZ7G-ySvEqwBkNikJOLkJRo9_7xpzIkd4UnM_hAWm-mhUALrY1ywzLQOemS4-biIXOmmgpfq9uQ_8vLopm8TsTunAtmPoVzHwiiN9qBEqkPYo61ABHiQ8Syg-MWCLlE0mQ5tEkBHioViX8zYR-3GFGSzjtbiJfLRheH9QSf1EYwVLuSTKACn5-xkN_jVXxROW53S5j9vr3wqJYP3I0JhzSpqUTaBBno_8FGVJvZNd7VX1eclnPMfHEaka0RJoPfl7aGElISJoUHad7t3_b8XMj89DVx3c72J_y9CmypAnz793oxGiiFGizzbisJizqlEESFlroCBl__hvdycA5d8CboM-IJi_HumeTmSCFDWKlRlUu8tTmUVcrR-aaR0jEuITXM_3EG3_JbXsCXC5kGr8M6m-yxdi0cEl312jTTwxxHQsjqUYGQiqt-beNupS46fP2WDPMPOQ-P1C6EiBT1z1WRZJGd_G_\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 PlantUML<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>Graphviz \u9ad8\u7ea7\u5c5e\u6027<\/h3>\n<p><strong>\u4e13\u4e1a\u7f51\u7edc\u56fe\uff1a<\/strong><\/p>\n<p><img alt=\"\u4f01\u4e1a\u7cfb\u7edf\u67b6\u6784\u56fe\uff0c\u5c55\u793a\u8868\u793a\u5c42\u3001\u4e1a\u52a1\u903b\u8f91\u5c42\u548c\u6570\u636e\u5c42\uff0c\u5305\u542b Flutter\u3001React\u3001Node.js \u548c PostgreSQL \u7ec4\u4ef6\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8e7dbd492.png\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">DOT<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqtVmtv2jAU\/T5p\/yHKvnbl1QRQl0q0Zd2kbmOlUj901eTYN+DV2JHtFLGq\/312HuQBdIu0IEF8rjn3+tyTC4QuJIqXzoQ8IY6BzPWGUb5wnt++cczV6ThXTISIOdk2pLWkYaJBZfEMvc8W9goXWDAhA\/ddNIrGEXLLUCS45mgFgfsJ2BNoiptRRX9D0PNLkKEQWOBOuQYZS6rAmW+UhpUzkXhJNWCdSPjBZ1KQBGsquDPlT1QKvgKu3QYPEzhwq2iMSNA99kpAIv6oIA56VZALAhnYzcCH0+xzq9AlRChhOt25o1AK3rdXoVeCyvTE7I8oY0COpEg4AVI9B\/A1JXoZ9P9SIJDFboEp2L7A8Z78Nd2QlGKdbu0ejw4U9tWKg1lieiqVs6Z66WCzEKv0zMaH2U6VhJnR8q0\/Y2lawjVKW\/6845dZNXyNNiDd06acmZoVuPAtDKJ+RKpfsGcuoj3P93C3Gi3v7iB07vMS7P0kjplRz1bxIZSdsxtAWDu9kXvk2OwFpX8SepFvwTLP2rrbfaik+SJCymDLny9NipT6I0u0EaY180u1ITsyh4miHJTaI\/F5EboWC4pbixxF0QC6h0QG3+t1D4g8mX3einAznd9aIJXAeun4l2pIEEXh8ITUJQgZwo81ca\/ssb9fb4mL9RXSsEab1pyvy0qQRnskvbRwa7eOIg\/Gh4Tsw5AM+vuFnEm6QnKzPXOxvjxP5ZwJpRcS5kaF3ok5q1qiGAJsn0oCsi4I8oiPhjVFbyD1ftkqQKQAW\/PjEfh4XOO\/QHgJFXZCVYal5BeZ0uahIdCO+6UxoaZmOr4ymexj\/v6sZspPt7ezecda02Tejo3x0Cf9umUKsEidP9L\/iy4vrWltA88FfgT9j3RHuQMJUksg9Qlu6zQpmk6yve7cSTtnyhyD0QgGuJEjBwvWnK\/e23RVIYq8ITbDoU60BfcVW0hgqPfa8htnm5aVZu\/FwfcQz7UEtLL\/pPKI\/RWoJBl69lUWLMz4Tgt++QMrEbZc\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 DOT<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">DOT<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqtVmtv2jAU\/T5p\/yHKvnbl1QRQl0q0Zd2kbmOlUj901eTYN+DV2JHtFLGq\/312HuQBdIu0IEF8rjn3+tyTC4QuJIqXzoQ8IY6BzPWGUb5wnt++cczV6ThXTISIOdk2pLWkYaJBZfEMvc8W9goXWDAhA\/ddNIrGEXLLUCS45mgFgfsJ2BNoiptRRX9D0PNLkKEQWOBOuQYZS6rAmW+UhpUzkXhJNWCdSPjBZ1KQBGsquDPlT1QKvgKu3QYPEzhwq2iMSNA99kpAIv6oIA56VZALAhnYzcCH0+xzq9AlRChhOt25o1AK3rdXoVeCyvTE7I8oY0COpEg4AVI9B\/A1JXoZ9P9SIJDFboEp2L7A8Z78Nd2QlGKdbu0ejw4U9tWKg1lieiqVs6Z66WCzEKv0zMaH2U6VhJnR8q0\/Y2lawjVKW\/6845dZNXyNNiDd06acmZoVuPAtDKJ+RKpfsGcuoj3P93C3Gi3v7iB07vMS7P0kjplRz1bxIZSdsxtAWDu9kXvk2OwFpX8SepFvwTLP2rrbfaik+SJCymDLny9NipT6I0u0EaY180u1ITsyh4miHJTaI\/F5EboWC4pbixxF0QC6h0QG3+t1D4g8mX3einAznd9aIJXAeun4l2pIEEXh8ITUJQgZwo81ca\/ssb9fb4mL9RXSsEab1pyvy0qQRnskvbRwa7eOIg\/Gh4Tsw5AM+vuFnEm6QnKzPXOxvjxP5ZwJpRcS5kaF3ok5q1qiGAJsn0oCsi4I8oiPhjVFbyD1ftkqQKQAW\/PjEfh4XOO\/QHgJFXZCVYal5BeZ0uahIdCO+6UxoaZmOr4ymexj\/v6sZspPt7ezecda02Tejo3x0Cf9umUKsEidP9L\/iy4vrWltA88FfgT9j3RHuQMJUksg9Qlu6zQpmk6yve7cSTtnyhyD0QgGuJEjBwvWnK\/e23RVIYq8ITbDoU60BfcVW0hgqPfa8htnm5aVZu\/FwfcQz7UEtLL\/pPKI\/RWoJBl69lUWLMz4Tgt++QMrEbZc\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 DOT<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">DOT<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqtVFtPE0EUfifxP2zWV6Q3tpfgmhijYqIGKYkPxpjZnbPtyrLb7G4lSEgQ7yRKDJggGBBDQmMUJEQEiv01nd3yL5ztXjotxVjj9KGz38x855xvvjlYLZioVOQu40dIlwHn7SlN1Qvc9Lk+jo5YjCPPK2R3lqzWyO6aM7vl4\/6he\/6HN6SCbGiGKfLnlaySUxDfWlIM3dbRBIj8MGiPwFblzlVLfQxiIt0CNSSBJvL14yf1gxV3r+pW1521fWftme4urdePtty3O+TzU77jgGbIIm8zaAlhMT4gtAAT6eMWlMQEC+oGBh+M++D9If8\/kuCkutzY3mzMz7lzh6wK3klWhL+tNNECLao33a+omga43zTKOgbMlgD6pIrtopj8c261tsQAF\/4lsVyXuG1SIdM0Jptb4wPZMxJqvPxCtlfqh6+dTz\/J8YK78swX7mT1hVvb9LdZZcl3kKyVLRvMByWTXoFuI1s19NB7jBEaGxV384jszvFDndL5yjFw6ENIKUkFswe8OsPVhJAW5Di72prdBYm7F0T25uRoyV2qXJTM2KVRQLLNJbJ8P+cFDtnSg5KgpD2wFWKyqNrA32ci3DIkVYOI2t2qkvkKQ35NK9tUjB64m9QzfoTuwkplS9XBsrjpU4\/rYIXMb5zMVhu1d01luwt7SldFUVIQZ7azskJaSMTZxWhyeeRGVPno1fyYBzSrvk0f0cBDq6NqRZEyg7i9aklD8nhYtTeue6XeuRnxht\/ur3fk+V6vjDN\/kBEjG52W0Hn\/3Xmz3Yt4kFUEyJ0hXhIyOJXsJt6IqU4gcyoqtH5QDWIfLTZFHDEsu2BCnhafGKQ1WkVUAlH2ejkGs10IJOA0yrA6jkJJoy0hoicLXxo7VfJ6x\/n4tWd6OQtpOcfSX0FysWX7UcCqxbnHi+TbcpPcbwxOZYN2i564mQvr3ndqh33he75wqc2Bw2NjI\/mY50MaMeoJuUwaJ9sdEoJByOAJ\/ye2ILFOG1M4b8jjYP8lW39gOoysIuCAuy98dDRAp33o5cbIiw8MfSqbhZTcQR+AAWHA1X6Z\/jUyRIqQkWkDaCeKwC55hsVT6u427C3LPva5dOF0fjyh5iCbb8irfYY5I3i\/VoYGbcRehjO\/AZ7G7Gg=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit DOT in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-dot\"><code class=\"language-dot\" data-language=\"dot\" class=\"language-dot\">digraph AdvancedStyling {\r\n    \/\/ \u5168\u5c40\u56fe\u5c5e\u6027\r\n    graph [\r\n        bgcolor=\"#f8f9fa\"\r\n        fontname=\"Helvetica\"\r\n        fontsize=16\r\n        label=\"\u4f01\u4e1a\u7cfb\u7edf\u67b6\u6784n\u751f\u4ea7\u73af\u5883\"\r\n        labelloc=\"t\"\r\n        pad=0.5\r\n        ranksep=1.5\r\n        nodesep=1.0\r\n    ];\r\n    \r\n    \/\/ \u9ed8\u8ba4\u8282\u70b9\u5c5e\u6027\r\n    node [\r\n        fontname=\"Helvetica\"\r\n        fontsize=11\r\n        style=\"filled,rounded\"\r\n        penwidth=2\r\n    ];\r\n    \r\n    \/\/ \u9ed8\u8ba4\u8fb9\u5c5e\u6027\r\n    edge [\r\n        fontname=\"Helvetica\"\r\n        fontsize=9\r\n        penwidth=1.5\r\n        arrowsize=0.8\r\n    ];\r\n    \r\n    \/\/ \u81ea\u5b9a\u4e49\u6837\u5f0f\u7684\u8282\u70b9\u96c6\u7fa4\r\n    subgraph cluster_presentation {\r\n        label=\"\u8868\u793a\u5c42\";\r\n        style=filled;\r\n        color=\"#e3f2fd\";\r\n        fontcolor=\"#1565c0\";\r\n        \r\n        Web [label=\"Web \u5e94\u7528&lt;br\/&gt;React 18\", fillcolor=\"#64b5f6\", fontcolor=\"white\"];\r\n        Mobile [label=\"\u79fb\u52a8\u5e94\u7528&lt;br\/&gt;Flutter\", fillcolor=\"#64b5f6\", fontcolor=\"white\"];\n    }\r\n    \n    subgraph cluster_business {\n        label=\"\u4e1a\u52a1\u903b\u8f91\u5c42\";\n        style=filled;\n        color=\"#fff3e0\";\n        fontcolor=\"#e65100\";\n        \n        API [label=\"REST API&lt;br\/&gt;Node.js\", fillcolor=\"#ffb74d\", fontcolor=\"black\"];\n        GraphQL [label=\"GraphQL \u7f51\u5173\", fillcolor=\"#ffb74d\", fontcolor=\"black\"];\n    }\n    \n    subgraph cluster_data {\n        label=\"\u6570\u636e\u5c42\";\n        style=filled;\n        color=\"#e8f5e9\";\n        fontcolor=\"#2e7d32\";\n        \n        Primary [label=\"\u4e3b\u6570\u636e\u5e93&lt;br\/&gt;PostgreSQL 14\", shape=cylinder, fillcolor=\"#a5d6a7\"];\n        Replica [label=\"\u53ea\u8bfb\u526f\u672c&lt;br\/&gt;PostgreSQL 14\", shape=cylinder, fillcolor=\"#c8e6c9\"];\n        Cache [label=\"Redis \u7f13\u5b58&lt;br\/&gt;\u96c6\u7fa4\u6a21\u5f0f\", shape=cylinder, fillcolor=\"#c8e6c9\"];\n    }\n    \n    \/\/ \u81ea\u5b9a\u4e49\u6837\u5f0f\u7684\u8fb9\n    Web -&gt; API [label=\"HTTPS\/REST\", color=\"#1976d2\", fontcolor=\"#1976d2\"];\n    Mobile -&gt; API [label=\"HTTPS\/REST\", color=\"#1976d2\", fontcolor=\"#1976d2\"];\n    Web -&gt; GraphQL [label=\"WebSocket\", color=\"#1976d2\", fontcolor=\"#1976d2\", style=dashed];\n    \n    API -&gt; Primary [label=\"\u8bfb\/\u5199\", color=\"#388e3c\", fontcolor=\"#388e3c\"];\n    API -&gt; Cache [label=\"\u7f13\u5b58\", color=\"#f57c00\", fontcolor=\"#f57c00\", style=dashed];\n    GraphQL -&gt; Replica [label=\"\u53ea\u8bfb\", color=\"#388e3c\", fontcolor=\"#388e3c\"];\n    \n    Primary -&gt; Replica [label=\"\u6d41\u5f0f\u590d\u5236\", color=\"#757575\", style=dotted];\n}\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqtVFtPE0EUfifxP2zWV6Q3tpfgmhijYqIGKYkPxpjZnbPtyrLb7G4lSEgQ7yRKDJggGBBDQmMUJEQEiv01nd3yL5ztXjotxVjj9KGz38x855xvvjlYLZioVOQu40dIlwHn7SlN1Qvc9Lk+jo5YjCPPK2R3lqzWyO6aM7vl4\/6he\/6HN6SCbGiGKfLnlaySUxDfWlIM3dbRBIj8MGiPwFblzlVLfQxiIt0CNSSBJvL14yf1gxV3r+pW1521fWftme4urdePtty3O+TzU77jgGbIIm8zaAlhMT4gtAAT6eMWlMQEC+oGBh+M++D9If8\/kuCkutzY3mzMz7lzh6wK3klWhL+tNNECLao33a+omga43zTKOgbMlgD6pIrtopj8c261tsQAF\/4lsVyXuG1SIdM0Jptb4wPZMxJqvPxCtlfqh6+dTz\/J8YK78swX7mT1hVvb9LdZZcl3kKyVLRvMByWTXoFuI1s19NB7jBEaGxV384jszvFDndL5yjFw6ENIKUkFswe8OsPVhJAW5Di72prdBYm7F0T25uRoyV2qXJTM2KVRQLLNJbJ8P+cFDtnSg5KgpD2wFWKyqNrA32ci3DIkVYOI2t2qkvkKQ35NK9tUjB64m9QzfoTuwkplS9XBsrjpU4\/rYIXMb5zMVhu1d01luwt7SldFUVIQZ7azskJaSMTZxWhyeeRGVPno1fyYBzSrvk0f0cBDq6NqRZEyg7i9aklD8nhYtTeue6XeuRnxht\/ur3fk+V6vjDN\/kBEjG52W0Hn\/3Xmz3Yt4kFUEyJ0hXhIyOJXsJt6IqU4gcyoqtH5QDWIfLTZFHDEsu2BCnhafGKQ1WkVUAlH2ejkGs10IJOA0yrA6jkJJoy0hoicLXxo7VfJ6x\/n4tWd6OQtpOcfSX0FysWX7UcCqxbnHi+TbcpPcbwxOZYN2i564mQvr3ndqh33he75wqc2Bw2NjI\/mY50MaMeoJuUwaJ9sdEoJByOAJ\/ye2ILFOG1M4b8jjYP8lW39gOoysIuCAuy98dDRAp33o5cbIiw8MfSqbhZTcQR+AAWHA1X6Z\/jUyRIqQkWkDaCeKwC55hsVT6u427C3LPva5dOF0fjyh5iCbb8irfYY5I3i\/VoYGbcRehjO\/AZ7G7Gg=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit DOT in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqtVmtv2jAU\/T5p\/yHKvnbl1QRQl0q0Zd2kbmOlUj901eTYN+DV2JHtFLGq\/312HuQBdIu0IEF8rjn3+tyTC4QuJIqXzoQ8IY6BzPWGUb5wnt++cczV6ThXTISIOdk2pLWkYaJBZfEMvc8W9goXWDAhA\/ddNIrGEXLLUCS45mgFgfsJ2BNoiptRRX9D0PNLkKEQWOBOuQYZS6rAmW+UhpUzkXhJNWCdSPjBZ1KQBGsquDPlT1QKvgKu3QYPEzhwq2iMSNA99kpAIv6oIA56VZALAhnYzcCH0+xzq9AlRChhOt25o1AK3rdXoVeCyvTE7I8oY0COpEg4AVI9B\/A1JXoZ9P9SIJDFboEp2L7A8Z78Nd2QlGKdbu0ejw4U9tWKg1lieiqVs6Z66WCzEKv0zMaH2U6VhJnR8q0\/Y2lawjVKW\/6845dZNXyNNiDd06acmZoVuPAtDKJ+RKpfsGcuoj3P93C3Gi3v7iB07vMS7P0kjplRz1bxIZSdsxtAWDu9kXvk2OwFpX8SepFvwTLP2rrbfaik+SJCymDLny9NipT6I0u0EaY180u1ITsyh4miHJTaI\/F5EboWC4pbixxF0QC6h0QG3+t1D4g8mX3einAznd9aIJXAeun4l2pIEEXh8ITUJQgZwo81ca\/ssb9fb4mL9RXSsEab1pyvy0qQRnskvbRwa7eOIg\/Gh4Tsw5AM+vuFnEm6QnKzPXOxvjxP5ZwJpRcS5kaF3ok5q1qiGAJsn0oCsi4I8oiPhjVFbyD1ftkqQKQAW\/PjEfh4XOO\/QHgJFXZCVYal5BeZ0uahIdCO+6UxoaZmOr4ymexj\/v6sZspPt7ezecda02Tejo3x0Cf9umUKsEidP9L\/iy4vrWltA88FfgT9j3RHuQMJUksg9Qlu6zQpmk6yve7cSTtnyhyD0QgGuJEjBwvWnK\/e23RVIYq8ITbDoU60BfcVW0hgqPfa8htnm5aVZu\/FwfcQz7UEtLL\/pPKI\/RWoJBl69lUWLMz4Tgt++QMrEbZc\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 DOT<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com\/editor\/#graphviz:eNqtVmtv2jAU\/T5p\/yHKvnbl1QRQl0q0Zd2kbmOlUj901eTYN+DV2JHtFLGq\/312HuQBdIu0IEF8rjn3+tyTC4QuJIqXzoQ8IY6BzPWGUb5wnt++cczV6ThXTISIOdk2pLWkYaJBZfEMvc8W9goXWDAhA\/ddNIrGEXLLUCS45mgFgfsJ2BNoiptRRX9D0PNLkKEQWOBOuQYZS6rAmW+UhpUzkXhJNWCdSPjBZ1KQBGsquDPlT1QKvgKu3QYPEzhwq2iMSNA99kpAIv6oIA56VZALAhnYzcCH0+xzq9AlRChhOt25o1AK3rdXoVeCyvTE7I8oY0COpEg4AVI9B\/A1JXoZ9P9SIJDFboEp2L7A8Z78Nd2QlGKdbu0ejw4U9tWKg1lieiqVs6Z66WCzEKv0zMaH2U6VhJnR8q0\/Y2lawjVKW\/6845dZNXyNNiDd06acmZoVuPAtDKJ+RKpfsGcuoj3P93C3Gi3v7iB07vMS7P0kjplRz1bxIZSdsxtAWDu9kXvk2OwFpX8SepFvwTLP2rrbfaik+SJCymDLny9NipT6I0u0EaY180u1ITsyh4miHJTaI\/F5EboWC4pbixxF0QC6h0QG3+t1D4g8mX3einAznd9aIJXAeun4l2pIEEXh8ITUJQgZwo81ca\/ssb9fb4mL9RXSsEab1pyvy0qQRnskvbRwa7eOIg\/Gh4Tsw5AM+vuFnEm6QnKzPXOxvjxP5ZwJpRcS5kaF3ok5q1qiGAJsn0oCsi4I8oiPhjVFbyD1ftkqQKQAW\/PjEfh4XOO\/QHgJFXZCVYal5BeZ0uahIdCO+6UxoaZmOr4ymexj\/v6sZspPt7ezecda02Tejo3x0Cf9umUKsEidP9L\/iy4vrWltA88FfgT9j3RHuQMJUksg9Qlu6zQpmk6yve7cSTtnyhyD0QgGuJEjBwvWnK\/e23RVIYq8ITbDoU60BfcVW0hgqPfa8htnm5aVZu\/FwfcQz7UEtLL\/pPKI\/RWoJBl69lUWLMz4Tgt++QMrEbZc\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>\u5728 VPasCode \u4e2d\u7f16\u8f91 DOT<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<hr\/>\n<h2>8. \u534f\u4f5c\u4e0e\u5171\u4eab\u5de5\u4f5c\u6d41 {#collaboration}<\/h2>\n<h3>\u521b\u5efa\u53ef\u5171\u4eab\u7684\u56fe\u8868<\/h3>\n<p><strong>\u5206\u6b65\u5171\u4eab\uff1a<\/strong><\/p>\n<ol>\n<li>\n<p><strong>\u751f\u6210\u5171\u4eab\u94fe\u63a5\uff1a<\/strong><\/p>\n<ul>\n<li>\n<p>\u70b9\u51fb VPasCode \u4e2d\u7684\u201c\u5171\u4eab\u201d\u6309\u94ae<\/p>\n<\/li>\n<li>\n<p>\u590d\u5236\u751f\u6210\u7684 URL<\/p>\n<\/li>\n<li>\n<p>\u901a\u8fc7\u7535\u5b50\u90ae\u4ef6\u3001Slack \u6216\u6587\u6863\u5206\u4eab<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u5d4c\u5165\u5230\u6587\u6863\u4e2d\uff1a<\/strong><\/p>\n<pre class=\"lang-markdown\"><code data-language=\"markdown\">## \u7cfb\u7edf\u67b6\u6784\r\n\r\n![\u67b6\u6784\u56fe](https:\/\/www.vpascode.com\/share\/abc123xyz.svg)\r\n\r\n\u6216\u5d4c\u5165\u4ea4\u4e92\u5f0f\u7248\u672c\uff1a\r\n&lt;iframe src=\"https:\/\/www.vpascode.com\/embed\/abc123xyz\" width=\"100%\" height=\"600\"&gt;&lt;\/iframe&gt;\r\n\r\n<\/code><\/pre>\n<\/li>\n<li>\n<p><strong>\u5bfc\u51fa\u7528\u4e8e\u6f14\u793a\uff1a<\/strong><\/p>\n<ul>\n<li>\n<p>SVG \u7528\u4e8e\u53ef\u6269\u5c55\u7684 Web \u56fe\u5f62<\/p>\n<\/li>\n<li>\n<p>PNG\uff08300 DPI\uff09\u7528\u4e8e PowerPoint\/Keynote<\/p>\n<\/li>\n<li>\n<p>PDF \u7528\u4e8e\u6253\u5370\u6587\u6863<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3>\u7248\u672c\u63a7\u5236\u96c6\u6210<\/h3>\n<p><strong>\u5c06\u56fe\u8868\u4ee3\u7801\u5b58\u50a8\u5728 Git \u4e2d\uff1a<\/strong><\/p>\n<pre><code>project-root\/\r\n\u251c\u2500\u2500 docs\/\r\n\u2502   \u251c\u2500\u2500 diagrams\/\r\n\u2502   \u2502   \u251c\u2500\u2500 architecture\/\r\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 system-overview.puml\r\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 deployment-view.puml\r\n\u2502   \u2502   \u2502   \u2514\u2500\u2500 data-flow.mmd\r\n\u2502   \u2502   \u251c\u2500\u2500 processes\/\r\n\u2502   \u2502   \u2502   \u2514\u2500\u2500 user-journey.mmd\r\n\u2502   \u2502   \u2514\u2500\u2500 infrastructure\/\r\n\u2502   \u2502       \u2514\u2500\u2500 aws-architecture.dot\r\n\u2502   \u2514\u2500\u2500 README.md\r\n\u2514\u2500\u2500 src\/\r\n<\/code><\/pre>\n<p><strong>\u793a\u4f8b Git \u5de5\u4f5c\u6d41\uff1a<\/strong><\/p>\n<pre class=\"lang-bash\"><code data-language=\"bash\"># \u521b\u5efa\u56fe\u8868\r\necho '@startuml\r\ncomponent \"API Gateway\"\r\n@enduml' &gt; docs\/diagrams\/architecture\/gateway.puml\r\n\r\n# \u63d0\u4ea4\u66f4\u6539\r\ngit add docs\/diagrams\/architecture\/gateway.puml\r\ngit commit -m \"\u6dfb\u52a0 API \u7f51\u5173\u67b6\u6784\u56fe\"\r\ngit push\r\n\r\n# \u56e2\u961f\u6210\u5458\u73b0\u5728\u53ef\u4ee5\u5728 VPasCode \u4e2d\u67e5\u770b\r\n# \u901a\u8fc7\u7c98\u8d34\u4ee3\u7801\u6216\u4ece URL \u52a0\u8f7d\r\n<\/code><\/pre>\n<h3>\u56e2\u961f\u534f\u4f5c\u6a21\u5f0f<\/h3>\n<p><strong>\u6a21\u5f0f 1\uff1a\u67b6\u6784\u51b3\u7b56\u8bb0\u5f55\uff08ADRs\uff09<\/strong><\/p>\n<pre class=\"lang-markdown\"><code data-language=\"markdown\"># ADR-007\uff1a\u5fae\u670d\u52a1\u901a\u4fe1\u6a21\u5f0f\r\n\r\n## \u80cc\u666f\r\n\u6211\u4eec\u9700\u8981\u6807\u51c6\u5316\u5fae\u670d\u52a1\u4e4b\u95f4\u7684\u901a\u4fe1\u65b9\u5f0f\u3002\r\n\r\n## \u51b3\u7b56\r\n\u901a\u8fc7 RabbitMQ \u4f7f\u7528\u5f02\u6b65\u6d88\u606f\u8fdb\u884c\u670d\u52a1\u95f4\u901a\u4fe1\u3002\r\n\r\n## \u67b6\u6784\u56fe\r\n\r\n```mermaid\r\ngraph LR\r\n    A[\u670d\u52a1 A] --&gt;|\u53d1\u5e03| B[(RabbitMQ)]\r\n    B --&gt;|\u8ba2\u9605| C[\u670d\u52a1 B]\r\n    B --&gt;|\u8ba2\u9605| D[\u670d\u52a1 C]\r\n<\/code><\/pre>\n<h2>\u540e\u679c<\/h2>\n<ul>\n<li>\n<p>\u6539\u8fdb\u7684\u89e3\u8026<\/p>\n<\/li>\n<li>\n<p>\u66f4\u597d\u7684\u53ef\u6269\u5c55\u6027<\/p>\n<\/li>\n<li>\n<p>\u6d88\u606f\u5904\u7406\u590d\u6742\u5ea6\u589e\u52a0<\/p>\n<\/li>\n<\/ul>\n<pre><code>\r\n**\u6a21\u5f0f 2\uff1a\u51b2\u523a\u89c4\u5212\u6587\u6863**\r\n\r\n\u521b\u5efa\u968f\u51b2\u523a\u6f14\u8fdb\u7684\u52a8\u6001\u56fe\u8868\uff1a\r\n<\/code><\/pre>\n<p><img alt=\"Sprint 24 \u770b\u677f\uff0c\u5c55\u793a\u5df2\u5b8c\u6210\u3001\u8fdb\u884c\u4e2d\u3001\u5f85\u529e\u548c\u963b\u585e\u7684\u4efb\u52a1\uff0c\u5982\u7528\u6237\u8ba4\u8bc1\u6a21\u5757\u3001API \u5f00\u53d1\u548c\u7b2c\u4e09\u65b9\u96c6\u6210\u3002\" decoding=\"async\" src=\"https:\/\/www.go2posts.com\/wp-content\/uploads\/2026\/06\/img_6a1e8f5b49dbe.png\"\/><\/p>\n<pre><code><\/code><\/pre>\n<pre><code>graph TD\r\n    subgraph Sprint24[\"Sprint 24 - \u8fdb\u884c\u4e2d\"]\r\n        Done[\u2705 \u5df2\u5b8c\u6210\u4efb\u52a1]\r\n        InProgress[\ud83d\udd04 \u8fdb\u884c\u4e2d]\r        ToDo[\ud83d\udccb \u5f85\u529e]\r\n        Blocked[\u26d4 \u5df2\u963b\u585e]\r\n    end\r\n    \r\n    Done --&gt; Task1[\u7528\u6237\u8ba4\u8bc1\u6a21\u5757]\r\n    Done --&gt; Task2[\u6570\u636e\u5e93\u8fc1\u79fb]\r\n    \r\n    InProgress --&gt; Task3[API \u5f00\u53d1]\r\n    InProgress --&gt; Task4[\u524d\u7aef\u96c6\u6210]\r\n    \r\n    ToDo --&gt; Task5[\u5355\u5143\u6d4b\u8bd5]\r\n    ToDo --&gt; Task6[\u6587\u6863\u7f16\u5199]\r\n    \r\n    Blocked --&gt; Task7[\u7b2c\u4e09\u65b9\u96c6\u6210]\r\n    \r\n    style Done fill:#d4edda,stroke:#28a745\r\n    style InProgress fill:#fff3cd,stroke:#ffc107\r\n    style ToDo fill:#e2e3e5,stroke:#6c757d\r\n    style Blocked fill:#f8d7da,stroke:#dc3545\r\n<\/code><\/pre>\n<hr\/>\n<h2>\u7ed3\u8bba\uff1a\u8fc8\u5411\u6587\u6863\u5353\u8d8a\u4e4b\u65c5<\/h2>\n<p>\u606d\u559c\uff01\u60a8\u73b0\u5df2\u5b8c\u6210 VPasCode \u548c\u201c\u56fe\u8868\u5373\u4ee3\u7801\u201d\u65b9\u6cd5\u8bba\u7684\u5168\u9762\u5b66\u4e60\u4e4b\u65c5\u3002\u8ba9\u6211\u4eec\u56de\u987e\u6240\u5b66\u5185\u5bb9\uff0c\u5e76\u89c4\u5212\u60a8\u7684\u524d\u8fdb\u9053\u8def\u3002<\/p>\n<h3>\u60a8\u5df2\u638c\u63e1\u7684\u5185\u5bb9<\/h3>\n<p>\u5728\u672c\u6559\u7a0b\u4e2d\uff0c\u60a8\u5df2\u53d1\u73b0\uff1a<\/p>\n<ol>\n<li>\n<p><strong>\u57fa\u4e8e\u6587\u672c\u7684\u56fe\u8868\u7684\u529b\u91cf<\/strong>: \u60a8\u5df2\u770b\u5230\uff0c\u901a\u8fc7\u7f16\u5199\u4ee3\u7801\u521b\u5efa\u56fe\u8868\uff0c\u53ef\u4ee5\u6d88\u9664\u624b\u52a8\u5b9a\u4f4d\u7684\u6469\u64e6\uff0c\u786e\u4fdd\u4e00\u81f4\u6027\uff0c\u5e76\u4f7f\u6587\u6863\u6613\u4e8e\u7ef4\u62a4\u3002<\/p>\n<\/li>\n<li>\n<p><strong>\u4e09\u79cd\u884c\u4e1a\u6807\u51c6\u5f15\u64ce<\/strong>: \u60a8\u73b0\u5728\u5df2\u5177\u5907\u4ee5\u4e0b\u5b9e\u7528\u6280\u80fd\uff1a<\/p>\n<ul>\n<li>\n<p><strong>Mermaid.js<\/strong>\u00a0\u7528\u4e8e\u5f00\u53d1\u8005\u53cb\u597d\u7684\u6d41\u7a0b\u56fe\u548c\u73b0\u4ee3\u6587\u6863<\/p>\n<\/li>\n<li>\n<p><strong>PlantUML<\/strong>\u00a0\u7528\u4e8e\u4f01\u4e1a\u7ea7 UML \u548c\u67b6\u6784\u56fe<\/p>\n<\/li>\n<li>\n<p><strong>Graphviz<\/strong>\u00a0\u7528\u4e8e\u590d\u6742\u7f51\u7edc\u62d3\u6251\u548c\u5173\u7cfb\u53ef\u89c6\u5316<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u73b0\u5b9e\u4e16\u754c\u6a21\u5f0f<\/strong>\uff1a\u4ece\u5fae\u670d\u52a1\u67b6\u6784\u5230\u6570\u636e\u5e93\u6a21\u5f0f\uff0c\u4ece CI\/CD \u6d41\u6c34\u7ebf\u5230\u7ec4\u7ec7\u67b6\u6784\u56fe\u2014\u2014\u60a8\u5df2\u5b66\u4f1a\u5c06\u51e0\u4e4e\u4efb\u4f55\u7cfb\u7edf\u6216\u6d41\u7a0b\u8fdb\u884c\u53ef\u89c6\u5316\u3002<\/p>\n<\/li>\n<li>\n<p><strong>\u534f\u4f5c\u5de5\u4f5c\u6d41<\/strong>\uff1a\u60a8\u5df2\u638c\u63e1\u5982\u4f55\u901a\u8fc7 URL \u5171\u4eab\u56fe\u8868\u3001\u5c06\u5176\u5d4c\u5165\u6587\u6863\u3001\u4e0e\u7248\u672c\u63a7\u5236\u7cfb\u7edf\u96c6\u6210\uff0c\u4ee5\u53ca\u5728 CI\/CD \u6d41\u6c34\u7ebf\u4e2d\u81ea\u52a8\u5316\u751f\u6210\u56fe\u8868\u3002<\/p>\n<\/li>\n<li>\n<p><strong>\u4e13\u4e1a\u6837\u5f0f<\/strong>\uff1a\u60a8\u53ef\u4ee5\u4f7f\u7528\u81ea\u5b9a\u4e49\u4e3b\u9898\u3001\u7edf\u4e00\u7684\u54c1\u724c\u6807\u8bc6\u4ee5\u53ca\u9488\u5bf9\u4e0d\u540c\u53d7\u4f17\u7684\u9002\u5f53\u7ec6\u8282\u7ea7\u522b\uff0c\u521b\u5efa\u8fbe\u5230\u51fa\u7248\u8d28\u91cf\u7684\u89c6\u89c9\u4f5c\u54c1\u3002<\/p>\n<\/li>\n<\/ol>\n<h3>\u66f4\u5b8f\u5927\u7684\u56fe\u666f<\/h3>\n<p>\u4f7f VPasCode \u771f\u6b63\u5177\u6709\u53d8\u9769\u6027\u7684\uff0c\u4e0d\u4ec5\u4ec5\u662f\u5de5\u5177\u672c\u8eab\uff0c\u800c\u662f\u5b83\u6240\u4ee3\u8868\u7684\u8303\u5f0f\u8f6c\u53d8\u3002\u901a\u8fc7\u5c06\u56fe\u8868\u89c6\u4e3a\u4ee3\u7801\uff0c\u60a8\u5c06\uff1a<\/p>\n<ul>\n<li>\n<p><strong>\u5f25\u5408\u5dee\u8ddd<\/strong>\u00a0\u5728\u5b9e\u73b0\u4e0e\u6587\u6863\u4e4b\u95f4<\/p>\n<\/li>\n<li>\n<p><strong>\u5b9e\u73b0\u67b6\u6784\u6c11\u4e3b\u5316<\/strong>\u00a0\u8ba9\u56e2\u961f\u4e2d\u7684\u6bcf\u4e2a\u4eba\u90fd\u80fd\u591f\u8f7b\u677e\u8bbf\u95ee<\/p>\n<\/li>\n<li>\n<p><strong>\u786e\u4fdd\u77e5\u8bc6\u7684\u672a\u6765\u9002\u7528\u6027<\/strong>\u00a0\u901a\u8fc7\u57fa\u4e8e\u6587\u672c\u4e14\u53d7\u7248\u672c\u63a7\u5236\u7684\u5de5\u4ef6<\/p>\n<\/li>\n<li>\n<p><strong>\u52a0\u901f\u5165\u804c\u57f9\u8bad<\/strong>\u00a0\u501f\u52a9\u6e05\u6670\u4e14\u53ef\u6267\u884c\u7684\u6587\u6863<\/p>\n<\/li>\n<li>\n<p><strong>\u51cf\u5c11\u6280\u672f\u503a\u52a1<\/strong>\u00a0\u901a\u8fc7\u4f7f\u66f4\u65b0\u53d8\u5f97\u5982\u540c\u7f16\u8f91\u6587\u672c\u4e00\u6837\u7b80\u5355<\/p>\n<\/li>\n<\/ul>\n<h3>\u60a8\u7684\u4e0b\u4e00\u6b65\u884c\u52a8<\/h3>\n<p><strong>\u7b2c\u4e00\u5468\uff1a\u4ece\u5c0f\u5904\u7740\u624b<\/strong><\/p>\n<ul>\n<li>\n<p>\u9009\u62e9\u60a8\u7ec4\u7ec7\u4e2d\u7684\u4e00\u4e2a\u73b0\u6709\u56fe\u8868<\/p>\n<\/li>\n<li>\n<p>\u4f7f\u7528\u60a8\u9996\u9009\u7684\u5f15\u64ce\u5728 VPasCode \u4e2d\u91cd\u65b0\u521b\u5efa\u5b83<\/p>\n<\/li>\n<li>\n<p>\u4e0e\u540c\u4e8b\u5206\u4eab\u5e76\u6536\u96c6\u53cd\u9988<\/p>\n<\/li>\n<li>\n<p>\u5c06\u4ee3\u7801\u5b58\u50a8\u5230\u60a8\u7684\u9879\u76ee\u4ed3\u5e93\u4e2d<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u7b2c2-3\u5468\uff1a\u5efa\u7acb\u52bf\u5934<\/strong><\/p>\n<ul>\n<li>\n<p>\u4e3a\u56e2\u961f\u5e38\u7528\u7684\u56fe\u8868\u7c7b\u578b\u521b\u5efa\u6a21\u677f<\/p>\n<\/li>\n<li>\n<p>\u5236\u5b9a\u547d\u540d\u89c4\u8303\u548c\u6837\u5f0f\u6307\u5357<\/p>\n<\/li>\n<li>\n<p>\u5c06\u56fe\u8868\u5ba1\u67e5\u7eb3\u5165\u4ee3\u7801\u5ba1\u67e5\u6d41\u7a0b<\/p>\n<\/li>\n<li>\n<p>\u8bb0\u5f55\u60a8\u7684\u201c\u56fe\u8868\u5373\u4ee3\u7801\u201d\u5de5\u4f5c\u6d41\u7a0b<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u7b2c2\u4e2a\u6708\uff1a\u6269\u5c55\u4e0e\u81ea\u52a8\u5316<\/strong><\/p>\n<ul>\n<li>\n<p>\u8bbe\u7f6eCI\/CD\u96c6\u6210\u4ee5\u5b9e\u73b0\u56fe\u8868\u81ea\u52a8\u751f\u6210<\/p>\n<\/li>\n<li>\n<p>\u4e3a\u60a8\u7684\u7ec4\u7ec7\u521b\u5efa\u56fe\u8868\u5e93<\/p>\n<\/li>\n<li>\n<p>\u5bf9\u56e2\u961f\u6210\u5458\u8fdb\u884c\u5de5\u4f5c\u6d41\u7a0b\u57f9\u8bad<\/p>\n<\/li>\n<li>\n<p>\u8861\u91cf\u8282\u7701\u7684\u65f6\u95f4\u53ca\u6587\u6863\u8d28\u91cf\u7684\u63d0\u5347<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u7b2c3\u4e2a\u6708\u53ca\u4ee5\u540e\uff1a\u4f7f\u5176\u6210\u4e3a\u6587\u5316<\/strong><\/p>\n<ul>\n<li>\n<p>\u5728\u67b6\u6784\u51b3\u7b56\u4e2d\u5021\u5bfc\u4f7f\u7528\u56fe\u8868\u5373\u4ee3\u7801<\/p>\n<\/li>\n<li>\n<p>\u4e0e\u9886\u5bfc\u5c42\u5206\u4eab\u6210\u529f\u6848\u4f8b<\/p>\n<\/li>\n<li>\n<p>\u5411\u793e\u533a\u56de\u9988\u6a21\u677f<\/p>\n<\/li>\n<li>\n<p>\u63a2\u7d22\u9ad8\u7ea7\u529f\u80fd\uff0c\u5982AI\u8f85\u52a9\u56fe\u8868\u751f\u6210<\/p>\n<\/li>\n<\/ul>\n<h3>\u7ade\u4e89\u4f18\u52bf<\/h3>\n<p>\u638c\u63e1\u56fe\u8868\u5373\u4ee3\u7801\u7684\u7ec4\u7ec7\u5c06\u83b7\u5f97\u663e\u8457\u4f18\u52bf\uff1a<br \/>\n\u2705\u00a0<strong>\u66f4\u5feb\u7684\u51b3\u7b56\u5236\u5b9a<\/strong>: \u6e05\u6670\u7684\u89c6\u89c9\u5448\u73b0\u52a0\u901f\u7406\u89e3\u4e0e\u5171\u8bc6\u8fbe\u6210<br \/>\n\u2705\u00a0<strong>\u7f29\u77ed\u5165\u804c\u65f6\u95f4<\/strong>: \u65b0\u5de5\u7a0b\u5e08\u901a\u8fc7\u53ef\u6267\u884c\u6587\u6863\u66f4\u5feb\u5730\u638c\u63e1\u7cfb\u7edf<br \/>\n\u2705\u00a0<strong>\u66f4\u597d\u7684\u5229\u76ca\u76f8\u5173\u8005\u6c9f\u901a<\/strong>: \u4e13\u4e1a\u56fe\u8868\u5f25\u5408\u6280\u672f\u4e0e\u4e1a\u52a1\u89c6\u89d2<br \/>\n\u2705\u00a0<strong>\u964d\u4f4e\u7ef4\u62a4\u8d1f\u62c5<\/strong>: \u66f4\u65b0\u6587\u672c\u6bd4\u91cd\u7ed8\u89c6\u89c9\u5185\u5bb9\u66f4\u5feb<br \/>\n\u2705\u00a0<strong>\u63d0\u5347\u4ee3\u7801\u8d28\u91cf<\/strong>: \u7ed8\u5236\u56fe\u8868\u80fd\u5c3d\u65e9\u63ed\u793a\u67b6\u6784\u95ee\u9898<\/p>\n<h3>\u52a0\u5165\u8fd9\u573a\u53d8\u9769<\/h3>\n<p>\u60a8\u73b0\u5df2\u52a0\u5165\u4e00\u4e2a\u4e0d\u65ad\u58ee\u5927\u7684\u5f00\u53d1\u8005\u3001\u67b6\u6784\u5e08\u548c\u56e2\u961f\u793e\u533a\uff0c\u4ed6\u4eec\u8ba4\u8bc6\u5230\u6587\u6863\u4e0d\u5fc5\u6210\u4e3a\u8d1f\u62c5\u3002\u501f\u52a9 VPasCode\uff0c\u60a8\u62e5\u6709\u4e86\u5c06\u5176\u8f6c\u5316\u4e3a\u8d44\u4ea7\u7684\u5de5\u5177\u2014\u2014\u4e00\u79cd\u968f\u4ee3\u7801\u5171\u540c\u6f14\u8fdb\u7684\u3001\u9c9c\u6d3b\u4e14\u52a8\u6001\u7684\u7cfb\u7edf\u8868\u793a\u3002<\/p>\n<h3>\u7ed3\u8bed<\/h3>\n<p>\u5c06\u56fe\u8868\u89c6\u4e3a\u4ee3\u7801\u7684\u6700\u4f73\u65f6\u673a\u662f\u6628\u5929\uff0c\u6b21\u4f73\u65f6\u673a\u5c31\u662f\u73b0\u5728\u3002<br \/>\n\u672a\u6765\u7684\u60a8\u2014\u2014\u4ee5\u53ca\u672a\u6765\u7684\u56e2\u961f\u6210\u5458\u2014\u2014\u5c06\u611f\u8c22\u60a8\u6240\u63d0\u4f9b\u7684\u6e05\u6670\u6027\u3001\u4e00\u81f4\u6027\u548c\u4fe1\u5fc3\uff0c\u8fd9\u4e9b\u6e90\u4e8e\u59cb\u7ec8\u6700\u65b0\u3001\u59cb\u7ec8\u53ef\u8bbf\u95ee\u4e14\u59cb\u7ec8\u51c6\u786e\u7684\u6587\u6863\u3002<br \/>\n<strong>\u51c6\u5907\u597d\u5f00\u59cb\u4e86\u5417\uff1f<\/strong>\u00a0\u8bbf\u95ee\u00a0<a href=\"https:\/\/www.vpascode.com\/editor\/\">VPasCode<\/a>\u00a0\u7acb\u5373\u7c98\u8d34\u60a8\u7684\u7b2c\u4e00\u4efd\u56fe\u8868\u4ee3\u7801\uff0c\u89c1\u8bc1\u6587\u672c\u5982\u4f55\u8f6c\u5316\u4e3a\u6e05\u6670\u3002\u7528\u4e0d\u5230\u8bfb\u5b8c\u8fd9\u6bb5\u7ed3\u8bed\u7684\u65f6\u95f4\uff0c\u60a8\u5c31\u80fd\u521b\u5efa\u51fa\u60a8\u7684\u7b2c\u4e00\u4e2a\u201c\u56fe\u8868\u5373\u4ee3\u7801\u201d\u5de5\u4ef6\u3002<br \/>\n\u6280\u672f\u6587\u6863\u7684\u672a\u6765\u5df2\u81f3\u3002\u5b83\u7531\u4ee3\u7801\u9a71\u52a8\u3001\u57fa\u4e8e\u6d4f\u89c8\u5668\uff0c\u4e14\u5b8c\u5168\u514d\u8d39\u3002\u6b22\u8fce\u6765\u5230\u8fd9\u573a\u9769\u547d\u3002<\/p>\n<hr\/>\n<p><strong>\u5173\u4e8e\u672c\u6559\u7a0b<\/strong><br \/>\n<em>\u672c\u7efc\u5408\u6307\u5357\u65e8\u5728\u5e2e\u52a9\u5f00\u53d1\u56e2\u961f\u901a\u8fc7\u201c\u56fe\u8868\u5373\u4ee3\u7801\u201d\u73b0\u4ee3\u5316\u5176\u6587\u6863\u5b9e\u8df5\u3002VPasCode \u5efa\u7acb\u5728 Visual Paradigm \u4e8c\u5341\u4f59\u5e74\u4f01\u4e1a\u67b6\u6784\u4e13\u4e1a\u77e5\u8bc6\u7684\u57fa\u7840\u4e4b\u4e0a\uff0c\u4ee3\u8868\u4e86\u6280\u672f\u6c9f\u901a\u7684\u672a\u6765\u2014\u2014\u6613\u4e8e\u8bbf\u95ee\u3001\u6613\u4e8e\u7ef4\u62a4\u4e14\u5b8c\u5168\u514d\u8d39\u3002<\/em><br \/>\n<em>\u6700\u540e\u66f4\u65b0\uff1a2026 \u5e74 6 \u6708<\/em><br \/>\n<em>\u76ee\u6807\u53d7\u4f17\uff1a\u8f6f\u4ef6\u5f00\u53d1\u8005\u3001\u7cfb\u7edf\u67b6\u6784\u5e08\u3001DevOps \u5de5\u7a0b\u5e08\u3001\u6280\u672f\u4f5c\u5bb6\u53ca\u5f00\u53d1\u56e2\u961f<\/em><br \/>\n<em>\u524d\u7f6e\u8981\u6c42\uff1a\u5bf9\u8f6f\u4ef6\u67b6\u6784\u6982\u5ff5\u6709\u57fa\u672c\u4e86\u89e3<\/em><br \/>\n<em>\u9884\u8ba1\u5b8c\u6210\u65f6\u95f4\uff1a\u5b8c\u6574\u6559\u7a0b\u9700 2-3 \u5c0f\u65f6\uff0c\u5feb\u901f\u5165\u95e8\u9700 15 \u5206\u949f<\/em><\/p>\n<hr\/>\n<p class=\"\"><strong>\u7ed8\u56fe\u6109\u5feb\uff01\ud83c\udfa8\ud83d\udcca<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5f15\u8a00\uff1a\u6587\u6863\u9769\u547d\u7531\u6b64\u5f00\u542f \u5728\u5feb\u8282\u594f\u7684\u8f6f\u4ef6\u5f00\u53d1\u751f\u6001\u4e2d\uff0c\u6211\u4eec\u6bcf\u4e2a\u4eba&hellip;<\/p>\n","protected":false},"author":2,"featured_media":4241,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","source_url":"","source_h1_title":"","fifu_image_url":"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/06\/img_6a1e86c394c18.png","fifu_image_alt":"","_fifu_image_alt":"","fifu_alt":"","_fifu_alt":"","fifu_image_title":"","_fifu_image_title":"","fifu_input_alt":"","vp_image_hash":"","footnotes":""},"categories":[118],"tags":[],"asset-category":[],"class_list":["post-4240","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vpascode"],"source_url":"","source_h1_title":"","fifu_image_url":"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/06\/img_6a1e86c394c18.png","fifu_image_alt":"","vp_image_hash":"","yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\u638c\u63e1\u4ee3\u7801\u5373\u56fe\u8868\uff1a\u9762\u5411\u73b0\u4ee3\u5f00\u53d1\u56e2\u961f\u7684\u5b8c\u6574 VPasCode \u6559\u7a0b - Go 2 Posts Simplified Chinese | Breaking Digital News &amp; Software Trends<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.go2posts.com\/cn\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u638c\u63e1\u4ee3\u7801\u5373\u56fe\u8868\uff1a\u9762\u5411\u73b0\u4ee3\u5f00\u53d1\u56e2\u961f\u7684\u5b8c\u6574 VPasCode \u6559\u7a0b - Go 2 Posts Simplified Chinese | Breaking Digital News &amp; Software Trends\" \/>\n<meta property=\"og:description\" content=\"\u5f15\u8a00\uff1a\u6587\u6863\u9769\u547d\u7531\u6b64\u5f00\u542f \u5728\u5feb\u8282\u594f\u7684\u8f6f\u4ef6\u5f00\u53d1\u751f\u6001\u4e2d\uff0c\u6211\u4eec\u6bcf\u4e2a\u4eba&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.go2posts.com\/cn\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/\" \/>\n<meta property=\"og:site_name\" content=\"Go 2 Posts Simplified Chinese | Breaking Digital News &amp; Software Trends\" \/>\n<meta property=\"article:published_time\" content=\"2026-06-02T08:13:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-09T12:59:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/06\/img_6a1e86c394c18.png\" \/><meta property=\"og:image\" content=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/06\/img_6a1e86c394c18.png\" \/>\n\t<meta property=\"og:image:width\" content=\"909\" \/>\n\t<meta property=\"og:image:height\" content=\"504\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"curtis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/06\/img_6a1e86c394c18.png\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"curtis\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.go2posts.com\/cn\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.go2posts.com\/cn\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/\"},\"author\":{\"name\":\"curtis\",\"@id\":\"https:\/\/www.go2posts.com\/cn\/#\/schema\/person\/7d2ba976d99a3712085fad7b38500b83\"},\"headline\":\"\u638c\u63e1\u4ee3\u7801\u5373\u56fe\u8868\uff1a\u9762\u5411\u73b0\u4ee3\u5f00\u53d1\u56e2\u961f\u7684\u5b8c\u6574 VPasCode \u6559\u7a0b\",\"datePublished\":\"2026-06-02T08:13:49+00:00\",\"dateModified\":\"2026-09-09T12:59:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.go2posts.com\/cn\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/\"},\"wordCount\":362,\"publisher\":{\"@id\":\"https:\/\/www.go2posts.com\/cn\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.go2posts.com\/cn\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.go2posts.com\/cn\/wp-content\/uploads\/sites\/14\/2026\/06\/img_6a1e86c394c18.png\",\"articleSection\":[\"VPasCode\"],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.go2posts.com\/cn\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/\",\"url\":\"https:\/\/www.go2posts.com\/cn\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/\",\"name\":\"\u638c\u63e1\u4ee3\u7801\u5373\u56fe\u8868\uff1a\u9762\u5411\u73b0\u4ee3\u5f00\u53d1\u56e2\u961f\u7684\u5b8c\u6574 VPasCode \u6559\u7a0b - Go 2 Posts Simplified Chinese | Breaking Digital News &amp; Software Trends\",\"isPartOf\":{\"@id\":\"https:\/\/www.go2posts.com\/cn\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.go2posts.com\/cn\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.go2posts.com\/cn\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.go2posts.com\/cn\/wp-content\/uploads\/sites\/14\/2026\/06\/img_6a1e86c394c18.png\",\"datePublished\":\"2026-06-02T08:13:49+00:00\",\"dateModified\":\"2026-09-09T12:59:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.go2posts.com\/cn\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.go2posts.com\/cn\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.go2posts.com\/cn\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/#primaryimage\",\"url\":\"https:\/\/www.go2posts.com\/cn\/wp-content\/uploads\/sites\/14\/2026\/06\/img_6a1e86c394c18.png\",\"contentUrl\":\"https:\/\/www.go2posts.com\/cn\/wp-content\/uploads\/sites\/14\/2026\/06\/img_6a1e86c394c18.png\",\"width\":909,\"height\":504},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.go2posts.com\/cn\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.go2posts.com\/cn\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u638c\u63e1\u4ee3\u7801\u5373\u56fe\u8868\uff1a\u9762\u5411\u73b0\u4ee3\u5f00\u53d1\u56e2\u961f\u7684\u5b8c\u6574 VPasCode \u6559\u7a0b\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.go2posts.com\/cn\/#website\",\"url\":\"https:\/\/www.go2posts.com\/cn\/\",\"name\":\"Go 2 Posts Simplified Chinese | Breaking Digital News &amp; Software Trends\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.go2posts.com\/cn\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.go2posts.com\/cn\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.go2posts.com\/cn\/#organization\",\"name\":\"Go 2 Posts Simplified Chinese | Breaking Digital News &amp; Software Trends\",\"url\":\"https:\/\/www.go2posts.com\/cn\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.go2posts.com\/cn\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.go2posts.com\/cn\/wp-content\/uploads\/sites\/14\/2025\/01\/logo.png\",\"contentUrl\":\"https:\/\/www.go2posts.com\/cn\/wp-content\/uploads\/sites\/14\/2025\/01\/logo.png\",\"width\":341,\"height\":46,\"caption\":\"Go 2 Posts Simplified Chinese | Breaking Digital News &amp; Software Trends\"},\"image\":{\"@id\":\"https:\/\/www.go2posts.com\/cn\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.go2posts.com\/cn\/#\/schema\/person\/7d2ba976d99a3712085fad7b38500b83\",\"name\":\"curtis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.go2posts.com\/cn\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"caption\":\"curtis\"},\"url\":\"https:\/\/www.go2posts.com\/cn\/author\/curtis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u638c\u63e1\u4ee3\u7801\u5373\u56fe\u8868\uff1a\u9762\u5411\u73b0\u4ee3\u5f00\u53d1\u56e2\u961f\u7684\u5b8c\u6574 VPasCode \u6559\u7a0b - Go 2 Posts Simplified Chinese | Breaking Digital News &amp; Software Trends","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.go2posts.com\/cn\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/","og_locale":"zh_CN","og_type":"article","og_title":"\u638c\u63e1\u4ee3\u7801\u5373\u56fe\u8868\uff1a\u9762\u5411\u73b0\u4ee3\u5f00\u53d1\u56e2\u961f\u7684\u5b8c\u6574 VPasCode \u6559\u7a0b - Go 2 Posts Simplified Chinese | Breaking Digital News &amp; Software Trends","og_description":"\u5f15\u8a00\uff1a\u6587\u6863\u9769\u547d\u7531\u6b64\u5f00\u542f \u5728\u5feb\u8282\u594f\u7684\u8f6f\u4ef6\u5f00\u53d1\u751f\u6001\u4e2d\uff0c\u6211\u4eec\u6bcf\u4e2a\u4eba&hellip;","og_url":"https:\/\/www.go2posts.com\/cn\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/","og_site_name":"Go 2 Posts Simplified Chinese | Breaking Digital News &amp; Software Trends","article_published_time":"2026-06-02T08:13:49+00:00","article_modified_time":"2026-09-09T12:59:33+00:00","og_image":[{"url":"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/06\/img_6a1e86c394c18.png","type":"","width":"","height":""},{"width":909,"height":504,"url":"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/06\/img_6a1e86c394c18.png","type":"image\/png"}],"author":"curtis","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.archimetric.com\/wp-content\/uploads\/2026\/06\/img_6a1e86c394c18.png","twitter_misc":{"\u4f5c\u8005":"curtis","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"12 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.go2posts.com\/cn\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/#article","isPartOf":{"@id":"https:\/\/www.go2posts.com\/cn\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/"},"author":{"name":"curtis","@id":"https:\/\/www.go2posts.com\/cn\/#\/schema\/person\/7d2ba976d99a3712085fad7b38500b83"},"headline":"\u638c\u63e1\u4ee3\u7801\u5373\u56fe\u8868\uff1a\u9762\u5411\u73b0\u4ee3\u5f00\u53d1\u56e2\u961f\u7684\u5b8c\u6574 VPasCode \u6559\u7a0b","datePublished":"2026-06-02T08:13:49+00:00","dateModified":"2026-09-09T12:59:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.go2posts.com\/cn\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/"},"wordCount":362,"publisher":{"@id":"https:\/\/www.go2posts.com\/cn\/#organization"},"image":{"@id":"https:\/\/www.go2posts.com\/cn\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/#primaryimage"},"thumbnailUrl":"https:\/\/www.go2posts.com\/cn\/wp-content\/uploads\/sites\/14\/2026\/06\/img_6a1e86c394c18.png","articleSection":["VPasCode"],"inLanguage":"zh-Hans"},{"@type":"WebPage","@id":"https:\/\/www.go2posts.com\/cn\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/","url":"https:\/\/www.go2posts.com\/cn\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/","name":"\u638c\u63e1\u4ee3\u7801\u5373\u56fe\u8868\uff1a\u9762\u5411\u73b0\u4ee3\u5f00\u53d1\u56e2\u961f\u7684\u5b8c\u6574 VPasCode \u6559\u7a0b - Go 2 Posts Simplified Chinese | Breaking Digital News &amp; Software Trends","isPartOf":{"@id":"https:\/\/www.go2posts.com\/cn\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.go2posts.com\/cn\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/#primaryimage"},"image":{"@id":"https:\/\/www.go2posts.com\/cn\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/#primaryimage"},"thumbnailUrl":"https:\/\/www.go2posts.com\/cn\/wp-content\/uploads\/sites\/14\/2026\/06\/img_6a1e86c394c18.png","datePublished":"2026-06-02T08:13:49+00:00","dateModified":"2026-09-09T12:59:33+00:00","breadcrumb":{"@id":"https:\/\/www.go2posts.com\/cn\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.go2posts.com\/cn\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/"]}]},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.go2posts.com\/cn\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/#primaryimage","url":"https:\/\/www.go2posts.com\/cn\/wp-content\/uploads\/sites\/14\/2026\/06\/img_6a1e86c394c18.png","contentUrl":"https:\/\/www.go2posts.com\/cn\/wp-content\/uploads\/sites\/14\/2026\/06\/img_6a1e86c394c18.png","width":909,"height":504},{"@type":"BreadcrumbList","@id":"https:\/\/www.go2posts.com\/cn\/mastering-diagram-as-code-a-complete-vpascode-tutorial-for-modern-development-teams\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.go2posts.com\/cn\/"},{"@type":"ListItem","position":2,"name":"\u638c\u63e1\u4ee3\u7801\u5373\u56fe\u8868\uff1a\u9762\u5411\u73b0\u4ee3\u5f00\u53d1\u56e2\u961f\u7684\u5b8c\u6574 VPasCode \u6559\u7a0b"}]},{"@type":"WebSite","@id":"https:\/\/www.go2posts.com\/cn\/#website","url":"https:\/\/www.go2posts.com\/cn\/","name":"Go 2 Posts Simplified Chinese | Breaking Digital News &amp; Software Trends","description":"","publisher":{"@id":"https:\/\/www.go2posts.com\/cn\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.go2posts.com\/cn\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"zh-Hans"},{"@type":"Organization","@id":"https:\/\/www.go2posts.com\/cn\/#organization","name":"Go 2 Posts Simplified Chinese | Breaking Digital News &amp; Software Trends","url":"https:\/\/www.go2posts.com\/cn\/","logo":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.go2posts.com\/cn\/#\/schema\/logo\/image\/","url":"https:\/\/www.go2posts.com\/cn\/wp-content\/uploads\/sites\/14\/2025\/01\/logo.png","contentUrl":"https:\/\/www.go2posts.com\/cn\/wp-content\/uploads\/sites\/14\/2025\/01\/logo.png","width":341,"height":46,"caption":"Go 2 Posts Simplified Chinese | Breaking Digital News &amp; Software Trends"},"image":{"@id":"https:\/\/www.go2posts.com\/cn\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.go2posts.com\/cn\/#\/schema\/person\/7d2ba976d99a3712085fad7b38500b83","name":"curtis","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.go2posts.com\/cn\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","caption":"curtis"},"url":"https:\/\/www.go2posts.com\/cn\/author\/curtis\/"}]}},"_links":{"self":[{"href":"https:\/\/www.go2posts.com\/cn\/wp-json\/wp\/v2\/posts\/4240","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.go2posts.com\/cn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.go2posts.com\/cn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.go2posts.com\/cn\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.go2posts.com\/cn\/wp-json\/wp\/v2\/comments?post=4240"}],"version-history":[{"count":0,"href":"https:\/\/www.go2posts.com\/cn\/wp-json\/wp\/v2\/posts\/4240\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.go2posts.com\/cn\/wp-json\/wp\/v2\/media\/4241"}],"wp:attachment":[{"href":"https:\/\/www.go2posts.com\/cn\/wp-json\/wp\/v2\/media?parent=4240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.go2posts.com\/cn\/wp-json\/wp\/v2\/categories?post=4240"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.go2posts.com\/cn\/wp-json\/wp\/v2\/tags?post=4240"},{"taxonomy":"asset-category","embeddable":true,"href":"https:\/\/www.go2posts.com\/cn\/wp-json\/wp\/v2\/asset-category?post=4240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}