# Components, shapes and the icon library in NetPlottr ## What are components in NetPlottr? Components are the building blocks of every diagram you create in NetPlottr DiagramTool. Think of a router, a server, a laptop or a user: each shape you drag onto your drawing is a component. In the sidebar these building blocks are neatly grouped into five libraries, so you can grab the right icon quickly without hunting around. Because NetPlottr runs entirely locally in your browser, everything you draw stays on your own computer. There is no cloud, no account and no login required. The only permission the extension uses is clipboardWrite, purely so it can copy an image of your diagram to your clipboard. You can learn more about the tool at netplottr.com. ## The five component libraries The sidebar splits all ready-made components across five themes. This keeps things organized whether you are sketching a home network or mapping out an entire company infrastructure. ### Infrastructure This is the backbone of your network: the devices that route and secure traffic. Here you will find Internet, Router, Switch, WiFi AP, Firewall, Cloud, Load Balancer, VPN/API Gateway and Message Queue. This is usually where you start when building a network from the outside in. ### Servers and Apps Everything that runs and processes data lives here: Server, Database, Web server, Mail server and Container. Specific technologies also have their own component, such as MySQL, PostgreSQL, MongoDB and Redis for databases, and Nginx and Apache for web servers. Handy when you want to show not just that a server exists, but which software runs on it. ### Clients and IoT The devices people use or that send data on their own: Laptop, Smartphone, Printer, Camera, User, Tablet, IP phone and IoT sensor. Use this library to make the user-facing side of your network visible. ### Tools and Notes This library helps you clarify your diagram and show management tasks: Note, Zone, Monitoring, Security scanner and Log server. You might add a Note to explain a decision, and a Zone to visually group parts together. ### Workspace and Identity This library is all about people, access and identity management, ideal if you are mapping out Google Workspace, Microsoft 365 or an Active Directory environment. Here you will find Organizational unit, User, Administrator, Security group, Shared mailbox, Service account, Domain Controller, GPO, SSO/SAML, LDAP, Google Workspace, Microsoft 365, Azure AD/Entra, MFA and Shared Drive. :::tip title="Start in the right library" Not sure where a component belongs? Think about its role: does it route traffic (Infrastructure), does software run on it (Servers and Apps), is there a person behind it (Clients and IoT), or is it about access and identity (Workspace and Identity)? That almost always points you to the right library. ::: ## The icon library with 1000+ SVG icons Besides the five component libraries, NetPlottr has a separate tab with an icon library of more than 1000 searchable SVG icons. Here you will find logos and symbols for specific technologies that are not included as standard components in the sidebar, for example github, docker, kubernetes, aws, azure and terraform. You simply type a search term and place the icon you want straight into your diagram. In just a few seconds you can show that a container runs on Kubernetes or that your infrastructure lives in AWS, without having to find or import logos yourself. :::howto title="Add a component or icon to your diagram" 1. Open the sidebar and pick the library that fits your component (Infrastructure, Servers and Apps, Clients and IoT, Tools and Notes, or Workspace and Identity). 2. Need a specific technology logo? Go to the icon library tab and type a search term such as docker or kubernetes. 3. Place the component or icon on the canvas. 4. Select the placed element to open the settings on the right. 5. Fill in a name, subtitle or note so it is clear what the element represents. ::: ## Per component: shape, color accent and status Every component you place can be styled further so your diagram says exactly what you mean. The main appearance settings are the shape, the color accent and the status indicator. ### Shape You pick a shape for each component: rounded, square or pill. A consistent shape choice helps your reader: for example, use pill shapes everywhere for services and square shapes for physical devices. Besides the shape, you can also adjust the width and height, so important parts stand out a little more. ### Color accent A color accent gives a component a recognizable tint. This is ideal for visually linking related parts, for example coloring all components from the same department or data center the same way. ### Status indicator The status indicator shows at a glance how a part is doing: OK, warning or error. This is especially useful in monitoring-style diagrams, where you want to quickly highlight which part needs attention. For each component you can additionally fill in an IP address and DNS records for extra technical context. :::info title="More than just looks" Besides shape, color and status, you can add a name, subtitle and note to each component, plus an IP address and DNS records. That makes your diagram not just prettier but also more informative, handy when you share it with colleagues later. ::: :::warn title="Status is a label, not live monitoring" The status indicator (OK, warning or error) is a manual label that you set yourself to make something clear to your reader. NetPlottr does not measure or monitor your devices, and it never connects to your network. So update the status whenever the real situation changes. ::: ## Saving your work When your diagram is ready, you save the project locally as a .frank file. That is simply a JSON file that stays on your own computer. Want to share it or put it in a report? Export a PNG (it is cropped automatically) or copy a PNG to your clipboard with a single click. Because everything happens locally, your drawing never leaves your machine unless you share the file yourself. :::faq ### What is the difference between a component library and the icon library? The five component libraries contain ready-made building blocks such as Router, Server or Laptop, complete with adjustable properties like name, IP address and status. The icon library is a separate tab with more than 1000 searchable SVG icons for specific technologies, such as github, docker or aws, that you place straight into your diagram. ### Which shapes can I choose for each component? You pick between rounded, square or pill for each component. You can also adjust the width and height. A consistent shape choice makes your diagram easier to read. ### Does the status indicator actually monitor my devices? No. The status indicator (OK, warning or error) is a label you set yourself. NetPlottr does not connect to your network and does not monitor anything live. It is purely meant to make something clear to your reader inside the diagram. ### Are my diagrams stored somewhere in the cloud? No. NetPlottr works 100 percent locally in your browser, with no login and no cloud. You save projects yourself as a .frank file on your own computer. The extension's only permission is clipboardWrite, so it can copy a PNG to your clipboard. ### Can I give an icon from the icon library the same properties as a standard component? After you place an element on the canvas, select it to open the settings. There you give it a name, subtitle, note, a color accent and, where applicable, a status indicator, so it blends seamlessly into your diagram. ### Where can I find more information about NetPlottr? Visit netplottr.com to learn more about the tool. NetPlottr DiagramTool is made by Cloud Captains. :::