🌐 NetTopo v3.0: Das ultimative Tutorial

Willkommen beim NetTopo-Tool! Dieses Tool wurde entwickelt, um dir die Planung, Visualisierung und Dokumentation von Netzwerken so einfach und modern wie möglich zu machen. Ob du ein kleines Heimnetzwerk skizzieren, ein SOHO-Setup planen oder eine komplexe Enterprise-Umgebung entwerfen möchtest – NetTopo bietet dir alle nötigen Werkzeuge.

🚀 Jetzt im Google Play Store:
NetTopo ist ab Version 3.0 (Build 122) offiziell im Google Play Store verfügbar!
👉 Hier geht es zur Android App im Google Play Store

In diesem Tutorial gehen wir im Detail auf alle Funktionen der App ein – einschließlich der neuen KI-Integration in Version 3.0.

---

1. Die Benutzeroberfläche (Workspace) 🖥️

Sobald du NetTopo öffnest, landest du direkt auf der Arbeitsfläche (Canvas). Die UI ist in drei Bereiche aufgeteilt:

• Die Sidebar (Links): Hier findest du die Geräte-Bibliothek. Auf Mobilgeräten kannst du sie einfach über die Lasche am linken Rand hereinziehen oder antippen. Zudem befinden sich hier die vorgefertigten Netzwerk-Templates und “Custom Assets”.
• Der Canvas (Mitte): Deine unendliche Arbeitsfläche. Unten links hilft dir eine kleine Minimap bei der Orientierung.
• Das Info-Panel & Toolbar: In der Sidebar befinden sich Shortcuts für den Schnellzugriff. Wenn du ein Gerät oder eine Verbindung anklickst (oder doppeltippst), öffnet sich rechts das Info-Panel für Details.

1.1 Mobile Bottom-Sheet (Neu in v3.0)

Auf Smartphones und Tablets (≤768px Breite) verwandelt sich das Info-Panel automatisch in ein modernes Bottom-Sheet:

• Touch-Griffleiste: Oben am Sheet befindet sich eine horizontale Leiste. Damit kannst du das Sheet nach oben (vollständig) oder unten (schließen) ziehen.
• Swipe-Gesten: Nach oben wischen = Panel voll öffnen. Nach unten wischen = Panel schließen oder minimieren.
• Optimiert für Touch: Alle Buttons und Eingabefelder sind mindestens 44x44px groß und ideal für Fingerbedienung.

Tipp: Auf dem Desktop bleibt das klassische rechtsseitige Panel erhalten. Die Bottom-Sheet-Funktion ist automatisch aktiv und benötigt keine manuelle Aktivierung.

---

2. Geräte hinzufügen und verwalten (Nodes) 💻

2.1 Integrierter Subnetz-Rechner

Bevor du Geräte platzierst, kannst du den praktischen Subnetz-Rechner nutzen. Gib einfach eine IP-Adresse und CIDR ein, und die App berechnet sofort alle Details:

2.2 Geräte auf den Canvas ziehen

Ziehe (Drag & Drop) ein Gerät wie einen Router, Switch oder Server aus der Sidebar einfach an die gewünschte Stelle auf der Arbeitsfläche. Du kannst auch tippen, dann wird es mittig platziert.

2.3 Geräte hinzufügen

Tippe auf das + Symbol, um ein neues Gerät hinzuzufügen. Du kannst aus verschiedenen Gerätetypen wählen:

Hier siehst du die verfügbaren Geräte-Kategorien:

2.4 Eigenschaften bearbeiten (Info-Panel)

Mit einem Klick / Doppelklick auf ein Gerät öffnet sich rechts das Info-Panel. In Version 3.0 wurde das Panel in modulare Tabs aufgeteilt:

• Projekt-Tab: Name, Mgmt IP, MAC-Adresse und Zubehör des Geräts.
• Properties Tab: Erweiterte Eigenschaften wie OS, Hersteller, Seriennummer.
• Export Tab: Schnellzugriff auf Export-Optionen für dieses Gerät.

Besonderheit - Netzwerke (Wolken-Symbol): Bei einem Netzwerk-Node kannst du statt der Management-IP eine Netzwerk-Adresse (z.B. 192.168.178.0) und Subnetzmaske eintragen.

