Working with Design Builder

Designs represent an application or service. These are combined with diagram templates to render the image. This is where you can test that the design file fits in your organisation's environment. It is important before you create design files you already have diagram files which represent your organisation.

To help you get started we have created a sample design which includes some AWS services which interacts with internal resources. You can view the sample design from the 4 sample diagram file perspectives. (Hosting, DR, Network Zones, Information Security)

Layout

The layout of design builder consists of:

• Creation Form - This is where you specify the attributes of your design

• Rendered Diagram - This is the preview of diagram you are creating. There is a download icon on the top right corner which downloads to a svg image file.

• Design json - This is the contents of design file. There is a download icon on the top right corner which downloads the file. This is useful if you wish to edit the file directly using a code editor.

• Diagram json - This is the contents of the design and diagram contents combined.

File

This is where you can create and edit design files. To can also use this to test your design against different diagram files and integration with other design files.

File Attributes	Description
Diagram Load	This loads a diagram template file which the design will be combined with.
Design Open	This will open an existing design file to edit.
Design Save As	This is to save the current design as a new file.
Design Import	This will import other design files which your design will interact with.

Nodes

Nodes are used to represent servers or services within your diagram.

Node Attributes	Description
Id	Internal name used to reference the node
Label	Text which will appear underneath the node
Icon	Icon which will be displayed
Top Left Dot Colour	Puts a dot colour on the top left of the icon
Text	Text to displayed instead of an icon when text mode is enabled
In	The box which the node will be drawn in
Metadata: *	Metadata table to be displayed underneath the diagram

Lines

Lines are used to connect nodes or boxes.

Lines Attributes	Description
Id	Internal reference for easy identification
From	Start node or box
To	End node or box
Label	Short label written on top of the node
Colour	Colour of the line
Style	How the will be drawn. clean - Default option which will create a neat line straight - will draw direct point to point line route - will route the line through gateways
Direction	Manipulate the path of line.
Arrow	To display arrow. Default is True.

Legend

Legend is used to display additional tables underneath the diagram. To add data to the legend you will need to download the design json and edit it directly using a code editor.

There is the option to remove all legend data from the design if it no longer required.