🌐 NetTopo: 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.

🚀 Early Access für Android:
NetTopo ist nicht nur im Browser verfügbar! Du kannst die App jetzt auch auf deinem Android-Smartphone oder Tablet testen.
👉 Hier geht es zur Android App im Google Play Store (Early Access)

In diesem Tutorial gehen wir im Detail auf alle Funktionen der App ein.

---

1. Die Benutzeroberfläche (Workspace) 🖥️

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

• Die Sidebar (Links): Hier findest du die Geräte-Bibliothek. Du kannst sie auf Mobilgeräten über den Plus-Button (+) unten rechts einblenden. Zudem befinden sich hier die vorgefertigten Netzwerk-Templates.
• Der Canvas (Mitte): Deine unendliche Arbeitsfläche. Du kannst mit der Maus navigieren, zoomen und hast unten links eine kleine Minimap zur besseren Orientierung bei großen Projekten.
• Das Info-Panel (Rechts): Wenn du ein Gerät oder eine Verbindung anklickst (bzw. doppeltippst), öffnet sich das Info-Panel. Hier lassen sich IPs, Beschreibungen oder Verbindungstypen konfigurieren und Projekte verwalten.

Tipp: Wenn du dich auf der Arbeitsfläche verfahren hast, öffne das Info-Panel und navigiere zu “Projekt”. Ein Klick auf das Layout (V) / (H) ordnet dein Projekt automatisch an und zentriert die Ansicht.

---

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

2.1 Geräte auf den Canvas ziehen

Um ein neues Gerät hinzuzufügen, öffne die Sidebar. Zieht (Drag & Drop) ein Gerät wie einen Router, Switch oder Server einfach an die gewünschte Stelle auf der Arbeitsfläche. Alternativ kannst du auch auf ein Gerät in der Sidebar klicken, um es direkt in der Mitte des Bildschirms zu platzieren (besonders praktisch am Smartphone!).

2.2 Eigenschaften bearbeiten (Info-Panel)

Mit einem Doppelklick auf ein Gerät öffnet sich rechts das Info-Panel. Hier kannst du konfigurieren:

• Name: Ändere das Label (z.B. “Fritzbox 7590”).
• Mgmt IP: Hinterlege die Management-IP-Adresse. Fehlerhafte IP-Eingaben werden rot markiert.
• MAC-Adresse: Optional kannst du hier hardware-spezifische MAC-Adressen eintragen.
• Beschreibung: Ein Textfeld für Notizen.

Besonderheit - Netzwerke (Wolken-Symbol): Bei einem Netzwerk-Node kannst du statt der Management-IP direkt eine Netzwerk-Adresse (z.B. 192.168.178.0) und eine Subnetzmaske eintragen. Diese werden optisch unter der Wolke dargestellt.

2.3 Eigene Vorlagen (Custom Assets) speichern

Hast du einen Server mühsam konfiguriert und brauchst diesen exakten Aufbau oft? Klicke im Info-Panel des Geräts auf “Als Vorlage speichern” (Stern-Symbol). Das Gerät taucht nun in deiner Sidebar unter Eigene Vorlagen auf.

---

3. Verbindungen herstellen (Edges) 🔗

NetTopo macht das Verkabeln deiner Geräte extrem einfach. Dir stehen drei Methoden zur Verfügung:

1. Magnetisches Verbinden (Hover-Connect): Ziehe ein Gerät nah an ein anderes. Bleibe dort für ca. 2 Sekunden 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, halte gedrückt und ziehe die Linie zu einem Punkt eines anderen Geräts.
3. Connect Mode (Touch Mode): Bestens für Smartphones geeignet. Klicke auf den Button “Connect Mode” oben mittig. Tippe nun zuerst auf das Start-Gerät und danach auf das Ziel-Gerät.

3.1 Verbindungstypen anpassen

Ein Doppelklick auf eine Linie öffnet ihre Details im Info-Panel.

• LAN (Durchgezogen): Standard-Netzwerkkabel.
• VPN (Gestrichelt): Virtuelle private Netzwerke.
• Wireless (Gepunktet): WLAN oder andere Funkstrecken.
• WAN/Glas (Dick): Für Uplinks und Glasfaser.

Du kannst hier auch ein Label hinzufügen (z.B. eth0 oder VLAN 10), das gut sichtbar auf der Linie schwebt.

---

4. Automatisches Layout und Vorlagen 📐

Unordentlicher Canvas? Gehe ins Info-Panel auf den Reiter Projekt und nutze die Layout-Buttons:

• Layout (V) - Vertikal: Ordnet alles logisch von oben nach unten an.
• Layout (H) - Horizontal: Ordnet alles von links nach rechts an.

4.1 Vorgefertigte Templates nutzen

In der Sidebar ganz unten findest du Templates, die mit einem Klick einen kompletten Aufbau laden.

• Heimnetzwerk (Fritzbox, NAS, SmartHome)
• SOHO Büronetzwerk (Firewall, DMZ, VPN)
• Enterprise Netzwerk (Dual ISP, HA, Multi-VLAN)

---

5. Speichern, Exportieren und Importieren 💾

Da NetTopo datenschutzfreundlich designt ist, werden Projekte standardmäßig nur lokal in deinem Browser gespeichert.

5.1 Projekt Library

Im Info-Panel kannst du deinem Netzwerk einen Namen geben und auf Save klicken. Dein Projekt landet in der lokalen Library. Du kannst es dort jederzeit verwalten, neu laden oder löschen.

5.2 JSON Export & Import

Nutze regelmäßige Exporte als Backup!

• Export: Lädt eine .json-Datei deines gesamten Netzwerks herunter.
• Import: Lädt ein bestehendes JSON-Projekt in den Workspace. Perfekt, um Pläne mit Kollegen zu teilen.

5.3 Bilder & PDF-Export für Dokumentationen 📄

Du musst das Netzwerk präsentieren oder dokumentieren? Oben rechts im Info-Panel (oder in der zugeklappten mobilen Ansicht) findest du die Export-Buttons:

• Bild (Image): Exportiert deinen aktuellen Canvas als hochauflösendes .png-Bild mit transparentem Hintergrund.
• PDF (Download-Icon): Erstellt ein vektorbasiertes A4-PDF inklusive Infobox mit Projektname, Datum und Ersteller.

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