draw more, work less

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