2.5 Custom Assets strukturieren

Speicherst du ein Gerät oft als Vorlage (Stern-Symbol im Info-Panel), taucht es links unter Custom Assets auf. In Version 3.0 sind diese Assets perfekt nach Gerätetyp gruppiert und einklappbar.

---

3. Verbindungen herstellen (Edges) 🔗

NetTopo macht das Verkabeln extrem einfach:

1. Magnetisches Verbinden (Hover-Connect): Ziehe ein Gerät nah an ein anderes. Bleibe dort für 1 Sekunde stehen. Ein Ladebalken füllt sich, danach wird automatisch ein LAN-Kabel gezogen.
2. Klassisches Ziehen (Drag-Connect): Klicke auf kleine blaue Punkte an den Seiten eines Geräts und ziehe die Linie zu einem anderen Gerät.
3. Automatischer Connect Mode: Hilft auf Touchscreens. “Connect” Button anklicken, dann zwei Geräte nacheinander antippen.

Ein Doppelklick auf ein Kabel öffnet Linieneigenschaften: Medium (Kupfer, Glas, WLAN, VPN), Port-Labels und Zonen-Farben (LAN Blau, WAN Rot, DMZ Orange).

---

4. Advanced: Scanner, Ping & Auto-Organize 🚀

NetTopo bietet Funktionen, die es von reinen Zeichen-Tools abheben:

4.1 Active Scanner

Mit dem Button Active Scanner oben in der Sidebar (Radar-Symbol) kannst du ganze IP-Bereiche deines lokalen Netzwerks scannen (Ping/SNMP). Gefundene Geräte werden automatisch in die Custom Assets importiert.

4.2 Echtzeit Ping Monitor

Klicke auf Ping Monitor in der Sidebar. Die App pingt alle Geräte auf dem Canvas (sofern Mgmt IP gesetzt ist) in regelmäßigen Abständen an.

• 🟢 Grüner Ring / Puls: Gerät ist ONLINE.
• 🔴 Roter Ring: Gerät ist OFFLINE.

4.3 Die magischen Layout-Funktionen 🪄

NetTopo bietet gleich drei verschiedene automatisierte Helfer:

1. Auto-Connect (Automatische Verkabelung): Das Tool liest die im Info-Panel hinterlegten IP-Adressen aller platzierten Geräte aus. Es erkennt zusammengehörige /24 Subnetze und zieht vollautomatisch alle Kabel! Gateways (Router/Firewall) werden oben ans Subnetz angeschlossen, alle Clients visuell passend unten angehängt.
2. Auto-Organize (Zauberstab-Icon): Perfekt für Enterprise-Netze. Es liest die Gerätetypen und schichtet dein Netz starr nach Zonen (WAN ganz oben → Firewalls → Switches → Server → Endgeräte). Es bringt selbst riesige unverbundene Topologien sofort in eine lesbare Form.
3. Layout V & Layout H: Grid-Layouts ohne Netzwerklogik. Die Geräte werden stur nach Typen sortiert und pixelgenau in Kacheln platziert (entweder von oben nach unten oder links nach rechts).

(Pro-Tipp: Wenn du ein Gerät markierst und den “Pin” (Reißzwecke) im Info-Panel aktivierst, wird es von all diesen Algorithmen ignoriert und behält seinen festen Platz!)

---

5. 🤖 KI-Integration mit Groq Cloud (Neu in v3.0)

Version 3.0 bringt eine experimentelle KI-Integration direkt in NetTopo. Damit kannst du Netzwerk-Topologien analysieren lassen, Konfigurationsvorschläge bekommen und Fehler erkennen.

5.1 Groq Cloud API Key einrichten

⚠️ Wichtig: Für die KI-Funktionen benötigst du einen kostenlosen API Key von Groq Cloud.

So richtest du es ein:

1. Groq Account erstellen:

   • Gehe zu console.groq.com
   • Erstelle ein kostenloses Konto oder melde dich an
   • Navigiere zu API Keys im Dashboard
   • Klicke auf “Create API Key”
   • Kopiere den erstellten Key (wird nur einmal angezeigt!)

