Show HN: Angular에서 47개 이상의 컴포넌트를 포함한 시각적 아키텍처 다이어그램 빌더

Source: Dev.to

오픈소스 Angular 컴포넌트를 만들어 아키텍처 다이어그램을 손쉽게 그릴 수 있습니다.

Features

• 47개 이상의 사전 구축 컴포넌트 (AWS, Azure, AI/ML 도구 등)
• 스마트 그룹화와 연결을 지원하는 드래그‑앤‑드롭 인터페이스
• PNG, JSON (및 SVG) 로 내보내기
• 빠른 편집을 위한 키보드 단축키
• 자동 저장이 가능한 오프라인 지원
• 중첩 그룹을 색상으로 구분하는 계층 구조
• 자유형 펜 도구, 기본 도형, 텍스트 주석
• 스트로크, 채우기, 투명도 커스터마이징
• 재사용 가능한 패턴을 위한 템플릿

Installation

npm install konva-architecture-canvas konva

Quick Usage

import { Component } from '@angular/core';
import { KonvaCanvasMainComponent } from 'konva-architecture-canvas';

@Component({
  selector: 'app-diagram',
  standalone: true,
  imports: [KonvaCanvasMainComponent],
  template: `
    
    
  `
})
export class DiagramComponent {}

이 컴포넌트는 다음을 제공합니다:

• 47개 이상의 컴포넌트를 포함한 왼쪽 사이드바
• 그리기 도구 툴바
• 색상/스타일 패널
• 확대/축소 및 팬 컨트롤
• 키보드 단축키 (아래 참고)

Keyboard Shortcuts

Group Coloring (by nesting depth)

function getGroupColor(level: number): string {
  const colors = ['#9b59b6', '#e74c3c', '#f39c12', '#27ae60', '#3498db'];
  return colors[level % colors.length];
}

Export to High‑Resolution PNG

exportToPNG(scale: number = 2): void {
  const dataURL = this.stage.toDataURL({
    pixelRatio: scale,
    mimeType: 'image/png',
    quality: 1.0
  });
  this.downloadImage(dataURL);
}

Dynamic Icon Loading with Caching

private iconCache = new Map();

async loadIcon(name: string): Promise {
  return this.iconCache.get(name) ?? await this.fetchAndCache(name);
}

Use Cases

• RAG 챗봇 시각화 (예: GPT‑4, Pinecone, API Gateway)
• 도메인별 서비스 정리 및 그룹화
• AWS/Azure/GCP 아키텍처를 빠르게 구축
• 기술 면접 중 솔루션 스케치

Comparison Overview

Performance

• 초기 로드: 약 2–3 초 (아이콘 로드)
• 50개 이상의 컴포넌트에서도 60 FPS 드래그/줌
• 번들 크기: 약 680 KB (gzip)
• 메모리 사용량: 일반적인 다이어그램 기준 약 50 MB

Roadmap (planned)

• 실시간 협업
• 클라우드 동기화
• VS Code 확장 기능
• Terraform/CDK 로 내보내기
• AI 기반 자동 레이아웃
• 커스텀 컴포넌트 생성기

Demo & Resources

• Live Demo:
• npm: npm install konva-architecture-canvas
• GitHub:

피드백을 자유롭게 남겨 주세요:

• 어떤 기능을 추가했으면 좋겠나요?
• 어떤 클라우드 서비스를 추가하면 좋을까요?
• 버그나 이슈가 있나요?

이 프로젝트가 도움이 되었다면 GitHub 스타를 눌러 주시면 감사하겠습니다! ⭐