Draw More, Work Less
Computer Generated Diagrams
IQSS Tech talk
2014-01-09
Michael Bar-Sinai

Today:
Why and when computer-generated diagrams make sense?
GraphViz
PlantUML (and, also, UML)
Summary

Why Let a Computer Draw
Work on semantic level
“From A to B”
Play with parameters (layouts, skins)
A
B
Not that strange (HTML, LaTeX)
A
B
A
B
Play well with CVSs (git/svn/...)
Easy updates
Inspiration for DSLs/APIs
A
B

GraphViz
http://www.graphviz.org
“drawing graphs since 1988”
Open source, available to most platforms
Mainly Command-line, some GUIs exist

Image credit: ellisisland.org
Image credit: ellisisland.org

Image credit: ellisisland.org
Image credit: ellisisland.org
Burrito?
recipe credit: Mexico

Image credit: ellisisland.org
Image credit: ellisisland.org
Burrito?
recipe credit: Mexico

digraph towardsUnderstandingBurritos {
burrito
}

digraph towardsUnderstandingBurritos {
burrito
}
dot -Tpdf burrito.gv > burrito.pdf

digraph towardsUnderstandingBurritos {
burrito
}
dot -Tpdf burrito.gv > burrito.pdf
burrito

digraph towardsUnderstandingBurritos {
burrito
tortilla
beans
corn
wheat
meat
chicken
rice
tofu [label="Organic Tofu"]
}

burrito
tortilla
beans
corn
wheat
meat
chicken
rice
Organic Tofu
digraph towardsUnderstandingBurritos {
burrito
tortilla
beans
corn
wheat
meat
chicken
rice
tofu [label="Organic Tofu"]
}

burrito
tortilla
beans
corn
wheat
meat
chicken
rice
Organic Tofu
digraph towardsUnderstandingBurritos {
burrito [color="blue" style="filled" fillcolor="#CCCCFF" shape=box]
tortilla
beans
corn
wheat
meat
chicken
rice
tofu [label="Organic Tofu"]
}

digraph towardsUnderstandingBurritos {
burrito[ color="blue" style="filled" fillcolor="#CCCCFF" shape=box ]
tortilla
beans
corn
wheat
meat
chicken
rice
tofu [label="Organic Tofu"]
!
!
}
burrito -> tortilla [label="outside"]
tortilla -> wheat
tortilla -> corn
burrito
burrito
side ->
side ->
main ->
main ->
main ->
-> main [ label="inside" ]
-> side [ label="inside" ]
beans
rice
meat
chicken
tofu

digraph towardsUnderstandingBurritos {
burrito[ color="blue" style="filled" fillcolor="#CCCCFF" shape=box ]
tortilla
beans
corn
wheat
meat
burrito
chicken
rice
outside
inside
inside
tofu [label="Organic Tofu"]
!
!
}
burrito -> tortilla [label="outside"]
tortilla
main
tortilla -> wheat
tortilla -> corn
burrito
corn
burrito
side ->
side ->
main ->
main ->
main ->
-> main [ label="inside" ]
wheat
meat
chicken
-> side [ label="inside" ]
beans
rice
meat
chicken
tofu
side
Organic Tofu
beans
rice

digraph towardsUnderstandingBurritos {
...
node [shape="egg" style="filled" fillcolor="#CCFFFF"]
side
main
tortilla
!
}
node [shape="septagon"]
beans
corn
wheat
meat
chicken
rice
tofu [label="OrganicnTofu"]
...

digraph towardsUnderstandingBurritos {
...
node [shape="egg" style="filled" fillcolor="#CCFFFF"]
side
main
tortilla
!
}
beans
burrito
node [shape="septagon"]
beans
corn
inside
inside
wheat
meat
side
main
chicken
rice
tofu [label="OrganicnTofu"]
...
rice
meat
chicken
outside
tortilla
Organic
Tofu
corn
wheat