2. API Key in NetTopo eingeben:

   • Öffne die Einstellungen (Zahnrad-Symbol)
   • Wechsle zum Tab “KI”
   • Füge deinen API Key im Feld “Groq API Key” ein
   • Speichere die Einstellungen

Hinweis: Dein API Key wird nur lokal in deinem Browser gespeichert und niemals an Dritte weitergegeben. Die Kommunikation erfolgt direkt über die Groq API.

5.2 KI-Features nutzen

Nach der Einrichtung stehen dir folgende KI-Funktionen zur Verfügung:

• Netzwerk-Analyse: Die KI analysiert deine Topologie und identifiziert potenzielle Probleme (z.B. fehlende Redundanz,Single Point of Failure).
• Optimierungsvorschläge: Basierend auf deiner Topologie schlägt die KI Optimierungen vor (z.B. VLAN-Segmentierung, Load-Balancing).
• Konfigurationshilfe: Die KI kann Router- und Firewall-Konfigurationen vorschlagen.
• Fehlerdiagnose: Bei Problemen analysiert die KI die Topologie und schlägt Lösungen vor.

5.3 Lokale KI ohne Cloud (Experimentell)

Für Nutzer, die keine Daten an Cloud-Dienste senden möchten, bietet NetTopo auch lokale KI-Modell-Unterstützung über WebGPU:

⚠️ Experimentell: Die lokalen KI-Funktionen sind experimentell und benötigen eine kompatible GPU.

• Modell-Download: In den KI-Einstellungen kannst du ein lokales Modell (z.B. Llama 3.2) herunterladen.
• Speicherprüfung: Vor dem Download prüft die App automatisch den verbleibenden Speicherplatz. Du brauchst mindestens 2-4 GB freien Speicher.
• Dynamische Quantisierung: NetTopo nutzt automatisch die beste Quantisierung für dein Gerät:
  • WebGPU-fähige Geräte: q4f16 (optimiert für mobile GPUs wie Adreno)
  • Ohne GPU: q4_0 (CPU-optimiert)
• VRAM-Absturz-Schutz: Bei Geräten mit wenig VRAM wird automatisch auf eine kleinere Quantisierung umgeschaltet, um Speicherüberläufe zu vermeiden.

Empfehlung nach Gerät:

Gerätetyp	Empfohlene Einstellung
Desktop mit dedizierter GPU	WebGPU + q4f16
Neues Smartphone (6+ GB RAM)	WebGPU + q4f16 (Vorsicht bei VRAM!)
Älteres Smartphone (3-4 GB RAM)	WebGPU deaktiviert, CPU-Modus
Tablet	WebGPU + q4f16 (je nach RAM)

🏷️ Kennzeichnung: Alle KI-Features sind in der App mit einem (Experimentell)-Badge gekennzeichnet, damit du immer weißt, dass es sich um experimentelle Funktionen handelt.

---

6. Performance-Optimierungen in v3.0 ⚡

Version 3.0 bringt erhebliche Performance-Verbesserungen:

6.1 Bundle-Optimierung

• Dynamisches Laden: Schwere Bibliotheken wie jspdf (PDF-Export) und html-to-image (Bild-Export) werden jetzt per import() dynamisch geladen.
• Einsparung: Über 400 kB werden aus dem Haupt-Bundle herausgenommen.
• Effekt: Die App lädt deutlich schneller, besonders auf langsamen Verbindungen.

6.2 Speicherplatz-Prüfung

• Vor dem Download eines KI-Modells prüft die App automatisch den verbleibenden Speicherplatz (navigator.storage.estimate()).
• Bei zu wenig Speicher wird eine Warnung angezeigt, bevor der Download startet.
• Verhindert Abstürze durch unzureichenden Speicher.

6.3 Code-Splitting

• Die App lädt nur die Funktionen, die du tatsächlich nutzt.
• Der KI-Code wird erst geladen, wenn du die KI-Funktionen aufrufst.
• Export-Funktionen (PDF, SVG) werden ebenfalls懒加载.

---

7. Modulare Code-Architektur 🛠️

Version 3.0 hat die interne Architektur grundlegend überarbeitet:

