🎨 SVG Arch Editor
🆕 新建
💾 保存
📂 打开
↶ 撤销
↷ 重做
语言
🇨🇳 中
🇬🇧 EN
主题
✨ 虾塘风(毛玻璃/发光)
📐 扁平通用
🌙 深色
☀️ 浅色
👁 预览
📋 导出代码
节点形状(拖到画布)
⬛ 矩形
⏹ 圆角
⬤ 圆形
⬬ 椭圆
◆ 菱形
⬡ 六边形
🎯 图标节点
🏷 胶囊
分组容器
📦 分组框
📋 虚线框
导出控件设置
是否显示控件
显示 ➕➖⊙⛶
不显示
位置
右上角
左上角
右下角
左下角
排列方向
水平
垂直
按钮大小
小 (28px)
中 (32px)
大 (40px)
操作提示
• 拖动形状到画布
• 点击节点选中
• 悬停节点四角端口
• 从端口拖出 = 连线
• 按住
Space
拖动 = 平移
•
滚轮
= 缩放
•
Del
= 删除
•
Ctrl+D
= 复制
•
Ctrl+P
= 预览
• 双击节点 = 编辑文字
就绪 · 节点 0 · 连线 0
👈 从左侧拖形状到画布开始创建
选中节点或连线后,这里会显示属性
节点属性
文字(主)
副标题
图标(emoji)
😀
填充
描边
文字色
字号
宽
高
填充样式
纯色
渐变-紫蓝
渐变-蓝青
渐变-绿
无填充
发光效果
英文文字(用于双语)
🗑 删除(Del)
连线属性
类型
直线
折线(正交)
贝塞尔曲线
颜色
线宽
样式
实线
虚线 4-4
虚线 6-6
虚线 10-6
点线 2-4
动画(跑马灯)
静止
正常流动 20s
快速流动 10s
显示箭头
连线标签
🗑 删除
导出完整 HTML(含放大/缩小/复原/全屏 + 拖动 + 滚轮缩放)
💡 直接保存为 .html 文件双击打开;或复制其中的
<svg>
片段嵌入你的网页(控件 JS 也需一并带上)
📋 复制
⬇️ 下载 .html
关闭
😀 选择图标
关闭