Package com.storedobject.ui

Class FlowDiagram

java.lang.Object
com.vaadin.flow.component.Component
com.vaadin.flow.component.littemplate.LitTemplate
com.storedobject.helper.LitComponent
com.storedobject.ui.FlowDiagram
All Implemented Interfaces:
com.vaadin.flow.component.AttachNotifier, com.vaadin.flow.component.DetachNotifier, com.vaadin.flow.component.HasElement, com.vaadin.flow.component.HasSize, com.vaadin.flow.component.HasStyle, com.vaadin.flow.internal.Template, Serializable
@NpmPackage(value="nomnoml", version="1.5.2") @Tag("so-diagram") @JsModule("./so/flow-diagram/flow-diagram.js") public class FlowDiagram extends LitComponent implements com.vaadin.flow.component.HasSize

Component for drawing flow diagrams.

Usage example (Inheritance):

 #background: #ffffff
 #zoom: 1
 #gutter: 10
 #edgeMargin: 5
 #padding: 10
 [Shape | String name | String getName(); void setName(String); double getArea()]
 [Rectangle | double width; double height | double getWidth(); void setWidth(double); double getHeight(); void setHeight(double)]
 [Square | | double getSide(); void setSide(double side)]
 [Circle | double radius | double getRadius(); void setRadius(double)]
 [Shape] <:- [Rectangle]
 [Rectangle] <:- [Square]
 [Shape] <:- [Circle]

Usage example (Dependency):

 [Person | boolean hasRead(Book book)]
 [Book]
 [Person] has read --> [Book]

Usage example (Realization - implementation of an interface):

 [HasSpeed | double getSpeed()]
 [Car | double getSpeed()]
 [Aircraft | double getSpeed()]
 [HasSpeed] <:-- [Car]
 [HasSpeed] <:-- [Aircraft]

Usage example: Order System

 #direction: right
 [Customer | String name; String address]
 [Order | Date date; int status]
 [Order Detail | double quantity]
 [Item | String description]
 [Payment | double amount]
 [Cash Payment]
 [Bank Payment | String customerID, String bankID ]
 [Credit Sale | String customerID, Date dueDate]
 [Customer] - 0..* [Order]
 [Order] line item o- 1..* [Order Detail]
 [Order Detail] 0..* -> 1 [Item]
 [Order] 1 - 1..* [Payment]
 [Payment] <:- [Cash Payment]
 [Payment] <:- [Bank Payment]
 [Payment] <:- [Credit Sale]

Usage (Miscellaneous):

 Car has an Engine
 [Car] -> [Engine]

 Car owns an arbitrary number of blemished
 [Car] +-> 0..* [RustPatches]

 Car knows its Manufacturer
 [Car] o-> [Manufacturer]

 Car depends on Fuel
 [Car] --> [Fuel]

 Pickup inherits from Car
 [Pickup] -:> [Car]

 Car implements interface IVehicle
 [Car] --:> [IVehicle]

 Paul and Ron have a named association
 [Paul] friend - [Ron]

 They both depend on each other
 [Chicken] <-> [Egg]

 Car has some attributes
 [Car | maxSpeed: Float;color: Color]

 Car has several valves
 [Car | valves: Valve\[\] ]

 Engine has an operation
 [Engine | | start()]

 Engine has internal parts
 [Engine |
   [Cylinder] -> 1 [Piston]
   [Cylinder] -> 2 [Valve]
 ]

 Engine is an abstract class
 [<abstract>Engine | | start()]

 Car is in the package 'vehicles'
 [<package>vehicles | [Car]]

 Car has an attached note
 [Car] -- [<note> only driven twice a month]

 Set font
 #font: Times
 Layout the diagram really tight
 #fontSize: 8
 #spacing: 12
 #padding: 3
 Create your own styles
 #.box: fill=#8f8 dashed
 [<box> GreenBox]

Documentation:

     Link types:
     (Association)
     -
     ->
     <-
     <->
     (Dependency)
     --
     -->
     <--
     <-->
     (generalization or inheritance)
     -:>
     <:-
     (implementation)
     --:>
     <:--
     (composition)
     +-
     +->
     -+
     <-+
     (aggregation)
     o-
     o->
     -o
     <-o
     (note)
     --
     (hidden)
     -/-
 
 Classifier types:
 [name]
 [<abstract> name]
 [<instance> name]
 [<note> name]
 [<reference> name]
 [<package> name]
 [<frame> name]
 [<database> name]
 [<start> name]
 [<end> name]
 [<state> name]
 [<choice> name]
 [<input> name]
 [<sender> name]
 [<receiver> name]
 [<transceiver> name]
 [<actor> name]
 [<usecase> name]
 [<label> name]
 [<hidden> name]
 
 Directives:
 #arrowSize: 1
 #bendSize: 0.3
 #direction: down | right
 #gutter: 5
 #edgeMargin: 0
 #edges: hard | rounded
 #background: transparent
 #fill: #eee8d5; #fdf6e3
 #fillArrows: false
 #font: Calibri
 #fontSize: 12
 #leading: 1.25
 #lineWidth: 3
 #padding: 8
 #spacing: 40
 #stroke: #33322E
 #title: filename
 #zoom: 1
 #acyclicer: greedy
 #ranker: network-simplex | tight-tree | longest-path
 #width: 800
 #height: 600
 
 Custom classifier styles:
 A directive that starts with "." define a classifier style. The style is written as a space separated list of modifiers and key/value pairs.
 #.box: fill=#8f8 dashed
 #.blob: visual=ellipse
 [<box> GreenBox]
 [<blob> HideousBlob]
 Available key/value pairs are
 fill=(any css color)

 stroke=(any css color)

 align=center
 align=left

 direction=right
 direction=down

 visual=actor
 visual=class
 visual=database
 visual=ellipse
 visual=end
 visual=frame
 visual=hidden
 visual=input
 visual=none
 visual=note
 visual=package
 visual=receiver
 visual=rhomb
 visual=roundrect
 visual=sender
 visual=start
 visual=transceiver

 Available modifiers are:
 bold
 underline
 italic
 dashed
 empty
 
 Command to stop execution:
 stop

Support for variables - You can define variables to assign classifiers or character sequences to it and use it as a short-form later by enclosing it in square-brackets. Variables are case-sensitive. Please see the example below:

 var gs = | double getSpeed()
 var s = [HasSpeed [gs]]
 var c = [Car [gs]]
 var a = [Aircraft [gs]]]
 [s] <:-- [c]
 [s] <:-- [a]
Author:
Syam (Credits to Daniel Kallin for the nomnoml webcomponent)
See Also: