DrawTheNet.IO draws network diagrams dynamically from a text file describing the placement, layout and icons.
See in live : https://drawthenet.io
Given a yaml file describing the hierarchy of the network and it's connections, a resulting diagram will be created.
Complex network diagrams typically involve specific placement of icons, connections and labels using a tool like Visio or OmniGraffle, using a mouse, and constantly zooming in and out for single pixel placement.
The goal behind drawthenet.io is to be able to describe the digram in a text file and have it rendered in SVG in the browser.
Also, being able to store a diagram as text makes it easy to version control and share.
Go to https://drawthenet.io and start creating diagrams.
You can find a detailed help guide, including a full list of availalble properties integrated into the app by using the ? button in the top left corner of it, or here
The follwing vendors are available by default:
- Amazon Web Services (as AWS), from https://aws.amazon.com/architecture/icons/?nc1=h_ls
- Microsoft Azure (as Azure), from https://learn.microsoft.com/fr-fr/azure/architecture/icons/
- Microsoft 365 (as M365), from https://learn.microsoft.com/fr-fr/microsoft-365/solutions/architecture-icons-templates
- Microsoft Dynamics 365 (as D365), from https://learn.microsoft.com/fr-fr/dynamics365/get-started/icons
- Microsoft Power Platform (as PowerPlatform), from https://learn.microsoft.com/fr-fr/power-platform/guidance/icons
- Google Cloud Platform (as GCP), from https://cloud.google.com/icons?hl=fr
- Cisco Meraki (as Meraki), from https://meraki.cisco.com/product-collateral/cisco-meraki-topology-icons/
- Cisco (as Cisco), from https://www.cisco.com/c/en/us/about/brand-center/network-topology-icons.html
- Fortinet (as Fortinet), from https://www.fortinet.com/resources/icon-library
You also have access to all the icons from Iconify
Tha app was designed to be used in a browser and does not require any installation. No diagram are stored anywhere but locally to your PC.
You can easily build the tool to host locally with the provided docker file:
cd ./tools/
docker build -t local/drawthenet.io .
It will build the docker image from scratch, including downloading the icons from all vendor specified above. It will run the app with nginx, listening on port 80.
You need libvisio2svg and powershell installed and available in you path for the full build to work. If not, some icons set (Cisco, Fortinet) will not be generated and available. You can find the build script in the tools folder
cd ./tools/
pwsh ./build.ps1
Additional arguments can be passed to the script to only run parts of the build process, refer to the script for more information.
The result will be created in the ./dist/ folder.
As it is a fully static website, you can host it on any webserver.
- JQuery https://jquery.com/
- Bootstrap https://getbootstrap.com/
- D3.js: https://d3js.org/
- Ace editor: https://ace.c9.io/
- Iconify: https://iconify.design/
- Fuse.js: https://fusejs.io/
- js-yaml: https://github.com/nodeca/js-yaml
- JQuery Toast https://kamranahmed.info/toast
- Showdown: https://github.com/showdownjs/showdown
- Highlight.js: https://highlightjs.org/
- libvisio2svg https://github.com/kakwa/libvisio2svg
Please do.
1.0 Initial release. 2.0 Updated frameworks & added new saves and icons features.
- Bradley Thornton - 2016-2022 Initial work - cidrblock
- Rémy Grandin - 2023-Today Rework & modernization - remygrandin
This project is licensed under the MIT License. (see LISENCE.TXT)
The logo of the project is licensed under the Apache 2.0 (https://github.com/bytedance/IconPark/blob/master/LICENSE)