[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:

@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:


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):

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:


(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:


And, finally, an annotated (heavily, I would say) WBS from [PMbasics101.com](https://pmbasics101.com/work-breakdown-structure-guide/):


### 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
...