About

DrawTheNet.IO is a web application to draw network diagrams with simple yaml code.

Documentation structure

You can navigate in the documentation using the tabs in the top.
  • About : This section
  • Interface : How to use the interface
  • General : General information about the diagram document structure
  • Diagram : How to configure the global diagram settings
  • Title : How to configure the title infos & logo
  • Icons : How to configure an icon/node
  • Groups : How to group icons
  • Notes : How to add notes to the diagram
  • Connections : How to add connections between icons/notes
  • Reference : Reference of all available options and parameters

Why this app ?

I needed a simple way to draw network diagrams for my documentation. I found some existing tools on the web but I didn't like the way to store the diagrams.
I wanted something more simple and more "code" like. You can easily store your diagram source in a git repository, or any documentation system. You can even use the generated URL to jump on the editor quickly.

More info on GitHub

Interface

The interface is divided in 3 parts:

  • Menu (Top) : buttons to save, exports, etc...
  • Editor (left side) : where you can write your yaml code
  • Render (right side) : where you can see the result of your code

Menu

Download the current document as an YAML file.
Save localy (in local storage) and in the url (encoded as base64).
Trigger a save on each render. (Default ON)
Popup the icon explorer (see bellow).
Load one of the provided samples.
Toggle the diagram to fullscreen mode.
Render the document.
Trigger a render after a few seconds of inactivity. (Default ON)
Download the current render as a SVG file.
Download the current render as a PNG file.
Open this help

Editor

This is where you input your diagram code. Refer to the next section for more details on the document structure.
The editor provide syntax check for standard YAML document but not for the diagram specific syntax.
You can refer to the YAML 1.2 specification for the language detail.
If a syntax error is found by the editor, It will be shown next to the line number:

You can get a detail of the error by hovering the mouse on the error mark.

Render

This space will contain the render of your document.
You can drag the diagram by clicking and dragging the mouse.
You can also use the mouse wheel to zoom in and out.
If your render fail, you will have a notification of the error in the top right corner

Icon Explorer

You can open the icon explorer by clicking on the button in the top bar.
Use the search input in the center to find the icon you need.


Each icons is represented by a tile.



On the top part, you have the icon family name.

On the middle part you have a preview of the icon itself.

On the bottom part, you have the icon name.

You can click on each of those 3 parts. The top and bottom part will respectivly copy into your clipboard the icon family name and the icon name while clicking on the icon in the middle will copy the icon name with the icon family name, ready to be pasted in your document.

General

The document is divided in multiple main section.

  • diagram : define the diagram main properties
  • title : define the infos & property of the title section
  • icons : define the nodes of the diagram
  • groups : define groupings of nodes
  • notes : define markdown notes in the diagram
  • connections : define the links between nodes, groups or notes in the diagram

All those sections are optional, default value will be applied to most parameters. You can check the details in the Reference tab.

Apart from those reserved names, you are free to define any other section name.
For exemple, you can define a section named refs to store template objects:

refs:
  icon: &icon
  iconFamily: Cisco
  color: #ff0000

The key of items in each section must be unique. For example, you can't define 2 nodes with the same name:

