owned this note
owned this note
Published
Linked with GitHub
[post]: https://www.researchgate.net/profile/Alexandros_Hatzigeorgiou/publication/30
# WBS Diagram proposal
WBS stands for _Work Breakdown Structure_, it is a common diagram in management, which describes a list of TO-DOs, with order and hierarchy.
This is a presentation of three syntax and semantics proposals for PlantUML WBS diagrams.
## Syntax
For the diagram itself, the proposal has three possibilities:
- Activity
- Class
- Salt's filetree
### Visual configuration
The second level of the WBS is always drawn the same way, but the third and fourth may vary. In those cases, I propose a skinparam parameter `wbsStructure` which can be `tree` or `dropdown`, being `dropdown` the default.
Also, define "stereotypes" like in class diagrams to style boxes. If using a class-like syntax, that would be pretty straightforward. For activity-like, it could be the same, but at split level.
```
wbs
' Class like syntax
split C1 "Decide on job Requirements" as C1L3
C1L3<<Style2>> {
:"Identity gaps"<<Style3>>;
:Review JDs;
:C1L4/ /' Reference to the Next Sub division for nesting? '/
}
```
_(this is part of the syntax example from the original [post])_
### Activity
Activity-like. Is consistent with the PlantUML language, and allows using `split`. So, it's more flexible, as it already has all the instructions needed.
Skinning can be done using the _stereotype_ from the Class syntax (which, by the way, would be nice for the actual Activity diagram... But that's another request).
Using SDL _suffixes_ for rounded (:label;) or rectangular (:label]) boxes is also a good point for using Activity syntax.
A "complete" example:
```
@startuml
title WBS Example
/' Use the `skinparam` to set the _type_: '/
skinparam WbsType tree /' A graph-like structure '/
skinparam WbsType mixed /' figure 1 type '/
skinparam WbsType dropdown /' figure 3 type '/
skinparam WbsAutoNumber true
skinparam WbsAutoNumberStyle simple /' Each box has a unique number, top-down / left-right (unless RTL language...?)'/
skinparam WbsAutoNumberStyle nested /' Common in WBS: 1., 1.1., 1.2, 2.1, 2.1.1, etc. '/
''
' Each Level may have its own style, so there should be a way
' to point them. The best way is to use the `stereotype` approach.
'
' Things configurable:
' Font (size, weight...)
' Arrow, Border (with/without, solid, dotted, dashed, color)
' Background (transparent?, solid, gradient)
' Connect lines (thickness, solid, dotted, dashed, color)
''
skinparam Wbs {
Arrows false
LineColor black
}
' "Global" WBS box style
skinparam WbsBox {
BackgroundColor lightRed
bordercolor black
FontStyle Normal
}
skinparam WbsBox<<Style4>> {
border none
backgroundcolor white
fontStyle italic
}
:New Job]
:LinkedIn] /' Second level is always tree-ish '/
split tree /' Forced as "tree" structure '/
:Job alerts]
-left-> /' Using activity's syntax to determine box position '/
:Follow Companies]
note left
a Note about the task.
end note
:Upgrade account]
split again /' `again` would honor the structureType '/
:Update Profile
split again down /' `down` could be used to force "stairs" structure on the branch if the "Style" is `tree` '/
:Recommendations<<void>>] /' '<<void>>' "stereotype" defined without borders and blank bg '/
:Latest position> /' or a pre-defined `:label>` could be a "void" box '/
:Skills>
:Certifications>
end split
end split
:Network engaged]
split again <<Style4>> /' Apply a style defined with `skinparam as an stereotype. '/
:Contact recruiters]
:Contact managers]
:Contact ex-colleagues]
end split
end split
```
### SALT like
This could be considered a "fast and compact" syntax for simpler WBS.
Combined with the `skinparam` directive, it should be enough for many WBS diagrams. Two flavors:
```
'' Salt-tree-like
+ New Job
++ [#black,bg=yellow] Decide on Job Requirements
+++ Identity gaps
+++ Review JDs
++++ Sign-Up for courses
++++ Volunteer
++++ Reading
+++ Checklist
++++ Responsibilities
++++ Location
++ CV Upload Done
+++ CV Updated
++++ Spelling & Grammar
++++ Check dates
++++ Skills
+++ Recruitment sites chosen
'' Salt-like, but with indentation (Python-like...)
' It has the advantage of being visually understandable
New Job
Interview Prep
Brush up on Interview technique
-left- Read a bgood book
-right- Prepare answers
-left- Questions to ask
-right- Prep for difficult questions
Why leaving?
Biggest fault?
```
The reason of allowing the second format, is because there's an online tool (WBSTool) that uses this format, but its output is... Ugly.
#### UPDATE
:::info
> [color=lightblue]
> [time=Mon, Mar 4, 2019]
Beta version allows using the _compact syntax_, without fancies, yet:
```uml
@startwbs
* Business Process Modelling WBS
** Launch the project
*** Complete Stakeholder Research
*** Initial Implementation Plan
** Design phase
*** Model of AsIs Processes Completed
**** Model of AsIs Processes Completed1
**** Model of AsIs Processes Completed2
*** Measure AsIs performance metrics
*** Identify Quick Wins
** Complete innovate phase
@endwbs
```
Renders:
![](https://i.imgur.com/Ye4dI7w.png)
Now, let's wait for more tweaks, like non-rounded boxes, swap direction, coloring and some other features. :smiley:
:::
## Graphical representation
Some things to take into account:
Using `-left-` and `-right-` to inform where the box will be positioned is a desired, but not required, feature. When applied to a group, the whole group should be directioned, while when used on an element (a _task_) only that box should change. It is obvious, but it must be said. :wink:
Autonumbering is a very common representational feature.
The graphical result [in the answer][post] (once it becomes configurable) is very good.
### Tree-like representation
[MermaidJS](http://knsv.github.io/mermaid) produces a tree diagram using a imple syntax (incidentally, it is available in HackMD.io):
```mermaid
graph TB
style M fill:#8eb4e3,stroke:#333,stroke-width:3px
classDef ExcelFile fill:#c1d6fe,stroke:#333,stroke-width:2px;
classDef AggData fill:#f2dcdb,stroke:#333,stroke-width:2px;
classDef ExcelTabs fill:#ebf1de,stroke:#333,stroke-width:2px;
M[Project Name]
C1R1[Sub division 1]
C1R2[Task 1.1]
C2R1[Sub division 2]
C2R2[Task 2.1]
C2R3[Task 2.2]
C2R3S1[SubTask 2.3.1]
C2R3S2[SubTask 2.3.1]
C3R1[Sub division 3]
C3R2[Task 3.1]
C3R3[Task 3.2]
C4R1[Sub division 3]
M --- C1R1
M --- C2R1
M --- C3R1
M --- C4R1
C1R1 --- C1R2
C2R1 --- C2R2
C2R2 --- C2R3
C2R3 --- C2R3S1
C2R3 --- C2R3S2
C3R1 --- C3R2
C3R1 --- C3R3
class X,C1R1,C2R1,C3R1,C4R1,C5R1 ExcelFile
class R,C1R2,C2R2,C2R3 AggData
class T,C2R3S1,C2R3S2,C3R2,C3R3 ExcelTabs
```
the `classDef` sould be `skinparam` directives, while `class` would be parameters of either a node definition (`C3R2[task] ExcelTabs`) or of a split command.
Also using preprocessor's directives would make possible some comlex skinning, but it could get too complex... :question:
Now, some examples.
An example to illustrate a mix of _tree_ and _down_ structures:
![mixed structure](https://www.projecttimes.com/images/murthy_IMG03.png)
(Source: https://www.projecttimes.com/articles/using-work-breakdown-structure-wbs-for-effective-project-estimation.html)
This one is a "-left-" and "-right-" use case:
![left&right WBS](https://www.stakeholdermap.com/plan-project/bpm-wbs.png)
And, finally, an annotated (heavily, I would say) WBS from [PMbasics101.com](https://pmbasics101.com/work-breakdown-structure-guide/):
![annotated WBS](https://pmbasics101.com/wp-content/uploads/2017/02/WBS-Example-760x428.jpeg)
### Another syntax proposal
```
+ Project
+ Part One
+ Task 1.1
- LeftTask 1.2
+ Task 1.3
+ Part Two
+ Task 2.1
+ Task 2.2
-_ Task 2.2.1 To the left boxless
-_ Task 2.2.2 To the Left boxless
+_ Task 2.2.3 To the right boxless
...
```