Author : Tabinda Sarwar, Uzma Arif, Wajiha Habib Samana Zehra

International Journal of Scientific & Engineering Research Volume 2, Issue 6, June-2011

ISSN 2229-5518

Download Full Paper : PDF**Abstract—**Whenever a system is to be designed and modeled, diagrams play a key role in the context. As diagrams enable us to understand, visualize and communicate concepts without ambiguity. Thus for the purpose many diagramming softwares are available. Different softwares uses different methodology for design and development but with the time the design is becoming complicated day by day and with the increased complexity also increases the learning time for the users. In contrast, software based on easy algorithm is easily understandable by the user. This paper presents a simple and efficient algorithm for designing “Diagram Generator” software (DG). The algorithm will describe the methodology for generating graphical shapes, which can be combined to produce diagrams like Flowchart, Block diagrams, Organizational charts, Data Flow diagrams, Entity-Relationship diagrams and many more.

**Index Terms—** Link Lists, Flow Charts, Organizational Chart, ER diagrams, Block diagrams, Click and Draw.

**1 INTRODUCTION ** DIAGRAMS, a two dimensional geometric symbolic representation of information according to some vi-sualization technique [1], play a significant role in analysis and design of a system. Diagrams are an excel-lent means of communicating and clarifying customer requirements, to avoid misinterpretations and ambigui-ties.

Diagrams also help in designing and visualizing the target system to be developed (system architectures for instance). Examples of commonly used diagrams are flow charts, block diagrams, organizational chart, network diagrams, Entity-Relationship diagrams, bar chart, pie chart, graphs and UML (Unified Modeling Language) diagrams [2].

In today’s age, different diagrams have different usa-bility. For example, Entity Relationship diagrams is by far the most common way to express the analytical result of an early stage in the construction of a new database [3], Flowcharts are used in analyzing, designing, documenting or managing a program or process [4]. Because of the frequent use and significance of diagrams in various fields, different softwares are available and still more softwares are being developed but due to the complex design the usability of the software for the novice user is low.

A survey was conducted in University of Engineering and Technology Taxila, Pakistan according to which the most commonly used software for diagram generation process is “Paint”. So in this paper, a simple and efficient algorithm is represented, from developer’s point of view, which will generate Flow charts, Block Diagram, Organizational charts and ER diagrams. The algorithm can be extended to include more graphical shapes to accommodate more diagrams.

**2 IMPLEMENTATION COSIDERATION**

2.1 Link Lists For representing the graphical object a very simple approach is used. As every programming language supports “Rectangle”, so a “Rectangle” will be used to derive more graphical shapes (instead of line that will be used for connecting graphical objects). So at the back end each shape will be saved as rectangle instead of line, for which start and end point will be saved.

To keep track of all the graphical objects a link list is created. The link list stores the following attributes:

• The Graphical object/shape

o For all graphical objects except line, rec-tangle is saved

o For line its start and end points are saved

• Text related to the graphical shape

• Next element (graphical object/shape) of the list

• Preview element (graphical object/shape) of the list

• Other formatting information (e.g. color, font style, size)

2.2 Building Blocks of Diagrams, Graphical Objects

Following lists elaborate the graphical shapes which are derived from rectangle

• Rectangle will be used as it is (e.g. rectangle represents a “block” in Block diagrams)

• Parallelogram is generated by connecting the following points generated from a rectangle “rc”

o Point1 = rc.X, rc.Y (where rc.X and rc.Y are the x and y-coordinates of the upper left corner of “rc”)

o Point2 = rc.X + rc.Width – (integer that represents the slope for parallelogram sides), rc.Y (where rc.Width is the width of “rc”)

o Point3 = rc.X + rc.Width, rc.Y +rc.Height (where rc.Height is the height of “rc”)

o Point4 = rectangle.X + (integer that represents the slope for parallelogram sides), rectangle.Y + rectangle.Height

• Ellipse is easily generated by specifying the rec-tangle without any further computation, as el-lipse is drawn within the rectangle

• Diamond is generted by connecting the points Point11, Point12, Point13, point14 and Point11 respectively.These points are derived from rec-tangle “rc”

o Point1 = rc.X, rc.Y

o Point2 =rc.Left (where Left is the x-coordinate of left edge of “rc”), rc.Bottom (where Bottom is the sum of rc.Y and rc.Height )

o Point3 =rc.Right (where right is the sum of rc.X and rc.Width), rc.Bottom

o Point4 =rc.Right, rc.Top (where Top is the Y-coordinate of top edge of “rc”)

o Point11.X = (Point1.X + Point4.X) / 2

o Point11.Y = (Point1.Y + Point4.Y) / 2

o Point12.X = (Point1.X + Point2.X) / 2

o Point12.Y = (Point1.Y + point2.Y) / 2

o Point13.X = (Point2.X + Point3.X) / 2

o Point13.Y = (Point2.Y + Point3.Y) / 2

o Point14.X = (Point3.X + Point4.X) / 2

o Point14.Y = (Point3.Y + Point4.Y) / 2

Similarly other graphical shapes can also be gen-erated by comuting points from rectangle.

• Line is generated by using two points, starting point “start” and ending point “end”.

Read More:

Click here...