digraph towardsUnderstandingBurritos {
...
compound="true"
...
subgraph cluster_filling {
label="Filling"
bgcolor="lightgray"
side
main
node [shape="septagon"]
beans
meat
chicken
rice
tofu [label="OrganicnTofu"]
}
node [shape="septagon"]
corn
wheat
!
!
}
burrito -> tortilla [label="outside"]
tortilla -> wheat
tortilla -> corn
burrito -> main [ lhead="cluster_filling" label="inside" ]
...

digraph towardsUnderstandingBurritos {
...
compound="true"
...
subgraph cluster_filling {
label="Filling"
bgcolor="lightgray"
side
burrito
main
node [shape="septagon"]
beans
inside
meat
chicken
Filling
rice
tofu [label="OrganicnTofu"]
main
side
}
node [shape="septagon"]
corn
wheat
!
meat
!
}
Organic
beans
burrito -> tortillaTofu
[label="outside"]
chicken
rice
outside
tortilla
corn
wheat
tortilla -> wheat
tortilla -> corn
burrito -> main [ lhead="cluster_filling" label="inside" ]
...

twopi -Tpdf burrito.gv > burrito.pdf

twopi -Tpdf burrito.gv > burrito.pdf
rice
meat
side
beans
tortilla
wheat
inside
chicken
main
inside
burrito
outside
Organic
Tofu
corn

Circo - Radial Layout
chicken
main
Organic
Tofu
meat
rice
inside
burrito
inside
side
outside
beans
corn
tortilla
wheat

neato - Spring model
beans
corn
wheat
tortilla
outside
side
inside
burrito
inside
main
Organic
Tofu
chicken
meat
rice

fdp - Spring model, force direction
corn
beans
rice
wheat
outside burrito
tortilla
inside
inside
side
main
Organic
Tofu
meat
chicken

sfdp - Spring model, force direction
Organic
Tofu
wheat
tortilla
chicken
outside
corn
main
burrito inside
inside
side
meat
rice
beans

osage - Clustered, packed
Filling
Organic
Tofu
chicken
beans
tortilla
meat
main
side
inside
rice
corn
outside
burrito
wheat

Power to the printf
(generated from a ruby script simulating a logic circuit)

Playing well with others
GraphViz native format
Easy to parse. Allows other programs to use it as a layout
engine
SVG

Playing well with others
GraphViz native format
Easy to parse. Allows other programs to use it as a layout
engine
SVG
Combine with Javascript, HTML and JSON to get instant HTML5
website!

Playing well with others
GraphViz native format
Easy to parse. Allows other programs to use it as a layout
engine
SVG
Combine with Javascript, HTML and JSON to get instant HTML5
website!

Much more
dot User’s Manual, December 22, 2009
17
credit: dot User Manual, Gansner, Koutsofios, North
past
SCCS
Bourne sh
Reiser cpp
1978
Bézier curves
make
vi
build
RCS
1985
1987
C*
DAG
CIA++
DOT
<curses-i>
fdelta
SBCS
APP
DIA
Software IS
future
Ansi cpp
CIA
1989
1990
TTU
Peggy
ncpp
CSAS
3D File System
IMX
IFS
nmake
1988
Colors, gradients…
SYNED
ksh
Complex nodes (HTML tables)
Layout Constraints
emacs
<curses>
1983
1986
cron
Cshell
1980
1982
yacc
ksh-i
PG2
nmake 2.0
PAX
ksh-88
PEGASUS/PML
SHIP
backtalk
DataShare
libft
CoShell
sfio
Configuration Mgt
IFS-i
ML-X
Architecture & Libraries
Adv. Software Technology
Figure 12: Drawing with constrained ranks
ryacc
Mosaic
kyacc
yeast
Process

PlantUML
Also, UML

Unified Modeling Language
Developed by OMG, a standard body
OMG Unifie
Version 2.5
A diagram for every aspect of software
Structure, interactions, state, deployment…
OMG Document Num
Normative Reference:
Diagrams are also useful outside of the software world
Consumable
Machine
Meta models and Formal Definitions
http://www.om
http://www.om
http://www.om
http://www.om

