SlideShare a Scribd company logo
1 of 59
Download to read offline
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.

More Related Content

What's hot

Web 2 .Zero Programming Providers
Web 2 .Zero Programming ProvidersWeb 2 .Zero Programming Providers
Web 2 .Zero Programming Providers
ebooker97
 
Introduction to Asynchronous scala
Introduction to Asynchronous scalaIntroduction to Asynchronous scala
Introduction to Asynchronous scala
Stratio
 
Web 2 . 0 .Zero Coding Services
Web 2 . 0 .Zero Coding ServicesWeb 2 . 0 .Zero Coding Services
Web 2 . 0 .Zero Coding Services
Theawaster485
 
The Power of Rails 2.3 Engines & Templates
The Power of Rails 2.3 Engines & TemplatesThe Power of Rails 2.3 Engines & Templates
The Power of Rails 2.3 Engines & Templates
Tse-Ching Ho
 
Functional Reactive Programming / Compositional Event Systems
Functional Reactive Programming / Compositional Event SystemsFunctional Reactive Programming / Compositional Event Systems
Functional Reactive Programming / Compositional Event Systems
Leonardo Borges
 

What's hot (19)

Joblib for cloud computing
Joblib for cloud computingJoblib for cloud computing
Joblib for cloud computing
 
Web 2 .Zero Programming Providers
Web 2 .Zero Programming ProvidersWeb 2 .Zero Programming Providers
Web 2 .Zero Programming Providers
 
Introduction to Asynchronous scala
Introduction to Asynchronous scalaIntroduction to Asynchronous scala
Introduction to Asynchronous scala
 
Ruby meets Go
Ruby meets GoRuby meets Go
Ruby meets Go
 
Sheffield_R_ July meeting - Interacting with R - IDEs, Git and workflow
Sheffield_R_ July meeting - Interacting with R - IDEs, Git and workflowSheffield_R_ July meeting - Interacting with R - IDEs, Git and workflow
Sheffield_R_ July meeting - Interacting with R - IDEs, Git and workflow
 
Golang Performance : microbenchmarks, profilers, and a war story
Golang Performance : microbenchmarks, profilers, and a war storyGolang Performance : microbenchmarks, profilers, and a war story
Golang Performance : microbenchmarks, profilers, and a war story
 
Web 2 . 0 .Zero Coding Services
Web 2 . 0 .Zero Coding ServicesWeb 2 . 0 .Zero Coding Services
Web 2 . 0 .Zero Coding Services
 
Embulk at Treasure Data
Embulk at Treasure DataEmbulk at Treasure Data
Embulk at Treasure Data
 
Groovy & Grails: Scripting for Modern Web Applications
Groovy & Grails: Scripting for Modern Web ApplicationsGroovy & Grails: Scripting for Modern Web Applications
Groovy & Grails: Scripting for Modern Web Applications
 
The Power of Rails 2.3 Engines & Templates
The Power of Rails 2.3 Engines & TemplatesThe Power of Rails 2.3 Engines & Templates
The Power of Rails 2.3 Engines & Templates
 
用 OPENRNDR 將 Chatbot 訊息視覺化
用 OPENRNDR 將 Chatbot 訊息視覺化用 OPENRNDR 將 Chatbot 訊息視覺化
用 OPENRNDR 將 Chatbot 訊息視覺化
 
Celery introduction
Celery introductionCelery introduction
Celery introduction
 
ClojureScript Introduction
ClojureScript IntroductionClojureScript Introduction
ClojureScript Introduction
 
Functional Reactive Programming / Compositional Event Systems
Functional Reactive Programming / Compositional Event SystemsFunctional Reactive Programming / Compositional Event Systems
Functional Reactive Programming / Compositional Event Systems
 
Contributing to an os project
Contributing to an os projectContributing to an os project
Contributing to an os project
 
Fast C++ Web Servers
Fast C++ Web ServersFast C++ Web Servers
Fast C++ Web Servers
 
Comparison nodejs frameworks using Polls API
Comparison nodejs frameworks using Polls APIComparison nodejs frameworks using Polls API
Comparison nodejs frameworks using Polls API
 
Practical Testing of Ruby Core
Practical Testing of Ruby CorePractical Testing of Ruby Core
Practical Testing of Ruby Core
 
JavaScript code academy - introduction
JavaScript code academy - introductionJavaScript code academy - introduction
JavaScript code academy - introduction
 

Similar to Draw More, Work Less

Fii Practic Frontend - BeeNear - laborator 4
Fii Practic Frontend - BeeNear - laborator 4Fii Practic Frontend - BeeNear - laborator 4
Fii Practic Frontend - BeeNear - laborator 4
BeeNear
 
