Visualize and design networks
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
public
test
.gitignore
README.md
app.js
bower.json
gulpfile.js
package.json
screenshot.png

README.md

Subnetter

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.

screenshot

Try it now

http://ipv4sub.net

  1. 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
  1. Click [convert]
  2. Click [render]
  3. Fine tune the yaml and repeat

Getting Started

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.

Prerequisities

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/

Installing

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

Development

Rebuilding the javascript and css files:

bower install
gulp bower

Usage

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: subnet

Child 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: type3

Complex 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: *office

Try changing the root mask to /19 so the user and phone networks become a /24.

Built With

  • angular
  • angular-bootstrap
  • angular-ui-ace
  • express
  • bower
  • gulp
  • d3.js
  • ace editor

Contributing

Please do.

Versioning

soon.

Authors

  • Bradley Thornton - Initial work - cidrblock

License

This project is licensed under the MIT License. MIT License.

Acknowledgments

  • D3.js, Angular, Bootstrap, Ace