Unified Modeling Language
Developed by OMG, a standard body
OMG Unifie
Version 2.5
A diagram for every aspect of software
Structure, interactions, state, deployment…
OMG Document Num
Normative Reference:
Diagrams are also useful outside of the software world
Consumable
Machine
Meta models and Formal Definitions
http://www.om
http://www.om
http://www.om
http://www.om

PlantUML
Creates some UML diagrams from text files
Java component - embeddable
plugins include Netbeans, MS Word, Redmine, servlet…
http://plantuml.sourceforge.net/index.html

Sequence Diagram
@startuml
!
actor researcher
participant website
participant team as "Murray archive team"
participant owner as "Data Owner"
database archive
!
researcher -> website : Fill form
researcher -> website : Submit form
website -> team : new file!
team -> owner : approve?
!
@enduml
*process NOT accurate

Sequence Diagram
@startuml
!
actor researcher
participant website
participant team as "Murray archive team"
participant owner as "Data Owner"
database archive
plantuml sequence.uml
!
researcher -> website : Fill form
researcher -> website : Submit form
website -> team : new file!
team -> owner : approve?
!
@enduml
*process NOT accurate

Sequence Diagram
@startuml
!
actor researcher
participant website
participant team as "Murray archive team"
participant owner as "Data Owner"
database archive
plantuml sequence.uml
!
researcher -> website : Fill form
researcher -> website : Submit form
website -> team : new file!
team -> owner : approve?
!
@enduml
*process NOT accurate

@startuml
!
actor researcher
participant website
participant team as "Murray archive team"
participant owner as "Data Owner"
database archive
!
researcher -> website : Fill form
researcher -> website : Submit form
website -> team : new file!
team -> owner : approve?
!
alt owner agrees
owner -> team : OK
team -> researcher : more forms
researcher -> team : filled more forms
team -> researcher : grant access
researcher -> archive : read
!
else owner declines
owner -> team : No
team -> researcher : Sorry...
end
!
@enduml
*process NOT accurate

@startuml
!
actor researcher
participant website
participant team as "Murray archive team"
participant owner as "Data Owner"
database archive
!
researcher -> website : Fill form
researcher -> website : Submit form
website -> team : new file!
team -> owner : approve?
!
alt owner agrees
owner -> team : OK
team -> researcher : more forms
researcher -> team : filled more forms
team -> researcher : grant access
researcher -> archive : read
!
else owner declines
owner -> team : No
team -> researcher : Sorry...
end
!
@enduml
*process NOT accurate

