Javascript Process Flow Diagram Process Flow
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.
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. – Apr 21 '15 at 14:57. Try jsplumb, jsPlumb provide a way to 'plumb' elements of a UI together'. The look is nice. The usage looks quite simple. 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.
Process Flow Diagram Example
St=start: Start past:e=end: End future:op1=operation: My Operation past op2=operation: Stuff current sub1=subroutine: My Subroutine invalid cond=condition: Yes or No? approved:c2=condition: Good idea rejected io=inputoutput: catch something. future st-op1(right)-cond cond(yes, right)-c2 cond(no)-sub1(left)-op1 c2(yes)-io-e c2(no)-op2-e This should be a diagram! If you do not see it you need Javascript enabled.