# Getting started with NetPlottr DiagramTool ## What is NetPlottr DiagramTool? NetPlottr DiagramTool is a Chrome extension that lets you sketch network diagrams and infrastructure drawings at speed, right inside your browser. There is no separate software to install and no account to create. You simply open the extension and start drawing. The tool is built for IT professionals, system administrators and DevOps engineers who want to capture a network, a server setup or a cloud architecture quickly. Think of it as a whiteboard, but with ready-made building blocks: routers, switches, servers, databases, laptops, firewalls and much more. You drag them onto your drawing area (the canvas), give them a name and an IP address, draw lines between them, and within minutes you have a clear, professional diagram. ## Why is this useful? A good diagram says more than a long explanation. Whether you want to show a colleague how a network is wired, analyse an outage, or create documentation for a client, NetPlottr gives you a polished drawing in no time. Because the extension runs inside your browser, it is always within easy reach. :::info title="Everything stays on your own computer" NetPlottr works 100% locally. There is no login and no cloud. The only permission the extension requests is clipboardWrite, so it can copy an image to your clipboard. You save your projects as a .frank file (a JSON file) on your own disk. In other words, your data never leaves your computer. ::: ## Opening the extension After installation, the NetPlottr icon appears in the Chrome toolbar, in the top right next to the address bar. Click it to open the tool. You will see an empty drawing area (the canvas) in the middle, and a sidebar with libraries full of components along the side. The sidebar is divided into groups so you can find the right item quickly: - **Infrastructure**: Internet, Router, Switch, WiFi access point, Firewall, Cloud, Load Balancer, VPN/API Gateway and Message Queue. - **Servers and Apps**: Server, Database, Web server, Mail server, Container, databases such as MySQL, PostgreSQL, MongoDB and Redis, and web servers such as Nginx and Apache. - **Clients and IoT**: Laptop, Smartphone, Printer, Camera, User, Tablet, IP phone and IoT sensor. - **Tools and Notes**: Note, Zone, Monitoring, Security scanner and Log server. - **Workspace and Identity**: 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. Is the item you need not in the list? There is also a separate tab with an icon library of more than 1000 searchable icons, such as github, docker, kubernetes, aws, azure and terraform. You place those in your diagram just as easily. ## Placing your first component :::howto title="Putting a component on the canvas" 1. Open the sidebar and find the group that holds your item, for example Infrastructure for a Router. 2. Grab the item with your mouse and drag it onto the drawing area in the middle. 3. Release the mouse button at the spot where you want the item to be. 4. Want to use a searchable icon? Open the icon library tab, type a search term (for example docker) and drag the icon you find onto the canvas. ::: :::tip title="Start with the big picture" Place the most important items first (such as the internet, the firewall and the central switch), then fill in the details. This keeps things clear and saves you from rearranging too much later. ::: ## Configuring a component You can dress up every item exactly the way you want. Click a component (or right-click and choose Edit) to open its settings. Among other things, you can adjust the following: - **Shape**: rounded, square or pill-shaped. - **Width and height**: make an item bigger or smaller. - **Name, subtitle and note**: give the item a clear title, an extra line of text and an optional internal note. - **IP address and DNS records**: handy for showing network details directly in the drawing. - **Status indicator**: set the status to OK, warning or error, for example to flag an outage. - **Color accent**: give the item a color to tell groups or roles apart. :::howto title="Configuring a server with a name, IP and status" 1. Click the placed component, or right-click it and choose Edit. 2. In the Name field, enter something like Webserver-01 and add a subtitle below it, such as Production. 3. Fill in the IP address, for example 10.0.0.12, and add DNS records if you like. 4. Choose a status indicator: OK for normal, warning or error to signal a problem. 5. Pick a color accent that matches the role of the item. 6. Close the settings. Your changes are visible on the canvas right away. ::: ## Connecting two components A diagram truly comes alive once the items are linked. NetPlottr makes that easy. :::howto title="Drawing a connection between two items" 1. Select the first item where the connection should start. 2. Right-click and choose Connect, or use the Connect button. 3. Now click the second item the line should run to. The connection appears immediately. 4. Style the line as you wish: choose a line style (solid, dashed or dotted). 5. Add a protocol label if you like, such as SSH, FTP, RDP, LDAP, REST or SNMP. 6. Want movement? Choose an animation (flow or packets) or leave it on none. You can also add badges. ::: :::tip title="Group with zones" Use a Zone to visually gather items together, for example a subnet or a data center. The Layers tab helps you keep large diagrams organized. Want to move or align several items at once? Hold Shift and click them one by one. ::: ## Choosing a style Want your diagram to look a little sharper or bolder? NetPlottr comes with ready-made presets: Standard, Minimal, Bold and Monitoring. On top of that there are 15 interface themes, with NetPlottr Dark as the default, plus options such as Professional White, Cloud Captains blue, several Material variants, Solarized, Nord and Dracula. :::tip title="A different theme for the export" You can choose a different theme for exporting than the one you use for editing. For instance, work comfortably in NetPlottr Dark, but export in Professional White for a report or presentation. ::: ## Saving and exporting your work Once your diagram is ready, you naturally want to keep or share it. There are several ways to do that. :::howto title="Exporting as PNG or saving as a project" 1. Want to keep editing later? Save it as a project. Use Ctrl+S or the save option, and the diagram is stored as a .frank file (JSON) on your own disk. 2. Want to share an image? Export as PNG. The image is automatically cropped to fit your diagram exactly. 3. Used animations and want to show them off? Export as a GIF. 4. Want to paste the diagram somewhere quickly? Copy the PNG to your clipboard and paste it straight into a document or chat. 5. To open an existing project, use a .frank or .json file. ::: :::warn title="Save in good time" Because everything runs locally in your browser, your work is not automatically stored in any cloud. Save your diagram regularly as a .frank file so you do not lose anything if you close the tab. ::: ## Handy keyboard shortcuts These keys make the work flow much more smoothly: - **Ctrl+Z**: undo your last action. - **Ctrl+S**: save. - **Shift+click**: select several items at once. - **Right-click**: open the context menu with Connect, Edit, Duplicate and Delete. ## Want to know more? For more information, visit the NetPlottr homepage: netplottr.com. NetPlottr DiagramTool is a product by Cloud Captains (https://cloud-captains.com). :::faq ### Do I need an account or an internet connection? No. NetPlottr works entirely locally in your browser, with no login and no cloud. You can use the tool without signing in anywhere, and your data stays on your own computer. ### Where are my diagrams stored? You save your projects yourself as a .frank file on your own disk. That is essentially a JSON file. Nothing is sent to a server or to the cloud. ### Which permissions does the extension request? The only permission NetPlottr needs is clipboardWrite. It is used solely to copy a PNG image to your clipboard, so you can quickly paste the diagram somewhere. ### How do I connect two items? Select the first item, choose Connect (via the right-click menu or the Connect button) and then click the second item. The line appears immediately and you can set its style, a protocol label and an optional animation. ### In which formats can I export my diagram? You can export your diagram as a PNG (automatically cropped), as a GIF when you use animations, or copy the PNG straight to your clipboard. The project itself is saved as a .frank file so you can keep working on it later. ### Can I use components that are not in the sidebar? Yes. Besides the fixed libraries, there is a separate tab with more than 1000 searchable icons, such as github, docker, kubernetes, aws, azure and terraform. Search for the icon you want and drag it onto your canvas. :::