Download
drawthe.net draws network diagrams dynamically from a text file describing the placement, layout and icons. 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 place 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 drawthe.net, was to be able to describe the digram in a text file and have it rendered in SVG in the browser. I simply wanted to be able to draw network diagrams as fast as it could be done on a dry-erase board without using a mouse. Each icon and icon family may behave differently when the fill and stroke are applied, review the icon cut sheets to see the icons available for each family with the iconFill and iconStroke set.
Features
- Complex network diagrams typically involve specific place of icons
- Click on the examples menu for a sample of different diagram layouts and styles
- The icon's key will be used as the text value, therefore icon names have to be unique
- Groups are drawn in order, so place groups that should have a lower z-index at the top of the group array
- Connections are an array of individual connections
- Built with great open source software
Project Samples
