UML Diagrams for Web DevelopersDavid Kelleher Twitter: @david_kelleherSlideshare: www.slideshare.net/DaveKelleher/

The Unified Modeling Language (UML),based on object-oriented concepts, is typically used for informal modeling of software systems.

UML Pros and Cons

Pros Cons

Effective at informally describing OO designs

Both complicated and limited

No other widely known alternatives exist for OO

Round trip to code was never practical

How to use UML

Validate your solutionBrainstorm with developersShare ideas with stakeholders

Limit size of diagramsUse only when necessary

Familiar elements

Boxes, arrows, and linesFlowchartsEntity diagramsSwimlanes

Boxes, Arrows, and Lines

A B

C D

relationship

flow

Boxes, Arrows, and Lines

A

CB

composition

FlowchartStart

Cook Tasty Crepe

Eat Tasty Crepe

End

SwimlaneSales Warehouse Billing

Get Order Check Stock

In Stock? Check Card

Valid?

Process CardDeliver

Cancel Order

Yes

Yes

NoNo

Relational Database Diagram

Car

idmanufacturermodelcolor…

Model

idname

1

∞

Web System Composition

System – web applicationContainer – middle tier

serverService – API, microserviceClass – code implementation

Tip: Be cautious about mixing high and low level diagrams

UML Diagrams

Use CaseDeploymentSequenceActivityClassState

Use Case DiagramRepresents the interactions

between “actors” and parts of the system.

http://www.csci.csusb.edu/dick/cs557/r2.html

Association

Use Case Diagram

http://www.visual-paradigm.com/features/uml-and-sysml-modeling/

Deployment DiagramRepresents nodes (physical and

virtual devices), services and components, and connections of a system (i.e. 3-tier, microservice)

http://www.cs.bu.edu/fac/kfoury/CVS-Working-Files/CS511-Spring07/Handouts/HD27.how-to-draw-UML-diagrams.html

Deployment Diagram

https://pl.cs.jhu.edu/oose/projects/examples/10-group1/Iteration2.html

Sequence DiagramRepresents a process flow

(execution of actions with messages) using swimlanes

http://www.uml-diagrams.org/sequence-diagrams.html

message

returnmessage

SequenceDiagram

http://www.ibm.com/developerworks/jp/web/library/wa-aj-multitier2/

Activity DiagramRepresents a process flow as

a flowchart with concurrency

http://slideplayer.com/slide/4588309/

ActivityDiagram

https://www.lucidchart.com/pages/uml/activity-diagram

Class DiagramRepresents the classes in a

service or component, including properties, methods, and relationships among the classes

Class Diagram

https://www.gliffy.com/examples/uml/

Generalization: “is a”

Inheritance Relationship: A car battery “is a” product.

Realization: “implements”

Polymorphism: The Image class can be realized by any classthat implements the same interface, i.e. JPG and GIF classes.

Aggregation: “has a”

Whole-part relationship: a degree “has a” course.

Note: an instance of the part could be shared with multipleInstances of the whole

A course instance could be a part of many degree instances.If the degree program is deleted, the course would still exist.

Composition: “contains”

Whole-part relationship: a car “contains” an engine.

Note: an instance of the part cannot be shared with multipleInstances of the whole

An engine can be inside only one car at a time.

Association

A class instance has another kind of relationship withanother class instance.

The nature of the relationship can be labeled on the diagram.

A person “subscribes” to a magazine.

State DiagramRepresents the

change in state of a system, such as the different values that can be stored in a class property.

https://en.wikipedia.org/wiki/State_diagram

State Diagram

http://help.axcms.net/en_help_concepts_workflow.AxCMS

Diagramming is Design

Contrast – black on whiteRepetition – be consistentAlignment – snap to gridProximity – group related

items

Tools

Paper sketches

Drawing software like Visio, Illustrator

Online services like draw.io

UML Diagrams for Web DevelopersDavid Kelleher Twitter: @david_kelleherSlideshare: www.slideshare.net/DaveKelleher/