【原】网络安全拓扑编辑器（My first vide coding application）

登录 · 发表于 2026-9-19 00:26:38

个人使用vide coding方式制作的第一个小程序，当前版本为1.0版，程序很简单，为html格式，浏览器打开就能使用。浏览器加载后的效果如下图

【程序用途】方便快速绘制网络安全拓扑
【程序功能】
1、顶部为工具栏，左侧为设备面板，右侧为画布，最右侧为说明栏/属性设置栏
2、右侧的画布中，默认加载了一个典型的等级掩护三级内外网安全防护体系的网络安全拓扑，可以在这个默认图上举行修改
3、左侧的设备面板中包括：网络设备、安全设备、服务器设备和信任域，在顶部的选择按钮为选中时，可以通过拖拉拽的方式，把设备面板中的图标拖到画布中，即可看到相应的图标效果
4、点击顶部的连线按钮，即可对画布中的两个元素举行连线，点击选择按钮选中连线，可以在右侧看到连线属性，连线形状中可以设置连线为：直线实线、直线虚线、折线实线、折线虚线、曲线实线、曲线虚线

5、连线属性中，勾选数据流动画复选框，可以看到两个元素之间的数据流动动画；也可以按住shift键，选中两个元素，点击顶端的数据流按钮，在两个元素之间的连线也会呈现数据流动效果

6、按住shift键，可以对多个元素举行选中，选中后，可以点击顶部的左对齐、程度居中、右对齐、顶端对齐、竖直居中、底端对齐等对齐按钮，举行相应的对齐操作
7、按住shift键，点击顶端的横向分布按钮或纵向分布按钮，可以对多于2个的元素，举行横向分布或纵向分布操作
8、点击顶部的PNG按钮，可以选择路径生成画布中的内容为PNG格式图片
9、点击顶部的SVG按钮，可以选择路径生成画布中的内容为SVG格式文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>网络安全拓扑图绘制工具 · Network Security Topology Editor</title>
</head>
<body>
<header>
<span >🌐 网络安全拓扑编辑器</span>
<button id="tool-select" data-tool="select" title="选择/移动 (V)">↖ 选择</button>
<button id="tool-connect" data-tool="connect" title="连线 (C)">🔗 连线</button>
<button id="tool-pan" data-tool="pan" title="平移画布 (空格拖拽)">✋ 平移</button>
<button id="act-undo" title="撤销 (Ctrl+Z)">↶ 撤销</button>
<button id="act-redo" title="重做 (Ctrl+Y)">↷ 重做</button>
<span >对齐</span>
<button id="act-align-l" title="左对齐（按住 Shift 多选元素后）" disabled>⬅ 左对齐</button>
<button id="act-align-c" title="水平居中对齐" disabled>⬌ 水平居中</button>
<button id="act-align-r" title="右对齐" disabled>➡ 右对齐</button>
<button id="act-align-t" title="顶端对齐（按住 Shift 多选元素后）" disabled>⬆ 顶端对齐</button>
<button id="act-align-vc" title="竖直居中对齐" disabled>↕ 竖直居中</button>
<button id="act-align-b" title="底端对齐" disabled>⬇ 底端对齐</button>
<button id="act-distribute-h" title="横向分布：以最左、最右元素为两端，中间元素水平方向平均排列（Shift 多选 ≥3 个）" disabled>⇿ 横向分布</button>
<button id="act-distribute-v" title="纵向分布：以最上、最下元素为两端，中间元素竖直方向平均排列（Shift 多选 ≥3 个）" disabled>⬍ 纵向分布</button>
<span >Shift 多选</span>
<button id="act-flow" title="给选中的两个元素之间的连线添加数据流动画（再次点击关闭）" disabled>🌊 数据流</button>
<button id="act-png" title="导出 PNG 图片（可选择保存位置）">🖼 PNG</button>
<button id="act-svg" title="导出 SVG">📐 SVG</button>
<button id="act-clear" title="清空画布">🗑 清空</button>
</header>
<h3>设备面板</h3>
<h3>信任域（安全分区）</h3>
<span>拖我到画布 →</span>
松开后在画布上选中该域，<br>可拖四角 / 四边控制点缩放范围。
</aside>
<main>
<canvas id="canvas"></canvas>
点击左侧设备 → 在画布单击放置；连线模式拖拽两节点即可连接。信任域：从左侧把虚线框拖到画布，选中后拖四角/四边缩放范围。
<button id="zoom-out">−</button>
<span id="zoom-val">100%</span>
<button id="zoom-in">+</button>
<button id="zoom-fit" title="适配视图">⤢</button>
</main>
<h3 id="prop-title">属性</h3>
未选中对象。<br><br>· 从左侧拖/点设备到画布<br>· 连线模式连接两个节点<br>· 选中节点或连线后可在此编辑属性、风险等级与安全标签
</aside>
<footer>
<span >节点 <b id="st-nodes">0</b></span>
<span >连线 <b id="st-links">0</b></span>
<span >信任域 <b id="st-domains">0</b></span>
<span id="st-mode">模式：选择</span>
</footer>
</body>
</html>

复制代码

程序后续还会不断迭代更新，如果本程序对您有资助，或者您有好的建议意见，或者您基于这个程序基础上做了更好的功能，也请不吝赐教

免责声明：如果侵犯了您的权益，请联系站长及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金.

【原】网络安全拓扑编辑器（My first vide coding application）

本帖子中包含更多资源

梦见你的名字