Subnetter is a simple network visualization and IP schema design aid. Given a yaml file describing the hierarchy of the network and it's subnets, a resulting json file will be created and a d3.js visualization.
- Paste this in as a template
name: "My network design" # The name of the root node
root: 10.200.0.0/22 # The root network to subnet
type: dc aggregate network # The type (used in the legend)
site: East Coast DC # A variable to be used later
location: Washington, DC # Another variable to be used later
spec:
- name: "{{site}}-{{location}}-servers-1"
type: subnet
- name: "{{site}}-{{location}}-servers-2"
type: subnet
- name: "{{site}}-{{location}}-servers-3"
type: subnet
- name: "{{site}}-{{location}}-servers-4"
type: subnet- Click [convert]
- Click [render]
- Fine tune the yaml and repeat
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
You will need node.js and npm installed. (or a suitable web server to host the files, all content is static)
https://nodejs.org/en/download/
Clone this repository.
change directories and run the project.
cd subnetter
npm install
node app.js
Open your browser
http://localhost:8080
End with an example of getting some data out of the system or using it for a little demo
Rebuilding the javascript and css files:
bower install
gulp bower
Subnetter starts with a yaml file describing the network.
Example:
name: "My network design" # The name of the root node
root: 10.200.0.0/22 # The root network to subnet
type: dc aggregate network # The type (used in the legend)
site: East Coast DC # A variable to be used later
location: Washington, DC # Another variable to be used later
spec:
- name: "{{site}}-{{location}}-servers-1"
type: subnet
- name: "{{site}}-{{location}}-servers-2"
type: subnet
- name: "{{site}}-{{location}}-servers-3"
type: subnet
- name: "{{site}}-{{location}}-servers-4"
type: subnetChild subnet masks will automatically be determined based on the root network. The number of subnets will also be rounded up to fill the IP block.
Example:
name: "My network design" # The name of the root node
root: 10.200.0.0/22 # The root network to subnet
type: dc aggregate network # The type (used in the legend)
site: East Coast DC # A variable to be used later
location: Washington, DC # Another variable to be used later
spec:
- name: "{{site}}-{{location}}-servers-1"
type: container
children:
- name: child network
type: subnet # processing stops at subnet
- name: child network
type: subnet
children:
- name: will never be seen
type: something # because the parent is a 'subnet'
- name: child network
type: subnet
- name: "{{site}}-{{location}}-servers-2"
type: type2 # types are used in the legend
- name: "{{site}}-{{location}}-servers-3"
type: type3Complex networks can be designed using yaml anchor (&) and reference (*) labels.
Example:
site1: Seattle, WA
site2: Portland, OR
site3: Denver, CO
site4: New York, NY
site5: Tampa, FL
adminblock: &adminblock
- name: management systems
type: subnet
- name: loopback addresses
type: subnet
office: &office
- name: Users
type: subnet
- name: Phones
type: subnet
- name: Network Admin
type: admin block
children: *adminblock
name: "My network design" # The name of the root node
root: 10.200.0.0/20 # The root network to subnet
type: WAN # The type (used in the legend)
spec:
- name: "{{site1}}"
type: container
children: *office
- name: "{{site2}}"
type: container
children: *office
- name: "{{site3}}"
type: container
children: *office
- name: "{{site4}}"
type: container
children: *office
- name: "{{site5}}"
type: container
children: *officeTry changing the root mask to /19 so the user and phone networks become a /24.
- angular
- angular-bootstrap
- angular-ui-ace
- express
- bower
- gulp
- d3.js
- ace editor
Please do.
soon.
- Bradley Thornton - Initial work - cidrblock
This project is licensed under the MIT License. MIT License.
- D3.js, Angular, Bootstrap, Ace
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent