AngularTypeScript工具站

ng diagram electric circuit — Angular 工具站模板

作者 synergycodes

Angular + ngDiagram 构建的交互式电路原理图编辑器模板，支持拖放、正交连线、焊点、导出 DXF/SVG/JSON。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

1 个预览视图

补采画面存在空白、加载或排版异常，当前保留可用的原始预览。

首页

访问演示网站在新标签页打开

桌面端截图

浏览首屏、内容层次与整页布局。

目前有 1 张原始预览，可打开完整图片查看设计细节。

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-09-05查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

数据驱动的元件目录，添加新元件只需修改目录和符号 case

正交连线编辑，支持拖拽线段重塑、网格吸附、端口锚定

焊点（junction）支持，可从连线分支、合并删除时清理孤立焊点

导出 DXF、可编辑 SVG、JPEG 和 JSON 四种格式

右键上下文菜单，支持复制、剪切、粘贴、删除、旋转

暗色/亮色主题，基于自定义设计令牌系统

模板详细介绍

ng diagram electric circuit 是一个基于 Angular 19 和 ngDiagram 的交互式电路原理图编辑器模板，由 Synergy Codes 团队开发。项目以真实可运行的在线演示为核心，展示了如何在 Angular 中构建一个功能完整的节点式编辑器。其核心结构包括可搜索的组件库、自由画布、正交连线编辑、焊点（junction）支持、右键上下文菜单、属性侧边栏、小地图以及多种导出格式。组件库完全数据驱动，每个元件（如电阻、电容、晶体管、NE555 等）在 component-catalog.ts 中定义，添加新元件只需增加目录条目和对应的 SVG 符号 case。

该模板适合作为电路图捕获工具、节点式编辑器或组件库驱动型图表应用的起点。它演示了 ngDiagram 的多项高级 API，包括正交连线路由、手动重塑、焊点拓扑、中间件等。导出功能支持 DXF（面向 AutoCAD/BricsCAD/LibreCAD）、可编辑 SVG、JPEG 快照和 JSON 文档。项目依赖精简，仅 Angular、ngDiagram 和 html-to-image，未引入第三方 UI 库，样式基于自定义设计令牌系统，支持暗色/亮色主题。

需要注意的是，该模板的元件库仅包含单一原始元件，不支持复合元件（如桥式整流器）。项目基于 Angular 19.2 和 ngDiagram 1.3，要求 Node.js 18.19+ 等版本。虽然提供了单元测试（Vitest）和 lint 脚本，但生产就绪程度需自行评估。上线前应检查导出格式是否满足实际需求，并确认 JSON 格式与 SPICE 网表等标准的兼容性。

可直接运行在线工具可视化文本处理图像处理

适合你的项目吗？

适用场景

构建电路原理图捕获工具或电子设计自动化（EDA）前端
开发节点式编辑器，如流程图、数据流或逻辑图编辑器
作为 ngDiagram 库的参考实现，学习其高级 API 用法
需要导出 DXF 或 SVG 的矢量绘图应用

适合人群

熟悉 Angular 和 TypeScript 的开发者
需要快速搭建可视化编辑器原型的团队
对 ngDiagram 库感兴趣并希望深入集成的项目
需要电路图或类似节点图编辑功能的应用

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
克隆仓库后运行 npm install 和 npm start，默认加载一个 NE555 多谐振荡器示例电路。
2
Node.js 需 18.19+、20.11+ 或 22，npm 10+。
3
修改种子电路在 src/app/circuit-editor/diagram/data.ts，调整视口配置在 circuit-editor.config.ts。
4
添加新元件需修改 component-catalog.ts 和 component-symbol.component.ts。

查看仓库使用说明