Don't 
icons:
myicon: { icon: router, iconFamily: Cisco, color: #ff0000 }
myicon: { icon: AP, iconFamily: Cisco, color: #ffff00 }
Do 
icons:
myicon: { icon: router, iconFamily: Cisco, color: #ff0000 }
myOthericon: { iicon: AP, iconFamily: Cisco, color: #ffff00 }

Diagram

The diagram section is used to define the diagram main properties.

Grid

You can define the grid density with the help of the row and column header. They wil define how many of each is availalble as coordinates for your nodes.
Note that modifying the amount of columns/rows won't change the size of the diagram, it will only change the amount of available coordinates.

Example:

Small 5x5 grid

diagram:
  columns: 5
  rows: 5
  gridLines: true
  watermark: false
icons:
  MyRouter: {x: 2, y: 2, iconFamily: cisco, icon: router}

Larger 5x15 grid

diagram:
  columns: 5
  rows: 15
  gridLines: true
  watermark: false
icons:
  MyRouter: {x: 2, y: 2, iconFamily: cisco, icon: router}

Aspect Ratio

You can define the aspect ratio of the diagram with the aspectRatio property.
The aspect ratio is defined as a string composed as :
"width:height"
By default, the grid is a square, so the aspect ratio is "1:1".
If you want to define a landscape diagram, you can set the aspect ratio to "2:1" for example.

Example:

1:1 (Default) Aspect Ratio

diagram:
  columns: 5
  rows: 5
  gridLines: true
  watermark: false
icons:
  MyRouter: {x: 2, y: 2, iconFamily: cisco, icon: router}

2:1 Aspect Ratio

diagram:
  columns: 5
  rows: 5
  aspectRatio: "2:1"
  gridLines: true
  watermark: false
icons:
  MyRouter: {x: 2, y: 2, iconFamily: cisco, icon: router}

Grid Lines

You can toggle the grid lines visibility by setting the gridLines property.

Example:

(Default) Grid lines shown

diagram:
  columns: 5
  rows: 5
  gridLines: true
  watermark: false
icons:
  MyRouter: {x: 2, y: 2, iconFamily: cisco, icon: router}

Grid lines hidden 

diagram:
  columns: 5
  rows: 5
  gridLines: false
  watermark: false
icons:
  MyRouter: {x: 2, y: 2, iconFamily: cisco, icon: router}

Background

The background of the diagram is white by default. To override this, you can set the fill property.

Watermark

By default a small watermark is applied at the bottom right of your diagram as a clickable link with "Made with DrawTheNet.IO" as text.
This is to help spread the project to futur viewer of the diagram.
You can disable this watermark by setting the watermark property to false but please conside keeping it on to help the project.

Title

The title is a zone place bellow your nodes. It convey general informations about the diagram, its production date, the author, ...

Type

You can show the title with either a top bar ot a full box around it.
By default, the title is not shown. This is equivalent to setting the type property to null or none.
To show it with a full box, set the type property to box.
For a lighter looking diagram, you can set the type property to bar to only show a bar above it.

Logo

On the leftmost part you can find the title log. It default to the DrawTheNet.IO logo but you can change it by setting the logoUrl property.
The background behind the logo can be changed by setting the logoFill property. If not set, it will default to the diagram fill color property.
Note that only svg logo can be transparent as of today.

Title & Sub-title

The title and sub-title are the main texts of the title. They are set by the text and subText properties respectively. They default to being empty.

Infos

On the right side, you can find various info about the diagram.
The author is set by the author property. If unspecified, it will display as "Unknown". You can hide it by setting it to null.
The company is set by the company property. If unspecified, it will not be shown.
The date is set by the date property. If unspecified, it will display as the current date in the locale of your browser. You can hide it by setting it to null.
The version is set by the version property. If unspecified, it will display as "1". You can hide it by setting it to null.

Icons

Icons are at the core of DrawTheNet.IO. They are the main way to represent nodes your network.

icons:
  chddc1slb005:
    x: 3
    y: 2
    icon: "load-balancers"
    iconFamily: "azure"
    color: "white"
    fill: "#555555"

An icon is composed of a rounded rectangle ontop of which is the icon image and the name of the node.

Icon Family

To be able to specify an icon, you need to specify the icon family it belongs to.
You can specify it with the iconFamily property.
It can be one of:

  • AWS : Amazon Web Services
  • Azure : Microsoft Azure
  • M365 : Microsoft 365
  • D365 : Microsoft Dynamics 365
  • Power Platform : Microsoft Power Platform
  • GCP : Google Cloud Platform
  • Cisco: Cisco
  • Fortinet : Fortinet
  • Iconify : Iconfiy
Note : You can find easily icons with the Icon Explorer integrated into the app.

Icon Image

The icon can specify it with the icon property.
If the specified name doesn't exist in the icon family, the icon image will not be drawn but the bounding box if the icon will still be rendered.
Note : You can find easily icons with the Icon Explorer integrated into the app.

Size

The icon is by default 1x1 in size (relative to the amount of row & columns specified in the diagram section
The size of the icon can be specified with the w (width) and h (height) properties.

1x1 (Default)

icons:
  chddc1slb005:
    x: 3
    y: 2
    icon: "load-balancers"
    iconFamily: "azure"
    color: "white"
    fill: "#555555"

1x2

icons:
  chddc1slb005:
    x: 3
    y: 2
    w: 1
    h: 2
    icon: "load-balancers"
    iconFamily: "azure"
    color: "white"
    fill: "#555555"

Groups

Notes

Connections

Reference

This section is a reference of all available object properties for a valid document.
Note that most of those properties are optional and will default to a value if not specified.

For all properties noted as SVG color, you can use any valid SVG color value.
It can be either:

  • Color keyword, like white, blue, green, ... (as specified int the SVG specs).
  • Hexadecimal color code as #XXYYZZ where XX, YY and ZZ are hexadecimal values between 00 and FF for the red, green and blue component of the color.
  • rgb(XXX,YYY,ZZZ) where XXX, YYY and ZZZ are decimal values between 0 and 255 for the red, green and blue component of the color.

Table Of Contents:

  • document
  • diagram
  • title
  • icons
  • icon
  • groups
  • group
  • notes
  • note
  • connections
  • connection

document

Define the diagram settings.

Type: Object

Properties:

Property Value Type Default Description 
aspectRatio
 string 
null
 The width:height ration of the diagram.
A null value will auto compute a best fit ratio to use all the available space		 
margin
 object 
{ top: 5, right: 5, bottom: 5, left: 5 }
 The margin in px around the whole diagram area (title included).
Composed of 4 properties :
  • top : The margin on the top of the diagram.
  • right : The margin on the right of the diagram.
  • bottom : The margin on the bottom of the diagram.
  • left : The margin on the left of the diagram. 
fill
 string 
white
 The background color of the diagram. Can be any valid SVG color. 
watermark
 boolean 
true
 If true, a small link to the app will be displayed in the bottom right of the diagram.
💗 To help the project, consider leaving it on. 💗 
renderRatio
 number 
3
 The upscaling render ratio for PNG export. 
fileTitlePrefix
 string 
"drawthenet.io"
 Prefix appended to any exported file title. 
schemasVersion
 integer 
1
 reserved for futur use.

Back to the top

diagram

Define the global diagram settings.

Type: Object

Properties:

Property Value Type Default Description 
columns
 integer 
10
 The number of columns of the drawing grid. Note that this won't change the width of the diagram, only the range availalble as x coordinate, with 0 being the leftest postion and this value - 1 the rightest. 
rows
 integer 
10
 The number of rows of the drawing grid. Note that this won't change the width of the diagram, only the range availalble as y coordinate, with 0 being the highest postion and this value - 1 the lowest.
See invertY bellow to invert this axis. 
invertY
 boolean 
false
 If true, the y axis will be inverted, with 0 being the lowest postion and rows - 1 the highest. 
gridLines
 boolean 
true
 If true, grid lines will be drawn on the diagram at each integer columns and rows.
Dotted lines represent midpoints between each full stop position. 
margin
 object 
{ top: 10, right: 10, bottom: 10, left: 10 }
 The margin in px around the diagram area (without title).
Composed of 4 properties :
  • top : The margin on the top of the diagram.
  • right : The margin on the right of the diagram.
  • bottom : The margin on the bottom of the diagram.
  • left : The margin on the left of the diagram.

Back to the top

title

Define the title settings.

Type: Object

Properties:

Property Value Type Default Description 
border
 string 
"bar"
 The type of title border.
Can be either of the following:
  • none : No border.
  • bar : Draw a line between the title and the diagram using the stroke color.
  • box : Draw a box around the title using the stroke color.
If undefined or null, it will be treated as none. 
position
 string 
"bottom"
 The title position.
Can be either of the following:
  • bottom : Draw the title bellow the diagram.
  • top : Draw the title above the diagram.
  • none / null : Do not draw the title.
If undefined or null, it will be treated as bottom. 
text
 string 
"Diagram title"
 The title text of the diagram. 
subText
 string 
null
 The sub-title text of the diagram.
If undefined, empty, or null, the section will not be displayed. 
author
 string 
null
 The author(s) of the diagram.
If undefined, empty, or null, the section will not be displayed. 
company
 string 
null
 The company related to the diagram.
If undefined, empty, or null, the section will not be displayed. 
date
 string 
current date
 The date related to the diagram.
If empty or null, the section will not be displayed.
If undefined, the current date will be used in the format yyyy-mm-dd. 
version
 string 
"1"
 The version of the diagram.
If empty or null, the section will not be displayed.
If undefined, 1 will be used. 
color
 string 
"black"
 The title texts color.
Can be any valid SVG color. 
stroke
 string 
"black"
 The title top bar or box border color.
Can be any valid SVG color. 
fill
 string 
"black"
 The title area fill color.
Can be any valid SVG color.
If undefined, empty, or null, the document color will be used. 
heightPercentage
 number 
6
 The percentage relative to the global document heigth for the title area. 
padding
 object 
{ top: 10, right: 10, bottom: 10, left: 10 }
 The padding inside the area.
Composed of 4 properties :
  • top : The padding on the top of the title area.
  • right : The padding on the right of the title area.
  • bottom : The padding on the bottom of the title area.
  • left : The padding on the left of the title area. 
logoUrl
 string 
"./res/logo.svg"
 The title logo URL.
Can either be a URI or a base64 encoded image data URI. 
logoFill
 string 
null
 The background color behind the logo.
Can be any valid SVG color.
If undefined or null, the diagram fill color will be used.

Back to the top

icons

Define the icons / nodes.

Type: Object or Array

Contain Icon objects. If defined as Object, keys can be used in groups and connection to reference this node.
If defined as an Array, the position/index of the items will be used as a key.

Back to the top

icon

Note that the key/name of the object definition inside the parent is used as the node text by default.

Properties:

Property Value Type Default Description 
iconFamily
 string
The family of the icon.
Can be either of:
  • AWS
  • Azure
  • Cisco
  • D365
  • GCP
  • M365
  • PowerPlatform
  • Iconify
 
icon
 string
The icon image name.
Refer to the icon explorer for the list of available icons. 
text
 string 
the object key in icons
 The icon's text.
By default the object key is used as text. Set this property to override it. 
x
 integer/string
The icon x position within the digram.
Can be either:
  • Absolute : Must be between 0 and the value defined in diagram > column (or its default value)
    0 is the leftmost position while the value defined in (diagram > column) - 1 is the rightmost position.
  • Relative : A number as a string prefixed with + or - to define the position relative to the previous icon. Ex : "+2" or "-1"
 
y
 integer/string
The icon y position within the digram.
Can be either:
  • Absolute : Must be between 0 and the value defined in diagram > rows (or its default value)
    0 is the top position while the value defined in (diagram > rows) - 1 is the lowest position.
  • Relative : A number prefixed with + or - to define the position relative to the previous icon. Ex : "+2" or "-1"
 
w
 integer 
1
 The icon width within the digram.
It is a unitless quantity, 1 represent a width of 1 within the grid 
h
 integer 
1
 The icon height within the digram.
It is a unitless quantity, 1 represent a height of 1 within the grid 
textLocation
 string 
"bottomMiddle"
 Define the text location relative to the icon image.
Can be either of:
  • center : Position the text in the center of the bounding box.
  • topLeft : Position the text along the top, in the left corner.
  • topMiddle : Position the text along the top, centered.
  • topRight : Position the text along the top, in the right corner.
  • rightTop : Position the text along the right side, in the top corner.
  • rightMiddle : Position the text along the right side, centered.
  • rightBottom : Position the text along the right side, in the bottom corner.
  • bottomLeft : Position the text along the bottom, in the left corner.
  • bottomMiddle : Position the text along the bottom, centered.
  • bottomRight : Position the text along the bottom, in the right corner.
  • leftTop : Position the text along the left side, in the top corner.
  • leftMiddle : Position the text along the left side, centered.
  • leftBottom : Position the text along the left side, in the bottom corner.
 
url
 string
Optional URL link target for the icon text to point to. 
color
 string 
"black"
 The text color. Can be any valid SVG color. 
fill
 string 
"white"
 The fill color for the icon bounding box. Can be any valid SVG color. 
stroke
 string 
"black"
 The color of the border of the bounding box. Can be any valid SVG color. 
strokeDashArray
 string 
"0,0"
 Allow to set a dotted lines instead of a solid one.
The fist number is the length of the dash (in px), the second one is the length of the gap (in px). 
iconFill
 string
Override the fill color for the icon. Can be any valid SVG color.
If not specified, the icon won't be altered from the original. 
iconStroke
 string
Override the stroke color for the icon. Can be any valid SVG color.
If not specified, the icon won't be altered from the original. 
iconStrokeWidth
 integer
Override the stroke width for the icon.
If not specified, the icon won't be altered from the original. 
preserveWhite
 bool
Don't change white in the source svg file. 
metadata
 object
An object defining the metadata to be displayed on mouse over.
Any properties (except the 2 specified bellow) will be displayed as a key/value pair.
Extra metadata can be loaded dynamicly by using the url property.
The specified URL will be called with a GET request and the response will be parsed as a JSON object.
The response object will be merged with the metadata object.
The url property will be removed from the final object.
The URL can be constructed dynamicly by insering {{tokens}} inside it.
A custom erro text can be specified with the errorText property.
See exemples in the Icons section of this Help file.

Back to the top

groups

Define the icons / nodes.

Type: Object or Array

Contain Icon objects. If defined as Object, keys can be used in groups and connection to reference this node.
If defined as an Array, the position/index of the items will be used as a key.

Back to the top

groups

Note that the key/name of the item is used as the group text by default.
Groups are drawn in order, so place groups that should have a lower z-index at the top of the group array.

Properties:

Property Value Type Default Description 
members
 string array
An array listing the names of the items that should be grouped together.
Items can be icons, other groups or notes. 
textLocation
 string 
"bottomMiddle"
 Define the text location relative to the group box.
Can be either of:
  • center : Position the text in the center of the bounding box.
  • topLeft : Position the text along the top, in the left corner.
  • topMiddle : Position the text along the top, centered.
  • topRight : Position the text along the top, in the right corner.
  • rightTop : Position the text along the right side, in the top corner.
  • rightMiddle : Position the text along the right side, centered.
  • rightBottom : Position the text along the right side, in the bottom corner.
  • bottomLeft : Position the text along the bottom, in the left corner.
  • bottomMiddle : Position the text along the bottom, centered.
  • bottomRight : Position the text along the bottom, in the right corner.
  • leftTop : Position the text along the left side, in the top corner.
  • leftMiddle : Position the text along the left side, centered.
  • leftBottom : Position the text along the left side, in the bottom corner.
 
color
 string 
"black"
 The text color
Can be either:
  • Color keyword, like white,blue,green,... (as specified int the SVG specs).
  • Hexadecimal color code as #XXYYZZ where XX, YY and ZZ are hexadecimal values between 00 and FF for the red, green and blue component of the color.
  • rgb(XXX,YYY,ZZZ) where XXX, YYY and ZZZ are decimal values between 0 and 255 for the red, green and blue component of the color. 
fill
 string 
"white"
 The fill color for the icon bounding box
Can be either:
  • Color keyword, like white,blue,green,... (as specified int the SVG specs).
  • Hexadecimal color code as #XXYYZZ where XX, YY and ZZ are hexadecimal values between 00 and FF for the red, green and blue component of the color.
  • rgb(XXX,YYY,ZZZ) where XXX, YYY and ZZZ are decimal values between 0 and 255 for the red, green and blue component of the color. 
stroke
 string 
"white"
 The color of the border of the bounding box.
Can be either:
  • Color keyword, like white,blue,green,... (as specified int the SVG specs).
  • Hexadecimal color code as #XXYYZZ where XX, YY and ZZ are hexadecimal values between 00 and FF for the red, green and blue component of the color.
  • rgb(XXX,YYY,ZZZ) where XXX, YYY and ZZZ are decimal values between 0 and 255 for the red, green and blue component of the color. 
strokeDashArray
 string 
"0,0"
 Allow to set a dotted lines instead of a solid one.
The fist number is the length of the dash (in px), the second one is the length of the gap (in px).

Back to the top

notes

Notes contain simple text or markdown.

Properties:

Property Value Type Default Description 
x
 integer/string
The icon x position within the digram.
Can be either:
  • Absolute : Must be between 0 and the value defined in diagram > column (or its default value)
    0 is the leftmost position while the value defined in (diagram > column) - 1 is the rightmost position.
  • Relative : A number prefixed with + or - to define the position relative to the previous icon. Ex : "+2" or "-1"
 
y
 integer/string
The icon y position within the digram.
Can be either:
  • Absolute : Must be between 0 and the value defined in diagram > rows (or its default value)
    0 is the bottom position while the value defined in (diagram > rows) - 1 is the topest position.
  • Relative : A number prefixed with + or - to define the position relative to the previous icon. Ex : "+2" or "-1"
 
xAlign
 string 
left
 Alignment of the text along the x axis.
  • left : Align the text to the left side of the note's bounding box.
    This set textAlign: "left", alignItems: "flex-start"
  • center : Align the text in the middle of the note's bounding box along the x axis.
    This set textAlign: "center", alignItems: "center"
  • right : Align the text to the right side of the note's bounding box.
    This set textAlign: "right", alignItems: "flex-end" 
yAlign
 string 
"top"
 Alignment of the text along the y axis.
  • top : Align the text to the top of the note's bounding box.
    This set justifyContent: "flex-start"
  • center : Align the text to the bottom side of the note's bounding box.
    This set justifyContent: "center"
  • bottom : Align the text in the middle of the note's bounding box along the y axis.
    This set justifyContent: "flex-end" 
alignItems
 string 
"flex-start"
 This defines the default behaviour for how flex items are laid out along the cross axis on the current line.
Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).
  • flex-start : Cross-start margin edge of the items is placed on the cross-start line.
  • flex-end : Cross-end margin edge of the items is placed on the cross-end line.
  • center : Items are centered in the cross-axis.
  • baseline : Items are aligned such as their baselines align.
  • stretch : Stretch to fill the container (still respect min-width/max-width). 
flexDirection
 string 
"column"
 The direction of the note.
  • row : Left to right.
  • row-reverse : Right to left.
  • column : Stop to bottom.
  • column-reverse : Same as row-reverse but bottom to top 
justifyContent
 string 
"flex-start"
 This defines the alignment along the main axis.
  • flex-start : Items are packed toward the start line.
  • flex-end : Items are packed toward to end line.
  • center : Items are centered along the line.
  • space-between : items are evenly distributed in the line; first item is on the start line, last item on the end line.
  • space-around : Items are evenly distributed in the line with equal space around them. Note that visually the spaces aren't equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies. 
w
 integer 
1
 The icon width within the digram.
It is a unitless quantity, 1 represent a width of 1 within the grid 
h
 integer 
1
 The icon height within the digram.
It is a unitless quantity, 1 represent a height of 1 within the grid 
color
 string 
"black"
 The text color
Can be either:
  • Color keyword, like white,blue,green,... (as specified int the SVG specs).
  • Hexadecimal color code as #XXYYZZ where XX, YY and ZZ are hexadecimal values between 00 and FF for the red, green and blue component of the color.
  • rgb(XXX,YYY,ZZZ) where XXX, YYY and ZZZ are decimal values between 0 and 255 for the red, green and blue component of the color. 
fill
 string 
"white"
 The fill color for the note bounding box
Can be either:
  • Color keyword, like white,blue,green,... (as specified int the SVG specs).
  • Hexadecimal color code as #XXYYZZ where XX, YY and ZZ are hexadecimal values between 00 and FF for the red, green and blue component of the color.
  • rgb(XXX,YYY,ZZZ) where XXX, YYY and ZZZ are decimal values between 0 and 255 for the red, green and blue component of the color. 
stroke
 string 
"white"
 The color of the border of the bounding box.
Can be either:
  • Color keyword, like white,blue,green,... (as specified int the SVG specs).
  • Hexadecimal color code as #XXYYZZ where XX, YY and ZZ are hexadecimal values between 00 and FF for the red, green and blue component of the color.
  • rgb(XXX,YYY,ZZZ) where XXX, YYY and ZZZ are decimal values between 0 and 255 for the red, green and blue component of the color. 
strokeDashArray
 string 
"0,0"
 Allow to set a dotted lines instead of a solid one.
The fist number is the length of the dash (in px), the second one is the length of the gap (in px).

Back to the top

connections

Connections are an array of individual connections.
The order is insignificant because connections will always be drawn from left to right.

Properties:

Property Value Type Default Description 
endpoints
 string array
An array of 2 icons, groups or notes, one for each endpoint of the connection.
When an endpoint is a group, lines will be drawn to each group member.
labels for each endpoint can be appended to the endpoint name, separated by a colon.
For example, endpoints: [spines:40Gb,leaves:40Gb]. 
curve
 string 
"curveLinear"
 If defined, must be one of :
  • curveLinear : Draws a line directly connecting the endpoints.
  • curveStep : Draws a line consisting of alternating horizontal and vertical lines. The y-value changes at the midpoint of each pair of adjacent x-values.
  • curveStepAfter : Draws a line consisting of alternating horizontal and vertical lines. The y-value changes after the x-value.
  • curveStepBefore : Draws a line consisting of alternating horizontal and vertical lines. The y-value changes before the x-value.
See the connections secttion of this help page for examples. 
color
 string 
"black"
 The text color
Can be either:
  • Color keyword, like white,blue,green,... (as specified int the SVG specs).
  • Hexadecimal color code as #XXYYZZ where XX, YY and ZZ are hexadecimal values between 00 and FF for the red, green and blue component of the color.
  • rgb(XXX,YYY,ZZZ) where XXX, YYY and ZZZ are decimal values between 0 and 255 for the red, green and blue component of the color. 
stroke
 string 
"white"
 The color of the border of the bounding box.
Can be either:
  • Color keyword, like white,blue,green,... (as specified int the SVG specs).
  • Hexadecimal color code as #XXYYZZ where XX, YY and ZZ are hexadecimal values between 00 and FF for the red, green and blue component of the color.
  • rgb(XXX,YYY,ZZZ) where XXX, YYY and ZZZ are decimal values between 0 and 255 for the red, green and blue component of the color. 
strokeDashArray
 string 
"0,0"
 Allow to set a dotted lines instead of a solid one.
The fist number is the length of the dash (in px), the second one is the length of the gap (in px).

Back to the top