# Componenten, vormen en de icoonbibliotheek in NetPlottr ## Wat zijn componenten in NetPlottr? Componenten zijn de bouwstenen van elk diagram dat je in NetPlottr DiagramTool maakt. Denk aan een router, een server, een laptop of een gebruiker: elk vormpje dat je op je tekening sleept is een component. In de zijbalk vind je deze bouwstenen netjes gegroepeerd in vijf bibliotheken, zodat je snel het juiste icoon te pakken hebt zonder te zoeken. Omdat NetPlottr volledig lokaal in je browser draait, blijft alles wat je tekent op je eigen computer. Er is geen cloud, geen account en geen login nodig. De enige permissie die de extensie gebruikt is clipboardWrite, puur om een afbeelding van je diagram naar je klembord te kunnen kopieren. Meer over de tool vind je op netplottr.com. ## De vijf componentbibliotheken De zijbalk verdeelt alle kant-en-klare componenten over vijf themas. Zo houd je overzicht, of je nu een thuisnetwerk schetst of een complete bedrijfsinfrastructuur in kaart brengt. ### Infrastructuur Dit is de basis van je netwerk: de apparaten die verkeer routeren en beveiligen. Je vindt hier Internet, Router, Switch, WiFi-AP, Firewall, Cloud, Load Balancer, VPN/API-Gateway en Message Queue. Begin meestal met deze bibliotheek als je een netwerk van buiten naar binnen opbouwt. ### Servers en Apps Alles wat draait en data verwerkt zit hier: Server, Database, Webserver, Mailserver en Container. Ook specifieke technologieen hebben een eigen component, zoals MySQL, PostgreSQL, MongoDB en Redis voor databases, en Nginx en Apache voor webservers. Handig als je niet alleen wilt laten zien dat er een server staat, maar ook welke software erop draait. ### Clients en IoT De apparaten waarmee mensen werken of die zelfstandig data versturen: Laptop, Smartphone, Printer, Camera, Gebruiker, Tablet, IP-telefoon en IoT-sensor. Gebruik deze bibliotheek om de gebruikerskant van je netwerk zichtbaar te maken. ### Tools en Notities Deze bibliotheek helpt je je diagram te verduidelijken en beheertaken te tonen: Notitie, Zone, Monitoring, Security-scanner en Logserver. Een Notitie plaats je bijvoorbeeld om een keuze toe te lichten, en een Zone om onderdelen visueel te groeperen. ### Workspace en Identiteit Deze bibliotheek draait om mensen, toegang en identiteitsbeheer, ideaal voor wie Google Workspace, Microsoft 365 of een Active Directory-omgeving in kaart brengt. Je vindt hier 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. :::tip title="Begin bij de juiste bibliotheek" Weet je niet zeker waar een component thuishoort? Denk aan de rol: routeert het verkeer (Infrastructuur), draait er software op (Servers en Apps), zit er een mens achter (Clients en IoT), of gaat het over toegang en identiteit (Workspace en Identiteit)? Dat wijst je vrijwel altijd de juiste bibliotheek aan. ::: ## De icoonbibliotheek met 1000+ SVG-iconen Naast de vijf componentbibliotheken heeft NetPlottr een apart tabblad met een icoonbibliotheek van meer dan 1000 doorzoekbare SVG-iconen. Hier vind je logos en symbolen voor concrete technologieen die niet als standaardcomponent in de zijbalk zitten, bijvoorbeeld github, docker, kubernetes, aws, azure en terraform. Je typt simpelweg een zoekterm in en plaatst het gewenste icoon rechtstreeks in je diagram. Zo maak je in een paar tellen duidelijk dat een container op Kubernetes draait of dat je infrastructuur in AWS staat, zonder dat je zelf logos hoeft te zoeken of te importeren. :::howto title="Een component of icoon toevoegen aan je diagram" 1. Open de zijbalk en kies de bibliotheek die bij je component past (Infrastructuur, Servers en Apps, Clients en IoT, Tools en Notities, of Workspace en Identiteit). 2. Heb je een specifiek technologie-logo nodig? Ga dan naar het tabblad van de icoonbibliotheek en typ een zoekterm zoals docker of kubernetes. 3. Plaats het component of icoon op het tekenvlak. 4. Selecteer het geplaatste element om de instellingen aan de rechterkant te openen. 5. Vul een naam, subtitel of notitie in zodat duidelijk is wat het element voorstelt. ::: ## Per component: vorm, kleuraccent en status Elk component dat je plaatst kun je verder aankleden zodat je diagram precies vertelt wat je bedoelt. De belangrijkste instellingen voor uiterlijk zijn de vorm, het kleuraccent en de statusindicator. ### Vorm Je kiest per component een vorm: afgerond, hoekig of pill. Een consistente vormkeuze helpt je lezer: gebruik bijvoorbeeld overal pill-vormen voor diensten en hoekige vormen voor fysieke apparaten. Naast de vorm kun je ook de breedte en hoogte aanpassen, zodat belangrijke onderdelen wat groter in beeld komen. ### Kleuraccent Met een kleuraccent geef je een component een herkenbaar tintje. Dit is ideaal om bij elkaar horende onderdelen visueel te koppelen, bijvoorbeeld alle componenten van eenzelfde afdeling of datacenter in dezelfde kleur. ### Statusindicator De statusindicator laat in een oogopslag zien hoe een onderdeel ervoor staat: OK, waarschuwing of fout. Dit is vooral handig in monitoring-achtige diagrammen, waar je snel wilt tonen welk onderdeel aandacht nodig heeft. Per component kun je daarnaast nog een IP-adres en DNS-records invullen voor extra technische context. :::info title="Meer dan alleen uiterlijk" Naast vorm, kleur en status kun je per component een naam, subtitel en notitie toevoegen, plus een IP-adres en DNS-records. Zo wordt je diagram niet alleen mooier, maar ook informatiever, handig als je het later met collegas deelt. ::: :::warn title="Status is een label, geen live monitoring" De statusindicator (OK, waarschuwing of fout) is een handmatig label dat jij zelf instelt om iets aan je lezer duidelijk te maken. NetPlottr meet of bewaakt je apparaten niet zelf en maakt geen verbinding met je netwerk. Werk de status dus bij wanneer de echte situatie verandert. ::: ## Je werk bewaren Als je diagram klaar is, bewaar je het project lokaal als .frank-bestand. Dat is gewoon een JSON-bestand dat op je eigen computer blijft staan. Wil je het delen of in een rapport zetten? Exporteer dan een PNG (die wordt automatisch bijgesneden) of kopieer met een klik een PNG naar je klembord. Omdat alles lokaal gebeurt, verlaat je tekening nooit je eigen machine tenzij je het bestand zelf deelt. :::faq ### Wat is het verschil tussen een componentbibliotheek en de icoonbibliotheek? De vijf componentbibliotheken bevatten kant-en-klare bouwstenen zoals Router, Server of Laptop, compleet met instelbare eigenschappen zoals naam, IP-adres en status. De icoonbibliotheek is een apart tabblad met meer dan 1000 doorzoekbare SVG-iconen voor concrete technologieen, zoals github, docker of aws, die je rechtstreeks in je diagram plaatst. ### Welke vormen kan ik per component kiezen? Je kiest per component tussen afgerond, hoekig of pill. Daarnaast pas je breedte en hoogte aan. Een consistente vormkeuze maakt je diagram makkelijker te lezen. ### Houdt de statusindicator mijn apparaten echt in de gaten? Nee. De statusindicator (OK, waarschuwing of fout) is een label dat je zelf instelt. NetPlottr maakt geen verbinding met je netwerk en bewaakt niets live. Het is puur bedoeld om je lezer iets duidelijk te maken in het diagram. ### Worden mijn diagrammen ergens in de cloud opgeslagen? Nee. NetPlottr werkt 100 procent lokaal in je browser, zonder login en zonder cloud. Je bewaart projecten zelf als .frank-bestand op je eigen computer. De enige permissie van de extensie is clipboardWrite, om een PNG naar je klembord te kunnen kopieren. ### Kan ik een icoon uit de icoonbibliotheek dezelfde eigenschappen geven als een standaardcomponent? Nadat je een element op het tekenvlak hebt geplaatst, selecteer je het om de instellingen te openen. Daar geef je het een naam, subtitel, notitie, een kleuraccent en waar van toepassing een statusindicator, zodat het naadloos in je diagram past. ### Waar vind ik meer informatie over NetPlottr? Kijk op netplottr.com voor meer over de tool. NetPlottr DiagramTool wordt gemaakt door Cloud Captains. :::