Js Uml Package Diagram

1. Uml Package Diagram

UML Diagram Symbols. There are many different types of UML diagrams and each has a slightly different symbol set. Class diagrams are perhaps one of the most common UML diagrams used and class diagram symbols center around defining attributes of a class. For example, there are symbols for active classes and interfaces.

In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects.

Uml Package Diagram

The class diagram is the main building block of object-oriented modeling. It is used for general conceptual modeling of the structure of the application, and for detailed modeling translating the models into programming code. Class diagrams can also be used for data modeling.^[1] The classes in a class diagram represent both the main elements, interactions in the application, and the classes to be programmed.

In the diagram, classes are represented with boxes that contain three compartments:

• The top compartment contains the name of the class. It is printed in bold and centered, and the first letter is capitalized.
• The middle compartment contains the attributes of the class. They are left-aligned and the first letter is lowercase.
• The bottom compartment contains the operations the class can execute. They are also left-aligned and the first letter is lowercase.

In the design of a system, a number of classes are identified and grouped together in a class diagram that helps to determine the static relations between them. With detailed modeling, the classes of the conceptual design are often split into a number of subclasses.

In order to further describe the behaviour of systems, these class diagrams can be complemented by a state diagram or UML state machine.^[2]

• 1Members
• 2Relationships
  • 2.1Instance-level relationships
  • 2.2Class-level relationships
  • 2.3General relationship
• 3Analysis stereotypes

Members[edit]

UML provides mechanisms to represent class members, such as attributes and methods, and additional information about them.

Visibility[edit]

To specify the visibility of a class member (i.e. any attribute or method), these notations must be placed before the member's name:^[3]

Derived property is a property which value (or values) is produced or computed from other information, for example, by using values of other properties.

Derived property is shown with its name preceded by a forward slash '/'. ^[4]

Scope[edit]

The UML specifies two types of scope for members: instance and classifier, and the latter is represented by underlined names.^[5]

• Classifier members are commonly recognized as “static” in many programming languages. The scope is the class itself.
  • Attribute values are equal for all instances
  • Method invocation does not affect the instance’s state
• Instance members are scoped to a specific instance.
  • Attribute values may vary between instances
  • Method invocation may affect the instance’s state (i.e. change instance’s attributes)

To indicate a classifier scope for a member, its name must be underlined. Otherwise, instance scope is assumed by default.

Relationships[edit]

A relationship is a general term covering the specific types of logical connections found on class and object diagrams. UML defines the following relationships:

Instance-level relationships[edit]

Dependency[edit]

A dependency is a semantic connection between dependent and independent model elements.^[6] It exists between two elements if changes to the definition of one element (the server or target) may cause changes to the other (the client or source). This association is uni-directional.

Association[edit]

An association represents a family of links. A binary association (with two ends) is normally represented as a line. An association can link any number of classes. An association with three links is called a ternary association. An association can be named, and the ends of an association can be adorned with role names, ownership indicators, multiplicity, visibility, and other properties.
There are four different types of association: bi-directional, uni-directional, aggregation (includes composition aggregation) and reflexive. Bi-directional and uni-directional associations are the most common ones.
For instance, a flight class is associated with a plane class bi-directionally. Association represents the static relationship shared among the objects of two classes.

Aggregation[edit]

Aggregation is a variant of the 'has a' association relationship; aggregation is more specific than association. It is an association that represents a part-whole or part-of relationship. As shown in the image, a Professor 'has a' class to teach. As a type of association, an aggregation can be named and have the same adornments that an association can. However, an aggregation may not involve more than two classes; it must be a binary association. Furthermore, there is hardly a difference between aggregations and associations during implementation, and the diagram may skip aggregation relations altogether.^[7]

Aggregation can occur when a class is a collection or container of other classes, but the contained classes do not have a strong lifecycle dependency on the container. The contents of the container still exist when the container is destroyed.

In UML, it is graphically represented as a hollowdiamond shape on the containing class with a single line that connects it to the contained class. The aggregate is semantically an extended object that is treated as a unit in many operations, although physically it is made of several lesser objects.

