Javascript Library for Diagram Creation? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe 开发者_如何学编程the problem and what has been done so far to solve it.

Closed 8 years ago.

Improve this question

Which JavaScript library (free or commercial) can build computer network diagrams or electrical diagrams. Also, that supports animations between different items in the diagrams etc.

Thanks.

---

The answer is absolutely JointJS

---

Try the free online app for drawing diagrams, draw.io. It uses mxGraph library for drawing diagrams.

Disclaimer :

I'm a software developer associated with JGraph.

---

Check out these three libraries and see if they can help you out:

Raphael

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library. Raphaël ['ræfeɪəl] uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.

Protovis

Protovis composes custom views of data with simple marks such as bars and dots. Unlike low-level graphics libraries that quickly become tedious for visualization, Protovis defines marks through dynamic properties that encode data, allowing inheritance, scales and layouts to simplify construction. Protovis is free and open-source, provided under the BSD License. It uses JavaScript and SVG for web-native visualizations; no plugin required (though you will need a modern web browser)! Although programming experience is helpful, Protovis is mostly declarative and designed to be learned by example.

Processingjs

Processing.js is the sister project of the popular Processing visual programming language, designed for the web. Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. You write code using the Processing language, include it in your web page, and Processing.js does the rest. It's not magic, but almost.

Originally developed by Ben Fry and Casey Reas, Processing started as an open source programming language based on Java to help the electronic arts and visual design communities learn the basics of computer programming in a visual context. Processing.js takes this to the next level, allowing Processing code to be run by any HTML5 compatible browser, including current versions of Firefox, Safari, Chrome, Opera, and Internet Explorer. Processing.js brings the best of visual programming to the web, both for Processing and web developers.

---

....last but not least Draw2D.

it's a JS lib for easy diagram creation. The API is more like a Java/C# syntax. Abstraction and management layer above the famous RaphaelJS lib.

Code Example:

      var canvas = new draw2d.Canvas("gfx_holder");

      // Create two standard nodes for "start" and "end" and link
      // this figures with a standard Connector
      //
      var start  = new draw2d.shape.node.Start();
      var end    = new draw2d.shape.node.End();

      canvas.addFigure(start, 80,180);
      canvas.addFigure(end, 450,250);

      // Add a connection via API calls between Start and Stop
      //
      var connection = new draw2d.Connection();
      connection.setSource(start.getOutputPort(0));
      connection.setTarget(end.getInputPort(0));
      canvas.addFigure(connection);

---

1. Google charts: http://code.google.com/intl/uk/apis/chart/
2. Dojo: http://dojotoolkit.org/grids-charts
3. ExtJS: http://www.sencha.com/products/extjs/examples/#sample-3