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/.
Breath, Brain & Beyond_A Holistic Approach to Peak Performance.pdf
Draw More, Work Less
1. Draw More, Work Less
Computer Generated Diagrams
IQSS Tech talk
2014-01-09
Michael Bar-Sinai
2. Today:
Why and when computer-generated diagrams make sense?
GraphViz
PlantUML (and, also, UML)
Summary
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
23. Circo - Radial Layout
chicken
main
Organic
Tofu
meat
rice
inside
burrito
inside
side
outside
beans
corn
tortilla
wheat
24. neato - Spring model
beans
corn
wheat
tortilla
outside
side
inside
burrito
inside
main
Organic
Tofu
chicken
meat
rice
25. fdp - Spring model, force direction
corn
beans
rice
wheat
outside burrito
tortilla
inside
inside
side
main
Organic
Tofu
meat
chicken
26. sfdp - Spring model, force direction
Organic
Tofu
wheat
tortilla
chicken
outside
corn
main
burrito inside
inside
side
meat
rice
beans
27. osage - Clustered, packed
Filling
Organic
Tofu
chicken
beans
tortilla
meat
main
side
inside
rice
corn
outside
burrito
wheat
28. Power to the printf
(generated from a ruby script simulating a logic circuit)
29. Playing well with others
GraphViz native format
Easy to parse. Allows other programs to use it as a layout
engine
SVG
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. 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!
32. 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
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. 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
36. PlantUML
Creates some UML diagrams from text files
Java component - embeddable
plugins include Netbeans, MS Word, Redmine, servlet…
http://plantuml.sourceforge.net/index.html
37. 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
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. 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
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. @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
42. @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
44. 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
45. 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
46. 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
47. 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
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. 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
50. 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
51. 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
52. Salt - ASCII art GUI modeling
@startsalt
{
Hello...
[X] World
[] Kitty
[] There
[Submit]
}
@endsalt
53. Salt - ASCII art GUI modeling
@startsalt
{
Hello...
[X] World
[] Kitty
[] There
[Submit]
}
@endsalt
____________________________
< ASCII art is Moo-gnificent >
---------------------------
^__^
(oo)_______
(__)
)/
||----w |
||
||
54. Salt - ASCII art GUI modeling
@startsalt
{
Hello...
[X] World
[] Kitty
[] There
[Submit]
}
@endsalt
____________________________
< ASCII art is Moo-gnificent >
---------------------------
^__^
(oo)_______
(__)
)/
||----w |
||
||
55. Salt - ASCII art GUI modeling
@startsalt
{
Hello...
[X] World
[] Kitty
[] There
[Submit]
}
@endsalt
____________________________
< ASCII art is Moo-gnificent >
---------------------------
^__^
(oo)_______
(__)
)/
||----w |
||
||
56. Salt - ASCII art GUI modeling
@startsalt
{
Hello...
[X] World |(X) World
[] Kitty |() Kitty
[] There |() There
[Submit All] | [Submit one]
}
@endsalt
57. 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
58. …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