Example: Library and Students. Here the student can exist without library, the relation between student and library is aggregation.

Composition[edit]

The UML representation of a composition relationship shows composition as a filled diamond shape on the containing class end of the lines that connect contained class(es) to the containing class.

Differences between Composition and Aggregation[edit]

Composition relationship

1. When attempting to represent real-world whole-part relationships, e.g. an engine is a part of a car.

2. When the container is destroyed, the contents are also destroyed, e.g. a university and its departments.

Aggregation relationship

1. When representing a software or database relationship, e.g. car model engine ENG01 is part of a car model CM01, as the engine, ENG01, may be also part of a different car model.^[8]

2. When the container is destroyed, the contents are usually not destroyed, e.g. a professor has students, when the professor dies the students don't die along with him or her.

Thus the aggregation relationship is often 'catalog' containment to distinguish it from composition's 'physical' containment.

Class-level relationships[edit]

Generalization/Inheritance[edit]

It indicates that one of the two related classes (the subclass) is considered to be a specialized form of the other (the super type) and the superclass is considered a Generalization of the subclass. In practice, means that any instance of the subtype is also an instance of the superclass. An exemplary tree of generalizations of this form is found in biological classification: humans are a subclass of simian, which is a subclass of mammal, and so on. The relationship is most easily understood by the phrase 'an A is a B' (a human is a mammal, a mammal is an animal).

The UML graphical representation of a Generalization is a hollow triangle shape on the superclass end of the line (or tree of lines) that connects it to one or more subtypes.

The generalization relationship is also known as the inheritance or 'is a' relationship.

The superclass (base class) in the generalization relationship is also known as the 'parent', superclass, base class, or base type.

The subtype in the specialization relationship is also known as the 'child', subclass, derived class, derived type, inheriting class, or inheriting type.

Note that this relationship bears no resemblance to the biological parent–child relationship: the use of these terms is extremely common, but can be misleading.

A is a type of B

For example, 'an oak is a type of tree', 'an automobile is a type of vehicle'

Generalization can only be shown on class diagrams and on use case diagrams.

Realization/Implementation[edit]

In UML modelling, a realization relationship is a relationship between two model elements, in which one model element (the client) realizes (implements or executes) the behavior that the other model element (the supplier) specifies.

The UML graphical representation of a Realization is a hollow triangle shape on the interface end of the dashed line (or tree of lines) that connects it to one or more implementers. A plain arrow head is used on the interface end of the dashed line that connects it to its users. In component diagrams, the ball-and-socket graphic convention is used (implementors expose a ball or lollipop, whereas users show a socket).Realizations can only be shown on class or component diagrams.A realization is a relationship between classes, interfaces, components and packages that connects a client element with a supplier element. A realization relationship between classes/components and interfaces shows that the class/component realizes the operations offered by the interface.

General relationship[edit]

Dependency[edit]

Dependency is a weaker form of bond that indicates that one class depends on another because it uses it at some point in time.One class depends on another if the independent class is a parameter variable or local variable of a method of the dependent class. This is different from an association, where an attribute of the dependent class is an instance of the independent class. Sometimes the relationship between two classes is very weak. They are not implemented withmember variables at all. Rather they might be implemented as member function arguments.

Multiplicity[edit]

This association relationship indicates that (at least) one of the two related classes make reference to the other. This relationship is usually described as 'A has a B' (a mother cat has kittens, kittens have a mother cat).

The UML representation of an association is a line connecting the two associated classes. At each end of the line there is optional notation. For example, we can indicate, using an arrowhead that the pointy end is visible from the arrow tail. We can indicate ownership by the placement of a ball, the role the elements of that end play by supplying a name for the role, and the multiplicity of instances of that entity (the range of number of objects that participate in the association from the perspective of the other end).

Analysis stereotypes[edit]

Entities[edit]

