Professional Canvas-Based Architecture Diagram Builder - Create stunning cloud infrastructure, AI/ML systems, and technical architecture diagrams with an intuitive drag-and-drop interface.
🚀 Live Demo | 📦 npm Package | 📖 Documentation
Professional architecture diagrams in minutes, not hours
Stop switching between Draw.io and Lucidchart! Build architecture diagrams directly in your Angular applications with:
- ✅ 47+ Pre-built Components - AWS, Azure, GCP, AI/ML tools ready to use
- ✅ Drag-and-Drop Interface - Intuitive canvas with smooth interactions
- ✅ Smart Grouping - Nested groups with automatic color coding (5 levels)
- ✅ Export & Share - PNG images and JSON for version control
- ✅ Keyboard Shortcuts - Power-user features for productivity
- ✅ Auto-Save - Never lose your work with LocalStorage
- ✅ Two Canvas Modes - Konva.js (primary) and Cytoscape.js options
npm install konva-architecture-canvas konvaimport { Component } from '@angular/core';
import { KonvaCanvasMainComponent } from 'konva-architecture-canvas';
@Component({
selector: 'app-diagram',
standalone: true,
imports: [KonvaCanvasMainComponent],
template: '<lib-konva-canvas-main></lib-konva-canvas-main>',
styles: [`
lib-konva-canvas-main {
display: block;
width: 100%;
height: 100vh;
}
`]
})
export class DiagramComponent {}That's it! You now have a full-featured architecture canvas. 🎉
| Category | Components |
|---|---|
| AI Models | GPT-4, Claude, Llama, Gemini, Mistral, Cohere, DeepSeek, Phi, Qwen |
| Vector DBs | Pinecone, Weaviate, Milvus, Chroma, pgVector, Neon |
| Agent Frameworks | LangChain, AutoGen, CrewAI, LlamaIndex, Semantic Kernel, LangGraph |
| Observability | Langfuse, Arize Phoenix, Helicone, Datadog, Comet Opik |
| Cloud (AWS) | EC2, Lambda, S3, RDS, API Gateway, CloudFront, SageMaker |
| Cloud (Azure) | VM, Functions, Blob Storage, SQL, AI Services |
| Cloud (GCP) | Compute Engine, Cloud Functions, Storage, BigQuery |
| Databases | PostgreSQL, MongoDB, Redis, DynamoDB, Firestore |
| Tools | Composio, Exa, NPI, Browserbase, LinkUp |
| Memory | Zep, Mem0, Cognee, VertexAI |
- Shapes: Rectangle, Circle, Line, Arrow
- Freehand Pen: Draw custom diagrams
- Text Editor: Double-click to edit text
- Color Picker: 12-color palette + custom colors
- Styling: Independent stroke and fill colors with opacity control
- 5-Level Hierarchy with automatic color coding:
- Level 1: Purple
- Level 2: Red
- Level 3: Orange
- Level 4: Green
- Level 5: Blue
- Drag groups as single units
- Nested grouping - Groups within groups
- Visual feedback - Colored borders show nesting depth
- Infinite Canvas with smooth pan and zoom
- Grid System for alignment
- Multi-Selection (Shift+Click or drag rectangle)
- Transformer with resize handles
- Snap to Grid (optional)
- Dark/Light Theme support
| Shortcut | Action |
|---|---|
Cmd/Ctrl + Z |
Undo |
Cmd/Ctrl + Shift + Z |
Redo |
Cmd/Ctrl + D |
Duplicate |
Cmd/Ctrl + G |
Group selected items |
Cmd/Ctrl + Shift + G |
Ungroup |
Cmd/Ctrl + A |
Select all |
Delete / Backspace |
Delete selected |
V |
Select tool |
R |
Rectangle tool |
C |
Circle tool |
L |
Line tool |
A |
Arrow tool |
Space + Drag |
Pan canvas |
- JSON Export: Complete architecture with all data
- PNG Export: High-quality images (2x resolution)
- Template System: Save and reuse architectures
- Sample Diagrams: 8+ ready-to-use examples included
The /samples folder includes:
- simple-rag-chatbot.json - Basic RAG chatbot with vector DB
- multi-model-ai-platform.json - Multi-model AI platform
- cloud-infrastructure.json - AWS cloud infrastructure
- enterprise-ai-platform.json - Enterprise AI/ML platform
- observability-stack.json - Complete observability setup
- grouped-microservices.json - Microservices with grouping
- nested-groups-cloud.json - Complex nested architecture
- enterprise-ai-stack-complete.json - Comprehensive Enterprise AI stack
- Node.js >= 18.x
- npm >= 10.x
- Angular CLI 21.x
# Clone repository
git clone https://github.com/samba425/konva-architecture-canvas.git
cd konva-architecture-canvas
# Install dependencies
npm install
# Start development server
npm startApplication runs at: http://localhost:4200
# Build for production
npm run build
# Build library
npm run build:lib
# Publish to npm
cd dist/konva-canvas-builder
npm publish- Developer Guide - Complete development documentation
- Cytoscape Canvas Guide - Alternative canvas implementation
- GitHub Pages Deployment - Deployment instructions
- Premium Features - Advanced features roadmap
- 📝 Building a Visual Architecture Tool with Angular - Full walkthrough on Medium
- 🎥 Video Tutorial - Interactive demo
- Cloud Architecture - Design AWS, Azure, GCP infrastructures
- AI/ML Systems - Plan RAG pipelines, LLM applications
- Microservices - Visualize service dependencies
- System Design - Interview preparation and planning
- Documentation - Technical architecture documentation
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Real-time Collaboration - Multiple users editing simultaneously
- Custom Component Creator - Upload your own icons and components
- Cloud Sync - Save diagrams to cloud storage
- Export to IaC - Generate Terraform/CDK from diagrams
- AI-Powered Layout - Auto-arrange for optimal readability
- Templates Library - Community-contributed templates
- Version History - Track changes over time
- Comments & Annotations - Team collaboration features
This project is licensed under the MIT License - see the LICENSE file for details.
Samba Siva
- GitHub: @samba425
- Email: asiva325@gmail.com
- Medium: @asiva325
- LinkedIn: Connect with me
Give a ⭐️ if this project helped you!
- Konva.js - HTML5 Canvas JavaScript framework
- Angular - The modern web developer's platform
- Cytoscape.js - Graph theory library
- Font Awesome - Icon library
- Iconify - Unified icon framework
Made with ❤️ by Samba Siva