Polyglot programming and agile development
Polyglot programming and agile developmentPolyglot programming and agile development
Polyglot programming and agile development
Shashank Teotia
 
Prophet - Beijing Perl Workshop
Prophet - Beijing Perl WorkshopProphet - Beijing Perl Workshop
Prophet - Beijing Perl Workshop
Jesse Vincent
 
SDCSB Advanced Tutorial: Reproducible Data Visualization Workflow with Cytosc...
SDCSB Advanced Tutorial: Reproducible Data Visualization Workflow with Cytosc...SDCSB Advanced Tutorial: Reproducible Data Visualization Workflow with Cytosc...
SDCSB Advanced Tutorial: Reproducible Data Visualization Workflow with Cytosc...
Keiichiro Ono
 
Exploring SharePoint with F#
Exploring SharePoint with F#Exploring SharePoint with F#
Exploring SharePoint with F#
Talbott Crowell
 

Similar to Draw More, Work Less (20)

Fii Practic Frontend - BeeNear - laborator 4
Fii Practic Frontend - BeeNear - laborator 4Fii Practic Frontend - BeeNear - laborator 4
Fii Practic Frontend - BeeNear - laborator 4
 
FP - Découverte de Play Framework Scala
FP - Découverte de Play Framework ScalaFP - Découverte de Play Framework Scala
FP - Découverte de Play Framework Scala
 
Data science for infrastructure dev week 2022
Data science for infrastructure   dev week 2022Data science for infrastructure   dev week 2022
Data science for infrastructure dev week 2022
 
Sprockets
SprocketsSprockets
Sprockets
 
Container (Docker) Orchestration Tools
Container (Docker) Orchestration ToolsContainer (Docker) Orchestration Tools
Container (Docker) Orchestration Tools
 
HAXTheWeb @ Apereo 19
HAXTheWeb @ Apereo 19HAXTheWeb @ Apereo 19
HAXTheWeb @ Apereo 19
 
Full-Stack Data Science: How to be a One-person Data Team
Full-Stack Data Science: How to be a One-person Data TeamFull-Stack Data Science: How to be a One-person Data Team
Full-Stack Data Science: How to be a One-person Data Team
 
Web Optimisation
Web OptimisationWeb Optimisation
Web Optimisation
 
Modern javascript localization with c-3po and the good old gettext
Modern javascript localization with c-3po and the good old gettextModern javascript localization with c-3po and the good old gettext
Modern javascript localization with c-3po and the good old gettext
 
Confoo - Javascript Server Side : How to start
Confoo - Javascript Server Side : How to startConfoo - Javascript Server Side : How to start
Confoo - Javascript Server Side : How to start
 
Choisir entre une API RPC, SOAP, REST, GraphQL? 
Et si le problème était ai...
Choisir entre une API  RPC, SOAP, REST, GraphQL?  
Et si le problème était ai...Choisir entre une API  RPC, SOAP, REST, GraphQL?  
Et si le problème était ai...
Choisir entre une API RPC, SOAP, REST, GraphQL? 
Et si le problème était ai...
 
Polyglot programming and agile development
Polyglot programming and agile developmentPolyglot programming and agile development
Polyglot programming and agile development
 
The Secrets of The FullStack Ninja - Part A - Session I
The Secrets of The FullStack Ninja - Part A - Session IThe Secrets of The FullStack Ninja - Part A - Session I
The Secrets of The FullStack Ninja - Part A - Session I
 
Data Visualization: A Hands-On Primer for Business Journalists by Dianne Finch
Data Visualization: A Hands-On Primer for Business Journalists by Dianne FinchData Visualization: A Hands-On Primer for Business Journalists by Dianne Finch
Data Visualization: A Hands-On Primer for Business Journalists by Dianne Finch
 
Prophet - Beijing Perl Workshop
Prophet - Beijing Perl WorkshopProphet - Beijing Perl Workshop
Prophet - Beijing Perl Workshop
 
Google Gears
Google GearsGoogle Gears
Google Gears
 
SDCSB Advanced Tutorial: Reproducible Data Visualization Workflow with Cytosc...
SDCSB Advanced Tutorial: Reproducible Data Visualization Workflow with Cytosc...SDCSB Advanced Tutorial: Reproducible Data Visualization Workflow with Cytosc...
SDCSB Advanced Tutorial: Reproducible Data Visualization Workflow with Cytosc...
 
Automate Yo' Self
Automate Yo' SelfAutomate Yo' Self
Automate Yo' Self
 
