UML HTML5 Elements

Table of contents

About

The UML HTML5 Elements project is

Download

Every project needs a single-click source download button : Download
The current page is already a distribution of the project. The best way to get started is to clean the page and insert one of the diagrams tags detailed in Documentation

Documentation

The top-down UML process advised by this tool is to start by Usecases, describe each usecase by a Sequence diagram and report induced actors and model in Class diagrams. This standard process ensures every case is covered and consistency is transparent and harnessable.

Usecase diagram

Developer 40,60 (Analyse Needs) 200,10 (Specify Software) 10,10 (Write UML diagrams) 180,60 Developer --> (Specify Software) (Specify Software) ..> (Analyse Needs) "include" (Specify Software) ..> (Write UML diagrams) "include" BusinessGuy 350,0 BusinessGuy --> (Analyse Needs)
<uml-usecase-diagram>
    Developer 40,60
    (Analyse Needs) 200,10
    (Specify Software) 10,10
    (Write UML diagrams) 180,60
    Developer --> (Specify Software)
    (Specify Software) ..> (Analyse Needs) "include"
    (Specify Software) ..> (Write UML diagrams) "include"
    BusinessGuy 350,0
    BusinessGuy --> (Analyse Needs)
</uml-usecase-diagram>
The usecase diagram DSL has the following syntax
  • Actor X,Y - describe an Actor name and coordinates
  • (Usecase) X,Y - describe a Usecase name and coordinates
  • Actor --> (Usecase) - an Actor has access to the Usecase
  • (Usecase) ..> (Subcase) "include" - a Usecase includes a sub-Usecase
  • (Usecase) ..> (Generality) "extend" - a Usecase extends a more general Usecase
  • Actor <|-- Parent X,Y - describe an Actor name, inheriting from Parent and its coordinates
  • (Usecase) <|-- (Parent) X,Y - describe a Usecase name, inheriting from Parent and its coordinates

Sequence diagram

Client 20 Developer 10 BusinessGuy 10 Referential 10 Team Client-->Developer: buildApp() loop { Developer-->BusinessGuy: getNeeds() Developer<--BusinessGuy: needs Developer-->Referential: storeUsecaseDiagram() Developer<--Referential: ok loop { Developer-->Referential: storeSequenceDiagram() Developer<--Referential: ok Developer-->Referential: mergeClassDiagram() Developer<--Referential: ok } Developer-->Referential: extractDiagrams() Developer<--Referential: diagram* Developer-->Team: buildFromSpec(diagram*) Developer<--Team: app } Client<--Developer: app
<uml-sequence-diagram>
    Client 20 Developer 10 BusinessGuy 10 Referential 10 Team
    Client-->Developer: buildApp()
    loop {
        Developer-->BusinessGuy: getNeeds()
        Developer<--BusinessGuy: needs
        Developer-->Referential: storeUsecaseDiagram()
        Developer<--Referential: ok
        loop {
            Developer-->Referential: storeSequenceDiagram()
            Developer<--Referential: ok
            Developer-->Referential: mergeClassDiagram()
            Developer<--Referential: ok
        }
        Developer-->Referential: extractDiagrams()
        Developer<--Referential: diagram*
        Developer-->Team: buildFromSpec(diagram*)
        Developer<--Team: app
    }
    Client<--Developer: app
</uml-sequence-diagram>
The sequence diagram DSL has the following syntax
  • Actor1 W1 Actor2 W2 … ActorN-1 WN-1 ActorN - describe a list of actor Participants along with optional additional spacing between them
  • Source-->Target: message - describe a message from Source actor to Target actor
  • Source<--Target: return - describe a return message from Target, providing the result to Source actor
  • block {…} - describe a UML sequence block, namely loop|opt|alt|seq|par|crit|… that encapsulates a serie of messages

Class diagram

Referential 10,10 Referential:appName:String Referential:authors:String* Referential:diagrams:Diagram* Referential:store(diagram:Diagramme):Diagram Referential:extract():Diagram* Diagram 280,35 Diagram:name:String UsecaseDiagram <|-- Diagram 20,160 UsecaseDiagram:actors:Actor* UsecaseDiagram:usecases:Usecase* UsecaseDiagram:usages:Link* UsecaseDiagram:inheritances:Link* SequenceDiagram <|-- Diagram 150,160 SequenceDiagram:actors:Actor* SequenceDiagram:messages:Message* SequenceDiagram:blocks:Block* ClassDiagram <|-- Diagram 280,160 ClassDiagram:classes:Class* ClassDiagram:containments:Link* ClassDiagram:inheritance:Link*
<uml-class-diagram>
    Referential 10,10
    Referential:appName:String
    Referential:authors:String*
    Referential:diagrams:Diagram*
    Referential:store(diagram:Diagram):Diagram
    Referential:extract():Diagram*

    Diagram 280,35
    Diagram:name:String

    UsecaseDiagram <|-- Diagram 20,160
    UsecaseDiagram:actors:Actor*
    UsecaseDiagram:usecases:Usecase*
    UsecaseDiagram:usages:Link*
    UsecaseDiagram:inheritances:Link*

    SequenceDiagram <|-- Diagram 150,160
    SequenceDiagram:actors:Actor*
    SequenceDiagram:messages:Message*
    SequenceDiagram:blocks:Block*

    ClassDiagram <|-- Diagram 280,160
    ClassDiagram:classes:Class*
    ClassDiagram:containments:Link*
    ClassDiagram:inheritance:Link*
</uml-class-diagram>
The class diagram DSL has the following syntax
  • Class X,Y - describe a Class and its coordinates
  • Class <-- Parent X,Y - describe a Class, its parent Class and its coordinates
  • Class:attribute:type - describe an Attribute member of the Class
  • Class:method(param1:type1,param2:type2…):type - describe a Method member of the Class

Reference

TODO: full HTML5, non-DSL element reference