draw more, work less
DESCRIPTION
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/.TRANSCRIPT
Draw More, Work Less Computer Generated DiagramsIQSS 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
Play with parameters (layouts, skins)
Not that strange (HTML, LaTeX)
Play well with CVSs (git/svn/...)
Easy updates
Inspiration for DSLs/APIs
“From A to B”
A B
A B
A B
A
B
GraphVizhttp://www.graphviz.org
“drawing graphs since 1988”
Open source, available to most platforms
Mainly Command-line, some GUIs exist
Image credit: ellisisland.org
Imag
e cr
edit:
ellis
islan
d.or
g
Burrito?
Image credit: ellisisland.org
Imag
e cr
edit:
ellis
islan
d.or
g
recipe credit: Mexico
Burrito?
Image credit: ellisisland.org
Imag
e cr
edit:
ellis
islan
d.or
g
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"] }
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"] }
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"] ! burrito -> tortilla [label="outside"] tortilla -> wheat tortilla -> corn ! burrito -> main [ label="inside" ] burrito -> side [ label="inside" ] side -> beans side -> rice main -> meat main -> chicken main -> 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 -> main [ label="inside" ] burrito -> side [ label="inside" ] side -> beans side -> rice main -> meat main -> chicken main -> tofu }
burrito
tortilla
outside
main
inside
side
inside
corn wheat beansmeat chicken riceOrganic Tofu
digraph towardsUnderstandingBurritos { ... node [shape="egg" style="filled" fillcolor="#CCFFFF"] side main tortilla ! node [shape="septagon"] beans corn wheat meat chicken rice tofu [label="Organic\nTofu"] ... }
digraph towardsUnderstandingBurritos { ... node [shape="egg" style="filled" fillcolor="#CCFFFF"] side main tortilla ! node [shape="septagon"] beans corn wheat meat chicken rice tofu [label="Organic\nTofu"] ... }
burrito
side
inside
main
inside
tortilla
outside
beans rice meat chicken OrganicTofu corn wheat
digraph towardsUnderstandingBurritos { ... compound="true" ... subgraph cluster_filling { label="Filling" bgcolor="lightgray" side main node [shape="septagon"] beans meat chicken rice tofu [label="Organic\nTofu"] } 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 main node [shape="septagon"] beans meat chicken rice tofu [label="Organic\nTofu"] } node [shape="septagon"] corn wheat ! burrito -> tortilla [label="outside"] tortilla -> wheat tortilla -> corn ! burrito -> main [ lhead="cluster_filling" label="inside" ] ... }
Filling
burrito
tortilla
outside
main
inside
corn wheat
side
beans ricemeat chicken OrganicTofu
twopi -Tpdf burrito.gv > burrito.pdf
twopi -Tpdf burrito.gv > burrito.pdf
burrito
sideinside
main inside
tortillaoutside
beans
rice
meat
chicken
OrganicTofu
corn
wheat
Circo - Radial Layout
burrito sideinside
main
inside
tortilla
outsidebeans
rice
meat
chicken
OrganicTofu
corn
wheat
neato - Spring model
burrito
sideinside
main
inside
tortilla
outside
beans
rice
meat
chickenOrganicTofu
corn
wheat
fdp - Spring model, force direction
burrito
side
inside
main
insidetortilla
outside
beans
rice
meat
chicken
OrganicTofu
corn
wheat
sfdp - Spring model, force direction
burrito
sideinside
maininside
tortilla
outside
beansricemeat
chicken
OrganicTofu
corn
wheat
osage - Clustered, packed
Filling
burrito
tortilla
outside
main
inside
corn
wheat
side
beans
rice
meat
chickenOrganicTofu
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
Bézier curves
Complex nodes (HTML tables)
Layout Constraints
Colors, gradients…
dot User’s Manual, December 22, 2009 17
past
1978
1980
1982
1983
1985
1986
1987
1988
1989
1990
future
Bourne sh
Cshell
ksh
make
build
nmake
SCCS
RCS
3D File System
yacc
ryacc
cron
yeast
Reiser cpp
ncpp
emacs
nmake 2.0
vi
<curses>
<curses-i>
fdelta
SBCS
C*
CSAS
Software IS
Adv. Software Technology
Configuration Mgt Architecture & Libraries Process
IMX
TTU
SYNED
Peggy
ksh-i
ksh-88
IFS
IFS-isfio
PG2
PEGASUS/PML
Ansi cpp
backtalk
CoShell
PAX
DAG
DIADOT
CIA
CIA++
ML-X
SHIP DataShareAPP
kyacc
Mosaic
libft
Figure 12: Drawing with constrained ranks
credit: dot User Manual, Gansner, Koutsofios, North
PlantUMLAlso, UML
Unified Modeling Language
Developed by OMG, a standard body
A diagram for every aspect of software
Structure, interactions, state, deployment…
Diagrams are also useful outside of the software world
Meta models and Formal Definitions
i
Date: September 2013
OMG Unified Modeling Language TM (OMG UML)
Version 2.5
OMG Document Number: ptc/2013-09-05
Normative Reference: http://www.omg.org/spec/UML/2.5
Machine Consumable Files:
http://www.omg.org/spec/UML/20131001/PrimitiveTypes.xmi
http://www.omg.org/spec/UML/20131001/UML.xmi
http://www.omg.org/spec/UML/20131001/StandardProfile.xmi
http://www.omg.org/spec/UML/20131001/UMLDI.xmi
Version 2.5 is formally a minor revision to the UML 2.4.1 specification, having been substantially re-written as solicited by the UML Specification Simplification RFP ad/09-12-10. It supersedes formal/2011-08-05 (Infrastructure) and formal/2011-08-06 (Superstructure).
Unified Modeling Language
Developed by OMG, a standard body
A diagram for every aspect of software
Structure, interactions, state, deployment…
Diagrams are also useful outside of the software world
Meta models and Formal Definitions
i
Date: September 2013
OMG Unified Modeling Language TM (OMG UML)
Version 2.5
OMG Document Number: ptc/2013-09-05
Normative Reference: http://www.omg.org/spec/UML/2.5
Machine Consumable Files:
http://www.omg.org/spec/UML/20131001/PrimitiveTypes.xmi
http://www.omg.org/spec/UML/20131001/UML.xmi
http://www.omg.org/spec/UML/20131001/StandardProfile.xmi
http://www.omg.org/spec/UML/20131001/UMLDI.xmi
Version 2.5 is formally a minor revision to the UML 2.4.1 specification, having been substantially re-written as solicited by the UML Specification Simplification RFP ad/09-12-10. It supersedes formal/2011-08-05 (Infrastructure) and formal/2011-08-06 (Superstructure).
PlantUML
Creates some UML diagrams from text files
Java component - embeddable
plugins include Netbeans, MS Word, Redmine, servlet…
http://plantuml.sourceforge.net/index.html
@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
Sequence Diagram
*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? !@enduml
Sequence Diagram
plantuml sequence.uml
*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? !@enduml
Sequence Diagram
plantuml sequence.uml
*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
@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
Analyze user types, usages for the system, and how they all relate to each other (useful!)
Use Case
@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
Analyze user types, usages for the system, and how they all relate to each other (useful!)
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
Thanks.
Draw More, Work Less Computer Generated Diagrams