Entity classes model long-lived information handled by the system, and sometimes the behavior associated with the information. They should not be identified as database tables or other. Retrieved 8 September 2011.

External links[edit]

Generates UML sequence diagrams from simple text
https://bramp.github.io/js-sequence-diagrams/

by Andrew Brampton 2012-2017

Example

We turn

into

Requirements

You will need Snap.svg, Web Font Loader (if you wish to use custom fonts), underscore.js (or lodash), and optionally jQuery.

Installation

bower

Run bower install bramp/js-sequence-diagrams and include the scripts below:

also import the CSS if you plan to use the hand drawn theme:

Not using bower? No problem. Just download the dependencies, and include them yourself.If you plan to use the hand draw theme, don't forget to put the two fontfiles in your css folder:/fonts/daniel/danielbd.woff and /fonts/daniel/danielbd.woff2

Usage

You can use the Diagram class like:

or use jQuery to do all the work:

For full examples check out the demo site.

Options

Styling

The following CSS classes are applied to the SVG diagram when using snap.svg:

• sequence: Applies to main SVG tag.
• title: Applied to the title of the diagram.
• actor: Applied to the actors.
• signal: Applied to the signals.
• note: Applied to all notes.

The diagram can then be customised, for example:

Raphaël Deprecation

Version 1.x of this library used Raphaël for drawing the diagrams, however, Raphaël had some limitations, and since disappeared from the Internet. We've decided to move to Snap.svg, which is a pure SVG implementation, instead of Raphaël which in addition to SVG, also supported VML (on Internet Explorer). This support of VML made it impossible to use some newer SVG capabilities. Native SVG allows us to use CSS styling, better font support, animations and more.

Microsoft office 2019 activation. To aid in the transition Version 2.x will support both Raphaël and Snap.svg (preferring Snap.svg). If you include Raphaël instead of snap.svg, it will default to using Raphaël as the rendering library. For example

There are also four transitional themes, 'snapSimple', 'snapHand', 'raphaelSimple', 'raphaelHand', which force the use of either Snap.svg, or Raphaël.

The plan is to drop support for Raphaël in a future release, simplifying the library, and reducing the file size.

Adding a Font

Raphael requires Cufon style fonts. Find the font you want in ttf or otf format, visit Cufon's site and process it into a javascript file. Then ensure the font is included via the HTML, or recompile after altering main.js. So far only the hand drawn font, Daniel Bold, has been included.

Build requirements

The build is managed by a Makefile, and uses various tools available from npm. Thus both make and npm are required, and can easily be installed on any Linux or Mac machine.

The Makefile will use npm to install all the dev dependencies, build, and test.

Testing

We use qunit for testing. It can be ran from the command line, or via a browser. The command line actually tests multiple permutations of lodash, Underscore, and with and without minification.

or make and then open test/qunit.html in a browser. Finally a simple playground is available at test/test.html.

How to release

• Make sure all changes checked in
• Bump version in src/main.js and bower.json
• make clean
• make
• git add -f src/main.js bower.json dist/*
• git commit -m 'Released version 2.x.x'
• git push origin master
• git tag -a v2.x.x -m v2.x.x
• git push origin v2.x.x

TODO

• Other themes

• Automate the release process

• Testing that checks the generated SVG is correct

• Improve the hand drawn theme

  • 'Note left of Bob: ' generates a small empty box.
  • The font seems to have extra margin at the bottom.
  • The wiggly lines don't always touch.

• Dozens of other issues on https://github.com/bramp/js-sequence-diagrams/issues

Contributors

via GitHub

Thanks

This project makes use of Jison, snap.svg, underscore.js, and the awersome Daniel font (which is free to use for any purpose).

Many thanks to Web Sequence Diagrams which greatly inspired this project, and forms the basis for the syntax.

Related

• Web Sequence Diagrams Server side version with a commercial offering
• flowchart.js A similar project that draws flow charts in the browser

Licence (Simplified BSD License)

Copyright (c) 2012-2017, Andrew BramptonAll rights reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

• Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
• Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 'AS IS' AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.