Exploring SharePoint with F#
Exploring SharePoint with F#Exploring SharePoint with F#
Exploring SharePoint with F#
 
IBIS - Intelligent Band Information System
IBIS - Intelligent Band Information SystemIBIS - Intelligent Band Information System
IBIS - Intelligent Band Information System
 

More from Michael Bar-Sinai (6)

BPjs deep dive 2019
BPjs deep dive 2019BPjs deep dive 2019
BPjs deep dive 2019
 
BPjs for IoT class
BPjs for IoT classBPjs for IoT class
BPjs for IoT class
 
Deep Dive into BPjs
Deep Dive into BPjsDeep Dive into BPjs
Deep Dive into BPjs
 
Sharing Sensitive Data With Confidence: The DataTags system
Sharing Sensitive Data With Confidence: The DataTags systemSharing Sensitive Data With Confidence: The DataTags system
Sharing Sensitive Data With Confidence: The DataTags system
 
DataTags, The Tags Toolset, and Dataverse Integration
DataTags, The Tags Toolset, and Dataverse IntegrationDataTags, The Tags Toolset, and Dataverse Integration
DataTags, The Tags Toolset, and Dataverse Integration
 
Invitation to Scala
Invitation to ScalaInvitation to Scala
Invitation to Scala
 

Recently uploaded

Recently uploaded (6)

HONOURABLE LAWRENCE BANDASOA TABASE funeral brochure
HONOURABLE LAWRENCE BANDASOA TABASE funeral brochureHONOURABLE LAWRENCE BANDASOA TABASE funeral brochure
HONOURABLE LAWRENCE BANDASOA TABASE funeral brochure
 
Accident dtection using opencv and using AI
Accident dtection using opencv and using AIAccident dtection using opencv and using AI
Accident dtection using opencv and using AI
 
Nervous System & Motherhood (made by SanyaKurd)
Nervous System & Motherhood (made by SanyaKurd)Nervous System & Motherhood (made by SanyaKurd)
Nervous System & Motherhood (made by SanyaKurd)
 
Time Management by Akshit Jain ctld .ppt
Time Management by Akshit Jain ctld .pptTime Management by Akshit Jain ctld .ppt
Time Management by Akshit Jain ctld .ppt
 
HONOURABLE LAWRENCE BANDASOA TABASE funeral brochure
HONOURABLE LAWRENCE BANDASOA TABASE funeral brochureHONOURABLE LAWRENCE BANDASOA TABASE funeral brochure
HONOURABLE LAWRENCE BANDASOA TABASE funeral brochure
 
SPACE POGO SHOWS PROJECTIONS APPMAKING DONE!.docx
SPACE POGO SHOWS PROJECTIONS APPMAKING DONE!.docxSPACE POGO SHOWS PROJECTIONS APPMAKING DONE!.docx
SPACE POGO SHOWS PROJECTIONS APPMAKING DONE!.docx
 

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
  • 4. GraphViz http://www.graphviz.org “drawing graphs since 1988” Open source, available to most platforms Mainly Command-line, some GUIs exist
  • 5. Image credit: ellisisland.org Image credit: ellisisland.org
  • 6. Image credit: ellisisland.org Image credit: ellisisland.org Burrito? recipe credit: Mexico
  • 7. Image credit: ellisisland.org Image credit: ellisisland.org Burrito? recipe credit: Mexico
  • 8.
  • 11. digraph towardsUnderstandingBurritos { burrito } dot -Tpdf burrito.gv > burrito.pdf burrito
  • 13. burrito tortilla beans corn wheat meat chicken rice Organic Tofu digraph towardsUnderstandingBurritos { burrito tortilla beans corn wheat meat chicken rice tofu [label="Organic Tofu"] }
  • 14. 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"] }
  • 15. 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
  • 16. 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
  • 17. digraph towardsUnderstandingBurritos { ... node [shape="egg" style="filled" fillcolor="#CCFFFF"] side main tortilla ! } node [shape="septagon"] beans corn wheat meat chicken rice tofu [label="OrganicnTofu"] ...
  • 18. 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
  • 19. 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" ] ...
  • 20. 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" ] ...
  • 21. twopi -Tpdf burrito.gv > burrito.pdf
  • 22. twopi -Tpdf burrito.gv > burrito.pdf rice meat side beans tortilla wheat inside chicken main inside burrito outside Organic Tofu corn
  • 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
  • 43. Activity Diagram @startuml start :Get to Room; :Hang Coat; stop @enduml Updated flowcharts
  • 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
  • 59. Draw More, Work Less Computer Generated Diagrams Thanks.