边缘计算SVG流程图绘制指南

EDGE_OS 边缘计算集成架构 (V2.4.0) 01 数据采集层 (Ingestion) Modbus/S7 OPC-UA MQTT / HTTP API 02 核心引擎层 (Processing) 影子设备 Virtual Shadow Engine 规则解析器 Rule Engine 03 导出与同步 (Export) 设备画像 (Device Profile) 北向联动控制台同步 规则逻辑矩阵 (Logic Matrix) 阈值判定 (Threshold) IF x > High_Bound IF x < Low_Bound 窗口算法 (Window) 滑动平均 / 累计 动作执行器 (Executors) [指令] 设备反控 (Write_Device) [消息] MQTT 推送 (Publish) [告警] 钉钉/邮件 (Webhook) [存储] 本地持久化 (SQLite) 典型应用场景 (Use Cases) 智能工厂：CNC 预测性维护 监测：主轴振动频率 (FFT) 逻辑：偏离基准值 > 15% 执行：自动停机并推送维保工单 智慧能源：配电房负荷平衡 监测：三相电流 / 有功功率 逻辑：峰谷电价阶梯计算 执行：动态切断三级非必要负荷 智慧楼宇：空调节能闭环 监测：人流量 + 二氧化碳浓度 逻辑：CO2 < 400ppm 且无人 执行：调低新风频率 30% 反控闭环：从执行结果到采集策略的自动优化 (Closed-loop Optimization)

设计亮点说明：

色彩一致性：

