# Aan de slag met NetPlottr DiagramTool ## Wat is NetPlottr DiagramTool? NetPlottr DiagramTool is een Chrome-extensie waarmee je razendsnel netwerkdiagrammen en infrastructuurtekeningen schetst, rechtstreeks in je browser. Geen aparte software installeren, geen account aanmaken, gewoon de extensie openen en beginnen. De tool is gemaakt voor IT-mensen, systeembeheerders en DevOps-engineers die snel een netwerk, een serveropstelling of een cloudarchitectuur willen vastleggen. Denk aan een whiteboard, maar dan met kant-en-klare bouwstenen: routers, switches, servers, databases, laptops, firewalls en nog veel meer. Je sleept ze op je tekenvel (het canvas), geeft ze een naam en een IP-adres, trekt er lijntjes tussen en je hebt in een paar minuten een overzichtelijk diagram. ## Waarom is dit handig? Een goed diagram zegt meer dan een lange uitleg. Of je nu een collega wilt laten zien hoe een netwerk in elkaar zit, een storing wilt analyseren, of documentatie maakt voor een klant: met NetPlottr heb je in een handomdraai een professionele tekening. Omdat de extensie in je browser draait, heb je hem altijd binnen handbereik. :::info title="Alles blijft op je eigen computer" NetPlottr werkt 100% lokaal. Er is geen login en geen cloud. De enige toestemming die de extensie vraagt is clipboardWrite, zodat je een afbeelding naar je klembord kunt kopieren. Je projecten sla je op als een .frank-bestand (een JSON-bestand) op je eigen schijf. Je gegevens verlaten je computer dus niet. ::: ## De extensie openen Na het installeren verschijnt het NetPlottr-icoon in de werkbalk van Chrome, rechtsboven naast de adresbalk. Klik erop om de tool te openen. Je ziet een leeg tekenvel (het canvas) in het midden, en aan de zijkant een zijbalk met bibliotheken vol componenten. De zijbalk is onderverdeeld in groepen, zodat je snel het juiste onderdeel vindt: - **Infrastructuur**: Internet, Router, Switch, WiFi-AP, Firewall, Cloud, Load Balancer, VPN/API-Gateway en Message Queue. - **Servers en Apps**: Server, Database, Webserver, Mailserver, Container, databases als MySQL, PostgreSQL, MongoDB en Redis, en webservers als Nginx en Apache. - **Clients en IoT**: Laptop, Smartphone, Printer, Camera, Gebruiker, Tablet, IP-telefoon en IoT-sensor. - **Tools en Notities**: Notitie, Zone, Monitoring, Security-scanner en Logserver. - **Workspace en Identiteit**: Organisatie-eenheid, Gebruiker, Beheerder, Beveiligingsgroep, Gedeelde mailbox, Serviceaccount, Domain Controller, GPO, SSO/SAML, LDAP, Google Workspace, Microsoft 365, Azure AD/Entra, MFA en Gedeelde Drive. Is het onderdeel dat je zoekt er niet bij? Er is ook een apart tabblad met een icoon-bibliotheek van meer dan 1000 doorzoekbare iconen, zoals github, docker, kubernetes, aws, azure en terraform. Die plaats je net zo makkelijk in je diagram. ## Je eerste component plaatsen :::howto title="Een component op het canvas zetten" 1. Open de zijbalk en zoek de groep waarin je onderdeel staat, bijvoorbeeld Infrastructuur voor een Router. 2. Pak het onderdeel met je muis vast en sleep het naar het tekenvel in het midden. 3. Laat de muisknop los op de plek waar je het onderdeel wilt hebben. 4. Wil je een doorzoekbaar icoon gebruiken? Open dan het tabblad van de icoon-bibliotheek, typ een zoekterm (bijvoorbeeld docker) en sleep het gevonden icoon op het canvas. ::: :::tip title="Begin met de grote lijnen" Plaats eerst de belangrijkste onderdelen (zoals het internet, de firewall en de centrale switch) en vul daarna de details aan. Zo houd je overzicht en hoef je later minder te schuiven. ::: ## Een component instellen Elk onderdeel kun je helemaal naar wens aankleden. Klik op een component (of gebruik de rechtermuisknop en kies Bewerken) om de instellingen te openen. Je kunt onder andere het volgende aanpassen: - **Vorm**: afgerond, hoekig of pill-vormig. - **Breedte en hoogte**: maak een onderdeel groter of kleiner. - **Naam, subtitel en notitie**: geef het onderdeel een duidelijke titel, een extra regel tekst en eventueel een interne notitie. - **IP-adres en DNS-records**: handig om netwerkdetails direct in de tekening te tonen. - **Statusindicator**: zet de status op OK, waarschuwing of fout, bijvoorbeeld om een storing te markeren. - **Kleuraccent**: geef het onderdeel een kleurtje om groepen of rollen te onderscheiden. :::howto title="Een server instellen met naam, IP en status" 1. Klik op de geplaatste component, of klik er met de rechtermuisknop op en kies Bewerken. 2. Vul bij Naam bijvoorbeeld Webserver-01 in en zet er een subtitel onder, zoals Productie. 3. Vul het IP-adres in, bijvoorbeeld 10.0.0.12, en voeg eventueel DNS-records toe. 4. Kies een statusindicator: OK voor normaal, waarschuwing of fout om een probleem aan te geven. 5. Kies een kleuraccent dat past bij de rol van het onderdeel. 6. Sluit de instellingen, je wijzigingen zijn direct zichtbaar op het canvas. ::: ## Twee componenten verbinden Een diagram leeft pas echt als de onderdelen met elkaar verbonden zijn. NetPlottr maakt dat eenvoudig. :::howto title="Een verbinding tekenen tussen twee onderdelen" 1. Selecteer het eerste onderdeel waar de verbinding moet beginnen. 2. Klik met de rechtermuisknop en kies Verbinden, of gebruik de knop Verbinden. 3. Klik nu op het tweede onderdeel waar de lijn naartoe moet lopen. De verbinding verschijnt meteen. 4. Stel de lijn naar wens in: kies een lijnstijl (doorgetrokken, streepjes of stippels). 5. Voeg eventueel een protocol-label toe, zoals SSH, FTP, RDP, LDAP, REST of SNMP. 6. Wil je beweging? Kies een animatie (stroom of pakketjes) of laat het op geen staan. Je kunt ook badges toevoegen. ::: :::tip title="Groeperen met zones" Gebruik een Zone om onderdelen visueel bij elkaar te zetten, bijvoorbeeld een subnet of een datacenter. Met het Lagen-tabblad houd je grote diagrammen overzichtelijk. Wil je meerdere onderdelen tegelijk verplaatsen of uitlijnen? Houd Shift ingedrukt en klik ze een voor een aan. ::: ## Een stijl kiezen Wil je dat je diagram er net even strakker of opvallender uitziet? NetPlottr heeft kant-en-klare presets: Standaard, Minimaal, Opvallend en Monitoring. Daarnaast zijn er 15 interface-thema's, met NetPlottr Dark als standaard, en bijvoorbeeld Professional White, Cloud Captains-blauw, diverse Material-varianten, Solarized, Nord en Dracula. :::tip title="Ander thema voor de export" Je kunt voor het exporteren een ander thema kiezen dan voor het bewerken. Werk bijvoorbeeld lekker in NetPlottr Dark, maar exporteer in Professional White voor een rapport of presentatie. ::: ## Je werk opslaan en exporteren Als je diagram klaar is, wil je het natuurlijk bewaren of delen. Dat kan op verschillende manieren. :::howto title="Exporteren als PNG of opslaan als project" 1. Wil je je werk later verder bewerken? Sla het op als project. Gebruik Ctrl+S of de opslaan-optie, het diagram wordt bewaard als een .frank-bestand (JSON) op je eigen schijf. 2. Wil je een afbeelding delen? Exporteer als PNG. De afbeelding wordt automatisch bijgesneden tot precies je diagram. 3. Heb je animaties gebruikt en wil je die laten zien? Exporteer als GIF. 4. Wil je het diagram snel ergens inplakken? Kopieer de PNG naar je klembord en plak het direct in een document of chat. 5. Een bestaand project openen doe je via een .frank- of .json-bestand. ::: :::warn title="Sla op tijd op" Omdat alles lokaal in je browser draait, wordt je werk niet automatisch in een cloud bewaard. Sla je diagram regelmatig op als .frank-bestand, zodat je niets kwijtraakt als je het tabblad sluit. ::: ## Handige sneltoetsen Deze toetsen maken het werken een stuk vlotter: - **Ctrl+Z**: laatste actie ongedaan maken. - **Ctrl+S**: opslaan. - **Shift+klik**: meerdere onderdelen tegelijk selecteren. - **Rechtermuisknop**: contextmenu openen met Verbinden, Bewerken, Dupliceren en Verwijderen. ## Meer weten? Kijk voor meer informatie op de homepage van NetPlottr: netplottr.com. NetPlottr DiagramTool is een product van Cloud Captains (https://cloud-captains.com). :::faq ### Heb ik een account of internetverbinding nodig? Nee. NetPlottr werkt volledig lokaal in je browser, zonder login en zonder cloud. Je kunt de tool gebruiken zonder ergens in te loggen, en je gegevens blijven op je eigen computer. ### Waar worden mijn diagrammen opgeslagen? Je slaat je projecten zelf op als een .frank-bestand op je eigen schijf. Dat is in feite een JSON-bestand. Er wordt niets naar een server of cloud gestuurd. ### Welke permissies vraagt de extensie? De enige toestemming die NetPlottr nodig heeft is clipboardWrite. Die is alleen nodig om een PNG-afbeelding naar je klembord te kopieren, zodat je het diagram snel ergens kunt inplakken. ### Hoe verbind ik twee onderdelen met elkaar? Selecteer het eerste onderdeel, kies Verbinden (via de rechtermuisknop of de Verbinden-knop) en klik daarna op het tweede onderdeel. De lijn verschijnt direct en je kunt de stijl, een protocol-label en eventueel een animatie instellen. ### In welke formaten kan ik mijn diagram exporteren? Je kunt je diagram exporteren als PNG (automatisch bijgesneden), als GIF wanneer je animaties gebruikt, of de PNG direct naar je klembord kopieren. Het project zelf bewaar je als .frank-bestand om later verder te werken. ### Kan ik componenten gebruiken die niet in de zijbalk staan? Ja. Naast de vaste bibliotheken is er een apart tabblad met meer dan 1000 doorzoekbare iconen, zoals github, docker, kubernetes, aws, azure en terraform. Zoek het gewenste icoon en sleep het op je canvas. :::