7.1 InfoPanel Refactoring

Das ehemals riesige InfoPanel.jsx wurde in vier dedizierte Komponenten aufgeteilt:

• InfoPanelHeader: Navigations-Header mit Tab-Auswahl
• ProjectTab: Geräte-Details, IP-Adressen, Pin-Funktion
• PropertiesTab: Erweiterte Eigenschaften (OS, Hersteller, etc.)
• ExportTab: Schnellzugriff auf Export-Optionen

7.2 Settings Refactoring

Die Einstellungen wurden ebenfalls modularisiert:

• ProfileTab: Benutzerprofil und Projekteinstellungen
• AiTab: Groq API Key, lokale Modell-Einstellungen
• LdapTab: LDAP/AD-Integration (Enterprise)
• GeneralTab: Allgemeine App-Einstellungen

Vorteil: Wartbarkeit, Lesbarkeit und Ladezeit wurden erheblich verbessert.

---

8. Speichern und Exportieren 💾

Da NetTopo datenschutzfreundlich designt ist, werden Projekte nur lokal gespeichert.

8.1 JSON Export & Import

Nutze Exporte als manuelles Backup oder zum Teilen:

• Export: Lädt eine .json-Datei des Canvas.
• Import: Lädt ein bestehendes Projekt hoch.

8.2 Bilder, SVG & PDF-Export (Saubere Ausgabe)

Oben im Projekt-Menü findest du die Export-Buttons:

• JPEG: Exportiert deinen Plan hochauflösend als Bilddatei mit dunklem Hintergrund.
• SVG (Perfekt für Visio & Draw.io): Exportiert das Netzwerk verlustfrei als skalierbare Vektorgrafik.
• PDF: Erstellt ein vektorbasiertes A4-PDF inklusive Titel und Datum sowie einem sauberen Rahmen.

Clever: Die Export-Engine filtert automatisch alle störenden UI-Elemente wie Sidebars oder Raster weg und speichert immer nur das reine Diagramm in optimaler Passform!

---

9. Google Play Store Release 📱

Ab Version 3.0 (Build 122) ist NetTopo offiziell im Google Play Store verfügbar:

• Version: 3.0.75
• Build: 122
• Minimale Android-Version: 8.0 (Oreo)
• Download-Größe: ~15 MB
• Berechtigungen: Nur Netzwerkzugriff (für Ping/Scanner-Funktionen)

👉 Google Play Store - NetTopo

Installation

1. Öffne den Google Play Store auf deinem Android-Gerät
2. Suche nach “NetTopo” oder klicke auf den Link oben
3. Tippe auf “Installieren”
4. Öffne die App und los geht’s!

---

FAQ

Wo werden meine Netzwerke gespeichert?

Standardmäßig werden alle Projekte lokal im Browser (LocalStorage) gespeichert. Für Backups kannst du dein Projekt jederzeit als JSON-Datei exportieren.

Gibt es NetTopo als mobile App?

Ja! NetTopo ist ab Version 3.0 (Build 122) offiziell im Google Play Store verfügbar. Die App ist komplett免费 und funktioniert auf allen Android-Geräten ab Version 8.

Brauche ich für die KI-Funktionen einen API Key?

Ja, für die Groq Cloud KI-Integration benötigst du einen kostenlosen API Key von console.groq.com. Die lokalen Modell-Funktionen (WebGPU) sind ebenfalls experimentell, benötigen aber keinen API Key.

Was ist das Auto-Organize Feature?

Ein Feature, das IPs deiner platzierten Geräte analysiert und daraus automatisch logische Subnetze (Wolken) mit OSI-ähnlichem Layout (Gateway -> Switch -> Clients) baut.

Warum stürzt die App auf manchen Smartphones bei KI ab?

Ältere Android-Smartphones haben begrenzten VRAM. NetTopo v3.0 nutzt dynamische Quantisierung (q4f16), um den Speicherverbrauch zu reduzieren. Bei Geräten mit weniger als 4 GB RAM wird die WebGPU-Deaktivierung empfohlen.

---

Viel Spaß beim Netzwerken! Lade dir die Android-App herunter und fang an, deine Infrastrukturen zu dokumentieren.