亮蓝 (#0ea5e9)：用于“数据输入层”、“边缘设备层”及三个实战案例的输入外框。

紫色 (#6c5ce7)：用于“规则匹配”、“规则执行”及“核心引擎层”的填充与文字。

边框与字体：

全部使用 1px - 1.5px 精细线条，无圆角（或极小圆角 rx=”2”），符合工业硬朗美学。

字体统一使用 monospace，增强代码感。

粒子动效同步：

定义了全局同步的 animateMotion。顶层架构使用 1.5s 快速流动展示高频采集，底部矩阵与案例展示使用 2s 稳定流动展示逻辑处理。

全要素覆盖：

图中垂直展示了从原子级规则（阈值/窗口等）到原子级动作（MQTT/HTTP等），再到系统级分层，最后落地到业务场景案例的完整逻辑。

反馈闭环：

增加了一个覆盖全图的虚线反馈环（Feedback Loop），体现了边缘计算从执行到优化的闭环特性。

更新说明 中文语义标注：

将原有的英文图表层级翻译为符合工业语境的中文（如：数据采集层、规则解析器、预测性维护等）。

保留了关键的英文术语（括号内），方便开发时与 API 字段对应。

关联线条完善：

主流程线：增加了带颜色的实线，清晰标注了数据从采集到导出、分发的路径。

逻辑汇聚线：在规则矩阵中，增加了从“阈值判定”和“窗口算法”指向“动作执行器”的引导线。

反馈闭环线：使用了大跨度的虚线，体现了 EDGE_OS 的核心价值——闭环反控（即根据分析结果自动去调节底层设备）, 使用又出左进 首尾都在横线上。

视觉分层：

使用深色背景块标识“动作执行器”，暗示其为高优先级的“暗盒操作”。

每个模块都带有了编号（01, 02, 03），强调了数据流动的时序性。

1. 核心工作流程SVG绘制步骤

流程概述

核心工作流程包括数据输入、规则匹配、规则执行、动作执行四个主要阶段。

绘制步骤

  1. 创建SVG画布

    
<svg width="800" height="300" xmlns="http://www.w3.org/2000/svg">

  2. 绘制四个主要节点

    
<!-- 数据输入层 -->

<rect x="50" y="50" width="150" height="60" rx="5" fill="#f0f0f0" stroke="#333" stroke-width="1"/>

<text x="125" y="80" text-anchor="middle" font-family="Arial" font-size="14">数据输入层</text>



<!-- 规则匹配层 -->

<rect x="250" y="50" width="150" height="60" rx="5" fill="#f0f0f0" stroke="#333" stroke-width="1"/>

<text x="325" y="80" text-anchor="middle" font-family="Arial" font-size="14">规则匹配层</text>



<!-- 规则执行层 -->

<rect x="450" y="50" width="150" height="60" rx="5" fill="#f0f0f0" stroke="#333" stroke-width="1"/>

<text x="525" y="80" text-anchor="middle" font-family="Arial" font-size="14">规则执行层</text>



<!-- 动作执行层 -->

<rect x="450" y="150" width="150" height="60" rx="5" fill="#f0f0f0" stroke="#333" stroke-width="1"/>

<text x="525" y="180" text-anchor="middle" font-family="Arial" font-size="14">动作执行层</text>

  3. 绘制连接线

    
<!-- 数据输入到规则匹配 -->

<path d="M200 80 L250 80" stroke="#333" stroke-width="2" marker-end="url(#arrowhead)"/>



<!-- 规则匹配到规则执行 -->

<path d="M400 80 L450 80" stroke="#333" stroke-width="2" marker-end="url(#arrowhead)"/>



<!-- 规则执行到动作执行 -->

<path d="M525 110 L525 150" stroke="#333" stroke-width="2" marker-end="url(#arrowhead)"/>

  4. 添加箭头标记

    
<defs>

  <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">

    <polygon points="0 0, 10 3.5, 0 7" fill="#333"/>

  </marker>

</defs>

  5. 关闭SVG标签

    
</svg>

2. 规则类型处理流程SVG绘制步骤

流程概述

包括阈值规则、计算规则、窗口规则和状态规则四种类型的处理流程。

绘制步骤

  1. 创建SVG画布

    
<svg width="1000" height="400" xmlns="http://www.w3.org/2000/svg">

  2. 绘制标题

    
<text x="500" y="30" text-anchor="middle" font-family="Arial" font-size="18" font-weight="bold">规则类型处理流程</text>

  3. 绘制阈值规则流程

    
<!-- 阈值规则 -->

<rect x="50" y="60" width="120" height="40" rx="5" fill="#e6f7ff" stroke="#1890ff" stroke-width="1"/>

<text x="110" y="85" text-anchor="middle" font-family="Arial" font-size="14">条件评估</text>



<rect x="200" y="60" width="120" height="40" rx="5" fill="#e6f7ff" stroke="#1890ff" stroke-width="1"/>

<text x="260" y="85" text-anchor="middle" font-family="Arial" font-size="14">状态检查</text>



<rect x="350" y="60" width="120" height="40" rx="5" fill="#e6f7ff" stroke="#1890ff" stroke-width="1"/>

<text x="410" y="85" text-anchor="middle" font-family="Arial" font-size="14">动作触发</text>



<path d="M170 80 L200 80" stroke="#1890ff" stroke-width="2" marker-end="url(#arrowhead)"/>

<path d="M320 80 L350 80" stroke="#1890ff" stroke-width="2" marker-end="url(#arrowhead)"/>

  4. 绘制计算规则流程

    
<!-- 计算规则 -->

<rect x="50" y="140" width="120" height="40" rx="5" fill="#f6ffed" stroke="#52c41a" stroke-width="1"/>

<text x="110" y="165" text-anchor="middle" font-family="Arial" font-size="14">表达式计算</text>



<rect x="200" y="140" width="120" height="40" rx="5" fill="#f6ffed" stroke="#52c41a" stroke-width="1"/>

<text x="260" y="165" text-anchor="middle" font-family="Arial" font-size="14">结果生成</text>



<rect x="350" y="140" width="120" height="40" rx="5" fill="#f6ffed" stroke="#52c41a" stroke-width="1"/>

<text x="410" y="165" text-anchor="middle" font-family="Arial" font-size="14">动作触发</text>



<path d="M170 160 L200 160" stroke="#52c41a" stroke-width="2" marker-end="url(#arrowhead)"/>

<path d="M320 160 L350 160" stroke="#52c41a" stroke-width="2" marker-end="url(#arrowhead)"/>

  5. 绘制窗口规则流程

    
<!-- 窗口规则 -->

<rect x="550" y="60" width="120" height="40" rx="5" fill="#fff7e6" stroke="#fa8c16" stroke-width="1"/>

<text x="610" y="85" text-anchor="middle" font-family="Arial" font-size="14">数据收集</text>



<rect x="700" y="60" width="120" height="40" rx="5" fill="#fff7e6" stroke="#fa8c16" stroke-width="1"/>

<text x="760" y="85" text-anchor="middle" font-family="Arial" font-size="14">聚合计算</text>



<rect x="850" y="60" width="120" height="40" rx="5" fill="#fff7e6" stroke="#fa8c16" stroke-width="1"/>

<text x="910" y="85" text-anchor="middle" font-family="Arial" font-size="14">条件评估</text>



<rect x="700" y="140" width="120" height="40" rx="5" fill="#fff7e6" stroke="#fa8c16" stroke-width="1"/>

<text x="760" y="165" text-anchor="middle" font-family="Arial" font-size="14">结果生成</text>



<path d="M670 80 L700 80" stroke="#fa8c16" stroke-width="2" marker-end="url(#arrowhead)"/>

<path d="M820 80 L850 80" stroke="#fa8c16" stroke-width="2" marker-end="url(#arrowhead)"/>

<path d="M910 100 L910 140" stroke="#fa8c16" stroke-width="2" marker-end="url(#arrowhead)"/>

<path d="M850 160 L700 160" stroke="#fa8c16" stroke-width="2" marker-end="url(#arrowhead)"/>

  6. 绘制状态规则流程

    
<!-- 状态规则 -->

<rect x="550" y="220" width="120" height="40" rx="5" fill="#fff1f0" stroke="#f5222d" stroke-width="1"/>

<text x="610" y="245" text-anchor="middle" font-family="Arial" font-size="14">条件评估</text>



<rect x="700" y="220" width="120" height="40" rx="5" fill="#fff1f0" stroke="#f5222d" stroke-width="1"/>

<text x="760" y="245" text-anchor="middle" font-family="Arial" font-size="14">状态计时</text>



<rect x="850" y="220" width="120" height="40" rx="5" fill="#fff1f0" stroke="#f5222d" stroke-width="1"/>

<text x="910" y="245" text-anchor="middle" font-family="Arial" font-size="14">计数检查</text>



<rect x="700" y="300" width="120" height="40" rx="5" fill="#fff1f0" stroke="#f5222d" stroke-width="1"/>

<text x="760" y="325" text-anchor="middle" font-family="Arial" font-size="14">动作触发</text>



<path d="M670 240 L700 240" stroke="#f5222d" stroke-width="2" marker-end="url(#arrowhead)"/>

<path d="M820 240 L850 240" stroke="#f5222d" stroke-width="2" marker-end="url(#arrowhead)"/>

<path d="M910 260 L910 300" stroke="#f5222d" stroke-width="2" marker-end="url(#arrowhead)"/>

<path d="M850 320 L700 320" stroke="#f5222d" stroke-width="2" marker-end="url(#arrowhead)"/>

  7. 添加箭头标记

    
<defs>

  <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">

    <polygon points="0 0, 10 3.5, 0 7" fill="#333"/>

  </marker>

</defs>

  8. 关闭SVG标签

    
</svg>

3. 动作类型执行流程SVG绘制步骤

流程概述

包括设备控制、MQTT发布、HTTP请求和数据库存储四种动作类型的执行流程。

绘制步骤

  1. 创建SVG画布

    
<svg width="1000" height="400" xmlns="http://www.w3.org/2000/svg">

  2. 绘制标题

    
<text x="500" y="30" text-anchor="middle" font-family="Arial" font-size="18" font-weight="bold">动作类型执行流程</text>

  3. 绘制设备控制流程

    
<!-- 设备控制 -->

<rect x="50" y="60" width="120" height="40" rx="5" fill="#f0f5ff" stroke="#2f54eb" stroke-width="1"/>

<text x="110" y="85" text-anchor="middle" font-family="Arial" font-size="14">目标解析</text>



<rect x="200" y="60" width="120" height="40" rx="5" fill="#f0f5ff" stroke="#2f54eb" stroke-width="1"/>

<text x="260" y="85" text-anchor="middle" font-family="Arial" font-size="14">表达式计算</text>



<rect x="350" y="60" width="120" height="40" rx="5" fill="#f0f5ff" stroke="#2f54eb" stroke-width="1"/>

<text x="410" y="85" text-anchor="middle" font-family="Arial" font-size="14">位操作处理</text>



<rect x="200" y="140" width="120" height="40" rx="5" fill="#f0f5ff" stroke="#2f54eb" stroke-width="1"/>

<text x="260" y="165" text-anchor="middle" font-family="Arial" font-size="14">设备写入</text>



<path d="M170 80 L200 80" stroke="#2f54eb" stroke-width="2" marker-end="url(#arrowhead)"/>

<path d="M320 80 L350 80" stroke="#2f54eb" stroke-width="2" marker-end="url(#arrowhead)"/>

<path d="M410 100 L410 140" stroke="#2f54eb" stroke-width="2" marker-end="url(#arrowhead)"/>

<path d="M350 160 L200 160" stroke="#2f54eb" stroke-width="2" marker-end="url(#arrowhead)"/>

  4. 绘制MQTT发布流程

    
<!-- MQTT发布 -->

<rect x="550" y="60" width="120" height="40" rx="5" fill="#f6ffed" stroke="#52c41a" stroke-width="1"/>

<text x="610" y="85" text-anchor="middle" font-family="Arial" font-size="14">配置解析</text>



<rect x="700" y="60" width="120" height="40" rx="5" fill="#f6ffed" stroke="#52c41a" stroke-width="1"/>

<text x="760" y="85" text-anchor="middle" font-family="Arial" font-size="14">消息生成</text>



<rect x="850" y="60" width="120" height="40" rx="5" fill="#f6ffed" stroke="#52c41a" stroke-width="1"/>

<text x="910" y="85" text-anchor="middle" font-family="Arial" font-size="14">MQTT发布</text>



<path d="M670 80 L700 80" stroke="#52c41a" stroke-width="2" marker-end="url(#arrowhead)"/>

<path d="M820 80 L850 80" stroke="#52c41a" stroke-width="2" marker-end="url(#arrowhead)"/>

  5. 绘制HTTP请求流程

    
<!-- HTTP请求 -->

<rect x="550" y="140" width="120" height="40" rx="5" fill="#fff7e6" stroke="#fa8c16" stroke-width="1"/>

<text x="610" y="165" text-anchor="middle" font-family="Arial" font-size="14">配置解析</text>



<rect x="700" y="140" width="120" height="40" rx="5" fill="#fff7e6" stroke="#fa8c16" stroke-width="1"/>

<text x="760" y="165" text-anchor="middle" font-family="Arial" font-size="14">请求生成</text>



<rect x="850" y="140" width="120" height="40" rx="5" fill="#fff7e6" stroke="#fa8c16" stroke-width="1"/>

<text x="910" y="165" text-anchor="middle" font-family="Arial" font-size="14">HTTP请求</text>



<path d="M670 160 L700 160" stroke="#fa8c16" stroke-width="2" marker-end="url(#arrowhead)"/>

<path d="M820 160 L850 160" stroke="#fa8c16" stroke-width="2" marker-end="url(#arrowhead)"/>

  6. 绘制数据库存储流程

    
<!-- 数据库存储 -->

<rect x="550" y="220" width="120" height="40" rx="5" fill="#f0f0f0" stroke="#333" stroke-width="1"/>

<text x="610" y="245" text-anchor="middle" font-family="Arial" font-size="14">配置解析</text>



<rect x="700" y="220" width="120" height="40" rx="5" fill="#f0f0f0" stroke="#333" stroke-width="1"/>

<text x="760" y="245" text-anchor="middle" font-family="Arial" font-size="14">数据准备</text>



<rect x="850" y="220" width="120" height="40" rx="5" fill="#f0f0f0" stroke="#333" stroke-width="1"/>

<text x="910" y="245" text-anchor="middle" font-family="Arial" font-size="14">存储执行</text>



<path d="M670 240 L700 240" stroke="#333" stroke-width="2" marker-end="url(#arrowhead)"/>

<path d="M820 240 L850 240" stroke="#333" stroke-width="2" marker-end="url(#arrowhead)"/>

  7. 添加箭头标记

    
<defs>

  <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">

    <polygon points="0 0, 10 3.5, 0 7" fill="#333"/>

  </marker>

</defs>

  8. 关闭SVG标签

    
</svg>

4. 系统拓扑图SVG绘制步骤

流程概述

展示边缘计算系统的整体架构，包括边缘设备层、数据采集层、边缘计算核心层和外部系统层。

绘制步骤

  1. 创建SVG画布

    
<svg width="1000" height="500" xmlns="http://www.w3.org/2000/svg">

  2. 绘制标题

    
<text x="500" y="30" text-anchor="middle" font-family="Arial" font-size="18" font-weight="bold">边缘计算系统拓扑</text>

  3. 绘制系统边界

    
<rect x="50" y="50" width="900" height="400" rx="10" fill="#f9f9f9" stroke="#333" stroke-width="2"/>

<text x="500" y="80" text-anchor="middle" font-family="Arial" font-size="16" font-weight="bold">边缘计算系统</text>

  4. 绘制边缘设备层

    
<!-- 边缘设备层 -->

<rect x="70" y="120" width="200" height="120" rx="5" fill="#e6f7ff" stroke="#1890ff" stroke-width="1"/>

<text x="170" y="140" text-anchor="middle" font-family="Arial" font-size="14" font-weight="bold">边缘设备层</text>



<rect x="90" y="170" width="80" height="30" rx="3" fill="#ffffff" stroke="#1890ff" stroke-width="1"/>

<text x="130" y="190" text-anchor="middle" font-family="Arial" font-size="12">传感器设备</text>



<rect x="190" y="170" width="80" height="30" rx="3" fill="#ffffff" stroke="#1890ff" stroke-width="1"/>

<text x="230" y="190" text-anchor="middle" font-family="Arial" font-size="12">执行器设备</text>

  5. 绘制数据采集层

    
<!-- 数据采集层 -->

<rect x="300" y="120" width="200" height="120" rx="5" fill="#f6ffed" stroke="#52c41a" stroke-width="1"/>

<text x="400" y="140" text-anchor="middle" font-family="Arial" font-size="14" font-weight="bold">数据采集层</text>



<rect x="320" y="170" width="80" height="30" rx="3" fill="#ffffff" stroke="#52c41a" stroke-width="1"/>

<text x="360" y="190" text-anchor="middle" font-family="Arial" font-size="12">通道管理</text>



<rect x="420" y="170" width="80" height="30" rx="3" fill="#ffffff" stroke="#52c41a" stroke-width="1"/>

<text x="460" y="190" text-anchor="middle" font-family="Arial" font-size="12">协议适配</text>

  6. 绘制边缘计算核心层

    
<!-- 边缘计算核心层 -->

<rect x="530" y="120" width="200" height="120" rx="5" fill="#fff7e6" stroke="#fa8c16" stroke-width="1"/>

<text x="630" y="140" text-anchor="middle" font-family="Arial" font-size="14" font-weight="bold">边缘计算核心层</text>



<rect x="550" y="170" width="80" height="30" rx="3" fill="#ffffff" stroke="#fa8c16" stroke-width="1"/>

<text x="590" y="190" text-anchor="middle" font-family="Arial" font-size="12">数据管道</text>



<rect x="650" y="170" width="80" height="30" rx="3" fill="#ffffff" stroke="#fa8c16" stroke-width="1"/>

<text x="690" y="190" text-anchor="middle" font-family="Arial" font-size="12">规则引擎</text>

  7. 绘制外部系统层

    
<!-- 外部系统层 -->

<rect x="760" y="120" width="190" height="120" rx="5" fill="#fff1f0" stroke="#f5222d" stroke-width="1"/>

<text x="855" y="140" text-anchor="middle" font-family="Arial" font-size="14" font-weight="bold">外部系统层</text>



<rect x="780" y="170" width="80" height="30" rx="3" fill="#ffffff" stroke="#f5222d" stroke-width="1"/>

<text x="820" y="190" text-anchor="middle" font-family="Arial" font-size="12">MQTT</text>



<rect x="880" y="170" width="80" height="30" rx="3" fill="#ffffff" stroke="#f5222d" stroke-width="1"/>

<text x="920" y="190" text-anchor="middle" font-family="Arial" font-size="12">HTTP</text>

  8. 绘制连接线

    
<!-- 边缘设备到数据采集 -->

<path d="M270 180 L300 180" stroke="#333" stroke-width="2" marker-end="url(#arrowhead)"/>



<!-- 数据采集到边缘计算 -->

<path d="M500 180 L530 180" stroke="#333" stroke-width="2" marker-end="url(#arrowhead)"/>



<!-- 边缘计算到外部系统 -->

<path d="M730 180 L760 180" stroke="#333" stroke-width="2" marker-end="url(#arrowhead)"/>

  9. 添加箭头标记

    
<defs>

  <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">

    <polygon points="0 0, 10 3.5, 0 7" fill="#333"/>

  </marker>

</defs>

  10. 关闭SVG标签

    
</svg>

5. 数据流向拓扑SVG绘制步骤

流程概述

展示边缘计算系统中数据的流动方向，包括设备数据采集、边缘计算处理、动作执行和外部系统交互。

绘制步骤

  1. 创建SVG画布

    
<svg width="1000" height="300" xmlns="http://www.w3.org/2000/svg">

  2. 绘制标题

    
<text x="500" y="30" text-anchor="middle" font-family="Arial" font-size="18" font-weight="bold">数据流向拓扑</text>

  3. 绘制四个主要节点

    
<!-- 设备数据 -->

<rect x="50" y="80" width="120" height="40" rx="5" fill="#e6f7ff" stroke="#1890ff" stroke-width="1"/>

<text x="110" y="105" text-anchor="middle" font-family="Arial" font-size="14">设备数据</text>



<!-- 数据采集 -->

<rect x="220" y="80" width="120" height="40" rx="5" fill="#f6ffed" stroke="#52c41a" stroke-width="1"/>

<text x="280" y="105" text-anchor="middle" font-family="Arial" font-size="14">数据采集</text>



<!-- 边缘计算 -->

<rect x="390" y="80" width="120" height="40" rx="5" fill="#fff7e6" stroke="#fa8c16" stroke-width="1"/>

<text x="450" y="105" text-anchor="middle" font-family="Arial" font-size="14">边缘计算</text>



<!-- 动作执行 -->

<rect x="560" y="80" width="120" height="40" rx="5" fill="#fff1f0" stroke="#f5222d" stroke-width="1"/>

<text x="620" y="105" text-anchor="middle" font-family="Arial" font-size="14">动作执行</text>



<!-- 外部系统 -->

<rect x="730" y="80" width="120" height="40" rx="5" fill="#f0f5ff" stroke="#2f54eb" stroke-width="1"/>

<text x="790" y="105" text-anchor="middle" font-family="Arial" font-size="14">外部系统</text>

  4. 绘制数据流向

    
<!-- 主数据流 -->

<path d="M170 100 L220 100" stroke="#333" stroke-width="2" marker-end="url(#arrowhead)"/>

<path d="M340 100 L390 100" stroke="#333" stroke-width="2" marker-end="url(#arrowhead)"/>

<path d="M510 100 L560 100" stroke="#333" stroke-width="2" marker-end="url(#arrowhead)"/>

<path d="M680 100 L730 100" stroke="#333" stroke-width="2" marker-end="url(#arrowhead)"/>



<!-- 反馈流 -->

<path d="M790 120 L790 180 L110 180 L110 120" stroke="#999" stroke-width="1" stroke-dasharray="5,5" marker-end="url(#arrowhead)"/>

  5. 添加箭头标记

    
<defs>

  <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">

    <polygon points="0 0, 10 3.5, 0 7" fill="#333"/>

  </marker>

</defs>

  6. 关闭SVG标签

    
</svg>

6. 规则配置拓扑SVG绘制步骤

流程概述

展示边缘计算规则的配置、加载、执行和存储流程。

绘制步骤

  1. 创建SVG画布

    
<svg width="800" height="300" xmlns="http://www.w3.org/2000/svg">

  2. 绘制标题

    
<text x="400" y="30" text-anchor="middle" font-family="Arial" font-size="18" font-weight="bold">规则配置拓扑</text>

  3. 绘制规则配置流程

    
<!-- 规则文件 -->

<rect x="50" y="80" width="120" height="40" rx="5" fill="#f0f0f0" stroke="#333" stroke-width="1"/>

<text x="110" y="105" text-anchor="middle" font-family="Arial" font-size="14">规则文件</text>



<!-- 规则加载 -->

<rect x="220" y="80" width="120" height="40" rx="5" fill="#f0f0f0" stroke="#333" stroke-width="1"/>

<text x="280" y="105" text-anchor="middle" font-family="Arial" font-size="14">规则加载</text>



<!-- 规则解析 -->

<rect x="390" y="80" width="120" height="40" rx="5" fill="#f0f0f0" stroke="#333" stroke-width="1"/>

<text x="450" y="105" text-anchor="middle" font-family="Arial" font-size="14">规则解析</text>



<!-- 规则索引 -->

<rect x="560" y="80" width="120" height="40" rx="5" fill="#f0f0f0" stroke="#333" stroke-width="1"/>

<text x="620" y="105" text-anchor="middle" font-family="Arial" font-size="14">规则索引</text>



<!-- 规则执行 -->

<rect x="390" y="160" width="120" height="40" rx="5" fill="#f0f0f0" stroke="#333" stroke-width="1"/>

<text x="450" y="185" text-anchor="middle" font-family="Arial" font-size="14">规则执行</text>

  4. 绘制连接线

    
<!-- 规则配置流程 -->

<path d="M170 100 L220 100" stroke="#333" stroke-width="2" marker-end="url(#arrowhead)"/>

<path d="M340 100 L390 100" stroke="#333" stroke-width="2" marker-end="url(#arrowhead)"/>

<path d="M510 100 L560 100" stroke="#333" stroke-width="2" marker-end="url(#arrowhead)"/>



<!-- 规则执行反馈 -->

<path d="M620 120 L620 180 L450 180" stroke="#999" stroke-width="1" stroke-dasharray="5,5" marker-end="url(#arrowhead)"/>

<path d="M450 200 L450 240 L110 240 L110 120" stroke="#999" stroke-width="1" stroke-dasharray="5,5" marker-end="url(#arrowhead)"/>

  5. 添加箭头标记

    
<defs>

  <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">

    <polygon points="0 0, 10 3.5, 0 7" fill="#333"/>

  </marker>

</defs>

  6. 关闭SVG标签

    
</svg>

7. 工作流执行流程SVG绘制步骤

流程概述

展示边缘计算工作流的执行流程，包括序列执行、延迟执行、条件检查和回退处理。

绘制步骤

  1. 创建SVG画布

    
<svg width="800" height="300" xmlns="http://www.w3.org/2000/svg">

  2. 绘制标题

    
<text x="400" y="30" text-anchor="middle" font-family="Arial" font-size="18" font-weight="bold">工作流执行流程</text>

  3. 绘制工作流步骤

    
<!-- 序列执行 -->

<rect x="50" y="80" width="120" height="40" rx="5" fill="#e6f7ff" stroke="#1890ff" stroke-width="1"/>

<text x="110" y="105" text-anchor="middle" font-family="Arial" font-size="14">序列执行</text>



<!-- 延迟执行 -->

<rect x="220" y="80" width="120" height="40" rx="5" fill="#f6ffed" stroke="#52c41a" stroke-width="1"/>

<text x="280" y="105" text-anchor="middle" font-family="Arial" font-size="14">延迟执行</text>



<!-- 条件检查 -->

<rect x="390" y="80" width="120" height="40" rx="5" fill="#fff7e6" stroke="#fa8c16" stroke-width="1"/>

<text x="450" y="105" text-anchor="middle" font-family="Arial" font-size="14">条件检查</text>



<!-- 结果验证 -->

<rect x="390" y="160" width="120" height="40" rx="5" fill="#fff1f0" stroke="#f5222d" stroke-width="1"/>

<text x="450" y="185" text-anchor="middle" font-family="Arial" font-size="14">结果验证</text>



<!-- 回退处理 -->

<rect x="220" y="160" width="120" height="40" rx="5" fill="#f0f5ff" stroke="#2f54eb" stroke-width="1"/>

<text x="280" y="185" text-anchor="middle" font-family="Arial" font-size="14">回退处理</text>

  4. 绘制连接线

    
<!-- 工作流正向流程 -->

<path d="M170 100 L220 100" stroke="#333" stroke-width="2" marker-end="url(#arrowhead)"/>

<path d="M340 100 L390 100" stroke="#333" stroke-width="2" marker-end="url(#arrowhead)"/>

<path d="M450 120 L450 160" stroke="#333" stroke-width="2" marker-end="url(#arrowhead)"/>



<!-- 回退流程 -->

<path d="M450 180 L280 180" stroke="#999" stroke-width="1" stroke-dasharray="5,5" marker-end="url(#arrowhead)"/>

  5. 添加箭头标记

    
<defs>

  <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">

    <polygon points="0 0, 10 3.5, 0 7" fill="#333"/>

  </marker>

</defs>