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 s...
GraphViz
http://www.graphviz.org	

“drawing graphs since 1988”	

Open source, available to most platforms	

Mainly Command...
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
t...
burrito

tortilla

beans

corn

wheat

meat

chicken

rice

Organic Tofu

digraph towardsUnderstandingBurritos {
burrito [...
digraph towardsUnderstandingBurritos {
burrito[ color="blue" style="filled" fillcolor="#CCCCFF" shape=box ]
tortilla
beans...
digraph towardsUnderstandingBurritos {
burrito[ color="blue" style="filled" fillcolor="#CCCCFF" shape=box ]
tortilla
beans...
digraph towardsUnderstandingBurritos {
...
node [shape="egg" style="filled" fillcolor="#CCFFFF"]
side
main
tortilla

!

}
...
digraph towardsUnderstandingBurritos {
...
node [shape="egg" style="filled" fillcolor="#CCFFFF"]
side
main
tortilla

!

}
...
digraph towardsUnderstandingBurritos {
...
compound="true"
...
subgraph cluster_filling {
label="Filling"
bgcolor="lightgr...
digraph towardsUnderstandingBurritos {
...
compound="true"
...
subgraph cluster_filling {
label="Filling"
bgcolor="lightgr...
twopi -Tpdf burrito.gv > burrito.pdf
twopi -Tpdf burrito.gv > burrito.pdf
rice
meat

side

beans

tortilla

wheat

inside
chicken

main

inside

burrito

outsi...
Circo - Radial Layout
chicken

main

Organic
Tofu

meat

rice

inside

burrito

inside

side

outside
beans

corn

tortill...
neato - Spring model
beans

corn

wheat

tortilla
outside

side
inside
burrito
inside

main
Organic
Tofu

chicken
meat

ri...
fdp - Spring model, force direction
corn

beans
rice

wheat
outside burrito
tortilla

inside

inside
side

main
Organic
To...
sfdp - Spring model, force direction
Organic
Tofu

wheat
tortilla

chicken
outside
corn

main
burrito inside
inside
side
m...
osage - Clustered, packed
Filling
Organic
Tofu

chicken

beans
tortilla

meat

main

side
inside

rice
corn

outside

burr...
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...
Playing well with others

GraphViz native format	

Easy to parse. Allows other programs to use it as a layout
engine	

SVG...
Much more

dot User’s Manual, December 22, 2009

17

credit: dot User Manual, Gansner, Koutsofios, North
past

SCCS

Bourne...
PlantUML
Also, UML
Unified Modeling Language
Developed by OMG, a standard body 	


OMG Unifie
Version 2.5

A diagram for every aspect of softw...
Unified Modeling Language
Developed by OMG, a standard body 	


OMG Unifie
Version 2.5

A diagram for every aspect of softw...
PlantUML

Creates some UML diagrams from text files	

Java component - embeddable	

plugins include Netbeans, MS Word, Redm...
Sequence Diagram
@startuml
!
actor researcher
participant website
participant team as "Murray archive team"
participant ow...
Sequence Diagram
@startuml
!
actor researcher
participant website
participant team as "Murray archive team"
participant ow...
Sequence Diagram
@startuml
!
actor researcher
participant website
participant team as "Murray archive team"
participant ow...
@startuml

!

actor researcher
participant website
participant team as "Murray archive team"
participant owner as "Data Ow...
@startuml

!

actor researcher
participant website
participant team as "Murray archive team"
participant owner as "Data Ow...
@startuml
actor researcher
participant website
participant team as "Murray archive team"
participant owner as "Data Owner"...
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;...
Activity Diagram
@startuml
start
:Get to room;
:#FFDDDD:Hang Coat;
:Try to pour coffee;
if (Got coffee?) then (yes)
:#AAFF...
Activity Diagram - Parallel Work
@startuml
start
:Recognize need for burrito;
:Get Cookin';
fork
:mix ingredients;
:bake;
...
Activity Diagram
@startuml
:Recognize need for burrito;
repeat
:Get Cookin';
fork
:mix ingredients;
:bake;
fork again
:gri...
Use Case
Analyze user types, usages for the system, and how they all relate to
each other (useful!)
@startuml
actor user
a...
Use Case
Analyze user types, usages for the system, and how they all relate to
each other (useful!)
@startuml
actor user
a...
Use Case
@startuml
actor user
actor admin

!

usecase ingest as "Ingest data
into the system
--various formats supported
“...
Use Case
@startuml
left to right direction
actor user
actor admin
rectangle System {
usecase ingest as "Ingest data
into t...
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

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

____________________...
Salt - ASCII art GUI modeling

@startsalt
{
Hello...
[X] World |(X) World
[] Kitty |() Kitty
[] There |() There
[Submit Al...
Salt - ASCII art GUI modeling
@startsalt
{+
Hello...
{/<b>Select Many | Select one | like us on LinkedBook }
{
[X] World
[...
…Summing Up

Sometimes its better to concentrate on the structure, and let the
computer do the layout	

There are free, ca...
Draw More, Work Less
Computer Generated Diagrams

Thanks.
Draw More, Work Less
Upcoming SlideShare
Loading in …5
×

Draw More, Work Less

2,798 views

Published on

Intro to some diagram auto-generation tools. For more info and sample files, head over to http://www.mbarsinai.com/blog/2014/01/12/draw-more-work-less/.

Draw More, Work Less

  1. 1. Draw More, Work Less Computer Generated Diagrams IQSS Tech talk 2014-01-09 Michael Bar-Sinai
  2. 2. Today: Why and when computer-generated diagrams make sense? GraphViz PlantUML (and, also, UML) Summary
  3. 3. 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
  4. 4. GraphViz http://www.graphviz.org “drawing graphs since 1988” Open source, available to most platforms Mainly Command-line, some GUIs exist
  5. 5. Image credit: ellisisland.org Image credit: ellisisland.org
  6. 6. Image credit: ellisisland.org Image credit: ellisisland.org Burrito? recipe credit: Mexico
  7. 7. Image credit: ellisisland.org Image credit: ellisisland.org Burrito? recipe credit: Mexico
  8. 8. digraph towardsUnderstandingBurritos { burrito }
  9. 9. digraph towardsUnderstandingBurritos { burrito } dot -Tpdf burrito.gv > burrito.pdf
  10. 10. digraph towardsUnderstandingBurritos { burrito } dot -Tpdf burrito.gv > burrito.pdf burrito
  11. 11. digraph towardsUnderstandingBurritos { burrito tortilla beans corn wheat meat chicken rice tofu [label="Organic Tofu"] }
  12. 12. burrito tortilla beans corn wheat meat chicken rice Organic Tofu digraph towardsUnderstandingBurritos { burrito tortilla beans corn wheat meat chicken rice tofu [label="Organic Tofu"] }
  13. 13. 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"] }
  14. 14. 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
  15. 15. 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
  16. 16. digraph towardsUnderstandingBurritos { ... node [shape="egg" style="filled" fillcolor="#CCFFFF"] side main tortilla ! } node [shape="septagon"] beans corn wheat meat chicken rice tofu [label="OrganicnTofu"] ...
  17. 17. 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
  18. 18. 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" ] ...
  19. 19. 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" ] ...
  20. 20. twopi -Tpdf burrito.gv > burrito.pdf
  21. 21. twopi -Tpdf burrito.gv > burrito.pdf rice meat side beans tortilla wheat inside chicken main inside burrito outside Organic Tofu corn
  22. 22. Circo - Radial Layout chicken main Organic Tofu meat rice inside burrito inside side outside beans corn tortilla wheat
  23. 23. neato - Spring model beans corn wheat tortilla outside side inside burrito inside main Organic Tofu chicken meat rice
  24. 24. fdp - Spring model, force direction corn beans rice wheat outside burrito tortilla inside inside side main Organic Tofu meat chicken
  25. 25. sfdp - Spring model, force direction Organic Tofu wheat tortilla chicken outside corn main burrito inside inside side meat rice beans
  26. 26. osage - Clustered, packed Filling Organic Tofu chicken beans tortilla meat main side inside rice corn outside burrito wheat
  27. 27. Power to the printf (generated from a ruby script simulating a logic circuit)
  28. 28. Playing well with others GraphViz native format Easy to parse. Allows other programs to use it as a layout engine SVG
  29. 29. 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!
  30. 30. 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!
  31. 31. 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
  32. 32. PlantUML Also, UML
  33. 33. 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
  34. 34. 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
  35. 35. PlantUML Creates some UML diagrams from text files Java component - embeddable plugins include Netbeans, MS Word, Redmine, servlet… http://plantuml.sourceforge.net/index.html
  36. 36. 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
  37. 37. 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
  38. 38. 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
  39. 39. @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
  40. 40. @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
  41. 41. @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
  42. 42. Activity Diagram @startuml start :Get to Room; :Hang Coat; stop @enduml Updated flowcharts
  43. 43. 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
  44. 44. 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
  45. 45. 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
  46. 46. 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
  47. 47. 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
  48. 48. 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
  49. 49. 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
  50. 50. 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
  51. 51. Salt - ASCII art GUI modeling @startsalt { Hello... [X] World [] Kitty [] There [Submit] } @endsalt
  52. 52. Salt - ASCII art GUI modeling @startsalt { Hello... [X] World [] Kitty [] There [Submit] } @endsalt ____________________________ < ASCII art is Moo-gnificent > --------------------------- ^__^ (oo)_______ (__) )/ ||----w | || ||
  53. 53. Salt - ASCII art GUI modeling @startsalt { Hello... [X] World [] Kitty [] There [Submit] } @endsalt ____________________________ < ASCII art is Moo-gnificent > --------------------------- ^__^ (oo)_______ (__) )/ ||----w | || ||
  54. 54. Salt - ASCII art GUI modeling @startsalt { Hello... [X] World [] Kitty [] There [Submit] } @endsalt ____________________________ < ASCII art is Moo-gnificent > --------------------------- ^__^ (oo)_______ (__) )/ ||----w | || ||
  55. 55. Salt - ASCII art GUI modeling @startsalt { Hello... [X] World |(X) World [] Kitty |() Kitty [] There |() There [Submit All] | [Submit one] } @endsalt
  56. 56. 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
  57. 57. …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
  58. 58. Draw More, Work Less Computer Generated Diagrams Thanks.

×