id: 693286280b1d4d20b7a564f012f33b21
parent_id: 
item_type: 1
item_id: d16d450512044287a10f5044cd3b7628
item_updated_time: 1764345626765
title_diff: "[{\"diffs\":[[1,\"Mermaid图表教程：图表应用实例分析\"]],\"start1\":0,\"start2\":0,\"length1\":0,\"length2\":20}]"
body_diff: "[{\"diffs\":[[1,\"<html>\\\r\\\n<head>\\\r\\\n  <title>Mermaid图表教程：图表应用实例分析</title>\\\r\\\n  <basefont face=\\\"微软雅黑\\\" size=\\\"2\\\" />\\\r\\\n  <meta http-equiv=\\\"Content-Type\\\" content=\\\"text/html;charset=utf-8\\\" />\\\r\\\n  <meta name=\\\"exporter-version\\\" content=\\\"YXBJ Windows/608924 (zh-CN, DDL); Windows/10.0.0 (Win64); EDAMVersion=V2;\\\"/>\\\r\\\n  <meta name=\\\"content-class\\\" content=\\\"yinxiang.peso.superNote\\\"/>\\\r\\\n  <meta name=\\\"application-data:yinxiang.noteLayout\\\" content=\\\"{\\\"lineSpace\\\":\\\"recommend\\\",\\\"paragraphSpace\\\":\\\"recommend\\\"}\\\"/>\\\r\\\n  <style>\\\r\\\n\\tbody, td {\\\r\\\n\\t  font-family: 微软雅黑;\\\r\\\n\\t  font-size: 12pt;\\\r\\\n\\t}\\\r\\\n  </style>\\\r\\\n</head>\\\r\\\n<body>\\\r\\\n<a name=\\\"39663\\\"></a>\\\r\\\n<h1>Mermaid图表教程：图表应用实例分析</h1>\\\r\\\n\\\r\\\n<div><span style=\\\"margin:0px;\\\"><div style=\\\"padding:8px 0px;margin:8px auto;max-width:700px;\\\"> <div><span></span></div>\\\n<p></p>\\\n<div style=\\\"--en-blockquote:true;box-sizing: border-box; padding-left: 19px; padding-top: 6px; padding-bottom: 6px; border-left: 3px solid #b4c0cc; background-position: initial initial; background-repeat: initial initial; margin-top: 6px\\\"><div>原文链接: <a href=\\\"http://mp.weixin.qq.com/s?__biz=MzAxMTYzNTA2Ng==&amp;mid=2653697676&amp;idx=1&amp;sn=a3f6e37279a023c4aea0b6562a5b6ed8&amp;chksm=811675bb343f391459ef2740b27aba0e2c04a6dbb087764b32dee319f1ee44b2c8c4c693ad45&amp;mpshare=1&amp;scene=1&amp;srcid=0411MylsPP207K62qCOavu1l&amp;sharer_shareinfo=c8e5fedebe8fc921248c5802b39c4104&amp;sharer_shareinfo_first=c8e5fedebe8fc921248c5802b39c4104#rd\\\"><span>http://mp.weixin.qq.com/s?__biz=MzAxMTYzNTA2Ng==&amp;mid=2653697...</span></a></div></div>\\\n<p></p>\\\n<div><span></span></div>\\\n<div style=\\\"\\\"><div><div><h1 style=\\\"margin:0\\\"> Mermaid图表教程：图表应用实例分析 </h1><div><span style=\\\"position:relative\\\">原创</span><span> 王海华 </span><span><a style=\\\"position:relative\\\"> 模型视角 </a></span><span><em></em></span></div><div style=\\\";\\\"><div style=\\\"margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 10px;padding-right: 10px;background-attachment: scroll;background-clip: border-box;background-color: rgba(0, 0, 0, 0);background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;width: auto;font-family: Optima, 'Microsoft YaHei', PingFangSC-regular, serif;font-size: 16px;color: rgb(0, 0, 0);line-height: 1.5em;word-spacing: 0em;letter-spacing: 0em;word-break: break-word;overflow-wrap: break-word;text-align: left;\\\"><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><span><a href=\\\"https://mp.weixin.qq.com/s?__biz=MzAxMTYzNTA2Ng==&amp;mid=2653697641&amp;idx=1&amp;sn=d2db9ac31ec912e4b1b5c71fac873218&amp;scene=21#wechat_redirect\\\" style=\\\"\\\" target=\\\"_blank\\\">上一篇文章</a>我介绍了如何通过Mermaid代码绘制流程图。其实</span><strong style=\\\"color: rgb(0, 150, 136);font-weight: bold;background-attachment: scroll;background-clip: border-box;background-color: rgba(0, 0, 0, 0);background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;width: auto;height: auto;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;border-top-style: none;border-bottom-style: none;border-left-style: none;border-right-style: none;border-top-width: 3px;border-bottom-width: 3px;border-left-width: 3px;border-right-width: 3px;border-top-color: rgba(0, 0, 0, 0.4);border-bottom-color: rgba(0, 0, 0, 0.4);border-left-color: rgba(0, 0, 0, 0.4);border-right-color: rgba(0, 0, 0, 0.4);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;\\\"><span>Mermaid</span></strong><span> 是一个基于文本的图形绘制工具，能够帮助用户通过简单的文本代码，快速生成各种类型的图表。它广泛应用于软件开发、项目管理、数据可视化等领域，但它的应用场景远远不止于此。</span></p><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><span>在日常生活中，我们也可以利用 Mermaid 来帮助我们可视化各种复杂的概念、流程和关系。本文将通过多个实际生活中的案例，展示如何使用 Mermaid 绘制不同类型的图表。</span></p><h2 style=\\\"margin:0;margin-top:30px;margin-bottom:15px;margin-left:0;margin-right:0;align-items:unset;background-attachment:scroll;background-clip:border-box;background-color:unset;background-image:none;background-origin:padding-box;background-position-x:0;background-position-y:0;background-repeat:no-repeat;background-size:auto;border-top-style:none;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-width:1px;border-bottom-width:1px;border-left-width:1px;border-right-width:1px;border-top-color:rgb(0,0,0);border-bottom-color:rgb(0,0,0);border-left-color:rgb(0,0,0);border-right-color:rgb(0,0,0);border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:none;display:block;flex-direction:unset;float:unset;height:auto;justify-content:unset;line-height:1.5em;overflow-x:unset;overflow-y:unset;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;text-shadow:none;transform:none;width:auto;-webkit-box-reflect:unset\\\"><span style=\\\"font-size: 20px;color: rgb(0, 150, 136);line-height: 1.8em;letter-spacing: 0em;padding-top: 0px;padding-bottom: 0px;padding-left: 10px;padding-right: 0px;border-top-style: none;border-bottom-style: none;border-left-style: solid;border-right-style: none;border-top-width: 1px;border-bottom-width: 1px;border-left-width: 3px;border-right-width: 1px;border-top-color: rgb(0, 0, 0);border-bottom-color: rgb(0, 0, 0);border-left-color: rgb(0, 150, 136);border-right-color: rgb(0, 0, 0);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;align-items: unset;background-attachment: scroll;background-clip: border-box;background-color: unset;background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;box-shadow: none;display: block;font-weight: bold;flex-direction: unset;float: unset;height: auto;justify-content: unset;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;overflow-x: unset;overflow-y: unset;text-align: left;text-indent: 0em;text-shadow: none;transform: none;width: auto;-webkit-box-reflect: unset;\\\"><span>1. 流程图（Flowchart）：制作早餐</span></span></h2><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><span>流程图是用来表示一个过程或工作流的图表。它帮助我们理解如何一步步完成任务。在日常生活中，制作早餐是一个常见的例子。</span></p><pre style=\\\"border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;text-align: left;margin-top: 10px;margin-bottom: 10px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;\\\"><span style=\\\"display: block;background: none;height: 30px;width: 100%;background-size: 40px;background-repeat: no-repeat;background-color: #282c34;margin-bottom: -7px;border-radius: 5px;background-position: 10px 10px;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_svg/a18XcQ1EBBiaQLzhOpicu2mG9SpfuztIvgXO3p6YYyDV01sdUePuSCV9AElAl5DtPeoGWoeH2Fp06wD7rY3cUkWic1icUwC86J3ic/640?wx_fmt=svg&amp;from=appmsg&quot;);\\\"></span><div style=\\\"--en-codeblock:true;--en-meta:{&quot;title&quot;:&quot;&quot;,&quot;lang&quot;:&quot;Plain Text&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;showLine&quot;:true,&quot;lineWrap&quot;:true};box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial; margin-top: 6px;\\\"><span>flowchart TD</span><span><br/></span><span>    A[开始] --&gt; B{是否有鸡蛋?}</span><span><br/></span><span>    B --&gt;|是| C[准备鸡蛋]</span><span><br/></span><span>    B --&gt;|否| D[去买鸡蛋]</span><span><br/></span><span>    C --&gt; E[加热平底锅]</span><span><br/></span><span>    D --&gt; E</span><span><br/></span><span>    E --&gt; F[打蛋入锅]</span><span><br/></span><span>    F --&gt; G[翻面]</span><span><br/></span><span>    G --&gt; H[完成]</span><span><br/></span></div></pre><div style=\\\"text-align: center;\\\"><img src=\\\":/e79e34c4f9d841898f02d81d95dbfa7b\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;\\\"/></div><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><strong style=\\\"color: rgb(0, 150, 136);font-weight: bold;background-attachment: scroll;background-clip: border-box;background-color: rgba(0, 0, 0, 0);background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;width: auto;height: auto;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;border-top-style: none;border-bottom-style: none;border-left-style: none;border-right-style: none;border-top-width: 3px;border-bottom-width: 3px;border-left-width: 3px;border-right-width: 3px;border-top-color: rgba(0, 0, 0, 0.4);border-bottom-color: rgba(0, 0, 0, 0.4);border-left-color: rgba(0, 0, 0, 0.4);border-right-color: rgba(0, 0, 0, 0.4);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;\\\"><span>说明：</span></strong><span>这个流程图展示了制作煎蛋的每个步骤，清晰地表示了如何根据是否有鸡蛋来做决定。流程图帮助我们理清每个环节的执行顺序，避免遗漏。</span></p><h2 style=\\\"margin:0;margin-top:30px;margin-bottom:15px;margin-left:0;margin-right:0;align-items:unset;background-attachment:scroll;background-clip:border-box;background-color:unset;background-image:none;background-origin:padding-box;background-position-x:0;background-position-y:0;background-repeat:no-repeat;background-size:auto;border-top-style:none;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-width:1px;border-bottom-width:1px;border-left-width:1px;border-right-width:1px;border-top-color:rgb(0,0,0);border-bottom-color:rgb(0,0,0);border-left-color:rgb(0,0,0);border-right-color:rgb(0,0,0);border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:none;display:block;flex-direction:unset;float:unset;height:auto;justify-content:unset;line-height:1.5em;overflow-x:unset;overflow-y:unset;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;text-shadow:none;transform:none;width:auto;-webkit-box-reflect:unset\\\"><span style=\\\"font-size: 20px;color: rgb(0, 150, 136);line-height: 1.8em;letter-spacing: 0em;padding-top: 0px;padding-bottom: 0px;padding-left: 10px;padding-right: 0px;border-top-style: none;border-bottom-style: none;border-left-style: solid;border-right-style: none;border-top-width: 1px;border-bottom-width: 1px;border-left-width: 3px;border-right-width: 1px;border-top-color: rgb(0, 0, 0);border-bottom-color: rgb(0, 0, 0);border-left-color: rgb(0, 150, 136);border-right-color: rgb(0, 0, 0);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;align-items: unset;background-attachment: scroll;background-clip: border-box;background-color: unset;background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;box-shadow: none;display: block;font-weight: bold;flex-direction: unset;float: unset;height: auto;justify-content: unset;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;overflow-x: unset;overflow-y: unset;text-align: left;text-indent: 0em;text-shadow: none;transform: none;width: auto;-webkit-box-reflect: unset;\\\"><span>2. 时序图（Sequence Diagram）：家庭成员的沟通流程</span></span></h2><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><span>时序图展示了系统中各参与者之间如何相互作用，以及事件的发生顺序。举个例子，假设我们想要安排一次家庭聚会。</span></p><pre style=\\\"border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;text-align: left;margin-top: 10px;margin-bottom: 10px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;\\\"><span style=\\\"display: block;background: none;height: 30px;width: 100%;background-size: 40px;background-repeat: no-repeat;background-color: #282c34;margin-bottom: -7px;border-radius: 5px;background-position: 10px 10px;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_svg/a18XcQ1EBBiaQLzhOpicu2mG9SpfuztIvgXO3p6YYyDV01sdUePuSCV9AElAl5DtPeoGWoeH2Fp06wD7rY3cUkWic1icUwC86J3ic/640?wx_fmt=svg&amp;from=appmsg&quot;);\\\"></span><div style=\\\"--en-codeblock:true;--en-meta:{&quot;title&quot;:&quot;&quot;,&quot;lang&quot;:&quot;Plain Text&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;showLine&quot;:true,&quot;lineWrap&quot;:true};box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial; margin-top: 6px;\\\"><span>sequenceDiagram</span><span><br/></span><span>    participant A as 爸爸</span><span><br/></span><span>    participant B as 妈妈</span><span><br/></span><span>    participant C as 孩子</span><span><br/></span><span>    A-&gt;&gt;B: 提议周末家庭聚会</span><span><br/></span><span>    B-&gt;&gt;C: 向孩子询问意见</span><span><br/></span><span>    C-&gt;&gt;B: 孩子表示同意</span><span><br/></span><span>    B-&gt;&gt;A: 妈妈确认计划</span><span><br/></span><span>    A-&gt;&gt;B: 预定场地</span><span><br/></span><span>    A-&gt;&gt;C: 告知孩子聚会详情</span><span><br/></span></div></pre><div style=\\\"text-align: center;\\\"><img src=\\\":/e945ba56ed1f441d8d0c81ce485fc402\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;\\\"/></div><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><strong style=\\\"color: rgb(0, 150, 136);font-weight: bold;background-attachment: scroll;background-clip: border-box;background-color: rgba(0, 0, 0, 0);background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;width: auto;height: auto;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;border-top-style: none;border-bottom-style: none;border-left-style: none;border-right-style: none;border-top-width: 3px;border-bottom-width: 3px;border-left-width: 3px;border-right-width: 3px;border-top-color: rgba(0, 0, 0, 0.4);border-bottom-color: rgba(0, 0, 0, 0.4);border-left-color: rgba(0, 0, 0, 0.4);border-right-color: rgba(0, 0, 0, 0.4);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;\\\"><span><br/></span></strong></p><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><strong style=\\\"color: rgb(0, 150, 136);font-weight: bold;background-attachment: scroll;background-clip: border-box;background-color: rgba(0, 0, 0, 0);background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;width: auto;height: auto;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;border-top-style: none;border-bottom-style: none;border-left-style: none;border-right-style: none;border-top-width: 3px;border-bottom-width: 3px;border-left-width: 3px;border-right-width: 3px;border-top-color: rgba(0, 0, 0, 0.4);border-bottom-color: rgba(0, 0, 0, 0.4);border-left-color: rgba(0, 0, 0, 0.4);border-right-color: rgba(0, 0, 0, 0.4);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;\\\"><span>说明：</span></strong><span>时序图展示了家庭成员之间如何传递信息，展示了从提议到确认的沟通过程。通过时序图，我们可以理解参与者之间的互动顺序，帮助协调工作。</span></p><h2 style=\\\"margin:0;margin-top:30px;margin-bottom:15px;margin-left:0;margin-right:0;align-items:unset;background-attachment:scroll;background-clip:border-box;background-color:unset;background-image:none;background-origin:padding-box;background-position-x:0;background-position-y:0;background-repeat:no-repeat;background-size:auto;border-top-style:none;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-width:1px;border-bottom-width:1px;border-left-width:1px;border-right-width:1px;border-top-color:rgb(0,0,0);border-bottom-color:rgb(0,0,0);border-left-color:rgb(0,0,0);border-right-color:rgb(0,0,0);border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:none;display:block;flex-direction:unset;float:unset;height:auto;justify-content:unset;line-height:1.5em;overflow-x:unset;overflow-y:unset;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;text-shadow:none;transform:none;width:auto;-webkit-box-reflect:unset\\\"><span style=\\\"font-size: 20px;color: rgb(0, 150, 136);line-height: 1.8em;letter-spacing: 0em;padding-top: 0px;padding-bottom: 0px;padding-left: 10px;padding-right: 0px;border-top-style: none;border-bottom-style: none;border-left-style: solid;border-right-style: none;border-top-width: 1px;border-bottom-width: 1px;border-left-width: 3px;border-right-width: 1px;border-top-color: rgb(0, 0, 0);border-bottom-color: rgb(0, 0, 0);border-left-color: rgb(0, 150, 136);border-right-color: rgb(0, 0, 0);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;align-items: unset;background-attachment: scroll;background-clip: border-box;background-color: unset;background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;box-shadow: none;display: block;font-weight: bold;flex-direction: unset;float: unset;height: auto;justify-content: unset;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;overflow-x: unset;overflow-y: unset;text-align: left;text-indent: 0em;text-shadow: none;transform: none;width: auto;-webkit-box-reflect: unset;\\\"><span>3. 类图（Class Diagram）：家居用品管理系统</span></span></h2><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><span>类图用于展示系统中的类及其相互关系。例如，在家庭中，我们可能需要管理家居用品，通过类图来描述家居物品及其属性。</span></p><pre style=\\\"border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;text-align: left;margin-top: 10px;margin-bottom: 10px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;\\\"><span style=\\\"display: block;background: none;height: 30px;width: 100%;background-size: 40px;background-repeat: no-repeat;background-color: #282c34;margin-bottom: -7px;border-radius: 5px;background-position: 10px 10px;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_svg/a18XcQ1EBBiaQLzhOpicu2mG9SpfuztIvgXO3p6YYyDV01sdUePuSCV9AElAl5DtPeoGWoeH2Fp06wD7rY3cUkWic1icUwC86J3ic/640?wx_fmt=svg&amp;from=appmsg&quot;);\\\"></span><div style=\\\"--en-codeblock:true;--en-meta:{&quot;title&quot;:&quot;&quot;,&quot;lang&quot;:&quot;Plain Text&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;showLine&quot;:true,&quot;lineWrap&quot;:true};box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial; margin-top: 6px;\\\"><span>classDiagram</span><span><br/></span><span>    class Furniture {</span><span><br/></span><span>        +String name</span><span><br/></span><span>        +String material</span><span><br/></span><span>        +int price</span><span><br/></span><span>    }</span><span><br/></span><span>    class Sofa {</span><span><br/></span><span>        +int seats</span><span><br/></span><span>    }</span><span><br/></span><span>    class Table {</span><span><br/></span><span>        +String shape</span><span><br/></span><span>    }</span><span><br/></span><span>    Furniture &lt;|-- Sofa</span><span><br/></span><span>    Furniture &lt;|-- Table</span><span><br/></span></div></pre><div style=\\\"text-align: center;\\\"><img src=\\\":/630cf21288a641daa40b717697ceb5b0\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;\\\"/></div><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><strong style=\\\"color: rgb(0, 150, 136);font-weight: bold;background-attachment: scroll;background-clip: border-box;background-color: rgba(0, 0, 0, 0);background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;width: auto;height: auto;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;border-top-style: none;border-bottom-style: none;border-left-style: none;border-right-style: none;border-top-width: 3px;border-bottom-width: 3px;border-left-width: 3px;border-right-width: 3px;border-top-color: rgba(0, 0, 0, 0.4);border-bottom-color: rgba(0, 0, 0, 0.4);border-left-color: rgba(0, 0, 0, 0.4);border-right-color: rgba(0, 0, 0, 0.4);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;\\\"><span>说明：</span></strong><span>这个类图展示了家居物品（如沙发和桌子）的基本属性。类图帮助我们组织物品的不同类型，清晰地展示它们的分类和属性。</span></p><h2 style=\\\"margin:0;margin-top:30px;margin-bottom:15px;margin-left:0;margin-right:0;align-items:unset;background-attachment:scroll;background-clip:border-box;background-color:unset;background-image:none;background-origin:padding-box;background-position-x:0;background-position-y:0;background-repeat:no-repeat;background-size:auto;border-top-style:none;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-width:1px;border-bottom-width:1px;border-left-width:1px;border-right-width:1px;border-top-color:rgb(0,0,0);border-bottom-color:rgb(0,0,0);border-left-color:rgb(0,0,0);border-right-color:rgb(0,0,0);border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:none;display:block;flex-direction:unset;float:unset;height:auto;justify-content:unset;line-height:1.5em;overflow-x:unset;overflow-y:unset;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;text-shadow:none;transform:none;width:auto;-webkit-box-reflect:unset\\\"><span style=\\\"font-size: 20px;color: rgb(0, 150, 136);line-height: 1.8em;letter-spacing: 0em;padding-top: 0px;padding-bottom: 0px;padding-left: 10px;padding-right: 0px;border-top-style: none;border-bottom-style: none;border-left-style: solid;border-right-style: none;border-top-width: 1px;border-bottom-width: 1px;border-left-width: 3px;border-right-width: 1px;border-top-color: rgb(0, 0, 0);border-bottom-color: rgb(0, 0, 0);border-left-color: rgb(0, 150, 136);border-right-color: rgb(0, 0, 0);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;align-items: unset;background-attachment: scroll;background-clip: border-box;background-color: unset;background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;box-shadow: none;display: block;font-weight: bold;flex-direction: unset;float: unset;height: auto;justify-content: unset;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;overflow-x: unset;overflow-y: unset;text-align: left;text-indent: 0em;text-shadow: none;transform: none;width: auto;-webkit-box-reflect: unset;\\\"><span>4. 状态图（State Diagram）：电梯运行状态</span></span></h2><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><span>状态图用于描述系统中的不同状态及状态之间的转换。假设我们家里有一部电梯，可以通过状态图展示电梯的工作状态。</span></p><pre style=\\\"border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;text-align: left;margin-top: 10px;margin-bottom: 10px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;\\\"><span style=\\\"display: block;background: none;height: 30px;width: 100%;background-size: 40px;background-repeat: no-repeat;background-color: #282c34;margin-bottom: -7px;border-radius: 5px;background-position: 10px 10px;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_svg/a18XcQ1EBBiaQLzhOpicu2mG9SpfuztIvgXO3p6YYyDV01sdUePuSCV9AElAl5DtPeoGWoeH2Fp06wD7rY3cUkWic1icUwC86J3ic/640?wx_fmt=svg&amp;from=appmsg&quot;);\\\"></span><div style=\\\"--en-codeblock:true;--en-meta:{&quot;title&quot;:&quot;&quot;,&quot;lang&quot;:&quot;Plain Text&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;showLine&quot;:true,&quot;lineWrap&quot;:true};box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial; margin-top: 6px;\\\"><span>stateDiagram-v2</span><span><br/></span><span>    [*] --&gt; 待机</span><span><br/></span><span>    待机 --&gt; [*]</span><span><br/></span><span>    待机 --&gt; 运动</span><span><br/></span><span>    运动 --&gt; 待机</span><span><br/></span><span>    运动 --&gt; 故障</span><span><br/></span><span>    故障 --&gt; [*]</span><span><br/></span></div></pre><div style=\\\"text-align: center;\\\"><img src=\\\":/7259a6f2c30d46b58a6f7823b2fb4ea6\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;\\\"/></div><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><strong style=\\\"color: rgb(0, 150, 136);font-weight: bold;background-attachment: scroll;background-clip: border-box;background-color: rgba(0, 0, 0, 0);background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;width: auto;height: auto;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;border-top-style: none;border-bottom-style: none;border-left-style: none;border-right-style: none;border-top-width: 3px;border-bottom-width: 3px;border-left-width: 3px;border-right-width: 3px;border-top-color: rgba(0, 0, 0, 0.4);border-bottom-color: rgba(0, 0, 0, 0.4);border-left-color: rgba(0, 0, 0, 0.4);border-right-color: rgba(0, 0, 0, 0.4);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;\\\"><span>说明：</span></strong><span>状态图展示了电梯如何在不同状态之间转换，如待机、运动、故障等。这种图有助于理解电梯在不同情况下的行为和反应。例如，电梯从待机状态进入运动状态，或在运动过程中发生故障后进入故障状态，最后可能返回待机状态。通过这种图表，我们能够清晰地了解电梯各个工作状态的转换过程。</span></p><h2 style=\\\"margin:0;margin-top:30px;margin-bottom:15px;margin-left:0;margin-right:0;align-items:unset;background-attachment:scroll;background-clip:border-box;background-color:unset;background-image:none;background-origin:padding-box;background-position-x:0;background-position-y:0;background-repeat:no-repeat;background-size:auto;border-top-style:none;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-width:1px;border-bottom-width:1px;border-left-width:1px;border-right-width:1px;border-top-color:rgb(0,0,0);border-bottom-color:rgb(0,0,0);border-left-color:rgb(0,0,0);border-right-color:rgb(0,0,0);border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:none;display:block;flex-direction:unset;float:unset;height:auto;justify-content:unset;line-height:1.5em;overflow-x:unset;overflow-y:unset;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;text-shadow:none;transform:none;width:auto;-webkit-box-reflect:unset\\\"><span style=\\\"font-size: 20px;color: rgb(0, 150, 136);line-height: 1.8em;letter-spacing: 0em;padding-top: 0px;padding-bottom: 0px;padding-left: 10px;padding-right: 0px;border-top-style: none;border-bottom-style: none;border-left-style: solid;border-right-style: none;border-top-width: 1px;border-bottom-width: 1px;border-left-width: 3px;border-right-width: 1px;border-top-color: rgb(0, 0, 0);border-bottom-color: rgb(0, 0, 0);border-left-color: rgb(0, 150, 136);border-right-color: rgb(0, 0, 0);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;align-items: unset;background-attachment: scroll;background-clip: border-box;background-color: unset;background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;box-shadow: none;display: block;font-weight: bold;flex-direction: unset;float: unset;height: auto;justify-content: unset;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;overflow-x: unset;overflow-y: unset;text-align: left;text-indent: 0em;text-shadow: none;transform: none;width: auto;-webkit-box-reflect: unset;\\\"><span>5. 实体关系图（ER Diagram）：图书馆管理系统</span></span></h2><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><span>实体关系图用于描述系统中的实体及它们之间的关系。例如，在家庭图书馆管理系统中，可以使用 ER 图来展示图书、用户和借阅记录之间的关系。</span></p><pre style=\\\"border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;text-align: left;margin-top: 10px;margin-bottom: 10px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;\\\"><span style=\\\"display: block;background: none;height: 30px;width: 100%;background-size: 40px;background-repeat: no-repeat;background-color: #282c34;margin-bottom: -7px;border-radius: 5px;background-position: 10px 10px;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_svg/a18XcQ1EBBiaQLzhOpicu2mG9SpfuztIvgXO3p6YYyDV01sdUePuSCV9AElAl5DtPeoGWoeH2Fp06wD7rY3cUkWic1icUwC86J3ic/640?wx_fmt=svg&amp;from=appmsg&quot;);\\\"></span><div style=\\\"--en-codeblock:true;--en-meta:{&quot;title&quot;:&quot;&quot;,&quot;lang&quot;:&quot;Plain Text&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;showLine&quot;:true,&quot;lineWrap&quot;:true};box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial; margin-top: 6px;\\\"><span>erDiagram</span><span><br/></span><span>    BOOK {</span><span><br/></span><span>        string title</span><span><br/></span><span>        string author</span><span><br/></span><span>        int isbn</span><span><br/></span><span>    }</span><span><br/></span><span>    USER {</span><span><br/></span><span>        string name</span><span><br/></span><span>        int id</span><span><br/></span><span>    }</span><span><br/></span><span>    BORROW {</span><span><br/></span><span>        string borrowDate</span><span><br/></span><span>        string returnDate</span><span><br/></span><span>    }</span><span><br/></span><span>    USER ||--o{ BORROW : borrows</span><span><br/></span><span>    BOOK ||--o{ BORROW : is_borrowed</span><span><br/></span></div></pre><div style=\\\"text-align: center;\\\"><img src=\\\":/1cf54e6860c04655a8b9744971396a8b\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;\\\"/></div><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><strong style=\\\"color: rgb(0, 150, 136);font-weight: bold;background-attachment: scroll;background-clip: border-box;background-color: rgba(0, 0, 0, 0);background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;width: auto;height: auto;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;border-top-style: none;border-bottom-style: none;border-left-style: none;border-right-style: none;border-top-width: 3px;border-bottom-width: 3px;border-left-width: 3px;border-right-width: 3px;border-top-color: rgba(0, 0, 0, 0.4);border-bottom-color: rgba(0, 0, 0, 0.4);border-left-color: rgba(0, 0, 0, 0.4);border-right-color: rgba(0, 0, 0, 0.4);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;\\\"><span>说明：</span></strong><span>ER 图帮助我们理解图书馆中数据实体之间的关系，例如用户借书的过程。这种图对于设计和管理数据库系统非常有帮助。</span></p><h2 style=\\\"margin:0;margin-top:30px;margin-bottom:15px;margin-left:0;margin-right:0;align-items:unset;background-attachment:scroll;background-clip:border-box;background-color:unset;background-image:none;background-origin:padding-box;background-position-x:0;background-position-y:0;background-repeat:no-repeat;background-size:auto;border-top-style:none;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-width:1px;border-bottom-width:1px;border-left-width:1px;border-right-width:1px;border-top-color:rgb(0,0,0);border-bottom-color:rgb(0,0,0);border-left-color:rgb(0,0,0);border-right-color:rgb(0,0,0);border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:none;display:block;flex-direction:unset;float:unset;height:auto;justify-content:unset;line-height:1.5em;overflow-x:unset;overflow-y:unset;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;text-shadow:none;transform:none;width:auto;-webkit-box-reflect:unset\\\"><span style=\\\"font-size: 20px;color: rgb(0, 150, 136);line-height: 1.8em;letter-spacing: 0em;padding-top: 0px;padding-bottom: 0px;padding-left: 10px;padding-right: 0px;border-top-style: none;border-bottom-style: none;border-left-style: solid;border-right-style: none;border-top-width: 1px;border-bottom-width: 1px;border-left-width: 3px;border-right-width: 1px;border-top-color: rgb(0, 0, 0);border-bottom-color: rgb(0, 0, 0);border-left-color: rgb(0, 150, 136);border-right-color: rgb(0, 0, 0);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;align-items: unset;background-attachment: scroll;background-clip: border-box;background-color: unset;background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;box-shadow: none;display: block;font-weight: bold;flex-direction: unset;float: unset;height: auto;justify-content: unset;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;overflow-x: unset;overflow-y: unset;text-align: left;text-indent: 0em;text-shadow: none;transform: none;width: auto;-webkit-box-reflect: unset;\\\"><span>6. 甘特图（Gantt Chart）：家庭假期计划</span></span></h2><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><span>甘特图广泛用于项目管理，它能够帮助我们管理项目任务的时间安排。假设我们计划一个家庭假期，甘特图可以帮助我们安排不同的活动和任务。</span></p><pre style=\\\"border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;text-align: left;margin-top: 10px;margin-bottom: 10px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;\\\"><span style=\\\"display: block;background: none;height: 30px;width: 100%;background-size: 40px;background-repeat: no-repeat;background-color: #282c34;margin-bottom: -7px;border-radius: 5px;background-position: 10px 10px;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_svg/a18XcQ1EBBiaQLzhOpicu2mG9SpfuztIvgXO3p6YYyDV01sdUePuSCV9AElAl5DtPeoGWoeH2Fp06wD7rY3cUkWic1icUwC86J3ic/640?wx_fmt=svg&amp;from=appmsg&quot;);\\\"></span><div style=\\\"--en-codeblock:true;--en-meta:{&quot;title&quot;:&quot;&quot;,&quot;lang&quot;:&quot;Plain Text&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;showLine&quot;:true,&quot;lineWrap&quot;:true};box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial; margin-top: 6px;\\\"><span>gantt</span><span><br/></span><span>    title 家庭假期计划</span><span><br/></span><span>    dateFormat  YYYY-MM-DD</span><span><br/></span><span>    section 准备阶段</span><span><br/></span><span>    预定机票  :a1, 2025-07-01, 2d</span><span><br/></span><span>    安排住宿  :after a1, 3d</span><span><br/></span><span>    section 旅行阶段</span><span><br/></span><span>    旅游景点  :2025-07-10, 5d</span><span><br/></span><span>    休闲活动  :2025-07-15, 3d</span><span><br/></span><span><br/></span></div></pre><div style=\\\"text-align: center;\\\"><img src=\\\":/6c2126c8d4c442f4ad594d62e425b855\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;\\\"/></div><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><strong style=\\\"color: rgb(0, 150, 136);font-weight: bold;background-attachment: scroll;background-clip: border-box;background-color: rgba(0, 0, 0, 0);background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;width: auto;height: auto;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;border-top-style: none;border-bottom-style: none;border-left-style: none;border-right-style: none;border-top-width: 3px;border-bottom-width: 3px;border-left-width: 3px;border-right-width: 3px;border-top-color: rgba(0, 0, 0, 0.4);border-bottom-color: rgba(0, 0, 0, 0.4);border-left-color: rgba(0, 0, 0, 0.4);border-right-color: rgba(0, 0, 0, 0.4);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;\\\"><span>说明：</span></strong><span>甘特图清晰展示了各个任务的开始和结束时间，帮助我们确保假期活动的顺利进行。它能够帮助我们合理安排时间，提高效率。</span></p><h2 style=\\\"margin:0;margin-top:30px;margin-bottom:15px;margin-left:0;margin-right:0;align-items:unset;background-attachment:scroll;background-clip:border-box;background-color:unset;background-image:none;background-origin:padding-box;background-position-x:0;background-position-y:0;background-repeat:no-repeat;background-size:auto;border-top-style:none;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-width:1px;border-bottom-width:1px;border-left-width:1px;border-right-width:1px;border-top-color:rgb(0,0,0);border-bottom-color:rgb(0,0,0);border-left-color:rgb(0,0,0);border-right-color:rgb(0,0,0);border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:none;display:block;flex-direction:unset;float:unset;height:auto;justify-content:unset;line-height:1.5em;overflow-x:unset;overflow-y:unset;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;text-shadow:none;transform:none;width:auto;-webkit-box-reflect:unset\\\"><span style=\\\"font-size: 20px;color: rgb(0, 150, 136);line-height: 1.8em;letter-spacing: 0em;padding-top: 0px;padding-bottom: 0px;padding-left: 10px;padding-right: 0px;border-top-style: none;border-bottom-style: none;border-left-style: solid;border-right-style: none;border-top-width: 1px;border-bottom-width: 1px;border-left-width: 3px;border-right-width: 1px;border-top-color: rgb(0, 0, 0);border-bottom-color: rgb(0, 0, 0);border-left-color: rgb(0, 150, 136);border-right-color: rgb(0, 0, 0);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;align-items: unset;background-attachment: scroll;background-clip: border-box;background-color: unset;background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;box-shadow: none;display: block;font-weight: bold;flex-direction: unset;float: unset;height: auto;justify-content: unset;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;overflow-x: unset;overflow-y: unset;text-align: left;text-indent: 0em;text-shadow: none;transform: none;width: auto;-webkit-box-reflect: unset;\\\"><span>7. 用户旅程图（User Journey Diagram）：购物网站的用户体验</span></span></h2><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><span>用户旅程图帮助我们理解用户与产品或服务的互动过程。在购物网站的例子中，我们可以用它来展示用户从浏览商品到完成购买的过程。</span></p><pre style=\\\"border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;text-align: left;margin-top: 10px;margin-bottom: 10px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;\\\"><span style=\\\"display: block;background: none;height: 30px;width: 100%;background-size: 40px;background-repeat: no-repeat;background-color: #282c34;margin-bottom: -7px;border-radius: 5px;background-position: 10px 10px;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_svg/a18XcQ1EBBiaQLzhOpicu2mG9SpfuztIvgXO3p6YYyDV01sdUePuSCV9AElAl5DtPeoGWoeH2Fp06wD7rY3cUkWic1icUwC86J3ic/640?wx_fmt=svg&amp;from=appmsg&quot;);\\\"></span><div style=\\\"--en-codeblock:true;--en-meta:{&quot;title&quot;:&quot;&quot;,&quot;lang&quot;:&quot;Plain Text&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;showLine&quot;:true,&quot;lineWrap&quot;:true};box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial; margin-top: 6px;\\\"><span>journey</span><span><br/></span><span>    title 用户购物旅程</span><span><br/></span><span>    section 购物开始</span><span><br/></span><span>      用户浏览商品: 5: 选择商品并查看详情</span><span><br/></span><span>    section 添加购物车</span><span><br/></span><span>      用户加入购物车: 4: 添加商品到购物车</span><span><br/></span><span>    section 付款流程</span><span><br/></span><span>      用户填写地址: 3: 填写收货地址</span><span><br/></span><span>      用户付款: 5: 完成付款</span><span><br/></span><span>    section 订单完成</span><span><br/></span><span>      用户确认收货: 5: 完成收货并评价商品</span><span><br/></span></div></pre><div style=\\\"text-align: center;\\\"><img src=\\\":/879e5931929a4f69bb1ef977470a5d63\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;\\\"/></div><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><strong style=\\\"color: rgb(0, 150, 136);font-weight: bold;background-attachment: scroll;background-clip: border-box;background-color: rgba(0, 0, 0, 0);background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;width: auto;height: auto;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;border-top-style: none;border-bottom-style: none;border-left-style: none;border-right-style: none;border-top-width: 3px;border-bottom-width: 3px;border-left-width: 3px;border-right-width: 3px;border-top-color: rgba(0, 0, 0, 0.4);border-bottom-color: rgba(0, 0, 0, 0.4);border-left-color: rgba(0, 0, 0, 0.4);border-right-color: rgba(0, 0, 0, 0.4);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;\\\"><span>说明：</span></strong><span>用户旅程图帮助我们识别用户的痛点和关键触点，优化购物体验。通过分析用户旅程，我们可以提高产品的易用性和用户满意度。</span></p><h2 style=\\\"margin:0;margin-top:30px;margin-bottom:15px;margin-left:0;margin-right:0;align-items:unset;background-attachment:scroll;background-clip:border-box;background-color:unset;background-image:none;background-origin:padding-box;background-position-x:0;background-position-y:0;background-repeat:no-repeat;background-size:auto;border-top-style:none;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-width:1px;border-bottom-width:1px;border-left-width:1px;border-right-width:1px;border-top-color:rgb(0,0,0);border-bottom-color:rgb(0,0,0);border-left-color:rgb(0,0,0);border-right-color:rgb(0,0,0);border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:none;display:block;flex-direction:unset;float:unset;height:auto;justify-content:unset;line-height:1.5em;overflow-x:unset;overflow-y:unset;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;text-shadow:none;transform:none;width:auto;-webkit-box-reflect:unset\\\"><span style=\\\"font-size: 20px;color: rgb(0, 150, 136);line-height: 1.8em;letter-spacing: 0em;padding-top: 0px;padding-bottom: 0px;padding-left: 10px;padding-right: 0px;border-top-style: none;border-bottom-style: none;border-left-style: solid;border-right-style: none;border-top-width: 1px;border-bottom-width: 1px;border-left-width: 3px;border-right-width: 1px;border-top-color: rgb(0, 0, 0);border-bottom-color: rgb(0, 0, 0);border-left-color: rgb(0, 150, 136);border-right-color: rgb(0, 0, 0);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;align-items: unset;background-attachment: scroll;background-clip: border-box;background-color: unset;background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;box-shadow: none;display: block;font-weight: bold;flex-direction: unset;float: unset;height: auto;justify-content: unset;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;overflow-x: unset;overflow-y: unset;text-align: left;text-indent: 0em;text-shadow: none;transform: none;width: auto;-webkit-box-reflect: unset;\\\"><span>8. Git分支图（Git Branch Diagram）：团队协作流程</span></span></h2><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><span>Git 分支图是用于展示版本控制中的分支结构。在团队开发项目中，Git 分支图帮助开发人员理解不同分支的合并和工作流。</span></p><div style=\\\"margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 10px;padding-right: 10px;background-attachment: scroll;background-clip: border-box;background-color: rgba(0, 0, 0, 0);background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;width: auto;font-family: Optima, 'Microsoft YaHei', PingFangSC-regular, serif;font-size: 16px;color: rgb(0, 0, 0);line-height: 1.5em;word-spacing: 0em;letter-spacing: 0em;word-break: break-word;overflow-wrap: break-word;text-align: left;\\\"><pre style=\\\"border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;text-align: left;margin-top: 10px;margin-bottom: 10px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;\\\"><span style=\\\"display: block;background: none;height: 30px;width: 100%;background-size: 40px;background-repeat: no-repeat;background-color: #282c34;margin-bottom: -7px;border-radius: 5px;background-position: 10px 10px;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_svg/a18XcQ1EBBiaQLzhOpicu2mG9SpfuztIvgXO3p6YYyDV01sdUePuSCV9AElAl5DtPeoGWoeH2Fp06wD7rY3cUkWic1icUwC86J3ic/640?wx_fmt=svg&amp;from=appmsg&quot;);\\\"></span><div style=\\\"--en-codeblock:true;--en-meta:{&quot;title&quot;:&quot;&quot;,&quot;lang&quot;:&quot;Plain Text&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;showLine&quot;:true,&quot;lineWrap&quot;:true};box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial; margin-top: 6px;\\\"><span>gitGraph</span><span><br/></span><span>    commit</span><span><br/></span><span>    commit</span><span><br/></span><span>    branch develop</span><span><br/></span><span>    checkout develop</span><span><br/></span><span>    commit</span><span><br/></span><span>    commit</span><span><br/></span><span>    checkout main</span><span><br/></span><span>    merge develop</span><span><br/></span><span>    commit</span><span><br/></span><span>    commit</span></div></pre></div><div style=\\\"text-align: center;\\\"><img src=\\\":/75d7f9a05a1a461f85f2850832ec4a73\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;\\\"/></div><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><span>说明：</span><span>Git 分支图展示了如何创建、合并和删除分支，帮助团队成员理解代码的演变过程。它帮助团队成员避免冲突，保持项目的整洁。</span></p><h2 style=\\\"margin:0;margin-top:30px;margin-bottom:15px;margin-left:0;margin-right:0;align-items:unset;background-attachment:scroll;background-clip:border-box;background-color:unset;background-image:none;background-origin:padding-box;background-position-x:0;background-position-y:0;background-repeat:no-repeat;background-size:auto;border-top-style:none;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-width:1px;border-bottom-width:1px;border-left-width:1px;border-right-width:1px;border-top-color:rgb(0,0,0);border-bottom-color:rgb(0,0,0);border-left-color:rgb(0,0,0);border-right-color:rgb(0,0,0);border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:none;display:block;flex-direction:unset;float:unset;height:auto;justify-content:unset;line-height:1.5em;overflow-x:unset;overflow-y:unset;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;text-shadow:none;transform:none;width:auto;-webkit-box-reflect:unset\\\"><span style=\\\"font-size: 20px;color: rgb(0, 150, 136);line-height: 1.8em;letter-spacing: 0em;padding-top: 0px;padding-bottom: 0px;padding-left: 10px;padding-right: 0px;border-top-style: none;border-bottom-style: none;border-left-style: solid;border-right-style: none;border-top-width: 1px;border-bottom-width: 1px;border-left-width: 3px;border-right-width: 1px;border-top-color: rgb(0, 0, 0);border-bottom-color: rgb(0, 0, 0);border-left-color: rgb(0, 150, 136);border-right-color: rgb(0, 0, 0);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;align-items: unset;background-attachment: scroll;background-clip: border-box;background-color: unset;background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;box-shadow: none;display: block;font-weight: bold;flex-direction: unset;float: unset;height: auto;justify-content: unset;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;overflow-x: unset;overflow-y: unset;text-align: left;text-indent: 0em;text-shadow: none;transform: none;width: auto;-webkit-box-reflect: unset;\\\"><span>9. 饼图（Pie Chart）：家庭预算分配</span></span></h2><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><span>饼图用于展示不同部分占整体的比例。在家庭预算的管理中，我们可以使用饼图展示各项开支的比例。</span></p><pre style=\\\"border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;text-align: left;margin-top: 10px;margin-bottom: 10px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;\\\"><span style=\\\"display: block;background: none;height: 30px;width: 100%;background-size: 40px;background-repeat: no-repeat;background-color: #282c34;margin-bottom: -7px;border-radius: 5px;background-position: 10px 10px;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_svg/a18XcQ1EBBiaQLzhOpicu2mG9SpfuztIvgXO3p6YYyDV01sdUePuSCV9AElAl5DtPeoGWoeH2Fp06wD7rY3cUkWic1icUwC86J3ic/640?wx_fmt=svg&amp;from=appmsg&quot;);\\\"></span><div style=\\\"--en-codeblock:true;--en-meta:{&quot;title&quot;:&quot;&quot;,&quot;lang&quot;:&quot;Plain Text&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;showLine&quot;:true,&quot;lineWrap&quot;:true};box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial; margin-top: 6px;\\\"><span>pie</span><span><br/></span><span>    title 家庭预算</span><span><br/></span><span>    </span><span style=\\\"color: #98c379;line-height: 26px;\\\"><span>&quot;食品&quot;</span></span><span> : 30</span><span><br/></span><span>    </span><span style=\\\"color: #98c379;line-height: 26px;\\\"><span>&quot;住房&quot;</span></span><span> : 40</span><span><br/></span><span>    </span><span style=\\\"color: #98c379;line-height: 26px;\\\"><span>&quot;教育&quot;</span></span><span> : 20</span><span><br/></span><span>    </span><span style=\\\"color: #98c379;line-height: 26px;\\\"><span>&quot;娱乐&quot;</span></span><span> : 10</span><span><br/></span></div></pre><div style=\\\"text-align: center;\\\"><img src=\\\":/c612b27617624c499dbdae174aafe9ab\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;\\\"/></div><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><strong style=\\\"color: rgb(0, 150, 136);font-weight: bold;background-attachment: scroll;background-clip: border-box;background-color: rgba(0, 0, 0, 0);background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;width: auto;height: auto;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;border-top-style: none;border-bottom-style: none;border-left-style: none;border-right-style: none;border-top-width: 3px;border-bottom-width: 3px;border-left-width: 3px;border-right-width: 3px;border-top-color: rgba(0, 0, 0, 0.4);border-bottom-color: rgba(0, 0, 0, 0.4);border-left-color: rgba(0, 0, 0, 0.4);border-right-color: rgba(0, 0, 0, 0.4);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;\\\"><span>说明：</span></strong><span>饼图帮助我们了解不同支出项的比例，例如食品、住房、教育和娱乐等。通过饼图，家庭成员可以合理分配资金，避免过度消费。</span></p><h2 style=\\\"margin:0;margin-top:30px;margin-bottom:15px;margin-left:0;margin-right:0;align-items:unset;background-attachment:scroll;background-clip:border-box;background-color:unset;background-image:none;background-origin:padding-box;background-position-x:0;background-position-y:0;background-repeat:no-repeat;background-size:auto;border-top-style:none;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-width:1px;border-bottom-width:1px;border-left-width:1px;border-right-width:1px;border-top-color:rgb(0,0,0);border-bottom-color:rgb(0,0,0);border-left-color:rgb(0,0,0);border-right-color:rgb(0,0,0);border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:none;display:block;flex-direction:unset;float:unset;height:auto;justify-content:unset;line-height:1.5em;overflow-x:unset;overflow-y:unset;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;text-shadow:none;transform:none;width:auto;-webkit-box-reflect:unset\\\"><span style=\\\"font-size: 20px;color: rgb(0, 150, 136);line-height: 1.8em;letter-spacing: 0em;padding-top: 0px;padding-bottom: 0px;padding-left: 10px;padding-right: 0px;border-top-style: none;border-bottom-style: none;border-left-style: solid;border-right-style: none;border-top-width: 1px;border-bottom-width: 1px;border-left-width: 3px;border-right-width: 1px;border-top-color: rgb(0, 0, 0);border-bottom-color: rgb(0, 0, 0);border-left-color: rgb(0, 150, 136);border-right-color: rgb(0, 0, 0);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;align-items: unset;background-attachment: scroll;background-clip: border-box;background-color: unset;background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;box-shadow: none;display: block;font-weight: bold;flex-direction: unset;float: unset;height: auto;justify-content: unset;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;overflow-x: unset;overflow-y: unset;text-align: left;text-indent: 0em;text-shadow: none;transform: none;width: auto;-webkit-box-reflect: unset;\\\"><span>10. 思维导图（Mindmap）：家庭计划</span></span></h2><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><span>思维导图用于展示想法、任务或概念之间的关系。在家庭计划中，我们可以使用思维导图来整理活动、任务和目标。</span></p><pre style=\\\"border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;text-align: left;margin-top: 10px;margin-bottom: 10px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;\\\"><span style=\\\"display: block;background: none;height: 30px;width: 100%;background-size: 40px;background-repeat: no-repeat;background-color: #282c34;margin-bottom: -7px;border-radius: 5px;background-position: 10px 10px;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_svg/a18XcQ1EBBiaQLzhOpicu2mG9SpfuztIvgXO3p6YYyDV01sdUePuSCV9AElAl5DtPeoGWoeH2Fp06wD7rY3cUkWic1icUwC86J3ic/640?wx_fmt=svg&amp;from=appmsg&quot;);\\\"></span><div style=\\\"--en-codeblock:true;--en-meta:{&quot;title&quot;:&quot;&quot;,&quot;lang&quot;:&quot;Plain Text&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;showLine&quot;:true,&quot;lineWrap&quot;:true};box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial; margin-top: 6px;\\\"><span>mindmap</span><span><br/></span><span>  root</span><span><br/></span><span>    子任务1</span><span><br/></span><span>      子任务1.1</span><span><br/></span><span>      子任务1.2</span><span><br/></span><span>    子任务2</span><span><br/></span><span>      子任务2.1</span><span><br/></span></div></pre><div style=\\\"text-align: center;\\\"><img src=\\\":/df6438e2a5964401856de6b39395c13b\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;\\\"/></div><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><strong style=\\\"color: rgb(0, 150, 136);font-weight: bold;background-attachment: scroll;background-clip: border-box;background-color: rgba(0, 0, 0, 0);background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;width: auto;height: auto;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;border-top-style: none;border-bottom-style: none;border-left-style: none;border-right-style: none;border-top-width: 3px;border-bottom-width: 3px;border-left-width: 3px;border-right-width: 3px;border-top-color: rgba(0, 0, 0, 0.4);border-bottom-color: rgba(0, 0, 0, 0.4);border-left-color: rgba(0, 0, 0, 0.4);border-right-color: rgba(0, 0, 0, 0.4);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;\\\"><span>说明：</span></strong><span>思维导图展示了家庭计划中的各项任务及其优先级。它帮助家庭成员理清思路，确保计划的顺利执行。</span></p><h2 style=\\\"margin:0;margin-top:30px;margin-bottom:15px;margin-left:0;margin-right:0;align-items:unset;background-attachment:scroll;background-clip:border-box;background-color:unset;background-image:none;background-origin:padding-box;background-position-x:0;background-position-y:0;background-repeat:no-repeat;background-size:auto;border-top-style:none;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-width:1px;border-bottom-width:1px;border-left-width:1px;border-right-width:1px;border-top-color:rgb(0,0,0);border-bottom-color:rgb(0,0,0);border-left-color:rgb(0,0,0);border-right-color:rgb(0,0,0);border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:none;display:block;flex-direction:unset;float:unset;height:auto;justify-content:unset;line-height:1.5em;overflow-x:unset;overflow-y:unset;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;text-shadow:none;transform:none;width:auto;-webkit-box-reflect:unset\\\"><span style=\\\"font-size: 20px;color: rgb(0, 150, 136);line-height: 1.8em;letter-spacing: 0em;padding-top: 0px;padding-bottom: 0px;padding-left: 10px;padding-right: 0px;border-top-style: none;border-bottom-style: none;border-left-style: solid;border-right-style: none;border-top-width: 1px;border-bottom-width: 1px;border-left-width: 3px;border-right-width: 1px;border-top-color: rgb(0, 0, 0);border-bottom-color: rgb(0, 0, 0);border-left-color: rgb(0, 150, 136);border-right-color: rgb(0, 0, 0);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;align-items: unset;background-attachment: scroll;background-clip: border-box;background-color: unset;background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;box-shadow: none;display: block;font-weight: bold;flex-direction: unset;float: unset;height: auto;justify-content: unset;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;overflow-x: unset;overflow-y: unset;text-align: left;text-indent: 0em;text-shadow: none;transform: none;width: auto;-webkit-box-reflect: unset;\\\"><span>13. 象限图（Quadrant Chart）：目标设定</span></span></h2><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><span>象限图（Quadrant Chart）是一种通过将数据点分布在四个象限中，帮助我们快速分析数据的工具。它非常适合用来展示和比较不同项目或活动在两个变量（如影响力、参与度等）上的表现。在营销活动分析中，象限图可以帮助我们根据活动的</span><strong style=\\\"color: rgb(0, 150, 136);font-weight: bold;background-attachment: scroll;background-clip: border-box;background-color: rgba(0, 0, 0, 0);background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;width: auto;height: auto;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;border-top-style: none;border-bottom-style: none;border-left-style: none;border-right-style: none;border-top-width: 3px;border-bottom-width: 3px;border-left-width: 3px;border-right-width: 3px;border-top-color: rgba(0, 0, 0, 0.4);border-bottom-color: rgba(0, 0, 0, 0.4);border-left-color: rgba(0, 0, 0, 0.4);border-right-color: rgba(0, 0, 0, 0.4);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;\\\"><span>覆盖率（Reach）和参与度（Engagement）</span></strong><span>来做出战略决策。</span></p><pre style=\\\"border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;text-align: left;margin-top: 10px;margin-bottom: 10px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;\\\"><span style=\\\"display: block;background: none;height: 30px;width: 100%;background-size: 40px;background-repeat: no-repeat;background-color: #282c34;margin-bottom: -7px;border-radius: 5px;background-position: 10px 10px;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_svg/a18XcQ1EBBiaQLzhOpicu2mG9SpfuztIvgXO3p6YYyDV01sdUePuSCV9AElAl5DtPeoGWoeH2Fp06wD7rY3cUkWic1icUwC86J3ic/640?wx_fmt=svg&amp;from=appmsg&quot;);\\\"></span><div style=\\\"--en-codeblock:true;--en-meta:{&quot;title&quot;:&quot;&quot;,&quot;lang&quot;:&quot;Plain Text&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;showLine&quot;:true,&quot;lineWrap&quot;:true};box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial; margin-top: 6px;\\\"><span>quadrantChart</span><span><br/></span><span>    title Reach and engagement of campaigns</span><span><br/></span><span>    x-axis Low Reach --&gt; High Reach</span><span><br/></span><span>    y-axis Low Engagement --&gt; High Engagement</span><span><br/></span><span>    quadrant-1 We should expand</span><span><br/></span><span>    quadrant-2 Need to promote</span><span><br/></span><span>    quadrant-3 Re-evaluate</span><span><br/></span><span>    quadrant-4 May be improved</span><span><br/></span><span>    Campaign A: [0.3, 0.6]</span><span><br/></span><span>    Campaign B: [0.45, 0.23]</span><span><br/></span><span>    Campaign C: [0.57, 0.69]</span><span><br/></span><span>    Campaign D: [0.78, 0.34]</span><span><br/></span><span>    Campaign E: [0.40, 0.34]</span><span><br/></span><span>    Campaign F: [0.35, 0.78]</span><span><br/></span></div></pre><div style=\\\"text-align: center;\\\"><img src=\\\":/9118daea5d0e45c18164a6086f0a4dff\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;\\\"/></div><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><strong style=\\\"color: rgb(0, 150, 136);font-weight: bold;background-attachment: scroll;background-clip: border-box;background-color: rgba(0, 0, 0, 0);background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;width: auto;height: auto;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;border-top-style: none;border-bottom-style: none;border-left-style: none;border-right-style: none;border-top-width: 3px;border-bottom-width: 3px;border-left-width: 3px;border-right-width: 3px;border-top-color: rgba(0, 0, 0, 0.4);border-bottom-color: rgba(0, 0, 0, 0.4);border-left-color: rgba(0, 0, 0, 0.4);border-right-color: rgba(0, 0, 0, 0.4);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;\\\"><span>说明：</span></strong><span>在这个象限图中，我们展示了不同营销活动在覆盖率和参与度两个维度上的位置。象限图将图表分为四个区域，帮助我们更好地理解每个活动的表现。</span></p><h2 style=\\\"margin:0;margin-top:30px;margin-bottom:15px;margin-left:0;margin-right:0;align-items:unset;background-attachment:scroll;background-clip:border-box;background-color:unset;background-image:none;background-origin:padding-box;background-position-x:0;background-position-y:0;background-repeat:no-repeat;background-size:auto;border-top-style:none;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-width:1px;border-bottom-width:1px;border-left-width:1px;border-right-width:1px;border-top-color:rgb(0,0,0);border-bottom-color:rgb(0,0,0);border-left-color:rgb(0,0,0);border-right-color:rgb(0,0,0);border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:none;display:block;flex-direction:unset;float:unset;height:auto;justify-content:unset;line-height:1.5em;overflow-x:unset;overflow-y:unset;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;text-shadow:none;transform:none;width:auto;-webkit-box-reflect:unset\\\"><span style=\\\"font-size: 20px;color: rgb(0, 150, 136);line-height: 1.8em;letter-spacing: 0em;padding-top: 0px;padding-bottom: 0px;padding-left: 10px;padding-right: 0px;border-top-style: none;border-bottom-style: none;border-left-style: solid;border-right-style: none;border-top-width: 1px;border-bottom-width: 1px;border-left-width: 3px;border-right-width: 1px;border-top-color: rgb(0, 0, 0);border-bottom-color: rgb(0, 0, 0);border-left-color: rgb(0, 150, 136);border-right-color: rgb(0, 0, 0);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;align-items: unset;background-attachment: scroll;background-clip: border-box;background-color: unset;background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;box-shadow: none;display: block;font-weight: bold;flex-direction: unset;float: unset;height: auto;justify-content: unset;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;overflow-x: unset;overflow-y: unset;text-align: left;text-indent: 0em;text-shadow: none;transform: none;width: auto;-webkit-box-reflect: unset;\\\"><span>13. 坐标轴图（XY Chart）：家庭财务跟踪</span></span></h2><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><span>坐标轴图（XY Chart）适用于展示两个变量之间的关系。我们可以使用坐标轴图来跟踪月度销售收入的变化趋势。</span></p><pre style=\\\"border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;text-align: left;margin-top: 10px;margin-bottom: 10px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;\\\"><span style=\\\"display: block;background: none;height: 30px;width: 100%;background-size: 40px;background-repeat: no-repeat;background-color: #282c34;margin-bottom: -7px;border-radius: 5px;background-position: 10px 10px;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_svg/a18XcQ1EBBiaQLzhOpicu2mG9SpfuztIvgXO3p6YYyDV01sdUePuSCV9AElAl5DtPeoGWoeH2Fp06wD7rY3cUkWic1icUwC86J3ic/640?wx_fmt=svg&amp;from=appmsg&quot;);\\\"></span><div style=\\\"--en-codeblock:true;--en-meta:{&quot;title&quot;:&quot;&quot;,&quot;lang&quot;:&quot;Plain Text&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;showLine&quot;:true,&quot;lineWrap&quot;:true};box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial; margin-top: 6px;\\\"><span><br/></span><span>    xychart-beta</span><span><br/></span><span>    title </span><span style=\\\"color: #98c379;line-height: 26px;\\\"><span>&quot;Sales Revenue&quot;</span></span><span><br/></span><span>    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]</span><span><br/></span><span>    y-axis </span><span style=\\\"color: #98c379;line-height: 26px;\\\"><span>&quot;Revenue (in $)&quot;</span></span><span> 4000 --&gt; 11000</span><span><br/></span><span>    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]</span><span><br/></span><span>    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]</span><span><br/></span></div></pre><div style=\\\"text-align: center;\\\"><img src=\\\":/a16b556812474b6582f972766a49ff58\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;\\\"/></div><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><strong style=\\\"color: rgb(0, 150, 136);font-weight: bold;background-attachment: scroll;background-clip: border-box;background-color: rgba(0, 0, 0, 0);background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;width: auto;height: auto;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;border-top-style: none;border-bottom-style: none;border-left-style: none;border-right-style: none;border-top-width: 3px;border-bottom-width: 3px;border-left-width: 3px;border-right-width: 3px;border-top-color: rgba(0, 0, 0, 0.4);border-bottom-color: rgba(0, 0, 0, 0.4);border-left-color: rgba(0, 0, 0, 0.4);border-right-color: rgba(0, 0, 0, 0.4);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;\\\"><span>说明：</span></strong><span>坐标轴图展示了每个月销售收入的变化趋势。通过该图表，我们可以清晰地看到每个月的收入情况，并分析收入波动的原因。图中的柱状图和折线图共同展示了销售收入的月度表现，从而帮助我们评估年度销售目标的达成情况，并优化销售策略。</span></p><h2 style=\\\"margin:0;margin-top:30px;margin-bottom:15px;margin-left:0;margin-right:0;align-items:unset;background-attachment:scroll;background-clip:border-box;background-color:unset;background-image:none;background-origin:padding-box;background-position-x:0;background-position-y:0;background-repeat:no-repeat;background-size:auto;border-top-style:none;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-width:1px;border-bottom-width:1px;border-left-width:1px;border-right-width:1px;border-top-color:rgb(0,0,0);border-bottom-color:rgb(0,0,0);border-left-color:rgb(0,0,0);border-right-color:rgb(0,0,0);border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:none;display:block;flex-direction:unset;float:unset;height:auto;justify-content:unset;line-height:1.5em;overflow-x:unset;overflow-y:unset;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;text-shadow:none;transform:none;width:auto;-webkit-box-reflect:unset\\\"><span style=\\\"font-size: 20px;color: rgb(0, 150, 136);line-height: 1.8em;letter-spacing: 0em;padding-top: 0px;padding-bottom: 0px;padding-left: 10px;padding-right: 0px;border-top-style: none;border-bottom-style: none;border-left-style: solid;border-right-style: none;border-top-width: 1px;border-bottom-width: 1px;border-left-width: 3px;border-right-width: 1px;border-top-color: rgb(0, 0, 0);border-bottom-color: rgb(0, 0, 0);border-left-color: rgb(0, 150, 136);border-right-color: rgb(0, 0, 0);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;align-items: unset;background-attachment: scroll;background-clip: border-box;background-color: unset;background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;box-shadow: none;display: block;font-weight: bold;flex-direction: unset;float: unset;height: auto;justify-content: unset;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;overflow-x: unset;overflow-y: unset;text-align: left;text-indent: 0em;text-shadow: none;transform: none;width: auto;-webkit-box-reflect: unset;\\\"><span>14. 块图（Block Diagram）：家居电器连接</span></span></h2><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><span>块图用于表示系统中的各个模块和它们之间的关系。在家居自动化系统中，块图可以帮助我们展示不同家居电器的连接方式。</span></p><pre style=\\\"border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;text-align: left;margin-top: 10px;margin-bottom: 10px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;\\\"><span style=\\\"display: block;background: none;height: 30px;width: 100%;background-size: 40px;background-repeat: no-repeat;background-color: #282c34;margin-bottom: -7px;border-radius: 5px;background-position: 10px 10px;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_svg/a18XcQ1EBBiaQLzhOpicu2mG9SpfuztIvgXO3p6YYyDV01sdUePuSCV9AElAl5DtPeoGWoeH2Fp06wD7rY3cUkWic1icUwC86J3ic/640?wx_fmt=svg&amp;from=appmsg&quot;);\\\"></span><div style=\\\"--en-codeblock:true;--en-meta:{&quot;title&quot;:&quot;&quot;,&quot;lang&quot;:&quot;Plain Text&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;showLine&quot;:true,&quot;lineWrap&quot;:true};box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial; margin-top: 6px;\\\"><span>block-beta</span><span><br/></span><span>    columns 3</span><span><br/></span><span>    doc&gt;</span><span style=\\\"color: #98c379;line-height: 26px;\\\"><span>&quot;Document&quot;</span></span><span>]:3</span><span><br/></span><span>    space down1&lt;[</span><span style=\\\"color: #98c379;line-height: 26px;\\\"><span>&quot; &quot;</span></span><span>]&gt;(down) space</span><span><br/></span><span><br/></span><span>  block:e:3</span><span><br/></span><span>          l[</span><span style=\\\"color: #98c379;line-height: 26px;\\\"><span>&quot;left&quot;</span></span><span>]</span><span><br/></span><span>          m(</span><span style=\\\"color: #98c379;line-height: 26px;\\\"><span>&quot;A wide one in the middle&quot;</span></span><span>)</span><span><br/></span><span>          r[</span><span style=\\\"color: #98c379;line-height: 26px;\\\"><span>&quot;right&quot;</span></span><span>]</span><span><br/></span><span>  end</span><span><br/></span><span>    space down2&lt;[</span><span style=\\\"color: #98c379;line-height: 26px;\\\"><span>&quot; &quot;</span></span><span>]&gt;(down) space</span><span><br/></span><span>    db[(</span><span style=\\\"color: #98c379;line-height: 26px;\\\"><span>&quot;DB&quot;</span></span><span>)]:3</span><span><br/></span><span>    space:3</span><span><br/></span><span>    D space C</span><span><br/></span><span>    db --&gt; D</span><span><br/></span><span>    C --&gt; db</span><span><br/></span><span>    D --&gt; C</span><span><br/></span><span>    style m fill:</span><span style=\\\"color: #5c6370;font-style: italic;line-height: 26px;\\\"><span>#d6d,stroke:#333,stroke-width:4px</span></span><span><br/></span></div></pre><div style=\\\"text-align: center;\\\"><img src=\\\":/35e797af109147ed9d3df698e0d75a23\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;\\\"/></div><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><strong style=\\\"color: rgb(0, 150, 136);font-weight: bold;background-attachment: scroll;background-clip: border-box;background-color: rgba(0, 0, 0, 0);background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;width: auto;height: auto;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;border-top-style: none;border-bottom-style: none;border-left-style: none;border-right-style: none;border-top-width: 3px;border-bottom-width: 3px;border-left-width: 3px;border-right-width: 3px;border-top-color: rgba(0, 0, 0, 0.4);border-bottom-color: rgba(0, 0, 0, 0.4);border-left-color: rgba(0, 0, 0, 0.4);border-right-color: rgba(0, 0, 0, 0.4);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;\\\"><span>说明：</span></strong><span>块图展示了系统中不同模块之间的关系和交互。在家居自动化系统中，通过块图，我们可以直观地看到各个家居设备（如电灯、空调、智能门锁等）如何通过中央控制系统连接和协同工作.</span></p><h2 style=\\\"margin:0;margin-top:30px;margin-bottom:15px;margin-left:0;margin-right:0;align-items:unset;background-attachment:scroll;background-clip:border-box;background-color:unset;background-image:none;background-origin:padding-box;background-position-x:0;background-position-y:0;background-repeat:no-repeat;background-size:auto;border-top-style:none;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-width:1px;border-bottom-width:1px;border-left-width:1px;border-right-width:1px;border-top-color:rgb(0,0,0);border-bottom-color:rgb(0,0,0);border-left-color:rgb(0,0,0);border-right-color:rgb(0,0,0);border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:none;display:block;flex-direction:unset;float:unset;height:auto;justify-content:unset;line-height:1.5em;overflow-x:unset;overflow-y:unset;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;text-shadow:none;transform:none;width:auto;-webkit-box-reflect:unset\\\"><span style=\\\"font-size: 20px;color: rgb(0, 150, 136);line-height: 1.8em;letter-spacing: 0em;padding-top: 0px;padding-bottom: 0px;padding-left: 10px;padding-right: 0px;border-top-style: none;border-bottom-style: none;border-left-style: solid;border-right-style: none;border-top-width: 1px;border-bottom-width: 1px;border-left-width: 3px;border-right-width: 1px;border-top-color: rgb(0, 0, 0);border-bottom-color: rgb(0, 0, 0);border-left-color: rgb(0, 150, 136);border-right-color: rgb(0, 0, 0);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;align-items: unset;background-attachment: scroll;background-clip: border-box;background-color: unset;background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;box-shadow: none;display: block;font-weight: bold;flex-direction: unset;float: unset;height: auto;justify-content: unset;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;overflow-x: unset;overflow-y: unset;text-align: left;text-indent: 0em;text-shadow: none;transform: none;width: auto;-webkit-box-reflect: unset;\\\"><span>15. 数据包图（Packet Diagram）：家庭网络架构</span></span></h2><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><span>数据包图用于表示数据包的结构以及数据在网络中的传输过程。在家庭网络管理中，数据包图可以帮助我们深入理解网络通信的细节，特别是数据如何通过不同设备、路由器和互联网进行传输。</span></p><pre style=\\\"border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;text-align: left;margin-top: 10px;margin-bottom: 10px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;\\\"><span style=\\\"display: block;background: none;height: 30px;width: 100%;background-size: 40px;background-repeat: no-repeat;background-color: #282c34;margin-bottom: -7px;border-radius: 5px;background-position: 10px 10px;background-image: url(&quot;https://mmbiz.qpic.cn/mmbiz_svg/a18XcQ1EBBiaQLzhOpicu2mG9SpfuztIvgXO3p6YYyDV01sdUePuSCV9AElAl5DtPeoGWoeH2Fp06wD7rY3cUkWic1icUwC86J3ic/640?wx_fmt=svg&amp;from=appmsg&quot;);\\\"></span><div style=\\\"--en-codeblock:true;--en-meta:{&quot;title&quot;:&quot;&quot;,&quot;lang&quot;:&quot;Plain Text&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;showLine&quot;:true,&quot;lineWrap&quot;:true};box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial; margin-top: 6px;\\\"><span>---</span><span><br/></span><span>title: </span><span style=\\\"color: #98c379;line-height: 26px;\\\"><span>&quot;TCP Packet&quot;</span></span><span><br/></span><span>---</span><span><br/></span><span>packet-beta</span><span><br/></span><span>  0-15: </span><span style=\\\"color: #98c379;line-height: 26px;\\\"><span>&quot;Source Port&quot;</span></span><span><br/></span><span>  16-31: </span><span style=\\\"color: #98c379;line-height: 26px;\\\"><span>&quot;Destination Port&quot;</span></span><span><br/></span><span>  32-63: </span><span style=\\\"color: #98c379;line-height: 26px;\\\"><span>&quot;Sequence Number&quot;</span></span><span><br/></span><span>  64-95: </span><span style=\\\"color: #98c379;line-height: 26px;\\\"><span>&quot;Acknowledgment Number&quot;</span></span><span><br/></span><span>  96-99: </span><span style=\\\"color: #98c379;line-height: 26px;\\\"><span>&quot;Data Offset&quot;</span></span><span><br/></span><span>  100-105: </span><span style=\\\"color: #98c379;line-height: 26px;\\\"><span>&quot;Reserved&quot;</span></span><span><br/></span><span>  106: </span><span style=\\\"color: #98c379;line-height: 26px;\\\"><span>&quot;URG&quot;</span></span><span><br/></span><span>  107: </span><span style=\\\"color: #98c379;line-height: 26px;\\\"><span>&quot;ACK&quot;</span></span><span><br/></span><span>  108: </span><span style=\\\"color: #98c379;line-height: 26px;\\\"><span>&quot;PSH&quot;</span></span><span><br/></span><span>  109: </span><span style=\\\"color: #98c379;line-height: 26px;\\\"><span>&quot;RST&quot;</span></span><span><br/></span><span>  110: </span><span style=\\\"color: #98c379;line-height: 26px;\\\"><span>&quot;SYN&quot;</span></span><span><br/></span><span>  111: </span><span style=\\\"color: #98c379;line-height: 26px;\\\"><span>&quot;FIN&quot;</span></span><span><br/></span><span>  112-127: </span><span style=\\\"color: #98c379;line-height: 26px;\\\"><span>&quot;Window&quot;</span></span><span><br/></span><span>  128-143: </span><span style=\\\"color: #98c379;line-height: 26px;\\\"><span>&quot;Checksum&quot;</span></span><span><br/></span><span>  144-159: </span><span style=\\\"color: #98c379;line-height: 26px;\\\"><span>&quot;Urgent Pointer&quot;</span></span><span><br/></span><span>  160-191: </span><span style=\\\"color: #98c379;line-height: 26px;\\\"><span>&quot;(Options and Padding)&quot;</span></span><span><br/></span><span>  192-255: </span><span style=\\\"color: #98c379;line-height: 26px;\\\"><span>&quot;Data (variable length)&quot;</span></span><span><br/></span></div></pre><div style=\\\"text-align: center;\\\"><img src=\\\":/b5cc836bc7c84296862a1b197d82b732\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;\\\"/></div><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><strong style=\\\"color: rgb(0, 150, 136);font-weight: bold;background-attachment: scroll;background-clip: border-box;background-color: rgba(0, 0, 0, 0);background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;width: auto;height: auto;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;border-top-style: none;border-bottom-style: none;border-left-style: none;border-right-style: none;border-top-width: 3px;border-bottom-width: 3px;border-left-width: 3px;border-right-width: 3px;border-top-color: rgba(0, 0, 0, 0.4);border-bottom-color: rgba(0, 0, 0, 0.4);border-left-color: rgba(0, 0, 0, 0.4);border-right-color: rgba(0, 0, 0, 0.4);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;\\\"><span>说明：</span></strong><span>数据包图帮助我们理解每个数据包的组成部分及其在网络传输中的作用。图中的各个字段代表了TCP协议中的关键参数，例如源端口、目标端口、序列号、确认号等。这些字段用于确保数据在传输过程中正确排序、确认接收、并处理网络中的不同状态。</span></p><hr style=\\\"margin-top: 10px;margin-bottom: 10px;margin-left: 0px;margin-right: 0px;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;border-top-style: solid;border-bottom-style: none;border-left-style: none;border-right-style: none;border-top-width: 1px;border-bottom-width: 3px;border-left-width: 3px;border-right-width: 3px;border-top-color: rgb(0, 0, 0);border-bottom-color: rgba(0, 0, 0, 0.4);border-left-color: rgba(0, 0, 0, 0.4);border-right-color: rgba(0, 0, 0, 0.4);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;background-attachment: scroll;background-clip: border-box;background-color: rgba(0, 0, 0, 0);background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;width: auto;height: 1px;\\\"/><h2 style=\\\"margin:0;margin-top:30px;margin-bottom:15px;margin-left:0;margin-right:0;align-items:unset;background-attachment:scroll;background-clip:border-box;background-color:unset;background-image:none;background-origin:padding-box;background-position-x:0;background-position-y:0;background-repeat:no-repeat;background-size:auto;border-top-style:none;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-width:1px;border-bottom-width:1px;border-left-width:1px;border-right-width:1px;border-top-color:rgb(0,0,0);border-bottom-color:rgb(0,0,0);border-left-color:rgb(0,0,0);border-right-color:rgb(0,0,0);border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:none;display:block;flex-direction:unset;float:unset;height:auto;justify-content:unset;line-height:1.5em;overflow-x:unset;overflow-y:unset;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;text-shadow:none;transform:none;width:auto;-webkit-box-reflect:unset\\\"><span style=\\\"font-size: 20px;color: rgb(0, 150, 136);line-height: 1.8em;letter-spacing: 0em;padding-top: 0px;padding-bottom: 0px;padding-left: 10px;padding-right: 0px;border-top-style: none;border-bottom-style: none;border-left-style: solid;border-right-style: none;border-top-width: 1px;border-bottom-width: 1px;border-left-width: 3px;border-right-width: 1px;border-top-color: rgb(0, 0, 0);border-bottom-color: rgb(0, 0, 0);border-left-color: rgb(0, 150, 136);border-right-color: rgb(0, 0, 0);border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;align-items: unset;background-attachment: scroll;background-clip: border-box;background-color: unset;background-image: none;background-origin: padding-box;background-position-x: 0%;background-position-y: 0%;background-repeat: no-repeat;background-size: auto;box-shadow: none;display: block;font-weight: bold;flex-direction: unset;float: unset;height: auto;justify-content: unset;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;overflow-x: unset;overflow-y: unset;text-align: left;text-indent: 0em;text-shadow: none;transform: none;width: auto;-webkit-box-reflect: unset;\\\"><span>很多在线网站都支持Mermaid图的直接绘制，比如：</span></span></h2><ul style=\\\"margin:0;list-style-type:disc;margin-top:8px;margin-bottom:8px;margin-left:0;margin-right:0;padding-top:0;padding-bottom:0;padding-left:25px;padding-right:0;color:rgb(0,0,0)\\\"><li><div style=\\\"margin-top: 5px;margin-bottom: 5px;color: rgb(1, 1, 1);font-size: 16px;line-height: 1.8em;letter-spacing: 0em;text-align: left;font-weight: normal;\\\"><span>https://www.gy328.com/sites/mermaid/</span></div></li><li><div style=\\\"margin-top: 5px;margin-bottom: 5px;color: rgb(1, 1, 1);font-size: 16px;line-height: 1.8em;letter-spacing: 0em;text-align: left;font-weight: normal;\\\"><span>https://www.momeitubiao.com/</span></div></li><li><div style=\\\"margin-top: 5px;margin-bottom: 5px;color: rgb(1, 1, 1);font-size: 16px;line-height: 1.8em;letter-spacing: 0em;text-align: left;font-weight: normal;\\\"><span>https://www.jyshare.com/front-end/9729/</span></div></li></ul><div style=\\\"text-align: center;\\\"><img src=\\\":/cfe15358a00146ff9f55d545711c30fa\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;\\\"/></div><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><span>不过也要注意，有些图暂时不支持中文，如果出现报错，可以适当调整。</span></p><p style=\\\"margin:0;color:rgb(0,0,0);font-size:16px;line-height:1.8em;letter-spacing:0;text-align:justify;text-indent:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:8px;padding-bottom:8px;padding-left:0;padding-right:0\\\"><span>Mermaid 是一个极具灵活性和实用性的可视化工具，不仅可以用于专业领域的图表绘制，还能帮助我们在日常生活中解决各种可视化问题。快去试试吧~（作者：王海华）</span></p></div><div><span></span></div><div><span></span></div></div></div></div></div></div></span>\\\n</div></body></html>\\u0000\"]],\"start1\":0,\"start2\":0,\"length1\":0,\"length2\":98092}]"
metadata_diff: {"new":{"id":"d16d450512044287a10f5044cd3b7628","parent_id":"f67288c3a0be4374b5d532b5dcc3aabc","latitude":"0.00000000","longitude":"0.00000000","altitude":"0.0000","author":"","source_url":"","is_todo":0,"todo_due":0,"todo_completed":0,"source":"joplin-desktop","source_application":"net.cozic.joplin-desktop","application_data":"","order":1764348822011,"markup_language":2,"is_shared":0,"share_id":"","conflict_original_id":"","master_key_id":"","user_data":"","deleted_time":0},"deleted":[]}
encryption_cipher_text: 
encryption_applied: 0
updated_time: 2025-11-28T21:03:48.089Z
created_time: 2025-11-28T21:03:48.089Z
type_: 13