5

My Goal

My goal is to develop a system that animates any process in general that is represented as a flowchart which can be drawn on the screen.

For instance an architecture pipeline. It would consist of bunch of rectangles representing various components such as Register, ALU component, Memory etc. Also there would be arrows pointing to each other.

So i would want the ability to specify the number of shapes i want to draw, reshape and add text on them and connect them with arrows. Finally I would want to show some kind of animation between them.

Specific Example

Here I will try my best to describe thoroughly what my application will do. So a user will be able to draw modules(rectangles for example) and drag and drop them around. Then user can use arrows to show connections between them. Finally I would want to show some kind of animation that goes step by step from arrow to arrow to show which module(rectangle) gets executed first. Animation could be simply changing color of the arrow or rectangle while it is being executed.

My Problem

I am lost as to what tools I should use to achieve this. I am a beginner in development world and i want to make sure I have easy open-source libraries. I was wondering are there any open source libraries available in JS. So far i am aware of HTML5 canvas I want to pick easy to learn tools. I am familiar with HTML and JS. So i would prefer if someone can suggest me what tools i can use to achieve my goal. Also keep in mind that i would not be good at using some advance diagram drawing libraries as i am very new.

I want to essentially start with a simple tool, so that i can easily learn it and also make sure that it is popular enough with community support. I know this is quite a open ended question so all suggestions are welcome.

Note: The thing is I don't want to waste time in figuring out the drawing of rectangles and animation, i figure since canvas is quick easy to use i will use that unless there is a easier option. That way i can focus on the main concept of my application.

Improve this question
4
  • Well Primefaces 5.2 just added a library to draw this kind of components. The downside is that you will have to learn java, and jsf to use it. Take a look if it interests you: blog.primefaces.org/?p=3400 and to see other wonderful components take a look at: primefaces.org/showcase
    – Jorge Campos
    Apr 10, 2015 at 4:27
  • In that case isn't html5 canvas a good option ?
    – Learner
    Apr 10, 2015 at 14:34
  • Yes it is, the problem is that you will have to start from scratch with it as you said that need to create a system so you will need some background tech running. But if you are already familiarized with html5 go for it. That's why my suggestion is just a comment not an answer :)
    – Jorge Campos
    Apr 10, 2015 at 21:19
  • @JorgeCampos Yeah the thing is I don't want to waste time in figuring out the drawing of rectangles and animation, i figure since canvas is quick easy to use i will use that unless there is a easier option. That way i can focus on the main concept of my application.
    – Learner
    Apr 11, 2015 at 2:22

4 Answers 4

Reset to default
1
+100

A great place to start discovering all sorts of such JS libraries is at Graphing modules ...

Even though it's related to , this linked page contains lots of links to what in Drupal is called "modules" (= plugins).

But quite often there are pointers in the suggested link to JS libraries such as:

  • The JIT (Javascript InfoVis Toolkit).
  • The d3.js library.

Note: the question here is clearly about Graphs, not to be confused with Charts, like the libraries (charting engines) mentioned in the Comparison of charting modules.

Improve this answer
1
  • Merci beaucoup (thank you very much) for the +100 ! Please "keep us informed" how your charting adventure evolves, eg via updates (like comments) to your question here, or my answer, or any other technique you see fit, ok? Also, your question was about JS, but are you aware that there are also some great open source libraries written in PHP? Maybe you should edit/extend your question in that area also. After you do, I'd be happy to further enhance my answer here by including some (great I think) PHP libraries also ...
    – Pierre.Vriens
    Apr 21, 2015 at 14:57
1

Try jsplumb, jsPlumb provide a way to "plumb" elements of a UI together". The look is nice. The usage looks quite simple. http://www.jsplumb.org/demo/flowchart/dom.html

jsPlumb provides a means for a developer to visually connect elements on their web pages. It uses SVG in modern browsers, and VML on IE 8 and below. As it provide a way to plumb all elements of a UI together. The latest version is 1.7.5. From 1.7.0, jsPlumb has no longer supported YUI or Mootools - if you want to use some external library to manage dragging, then jQuery is your only option. But it is recommended that you use vanilla jsPlumb wherever possible: it's faster than the jQuery version, it offers more features (multiple element dragging, multiple scopes), and since the event handling and drag/drop code are also projects managed by jsPlumb, you're more likely to get a feature request for requirements related to those sorts of things to happen. Plus, it is highly likely that support for the jQuery flavour will be dropped at some point. There is no date yet planned for this, but it seems likely.

Improve this answer
1

Essential Diagram for JS will do what you are looking for.

Essential Diagram Demos

Essential Diagram is not open source, but a free community license is available.

Regards,

Davis

Note: I work for Syncfusion

Improve this answer
0

If you don't mind using javascript and HTML you might explore THREE.js for this kind of project. Fairly low learning curve and a powerful set of drawing tools that you can use to start with simple geometries (cubes, spheres, etc) and change them to more specific objects later once it is behaving the way you want.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.