Show HN：Angular 中的可视化架构图构建器，包含 47+ 组件
发布: (2025年12月6日 GMT+8 01:58)
3 min read
原文: Dev.to
Source: Dev.to
创建了一个开源的 Angular 组件，用于构建架构图。
功能
- 47+ 预制组件（AWS、Azure、AI/ML 工具等）
- 拖拽界面，支持智能分组和连接
- 导出为 PNG、JSON（以及 SVG）
- 快捷键编辑，提高效率
- 离线支持并自动保存
- 颜色编码的层级结构用于嵌套分组
- 自由手绘笔工具、基本形状、文本注释
- 可自定义描边、填充和透明度
- 可复用的模板模式
安装
npm install konva-architecture-canvas konva快速使用
import { Component } from '@angular/core';
import { KonvaCanvasMainComponent } from 'konva-architecture-canvas';
@Component({
selector: 'app-diagram',
standalone: true,
imports: [KonvaCanvasMainComponent],
template: `
`
})
export class DiagramComponent {}该组件提供：
- 左侧边栏，包含全部 47+ 组件
- 绘图工具栏
- 颜色/样式面板
- 缩放/平移控制
- 快捷键（见下方）
快捷键
| 快捷键 | 操作 |
|---|---|
| Cmd+G | 对选中项进行分组 |
| Cmd+Z | 撤销 |
| Cmd+Shift+Z | 重做 |
| V, R, C, L, A | 切换工具（选择、矩形、圆形、直线、箭头） |
| Space + Drag | 平移画布 |
| Delete | 删除选中项 |
分组着色（按嵌套深度）
function getGroupColor(level: number): string {
const colors = ['#9b59b6', '#e74c3c', '#f39c12', '#27ae60', '#3498db'];
return colors[level % colors.length];
}导出高分辨率 PNG
exportToPNG(scale: number = 2): void {
const dataURL = this.stage.toDataURL({
pixelRatio: scale,
mimeType: 'image/png',
quality: 1.0
});
this.downloadImage(dataURL);
}动态图标加载与缓存
private iconCache = new Map();
async loadIcon(name: string): Promise {
return this.iconCache.get(name) ?? await this.fetchAndCache(name);
}使用场景
- 可视化 RAG 聊天机器人（如 GPT‑4、Pinecone、API Gateway）
- 按业务域组织服务并分组
- 快速构建 AWS/Azure/GCP 架构
- 在技术面试中快速绘制方案
对比概览
| 功能 | Konva Canvas | Draw.io |
|---|---|---|
| 技术栈 | Angular 组件、Konva.js、TypeScript、RxJS | Web 应用（无框架） |
| 内置组件 | 47+（云与 AI/ML） | 手动搜索 |
| 侧重点 | 云与 AI/ML | 通用用途 |
| 快捷键 | 开发者友好 | 有限 |
| 导出格式 | PNG、JSON、SVG | 多种格式 |
| 许可证 | MIT | 各种（专有） |
| 集成方式 | npm 包、iframe 嵌入 | 独立运行 |
性能
- 初始加载：约 2–3 秒（图标加载）
- 拖拽/缩放 60 FPS，支持 50+ 组件
- 包体大小：约 680 KB（gzip）
- 内存占用：典型图表约 50 MB
路线图（计划中）
- 实时协作
- 云同步
- VS Code 插件
- 导出为 Terraform/CDK
- AI 驱动的自动布局
- 自定义组件创建器
演示与资源
- 在线演示：
- npm:
npm install konva-architecture-canvas - GitHub:
欢迎分享反馈：
- 您希望有哪些功能？
- 需要添加哪些云服务？
- 有任何 bug 或问题吗？
如果觉得有用，欢迎在 GitHub 上点星！ ⭐