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.