{"id":1886,"date":"2026-08-05T15:49:03","date_gmt":"2026-08-05T15:49:03","guid":{"rendered":"https:\/\/www.vpascode.com\/tw\/building-a-professional-webhook-workflow-diagram-with-plantuml-and-vpascode-2\/"},"modified":"2026-08-05T15:49:03","modified_gmt":"2026-08-05T15:49:03","slug":"building-a-professional-webhook-workflow-diagram-with-plantuml-and-vpascode-2","status":"publish","type":"post","link":"https:\/\/www.vpascode.com\/tw\/building-a-professional-webhook-workflow-diagram-with-plantuml-and-vpascode-2\/","title":{"rendered":"\u4f7f\u7528 PlantUML \u548c VPasCode \u5efa\u7acb\u5c08\u696d\u7684 Webhook \u5de5\u4f5c\u6d41\u7a0b\u5716"},"content":{"rendered":"

\"Learn<\/p>\n

\u4f5c\u70ba\u958b\u767c\u4eba\u54e1\u548c\u7cfb\u7d71\u67b6\u69cb\u5e2b\uff0c\u6211\u5011\u4e0d\u65b7\u9700\u8981\u8996\u89ba\u5316\u8907\u96dc\u7684\u5f8c\u7aef\u908f\u8f2f\u2014\u2014\u7279\u5225\u662f\u7570\u6b65\u4e8b\u4ef6\u9a45\u52d5\u7684\u6d41\u7a0b\uff0c\u4f8b\u5982 webhook \u8655\u7406\u3002\u5728\u5efa\u7acb\u9019\u4e9b\u5de5\u4f5c\u6d41\u7a0b\u6642\uff0c\u64b0\u5beb\u7a0b\u5f0f\u78bc\u4f86\u751f\u6210\u8996\u89ba\u5316\u5167\u5bb9\u662f\u4e00\u7a2e\u6975\u4f73\u7684\u65b9\u6cd5\uff0c\u56e0\u70ba\u5b83\u80fd\u8b93\u6587\u4ef6\u4fdd\u6301\u6e05\u6670\u4e14\u5177\u7a0b\u5f0f\u5316\u3002\u4eca\u5929\uff0c\u6211\u5c07\u5e36\u60a8\u4e00\u6b65\u6b65\u4e86\u89e3\u6211\u8a2d\u8a08\u751f\u7522\u7d1a webhook \u63a5\u6536\u8207\u8655\u7406\u7ba1\u9053\u7684\u5b8c\u6574\u601d\u7dad\u904e\u7a0b\uff0c\u4f7f\u7528PlantUML<\/a>\u5167\u5efa\u65bcVisual Paradigm VPasCode<\/strong>.<\/p>\n

<\/article>\n
\u5728\u672c\u5802\u9ad8\u968e\u6559\u5b78\u8ab2\u7a0b\u7d50\u675f\u6642\uff0c\u60a8\u5c07\u4e86\u89e3\u5982\u4f55\u5efa\u7acb\u689d\u4ef6\u5206\u652f\u3001\u4f7f\u7528\u5206\u53c9\u5354\u8abf\u5e73\u884c\u4efb\u52d9\uff0c\u4e26\u70ba\u60a8\u7684\u5716\u5f62\u7a0b\u5f0f\u78bc\u5c08\u6848\u5957\u7528\u73fe\u4ee3\u5316\u6a23\u5f0f\u4e3b\u984c\uff0c\u4f8b\u5982 AWS \u6a59\u8272\u3002<\/span><\/article>\n

\"Editing<\/p>\n

1. \u8a2d\u5b9a\u57fa\u790e\u7d50\u69cb\u8207\u4e3b\u984c<\/h2>\n

\u6211\u9996\u5148\u8a2d\u5b9a\u6d3b\u52d5\u5716\u7684\u57fa\u790e\u7d50\u69cb\u3002\u6bcf\u4e00\u500b\u7a69\u5065\u7684 PlantUML \u6d3b\u52d5\u8173\u672c\u90fd\u5fc5\u9808\u5177\u5099\u660e\u78ba\u7684\u8d77\u9ede\uff0c\u4ee5\u53ca\u7d71\u4e00\u7684\u8996\u89ba\u4e3b\u984c\uff0c\u4ee5\u78ba\u4fdd\u6280\u8853\u6587\u4ef6\u4e2d\u4fdd\u6301\u5c08\u696d\u6a19\u6e96\u3002<\/p>\n

\u6211\u6c92\u6709\u9078\u64c7\u4f7f\u7528\u9810\u8a2d\u4e14\u5916\u89c0\u55ae\u8abf\u7684\u65b9\u6846\uff0c\u800c\u662f\u6c7a\u5b9a\u5f15\u5165\u5167\u5efa\u7684aws-orange<\/code>\u4e3b\u984c\u3002\u9019\u7acb\u5373\u70ba\u5716\u5f62\u5e36\u4f86\u4e7e\u6de8\u3001\u96f2\u7aef\u539f\u751f\u7684\u7f8e\u5b78\u98a8\u683c\uff0c\u8207\u73fe\u4ee3\u57fa\u790e\u67b6\u69cb\u8a2d\u8a08\u9ad8\u5ea6\u5951\u5408\u3002<\/p>\n

\r\n@startuml\r\n!theme aws-orange\r\n\r\nstart\r\n:\u63a5\u6536 Webhook \u901a\u77e5;<\/code><\/pre>\n
2. \u8655\u7406\u9a57\u8b49\u8207\u689d\u4ef6\u5206\u652f<\/h2>\n
\u63a5\u4e0b\u4f86\uff0c\u6211\u9700\u8981\u5b9a\u7fa9 webhook \u8655\u7406\u5668\u7684\u6838\u5fc3\u5b89\u5168\u5b88\u9580\u4eba\u3002\u7576 webhook \u5f9e\u5916\u90e8\u670d\u52d9\uff08\u5982 Stripe\u3001GitHub \u6216 AWS\uff09\u5230\u9054\u6642\uff0c\u7b2c\u4e00\u500b\u64cd\u4f5c\u6aa2\u67e5\u5fc5\u9808\u9a57\u8b49\u8acb\u6c42\u7c3d\u7ae0\uff0c\u4ee5\u9632\u6b62\u507d\u9020\u6216\u672a\u7d93\u6388\u6b0a\u7684\u8f09\u8377\u6ce8\u5165\u3002<\/p>\n
\u70ba\u4e86\u6355\u6349\u6b64\u6c7a\u7b56\u908f\u8f2f\uff0c\u6211\u4f7f\u7528 PlantUML \u7684\u689d\u4ef6\u8a9e\u6cd5\uff08if \/ then \/ else<\/code>\uff09\u3002\u5982\u679c\u7c3d\u7ae0\u6709\u6548\uff0c\u5de5\u4f5c\u6d41\u7a0b\u5c07\u6cbf\u4e3b\u8981\u57f7\u884c\u8def\u5f91\u7e7c\u7e8c\u3002\u5982\u679c\u5931\u6557\uff0c\u7cfb\u7d71\u5fc5\u9808\u7acb\u5373\u4e2d\u6b62\uff0c\u8a18\u9304\u5b89\u5168\u8b66\u5831\uff0c\u56de\u50b3 HTTP 401 \u672a\u6388\u6b0a\u72c0\u614b\u78bc\uff0c\u4e26\u5b89\u5168\u7d50\u675f\u3002<\/p>\n
if (\u7c3d\u7ae0\u6709\u6548?) then (\u662f)\r\n  :\u89e3\u6790\u8f09\u8377 JSON;\r\n  ' \u5e73\u884c\u8655\u7406\u6b65\u9a5f\u5728\u6b64...\r\nelse (\u5426)\r\n  :\u8a18\u9304\u5b89\u5168\u8b66\u5831;\r\n  :\u56de\u50b3 HTTP 401 \u672a\u6388\u6b0a;\r\n  stop\r\nendif<\/code><\/pre>\n
3. \u4f7f\u7528\u5206\u53c9\u5354\u8abf\u975e\u540c\u6b65\u4efb\u52d9<\/h2>\n
\u4e00\u65e6 JSON \u8f09\u8377\u6210\u529f\u89e3\u6790\uff0c\u73fe\u5be6\u4e16\u754c\u7684\u5f8c\u7aef\u61c9\u7528\u7a0b\u5f0f\u5f88\u5c11\u6703\u56b4\u683c\u6309\u9806\u5e8f\u8655\u7406\u4efb\u52d9\u3002\u4f8b\u5982\uff0c\u6211\u5011\u5e0c\u671b\u5c07\u4e8b\u4ef6\u8a18\u9304\u5230\u5206\u6790\u8cc7\u6599\u5009\u5eab\uff0c\u540c\u6642\u5728\u4e3b\u8cc7\u6599\u5eab\u4e2d\u66f4\u65b0\u4f7f\u7528\u8005\u7684\u8a02\u95b1\u72c0\u614b\uff0c\u4e14\u5f7c\u6b64\u4e0d\u4e92\u76f8\u963b\u585e\u3002<\/p>\n
\u70ba\u4e86\u8868\u793a\u9019\u7a2e\u4e26\u884c\u6027\uff0c\u6211\u5f15\u5165\u4e00\u500bfork<\/code>\u5340\u584a\u3002\u9019\u5728\u8996\u89ba\u4e0a\u5c07\u5de5\u4f5c\u6d41\u7a0b\u62c6\u5206\u6210\u5e73\u884c\u57f7\u884c\u8def\u5f91\uff0c\u518d\u91cd\u65b0\u540c\u6b65\u5408\u4f75\u3002\u9019\u662f\u6e96\u78ba\u6a21\u64ec\u4e8b\u4ef6\u9a45\u52d5\u5fae\u670d\u52d9\u67b6\u69cb\u7684\u95dc\u9375\u6280\u8853\u3002<\/p>\n
  fork\r\n    :\u5c07\u4e8b\u4ef6\u8a18\u9304\u81f3\u5206\u6790\u7cfb\u7d71;\r\n  fork again\r\n    :\u66f4\u65b0\u4f7f\u7528\u8005\u8a02\u95b1\u72c0\u614b;\r\n  end fork<\/code><\/pre>\n
4. \u8a55\u4f30\u8a02\u95b1\u7b49\u7d1a\u8207\u8cc7\u6e90\u914d\u7f6e<\/h2>\n
\u5728\u5e73\u884c\u8ffd\u8e64\u8207\u72c0\u614b\u66f4\u65b0\u5b8c\u6210\u5f8c\uff0c\u5de5\u4f5c\u6d41\u7a0b\u5fc5\u9808\u6aa2\u67e5\u4f7f\u7528\u8005\u5c6c\u6027\uff0c\u4ee5\u6c7a\u5b9a\u57fa\u790e\u67b6\u69cb\u7684\u914d\u7f6e\u3002\u5728\u6b64\uff0c\u6211\u5011\u9047\u5230\u4e00\u500b\u5de2\u72c0\u6c7a\u7b56\u7d50\u69cb\uff1a\u6aa2\u67e5\u5ba2\u6236\u662f\u5426\u5c6c\u65bc\u9ad8\u968e\u8a02\u95b1\u7b49\u7d1a\u3002<\/p>\n
\u5982\u679c\u4ed6\u5011\u662f\u9ad8\u968e\u8a02\u95b1\u8005\uff0c\u6211\u5011\u5c07\u914d\u7f6e\u5c08\u7528\u7684\u57fa\u790e\u67b6\u69cb\u8cc7\u6e90\uff0c\u4ee5\u78ba\u4fdd\u4f4e\u5ef6\u9072\u6027\u80fd\u3002\u5426\u5247\uff0c\u6211\u5011\u6703\u512a\u96c5\u5730\u5c07\u5176\u5206\u914d\u81f3\u5171\u7528\u8cc7\u6e90\u6c60\u3002\u5169\u500b\u5206\u652f\u6700\u7d42\u6703\u532f\u805a\uff0c\u518d\u5411\u4f7f\u7528\u8005\u767c\u9001\u6700\u5f8c\u7684\u78ba\u8a8d\u90f5\u4ef6\u3002<\/p>\n
  if (\u662f\u5426\u70ba\u9ad8\u968e\u65b9\u6848?) then (\u662f)\r\n    :\u914d\u7f6e\u5c08\u7528\u57fa\u790e\u67b6\u69cb;\r\n  else (\u5426)\r\n    :\u5206\u914d\u81f3\u5171\u7528\u8cc7\u6e90\u6c60;\r\n  endif\r\n  :\u767c\u9001\u78ba\u8a8d\u90f5\u4ef6;<\/code><\/pre>\n
5. \u5b8c\u6210\u5b8c\u6574\u5716\u5f62<\/h2>\n
\u5c07\u6240\u6709\u9019\u4e9b\u90e8\u5206\u6574\u5408\u5728\u4e00\u8d77\uff0c\u6703\u7522\u751f\u4e00\u4efd\u5168\u9762\u4e14\u6975\u5177\u53ef\u8b80\u6027\u7684\u6280\u8853\u85cd\u5716\u3002<\/p>\n
\"Completed<\/p>\n
\u4ee5\u4e0b\u662f\u5b8c\u6574\u7684\u3001\u53ef\u7acb\u5373\u6295\u5165\u751f\u7522\u7684\u539f\u59cb\u78bc\uff0c\u60a8\u53ef\u4ee5\u76f4\u63a5\u8907\u88fd\u3001\u8cbc\u4e0a\u4e26\u5373\u6642\u6e32\u67d3\uff1a<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\n\u5728 VPasCode \u4e2d\u7de8\u8f2f Plantuml<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\n!theme aws-orange\r\n\r\nstart\r\n:\u63a5\u6536 Webhook \u901a\u77e5;\r\n\u5982\u679c (\u7c3d\u540d\u6709\u6548?) \u5247 (\u662f)\r\n  :\u89e3\u6790\u8f09\u8377 JSON;\r\n  \u5206\u652f\r\n    :\u8a18\u9304\u4e8b\u4ef6\u81f3\u5206\u6790\u7cfb\u7d71;\r\n  \u5206\u652f\u518d\u6b21\r\n    :\u66f4\u65b0\u4f7f\u7528\u8005\u8a02\u95b1\u72c0\u614b;\r\n  \u7d50\u675f\u5206\u652f\r\n  \u5982\u679c (\u662f\u5426\u70ba\u9ad8\u7d1a\u65b9\u6848?) \u5247 (\u662f)\r\n    :\u914d\u7f6e\u5c08\u7528\u57fa\u790e\u8a2d\u65bd;\r\n  \u5426\u5247 (\u5426)\r\n    :\u6307\u6d3e\u5171\u7528\u8cc7\u6e90\u6c60\u8cc7\u6e90;\r\n  \u7d50\u675f\u5982\u679c\r\n  :\u767c\u9001\u78ba\u8a8d\u90f5\u4ef6;\r\n\u5426\u5247 (\u5426)\r\n  :\u8a18\u9304\u5b89\u5168\u8b66\u5831;\r\n  :\u56de\u50b3 HTTP 401 \u7121\u6b0a\u9650;\r\n  \u505c\u6b62\r\n\u7d50\u675f\u5982\u679c\r\n\u505c\u6b62\r\n\r\n@endumlx<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\n\u5728 VPasCode \u4e2d\u7de8\u8f2f Plantuml<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\u70ba\u4ec0\u9ebc\u8981\u4f7f\u7528 VPasCode \u5efa\u7acb\u5716\u8868\uff1f<\/h2>\n
\u5c07\u5de5\u4f5c\u6d41\u7a0b\u8a2d\u8a08\u70ba\u7a0b\u5f0f\u78bc\uff0c\u63d0\u4f9b\u4e86\u4e00\u7a2e\u5feb\u901f\u3001\u4ee5\u6587\u5b57\u70ba\u5c0e\u5411\u7684\u6280\u8853\u6587\u4ef6\u7de8\u5beb\u65b9\u5f0f\u3002\u900f\u904e Visual Paradigm VPasCode<\/strong>\uff0c\u60a8\u5c07\u7372\u5f97\u6240\u6709\u5716\u8868\u7684\u5373\u6642\u53cd\u994b\u8ff4\u8def\uff1a<\/p>\n