@startuml
actor researcher
participant website
participant team as "Murray archive team"
participant owner as "Data Owner"
database archive
!
researcher -> website : Fill form
researcher -> website : Submit form
website -> team : new file!
team -> owner : approve?
...Time goes by...
alt owner agrees
owner -[#green]> team : OK
team -> researcher : more forms
researcher -> team : filled more forms
team -> researcher : grant access
researcher -> archive : read
!
else owner declines
owner -[#FF0000]> team : No
team -> researcher : Sorry...
note right: Researcher may try again.
end
@enduml
*process NOT accurate

Activity Diagram
@startuml
start
:Get to Room;
:Hang Coat;
stop
@enduml
Updated flowcharts

Activity Diagram
@startuml
start
!
:Get to room;
:Hang Coat;
:Try to pour coffee;
if (Got coffee?) then (yes)
:fill cup;
else (no)
:comlain loudly;
:prepare;
:wait;
:fill cup;
endif
:go to desk;
:start working;
!
stop
@enduml

Activity Diagram
@startuml
start
:Get to room;
:#FFDDDD:Hang Coat;
:Try to pour coffee;
if (Got coffee?) then (yes)
:#AAFFAA:fill cup;
else (no)
:#red:comlain loudly;
:prepare;
note right
make sure to
only press the
"brew" button
<b>once</b>!
end note
:wait;
:fill cup;
endif
:go to desk;
:start working;
stop
@enduml

Activity Diagram - Parallel Work
@startuml
start
:Recognize need for burrito;
:Get Cookin';
fork
:mix ingredients;
:bake;
fork again
:grind;
:fry;
fork again
:chop;
:cook;
:drain;
end fork
:roll up;
:eat;
stop
@enduml

Activity Diagram
@startuml
:Recognize need for burrito;
repeat
:Get Cookin';
fork
:mix ingredients;
:bake;
fork again
:grind;
:fry;
fork again
:chop;
:cook;
:drain;
end fork
:roll up;
:eat;
repeat while (still hungry?)
@enduml

Use Case
Analyze user types, usages for the system, and how they all relate to
each other (useful!)
@startuml
actor user
actor admin
!
usecase ingest as "Ingest data
into the system
--various formats supported
"
usecase manage as "Manage system
===
Also make sure the
grants are mentioned
properly"
usecase analyze as "Analyze Data"
(Use Zelig)
@enduml

Use Case
Analyze user types, usages for the system, and how they all relate to
each other (useful!)
@startuml
actor user
actor admin
!
usecase ingest as "Ingest data
into the system
--various formats supported
"
usecase manage as "Manage system
===
Also make sure the
grants are mentioned
properly"
usecase analyze as "Analyze Data"
(Use Zelig)
@enduml

Use Case
@startuml
actor user
actor admin
!
usecase ingest as "Ingest data
into the system
--various formats supported
“...”
usecase analyze as "Analyze Data”
(Use Zelig)
!
user <|-- admin
analyze <|--(Use Zelig)
!
user --> analyze
user --> ingest
admin --> manage
!
@enduml

Use Case
@startuml
left to right direction
actor user
actor admin
rectangle System {
usecase ingest as "Ingest data
into the system
--various formats supported
"
usecase manage as "Manage system
===
Also make sure the
grants are mentioned
properly"
usecase analyze as "Analyze Data"
(Use Zelig)
}
...
@enduml

Salt - ASCII art GUI modeling
@startsalt
{
Hello...
[X] World
[] Kitty
[] There
[Submit]
}
@endsalt

Salt - ASCII art GUI modeling
@startsalt
{
Hello...
[X] World
[] Kitty
[] There
[Submit]
}
@endsalt
____________________________
< ASCII art is Moo-gnificent >
---------------------------
^__^
(oo)_______
(__)
)/
||----w |
||
||

Salt - ASCII art GUI modeling
@startsalt
{
Hello...
[X] World
[] Kitty
[] There
[Submit]
}
@endsalt
____________________________
< ASCII art is Moo-gnificent >
---------------------------
^__^
(oo)_______
(__)
)/
||----w |
||
||

Salt - ASCII art GUI modeling
@startsalt
{
Hello...
[X] World
[] Kitty
[] There
[Submit]
}
@endsalt
____________________________
< ASCII art is Moo-gnificent >
---------------------------
^__^
(oo)_______
(__)
)/
||----w |
||
||

Salt - ASCII art GUI modeling
@startsalt
{
Hello...
[X] World |(X) World
[] Kitty |() Kitty
[] There |() There
[Submit All] | [Submit one]
}
@endsalt

Salt - ASCII art GUI modeling
@startsalt
{+
Hello...
{/<b>Select Many | Select one | like us on LinkedBook }
{
[X] World
[] Kitty
[] There
[] other | ^Select....^
}
===
{
[Submit] | [Cancel] | [Tweet us on FaceIn]
}
}@endsalt

…Summing Up
Sometimes its better to concentrate on the structure, and let the
computer do the layout
There are free, capable tools for diagraming
Both GraphViz and PlantUML have numerous features not
covered in this talk

Draw More, Work Less
Computer Generated Diagrams
Thanks.