Interactive Architecture Viewer¶

**🎨 Interactive Mermaid Viewer with Pan & Zoom** Explore the MORELO architecture interactively with our built-in viewer!

🌐 Open Interactive Viewer¶

🚀 Launch Interactive Viewer

✨ Features¶

Feature	Description
🖱️ Pan & Zoom	Drag to move, scroll to zoom
📊 Multiple Views	Switch between 6 different architecture views
⬇️ Export	Download diagrams as SVG
⛶ Fullscreen	Immersive viewing experience
🔗 Interactive Links	Click nodes to view documentation
📱 Responsive	Works on desktop, tablet, mobile

🎯 Available Views¶

1. Simple Overview 📊¶

7-layer high-level architecture - perfect for presentations

2. Customer & Frontend 👤¶

Customer touchpoints and SvelteKit frontend layer

3. API & Business Logic 🚀¶

SonicJS gateway, CRM, configurator, workflows

4. Data Layer 🗄️¶

Cloudflare D1, R2, KV, Queues at the edge

5. Integrations 🔌¶

Payment (Klarna), ERP (sevDesk), MS365, Production (Plane.so)

6. Complete Architecture 🗺️¶

Full system overview with all components

🎨 Controls¶

🖱️ Left Click + Drag  = Pan (move around)
🖱️ Scroll Wheel       = Zoom in/out
🔍 Zoom In Button      = Zoom closer
🔍 Zoom Out Button     = Zoom further
↺  Reset Button        = Return to center
⬇️ Download SVG        = Export as vector file
⛶  Fullscreen          = Expand to full screen

🚀 Quick Start¶

Click "Launch Interactive Viewer" button above
Select view from dropdown (try "Simple Overview" first)
Drag with mouse to pan around
Scroll to zoom in/out
Export as SVG for presentations

📱 Mobile Usage¶

Pinch to zoom
Swipe to pan
Tap dropdown to switch views
Tap fullscreen for better viewing

🔗 Alternative Viewers¶

Prefer external tools? We've got you covered:

Viewer	Best For	Link
Mermaid Live	Live editing, sharing	mermaid.live
MermaidChart	Team collaboration	mermaidchart.com
Built-in Viewer	Quick exploration	viewer.html ⭐

📚 Source Files¶

All diagrams are generated from these files:

MORELO_SYSTEM_ARCHITECTURE_SIMPLE.mmd - Simple overview
MORELO_SYSTEM_ARCHITECTURE_DETAILED.mmd - Layer-by-layer views
MORELO_SYSTEM_ARCHITECTURE.mmd - Complete 423-line diagram

Location: /Users/gm/Documents/Visual_Code_Morello/_PROJECT_INIT/

🎓 Tips & Tricks¶

Performance Tip

Start with Simple Overview - it loads faster and gives you a quick understanding before diving into details.

Browser Compatibility

Works best in Chrome, Firefox, Safari, Edge (latest versions). Requires JavaScript enabled.

Sharing

You can share the viewer URL directly with team members who have Cloudflare Access credentials.

🔐 Access Control¶

This viewer is protected by Cloudflare Access (One-Time PIN).

Only whitelisted emails can access: - Team members - Authorized dealers - Approved partners

Need access? Contact the MORELO team.

Last Updated: 15. Januar 2026
Documentation: main.morelo-dealer-suite.pages.dev