See how Atlantean IT built a comprehensive online diagramming platform using modern web technologies. Modeldraw demonstrates our full-stack expertise in creating sophisticated, collaborative applications that scale from MVP to enterprise-grade solutions.

Project Overview

Modeldraw is a comprehensive online diagramming platform that enables teams to create UML diagrams, business process maps, wireframes, and collaborative planning tools. Built as a modern web application, it demonstrates Atlantean IT's expertise in developing complex, real-time collaborative software solutions.

Key Achievements:

• 24+ feature releases in active development
• Support for 20+ diagram types including UML, ERD, Flowcharts, and Agile workflows
• Enterprise-grade features including version control, project permissions, and custom subdomains
• Real-time multi-user collaboration

Technical Architecture

Frontend: Angular & Canvas-Based Rendering

The frontend leverages Angular with TypeScript to deliver a sophisticated diagramming experience:

Core Technologies:

• Angular Framework: Provides robust component architecture and dependency injection
• TypeScript: Ensures type safety across the complex codebase
• Material Design Components: Delivers consistent, professional UI/UX
• HTML5 Canvas: Powers the core diagramming engine for high-performance rendering

Canvas Architecture Highlights:

• Custom rendering engine built on HTML5 Canvas for optimal performance
• Shape packages supporting UML notation, flowchart symbols, and business diagram elements
• Real-time cursor tracking and collaborative editing indicators
• Infinite canvas implementation with smooth zoom transitions and pan navigation
• Smart alignment guides and auto-layout algorithms for professional diagram appearance

Advanced Frontend Features:

• Intelligent Tool Switching: Automatically returns to select tool after shape placement
• Quick Properties Panel: Context-sensitive editing without modal dialogs
• Inline Editing: Direct text editing within diagram elements
• Smart Auto-Layout: Automatic link routing with bend optimization
• Shape Properties Dialog: Dynamic form controls generation from shape metadata

Backend: .NET & Entity Framework

The backend infrastructure demonstrates enterprise-level architecture patterns:

Core Technologies:

• .NET Framework: Provides robust server-side application framework
• Entity Framework: Handles complex data relationships and migrations
• SQL Server: Reliable data persistence with advanced querying capabilities
• ASP.NET Web API: RESTful API design for frontend-backend communication

Data Architecture:

• Complex Entity Relationships: Manages projects, diagrams, shapes, connections, and user permissions
• Version Control System: Tracks changes across diagram elements with publishing workflow
• File Attachment System: Secure file storage linked to diagram elements
• Multi-tenant Architecture: Project-level permissions and white-label branding support

Real-Time Collaboration:

• SignalR Integration: Enables real-time multi-user editing with cursor position sharing
• Conflict Resolution: Intelligent handling of simultaneous edits
• Session Management: Maintains user state across collaborative sessions

Cloud Iinfrastructure: Azure App Sservices

Hosting & Deployment:

• Azure App Services: Scalable web application hosting with automatic scaling
• Azure SQL Database: Managed database service with automatic backups
• Azure Blob Storage: Secure file storage for attachments and assets
• Azure DNS Zone: Managing app subdomains
• Azure Key Vault: Secure management of and access to application secrets

Technical Challenges & Solutions

Challenge 1: Real-Time Collaborative Editing

Solution: Implemented operational transformation patterns with SignalR for conflict-free collaborative editing. Custom algorithms handle simultaneous shape movements and property changes while maintaining diagram integrity.

Challenge 2: Auto-layout of Elbow Links (Connectors)

Solution: Developed intelligent connector routing that automatically determines the optimal path between diagram elements. The algorithm evaluates multiple layout options including straight lines, single-bend paths, and two-bend configurations (zig-zag and U-shaped routes). A sophisticated scoring system applies bonuses for clean visual appearance and penalties for overlapping elements.

Challenge 3: Inline Editing of Shape Properties

Solution: Implemented a sophisticated in-canvas text editing system that overlays HTML input fields directly onto canvas elements. The solution handles multi-line text editing with automatic text sizing to fit within shape boundaries.

Challenge 4: Scalable Multi-tenant Architecture

Solution: Designed Entity Framework models with tenant isolation at the database level. Project-based permissions system enables granular access control without performance impact.

Results & Impact

Technical Metrics:

• Performance: Optimized architecture performs well even with low-tier Azure SQL DTUs, demonstrating efficient query design and data access patterns.
• Scalability: Supports concurrent editing sessions with minimal latency
• Reliability: 99.9% uptime with Azure App Services hosting
• Security: JWT token-based authentication with secure API endpoints and role-based access control

Feature Delivery:

• 24 major features delivered in recent development cycles
• 20+ diagram types supporting diverse user workflows
• Real-time collaboration with multi-user cursor tracking
• Version control system with publishing workflow

Conclusion

Modeldraw demonstrates Atlantean IT's capability to deliver complex, full-stack web applications using modern technologies. The project showcases expertise in:

• Advanced Frontend Development: Custom canvas rendering with Angular and TypeScript
• Scalable Backend Architecture: .NET and Entity Framework handling complex business logic
• Cloud Infrastructure: Azure services providing enterprise-grade hosting and monitoring
• Real-time Collaboration: SignalR implementation for multi-user editing
• Enterprise Features: Version control, permissions, and custom subdomains

This technical foundation supports ongoing feature development and demonstrates our ability to build sophisticated web applications that scale with business requirements.

---

Modeldraw continues active development with features like BPMN support, system architecture diagrams, and natural language processing on the roadmap, showcasing Atlantean IT's commitment to innovation and technical excellence.