Draw Object-based SVG Flow Charts With obfc.js

Preview:

Description:

obfc.js is a standalone JavaScript library for creating flowcharts & relationship diagrams using SVG and plain JavaScript.

Ideal for adding interactive flow, sequence, organizational, or decision tree diagrams to web apps and sites.

How to use it:

1. Download and include the obfc.js library.

<script src="obfc.min.js"></script>

2. Add an empty SVG element to your web page where you’d like the flowchart to appear.

<svg id="demo" width="400" height="700">
</svg>

3. Initialize the library.

prepare_SVG("demo");

4. Use the add_theObject function to create your SVG objects within the given SVG element. This function returns an object, which you’ll subsequently use to draw lines between two objects. obfc.js offers 24 different SVG shapes spread across four groups:

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

// Operation Symbols
var object1 = add_theObject(new Process(75, 60, 1, "Process", 12));
var object2 = add_theObject(new PredefinedProcess(250, 60, 1, "Predefined Process", 10));
var object3 = add_theObject(new AlternateProcess(425, 60, 1, "Alternate Process", 12));
var object4 = add_theObject(new Delay(600, 60, 1, "Delay", 12));
var object5 = add_theObject(new Preparation(75, 160, 1, "Preparation", 12));
var object6 = add_theObject(new ManualOperation(250, 160, 1, "Manual Operation", 10));

// Branching and Control of Flow Symbols
var object7 = add_theObject(new Terminal(75, 320, 1, "Terminal", 12));
var object8 = add_theObject(new Decision(250, 320, 1, "Decision", 10));
var object9 = add_theObject(new Connector(375, 320, 1, "A", 12, "<h2>Connector (Inspection)</h2>"));
var object10 = add_theObject(new OffPage_Connector(475, 320, 1, "D", 12, "<h2>Off-Page Connector</h2>"));
var object11 = add_theObject(new OR(575, 320, 1, "<h2>OR</h2>"));
var object12 = add_theObject(new SummingJunction(675, 320, 1, "<h2>Summing Junction</h2>"));

// Input and Output Symbols
var object13 = add_theObject(new Data(75, 470, 1, "Data", 12));
var object14 = add_theObject(new Document(250, 470, 1, "Document", 12));
var object15 = add_theObject(new MultiDocument(425, 470, 1, "Multi - Document", 12));
var object16 = add_theObject(new Display(600, 470, 1, "Display", 12));
var object17 = add_theObject(new ManualInput(75, 570, 1, "Manual Input", 12));
var object18 = add_theObject(new Card(250, 570, 1, "Card", 12));
var object19 = add_theObject(new PunchedTape(425, 570, 1, "Punched Tape", 12));

// File and Information Storage Symbols
var object20 = add_theObject(new StoredData(75, 700, 1, "Stored Data", 12));
var object21 = add_theObject(new MagneticDisk(250, 700, 1, "Magnetic Disk", 10));
var object22 = add_theObject(new DirectAccess(425, 700, 1, ["Direct", "Access", "Storage"], 10, "<h2>Direct Access - Storage</h2>"));
var object23 = add_theObject(new InternalStorage(600, 700, 1, ["Internal", "Storage"], 10, "<h2>Internal Storage</h2>"));
var object24 = add_theObject(new MagneticTape(75, 800, 1, ["Magnetic", "Tape"], 8, "<h2>Sequential Access Storage - Magnetic Tape</h2>"));

5. Once all objects have been created, you can begin connecting them using the draw_theLine function. This way, you can create elaborate relationship diagrams or flowcharts that precisely convey your intended idea or process.

// Line(object1, object2, position1, position2, _text, _text_size, _description, _stroke_color, _text_color)
var myLine = draw_theLine(new Line(object1, object2, 1, 0, "Text", 12, "<b>Description in HTML format</b>"));