Build a drag and drop javascript system diagram planner

I would like to have a javascript drag and drop audio/video system diagram planner built that consists of audio, video, and network items with selectable icons, and selectable "wires" that connect to these items as inputs and outputs. We would integrate this planner into our website for users to use to plan their systems. In the end, it would look like one of the attached images, but with icons of the items instead of images. The icons should also have editable text (e.g. so that a user could type "camera 1," "camera 2," etc.) A user should then be able to download their plan as a PDF and/or image, which would embed our logo on to it in a corner as downloading. Some of the elements to include (with the addition of a few more) will include: Video: Camera Switcher Router Playback server Decoder Computer Encoder Projector LED wall TVs Distribution Amplifier Converter Recorder Other Audio: Audio Console Audio Embedder Stage Audio Box Microphones DI box Audio Recorder Network: Network Switch / Router The selectable "wire" signal paths would be different colors to indicate what they are and would include: SDI HDMI Fiber XLR Composite / Component Genlock Network These items would either have the names on them or have a color code identifying what they are.