3. obfc.js: Properties of a SVG shape

obfc.js has 24 different SVG shapes but this post is described properties of a shape (process) by examples. add_theObject is a function that adds the object into a given SVG element and returns this object. This returned object is used for drawing lines between two objects. There are 24 different SVG objects in obfc.js. 22 of them contain 9 parameters for creating an object. First two parameters are required, others are optimal. 

Object_Name(_middle_x, _middle_y, _size, _text, _text_size, _description, _fill_color, _stroke_color, _text_color);

  • _middle_x and middle_y: centre of the object. (Required)
  • _size: For example, default size of a process object width is 125 and height is 50. _size value is multiplied by these values.
  • _text and _text_size: Text is written in the center of an object. This parameter can be defined string value or array[“”, “”…]. If your text is too long, you can use array for creating lines.
  • _description: These value can be coded in HTML format. These value is displayed in a HTML element that contains “desc” id after clicking an object or a line.
  • _fill_color: Default value is white. But, the object color can be determined with this parameter.
  • _stroke_color: Default value is black.
  • _text_color: Default value is black.

An empty process shape:

Size of a shape can be changed:


Text and Text Size:

String for single line and array string for multiline can be used.


Description is showed in an element which id is “desc” after click a shape.

Coloring (Fill, Stroke, Text)

2 of them (OR and  SummingJunction) contain 7 parameter. These objects are not included parameters of _text and _text_size.

Object_Name(_middle_x, _middle_y, _size, _description, _fill_color, _stroke_color, _text_color);