Show HN: Visual Architecture Diagram Builder in Angular with 47+ Components

Source: Dev.to

Created an open‑source Angular component for building architecture diagrams.

Features

• 47+ pre‑built components (AWS, Azure, AI/ML tools, etc.)
• Drag‑and‑drop interface with smart grouping and connections
• Export to PNG, JSON (and SVG)
• Keyboard shortcuts for fast editing
• Offline support with auto‑save
• Color‑coded hierarchy for nested groups
• Free‑hand pen tool, basic shapes, text annotations
• Customizable stroke, fill, and opacity
• Templates for reusable patterns

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 {}

The component provides:

• Left sidebar with all 47+ components
• Drawing tools toolbar
• Color/style panel
• Zoom/pan controls
• Keyboard shortcuts (see below)

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

• Visualize RAG chatbots (e.g., GPT‑4, Pinecone, API Gateway)
• Organize services by domain with grouping
• Build AWS/Azure/GCP architectures quickly
• Sketch solutions during technical interviews

Comparison Overview

Performance

• Initial load: ~2–3 seconds (icon loading)
• 60 FPS dragging/zooming with 50+ components
• Bundle size: ~680 KB (gzipped)
• Memory usage: ~50 MB for a typical diagram

Roadmap (planned)

• Real‑time collaboration
• Cloud sync
• VS Code extension
• Export to Terraform/CDK
• AI‑powered auto‑layout
• Custom component creator

Demo & Resources

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

Feel free to share feedback:

• What features would you like?
• Which cloud services should be added?
• Any bugs or issues?

If you find this useful, a GitHub star would be appreciated! ⭐