20+ JavaScript libraries to draw your own diagrams (2022 edition)

Create interactive diagrams in JavaScript easily.

This hasn't been added to SaaSHub yet

mxGraph is a fully client side JavaScript diagramming library - jgraph/mxgraph

Process Analytics - March 2022 News about 11 months ago

It is possible to use the new API to retrieve the bpmn-visualization and mxGraph versions used at runtime: getVersion().

GoJS is a JavaScript library for building interactive diagrams on HTML web pages. Build apps with flowcharts, org charts, BPMN, UML, modeling, and other visual graph types.

Any Ideas How to Create a Graph Builder UI in React? about 2 months ago:

Used goJS in one project and konva in another.

This hasn't been added to SaaSHub yet

This hasn't been added to SaaSHub yet

nomnoml is a free and open source tool to generate nice looking UML diagrams from simple text definitions.

Include diagrams in your Markdown files with Mermaid about about 1 year ago:

Mermaid is fantastic. Aside from mermaid, I've recently been introduced to nomnoml (https://nomnoml.com/) and it is fantastic as well. My wish is for Mermaid and nomnoml to become universally supported among Markdown web renderers (I'm looking first and foremost at Github of course).

This hasn't been added to SaaSHub yet

This hasn't been added to SaaSHub yet

This hasn't been added to SaaSHub yet

This hasn't been added to SaaSHub yet

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS.

Graphs in Python web app about 4 days ago:

Https://d3js.org/ (a bit lower-level but more flexible).

Raphael.js is an Object Oriented drawing library. It is good at making in-depth diagrams with complex interactions.

Help me with how to start ? I want to make a similar chart... about over 1 year ago:

You could also directly use libraries like Raphael or D3(lots of the tools around use D3.js as their core rendering library) if you just want help with drawing the SVG elements and connectors ... That is, if you're going to pull the data from the DB, decide in your app what each shape should be and where it should be on the page, etc. Integrating and driving these directly from Angular isn't trivial, but there are...

Create Visio like drawings, diagrams or an workflow editor with the Draw2D Javascript library.

This hasn't been added to SaaSHub yet

Open source vector graphics scripting framework that runs on top of the HTML5 Canvas.

Looking for a javascript library with good wrapping support about 1 day ago

It is likely that paper.js provides the functionality needed. I will probably investigate it at some point since it appears to be the more popular library Compare paper.js & bezier.js.

jsPlumb is an advanced, standards-compliant and easy to use JS library for building connectivity based applications, such as flowcharts, process flow diagrams, sequence diagrams, organisation charts, etc.

Do you know any good libraries to make those kind of graph? about 25 days ago

I have looked into https://jsplumbtoolkit.com/ for a couple of projects and it seemed pretty good but it was a pure JS library 'community edition' with a commercial version that had all the nice framework integration for React and Angular.

JS library for creating graphic and interactive experiences

Simplest graphics programming language/framework about 10 days ago:

Sounds like you want https://p5js.org/ That is, if you want use JS. This is pretty much an equivalent of Processing.

This hasn't been added to SaaSHub yet

This hasn't been added to SaaSHub yet

A dynamic, browser based visualization library.

How to Build a Graph Visualization Engine and Why You Shouldn’t about about 2 months ago:

One of the key created HTML elements is the element. Renderer class creates CanvasRenderingContext2D which is used for drawing shapes, text, images, and other objects. As we used vis.js before creating Orb, credit for some of the drawing logic in Orb (shapes, arrows, curved lines) goes to the developers who created it. They did a great job, and we didn’t want to reinvent the wheel. Canvas API with...

This hasn't been added to SaaSHub yet

A tiny little drawing app.

free-for.dev about 5 months ago:

Tldraw.com — Free open source white-boarding and diagramming tool with features such as smart arrows, snapping, sticky notes, and SVG export. Multiplayer mode for collaborative editing. Free official VS Code extension available as well.