工具使用——如何制作彩色的类似visio绘制的图表

1、可以使用工具mermaid

 2 直接使用svg代码 代码另存为svg后缀文件使用浏览器打开即需要的图片

<svg viewBox="0 0 680 380" width="100%" xmlns="http://www.w3.org/2000/svg" role="img" font-family="system-ui, -apple-system, 'Segoe UI', 'Noto Sans SC', sans-serif">
<title>SyncManager 在 EtherCAT 从站 ESC 中的位置</title>
<desc>主站通过 EtherCAT 帧、从站 MCU 通过 PDI 访问 ESC 内部过程数据 RAM，SM0 到 SM3 四个同步管理器通道分别管理邮箱与过程数据缓冲区。</desc>
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</marker>
</defs>
<rect x="200" y="56" width="280" height="304" rx="20" fill="#F1EFE8" stroke="#B4B2A9" stroke-width="0.5"/>
<text x="220" y="80" font-size="14" font-weight="500" fill="#2C2C2A" dominant-baseline="central">ESC（从站控制器）</text>
<text x="220" y="98" font-size="12" fill="#5F5E5A" dominant-baseline="central">过程数据 RAM 0x1000–0x2FFF</text>
<rect x="220" y="108" width="240" height="170" rx="12" fill="#FFFFFF" stroke="#D3D1C7" stroke-width="0.5"/>
<rect x="232" y="124" width="216" height="30" rx="8" fill="#FAEEDA" stroke="#BA7517" stroke-width="0.5"/>
<text x="246" y="139" font-size="13" font-weight="500" fill="#854F0B" dominant-baseline="central">SM0</text>
<text x="292" y="139" font-size="12" fill="#854F0B" dominant-baseline="central">邮箱 主站→从站</text>
<rect x="232" y="160" width="216" height="30" rx="8" fill="#FAEEDA" stroke="#BA7517" stroke-width="0.5"/>
<text x="246" y="175" font-size="13" font-weight="500" fill="#854F0B" dominant-baseline="central">SM1</text>
<text x="292" y="175" font-size="12" fill="#854F0B" dominant-baseline="central">邮箱 从站→主站</text>
<rect x="232" y="196" width="216" height="30" rx="8" fill="#E6F1FB" stroke="#378ADD" stroke-width="0.5"/>
<text x="246" y="211" font-size="13" font-weight="500" fill="#185FA5" dominant-baseline="central">SM2</text>
<text x="292" y="211" font-size="12" fill="#185FA5" dominant-baseline="central">过程数据输出 RxPDO</text>
<rect x="232" y="232" width="216" height="30" rx="8" fill="#E6F1FB" stroke="#378ADD" stroke-width="0.5"/>
<text x="246" y="247" font-size="13" font-weight="500" fill="#185FA5" dominant-baseline="central">SM3</text>
<text x="292" y="247" font-size="12" fill="#185FA5" dominant-baseline="central">过程数据输入 TxPDO</text>
<rect x="220" y="290" width="240" height="50" rx="12" fill="#FFFFFF" stroke="#D3D1C7" stroke-width="0.5"/>
<text x="236" y="308" font-size="13" font-weight="500" fill="#2C2C2A" dominant-baseline="central">SM 配置寄存器 0x0800–0x083F</text>
<text x="236" y="326" font-size="12" fill="#5F5E5A" dominant-baseline="central">起始地址·长度·控制·状态·激活</text>
<rect x="40" y="170" width="80" height="60" rx="12" fill="#E6F1FB" stroke="#378ADD" stroke-width="0.5"/>
<text x="80" y="193" font-size="13" font-weight="500" fill="#185FA5" text-anchor="middle" dominant-baseline="central">主站</text>
<text x="80" y="213" font-size="12" fill="#185FA5" text-anchor="middle" dominant-baseline="central">Master</text>
<rect x="560" y="170" width="80" height="60" rx="12" fill="#E6F1FB" stroke="#378ADD" stroke-width="0.5"/>
<text x="600" y="193" font-size="13" font-weight="500" fill="#185FA5" text-anchor="middle" dominant-baseline="central">从站</text>
<text x="600" y="213" font-size="12" fill="#185FA5" text-anchor="middle" dominant-baseline="central">MCU</text>
<path d="M120 186 L194 186" fill="none" stroke="#5F5E5A" stroke-width="1.5" marker-end="url(#arrow)"/>
<path d="M194 214 L120 214" fill="none" stroke="#5F5E5A" stroke-width="1.5" marker-end="url(#arrow)"/>
<path d="M560 186 L486 186" fill="none" stroke="#5F5E5A" stroke-width="1.5" marker-end="url(#arrow)"/>
<path d="M486 214 L560 214" fill="none" stroke="#5F5E5A" stroke-width="1.5" marker-end="url(#arrow)"/>
<text x="157" y="168" font-size="12" fill="#5F5E5A" text-anchor="middle" dominant-baseline="central">EtherCAT</text>
<text x="157" y="234" font-size="12" fill="#5F5E5A" text-anchor="middle" dominant-baseline="central">FMMU</text>
<text x="523" y="168" font-size="12" fill="#5F5E5A" text-anchor="middle" dominant-baseline="central">PDI</text>
<text x="523" y="234" font-size="12" fill="#5F5E5A" text-anchor="middle" dominant-baseline="central">中断/轮询</text>
</svg>