Skip to content

dev-guide.md

Latest commit

 

History

History
130 lines (111 loc) · 4.33 KB

dev-guide.md

File metadata and controls

130 lines (111 loc) · 4.33 KB

The Project

Aims

The project aims at developing a handy tool for devlopers to create a class diagram (UML). GUI is always a fancy way for ordinary users to utilize an information system. However, syntax and text input is a much handy way for developers to quickly finish their tasks.

Inspired by an online sequence diagram tool, it is proposed to create a system that resembles its input and generates a class diagram.

Methodology / Tools

  • Agile development
  • Scrum, biweekly sprint
  • CI/CD
  • Slack: Communication tool
  • Jasmine: automated test script / TDD
  • UML

Project Scope

Project scope statement:

Develop a basic online text-to-class-diagram tool for quick
documentation of software project within 10 weeks.

Project Time

Biweekly sprints

Project Resources

VM, 7 developers

Risks

Work breakdown Structure

  1. Text parser Design

    1. Design syntax
      1. [#TT-01] Design object type identifier
      2. [#TT-02] Design attribute identifier
      3. [#TT-03] Design method identifier
      4. [#TT-04] Type identifier
      5. [#TT-05] Design association identifier
    2. [#TT-06] Create test cases
    3. [#TT-07] Implement Unit test scripts
    4. [#TT-08] Design tokenizing flow
    5. Implement tokenizer
      1. [#TT-09] Implement object type identifier
      2. [#TT-10] Implement attribute identifier
      3. [#TT-11] Implement method identifier
      4. [#TT-12] Implement association identifier

  2. Drawing diagram

    1. [#TD-01] Design test cases
    2. [#TD-02] Design box-location assignment algorithm
    3. [#TD-03] Feasibility Study on using VueJS for SVG diagram generation
    4. [#TD-04] Implement box drawing
    5. [#TD-05] Implement box-size estimation
    6. [#TD-06] Implement box-location assignment algorithm
    7. [#TD-07] Implement assocication link drawing

  3. User Interface

    1. [#TI-01] Design HTML layout
    2. [#TI-02] Implement HTML layout
    3. [#TI-03] Implement image export

  4. System integration

    1. [#TI-04] Integrate the UI to the system
    2. [#TI-05] Integrate the text-analysis and the drawing modules

  5. Deployment

    1. [#TY-01] Setup server VM
    2. [#TY-02] Setup Apache server
    3. [#TY-03] Deploy application

  6. Road-map

    1. [#RM-01] Print function by click function
    2. [#RM-02] Email image by click function

Draft Custom Syntax Design

title Graph Title

class A >> Class SU-A || interface IF1 || interface IF2
+ attr1 : int
# attr2 : string
- attr3 : double
~ attr4 : Boolean
+ method1():void
# method2(a:int, b:byte[]):int

interface B >> interface C
+ method1():string
+ method2(str:string...):double

Class A, which extends Class SU-A implements Interface IF1 and IF2, has 4 attributes, which are:

  • public integer attr1
  • protected string attr2
  • private double attr3
  • internal Boolean attr4 and 2 methods:
  • public function method1 with no paramters, returns nothing
  • protected function method2 with 2 paramters: 1 int, 1 byte[]; returns an integer

Interface B, which extends Interface C, has 2 methods

  • method1 with no parameters, returns a string
  • method2 with paramter array of strings, returns a double

SVG - Scalable Vector Graphics

The svg element draw in its own canvas. It draws the elements according to the viewBox. The viewBox consists of 4 values, e.g. viewBox="-10 0 20 40", which are starting x and y, as well as width and height respectively.

Only 3 elements are required in the graph: <text>, <rect>, <path>.