Work Breakdown Structure Diagrams are created with nodes. Position of those nodes inside the code determines where they are located and how their connecting lines are built.
Node Declaration
The basic node is declared by a plus sign followed by the text you wish to appear in the node.
Example: Node Declaration
@startwbs
'Example: Node Declaration
'Create a basic node.
+ Top
@endwbs
Properties
Nodes have six properties. The only required properties are the depth and text.
depth - how far down the diagram the node appears
direction - which side the node appears with relation to its incoming arrow
box - determines if the node appears inside of a box
fill_color - determines the fill color of the node's box
text - the written content of the node
style_label - an identifying label used for styling
Depth
Depth determines how far down the diagram a node appears. It is determined by the number of spaces that precede the plus sign. The number of spaces is equal to the node's depth. The node will appear in a branch beneath the most recent node of one less depth. Spaces before the text are ignored.
Example: Node Depth
@startwbs
'Example: Node Depth
'Create a top level node.
+ Top Depth 0
'Create a node at a depth of one.
+ 1st Branch Depth 1
'Create two nodes at a depth of two.
+ A Depth 2
+ B Depth 2
'Repeat the 2nd and 3rd step.
+ 2nd Branch Depth 1
+ C Depth 2
+ D Depth 2
'Repeat the 2nd and 3rd step.
+ 3rd Branch Depth 1
+ E Depth 2
+ F Depth 2
@endwbs
Direction
Replacing a plus sign with a minus sign will cause the node to move to the left of its branch. If this is done to multiple nodes they will be moved in order. We can show this by adding minus signs to the previous depth diagram.
Example: Node Direction
@startwbs
'Example: Node Direction
'Create a top level node.
+ Top Depth 0
'Create a node at a depth of one.
+ 1st Branch Depth 1
'Create two nodes at a depth of two.
+ A Depth 2
+ B Depth 2
'Repeat the 2nd and 3rd step.
'Replace a plus sign (+) with a minus sign (-) at Depth 1.
- 2nd Branch Depth 1
+ C Depth 2
+ D Depth 2
'Repeat the 2nd and 3rd step.
'Replace a plus sign (+) with a minus sign (-) at Depth 2.
+ 3rd Branch Depth 1
+ E Depth 2
- F Depth 2
@endwbs
Boxes
Every node has a boolean option determining if the node is contained within a box. The default is true. In order to remove the box you can place an underscore at the end of any depth property. This underscore is in addition to plus or minus signs. It is not a replacement.
Note: fill_color can not be used in conjunction with a false box node.
Example: Node Boxes
@startwbs
'Example: Node Boxes
'Create a top level node.
+ Top Depth 0
'Create a node at a depth of one.
+ 1st Branch Depth 1
'Create two nodes at a depth of two.
+ A Depth 2
+ B Depth 2
'Repeat the 2nd and 3rd step.
'Remove the box from the node at depth 1 .
+_ 2nd Branch Depth 1
+ C Depth 2
+ D Depth 2
'Repeat the 2nd and 3rd step.
'Remove the boxes from the nodes at depth 2.
+ 3rd Branch Depth 1
+_ E Depth 2
+_ F Depth 2
@endwbs
Fill Color
The fill_color property determines the fill color of the drawn object. The fill_color is defined by a standard color name or hex code. This property must come after a hash (#) sign and touch the hash sign. At the time of this writing fill_color does not support gradients.
Note: fill_color can not be used in conjunction with a false box node.
Example: Node Fill Color
@startwbs
'Example: Node Fill Color
'Create a top level node.
+ Top Depth 0
'Create a node at a depth of one.
+ 1st Branch Depth 1
'Create two nodes at a depth of two.
+ A Depth 2
+ B Depth 2
'Repeat the 2nd and 3rd step.
'Add color to the node at depth 1 .
+[#DarkCyan] 2nd Branch Depth 1
+ C Depth 2
+ D Depth 2
'Repeat the 2nd and 3rd step.
'Add color to the nodes at depth 2.
+ 3rd Branch Depth 1
+[#CD1E1E] E Depth 2
+[#561D5E] F Depth 2
@endwbs
Text
You can create multiline text by using line breaks (\n).
Node text also support icons from OpenIconic.
Example: Node Text
@startwbs
'Example: Node Text
'Create a top level node.
'Put an Icon in the text.
+ Top Depth 0 <&person>
'Create a node at a depth of one.
+ 1st Branch Depth 1
'Create two nodes at a depth of two.
'Use multiline text in one node.
+ A \nDepth \n2
+ B Depth 2
'Repeat the 2nd and 3rd step.
'Add emphasis to the text at depth 1 using creole.
+ **2nd Branch** //Depth 1//
+ C Depth 2
+ D Depth 2
'Repeat the 2nd and 3rd step.
'Add color and emphasis to the text at depth 2.
+ 3rd Branch Depth 1
+ <color:#CD1E1E><b>E Depth 2</b></color>
+ F Depth 2
@endwbs
Style Label
Style_labels are tags that can be added to nodes in order to format specific nodes. It works similar to CSS or <style> tags in HTML. Style will be covered in its own section later in this chapter.
Note: fill_color and inline text formatting will override style_label formatting.
Example: Node Style Label
@startwbs
'Example: Node Style Label
<style>
wbsDiagram {
.style_label {
BackgroundColor #CD1E1E
}
}
</style>
'Create a top level node.
+ Top Depth 0
'Create a node at a depth of one.
+ 1st Branch Depth 1
'Create two nodes at a depth of two.
+ A Depth 2
+ B Depth 2
'Repeat the 2nd and 3rd step.
'Add a style label to the node at depth 1.
+ 2nd Branch Depth 1 <<style_label>>
+ C Depth 2
+ D Depth 2
'Repeat the 2nd and 3rd step.
'Add style labels to the node at depth 2.
+ 3rd Branch Depth 1
+ E Depth 2 <<style_label>>
+ F Depth 2 <<style_label>>
@endwbs
With All Properties
Example: Nodes With All Properties
@startwbs
'Example: Nodes With All Properties
<style>
wbsDiagram {
.style_label {
BackgroundColor #CD1E1E
}
}
</style>
+ Top Depth 0
+ 1st Branch Depth 1
-_ A Depth 2
+ B \nDepth \n2 <<style_label>>
+ 2nd Branch Depth 1
-_ C Depth 2
+[#561D5E] <color:#E6E6E7><b>D Depth 2</b></color>
+ 3rd Branch Depth 1
-_ E Depth 2
+[#DarkCyan] <color:#E6E6E7><b>F Depth 2</b></color>
@endwbs
Text supports emphasis with creole and markup language. It also supports colors with markup language. You can define colors with a standard color name or hex code. See for a list of creole and markup options.
