JavaScript Diagram

Open-source JavaScript projects categorized as Diagram Edit details

Top 17 JavaScript Diagram Projects

  • jsplumb

    Visual connectivity for webapps

    Project mention: Is there any node graph library for svelte? | | 2021-12-22

    Amazing!!! I am looking specifically for something like react flow as well. After looking into it the best option might be jsplumb.

  • cloudmapper

    CloudMapper helps you analyze your Amazon Web Services (AWS) environments.

    Project mention: Tool to map out resources! | | 2022-06-23
  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • joint

    Flexible Javascript library for building interactive SVG-based diagrams and visual applications.

    Project mention: GoJS 2.2: JavaScript and TypeScript Diagramming library | | 2022-01-20
  • react-lifecycle-methods-diagram

    Interactive React Lifecycle Methods diagram.

    Project mention: Aren't useEffect and useState redundant? | | 2022-01-31

    Read up on React lifecycles. Here's a useful diagram. The official docs are important to understand too. useState let's you use setState under the hood, and that causes a render. useEffect runs during the commit phase.

  • butterfly

    🦋Butterfly,A JavaScript/React/Vue2 Diagramming library which concentrate on flow layout field. (基于JavaScript/React/Vue2的流程图组件) (by alibaba)

  • beautiful-react-diagrams

    💎 A collection of lightweight React components and hooks to build diagrams with ease 💎

  • vis-network

    :dizzy: Display dynamic, automatically organised, customizable network views.

    Project mention: I custom-built this high resolution character map for TLK and wanted to gift it to the community. Please note that it's not perfect, as I ignored minor and/or unlinkable characters. Let me know if I missed anything major. I also built an interactive visualization tool if there's interest. Enjoy<3 | | 2022-04-16

    I'm not familiar with Animate by name. The viewer is pretty straight-forward given the underlying library ( if you come from a tech background. The trick is coming up with a maintainable way to manage the data structure for the network as it scales up. I wanted to type as little as possible to make additions :).

  • Scout APM

    Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.

  • wavedrom

    :ocean: Digital timing diagram rendering engine

    Project mention: WaveDrom: Free and open source digital timing diagrams | | 2022-04-23
  • quiver

    A modern commutative diagram editor for the web.

    Project mention: What software/site to use for drawing graphs (with vertices and edges, not of functions)? | | 2022-05-23

    Tikz is nice, with some internal libraries (well documented in tikz own docs) If you want commutative diagrams, you can use quiver, which is a « frontend » to tikz

  • DrawThe.Net draws network diagrams dynamically from a text file describing the placement, layout and icons. Given a yaml file describing the hierarchy of the network and it's connections, a resulting diagram will be created.

    Project mention: Building diagrams with data from list ? | | 2022-06-16 might be a good option for generating diagrams from text. It’s not exactly CSV though, so you might need to script a transform.

  • grafana-flowcharting

    Flowcharting, plugin for Grafana to create complexe visio's draws style like technical architectures, floorplan, diagrams, hierarchical schema based on

    Project mention: Manufacturing floorplan with hotspot links? | | 2021-07-23

    You could draw a floorplan using and display it in Grafana using this plugin

  • swift-auto-diagram

    A Ruby script that scans all swift code from the specified folders and files and automatically generates an entity diagram (similar to a class diagram) which can be viewed in a browser.

    Project mention: I strongly wish Xcode would provide natively generating /viewing the Class Diagrams of the module/library/projects | | 2022-01-14

    I found some tools (just google with the text I provided) like generateEntityDiagram.rb, swift-auto-diagram etc.

  • netlistsvg

    draws an SVG schematic from a JSON netlist

    Project mention: FPGA Interchange format to enable interoperable FPGA tooling | | 2022-02-12

    Soon: there are 15 different formats for passing netlists around.

    I have very little hope that any netlist format that comes from Yosys. Not only has it changed a couple times in the last years, but the latest iteration is some JSON-based monstrosity that has to be by far the most inconvenient netlist format ever created (see ) .

  • Azure-PlantUML

    PlantUML sprites, macros, and other includes for Azure services

    Project mention: Diagram as Code | | 2022-06-21
  • DgrmJS

    DgrmJS is a JavaScript library for creating SVG flow diagrams. The main goal of the library is to set up workflows in BPM (Business Process Management) systems. Works on desktop and mobile, has no dependency, 3.5 KB gzipped.

    Project mention: JavaScript text editor for SVG | | 2022-04-22

    The algorithm is implemented in the textareaCreate function. Function code in a separate file on GitHub.

  • schema-designer

    Database schema designer for Laravel & Lumen

  • sphinx-wavedrom

    A sphinx extension that allows including wavedrom diagrams by using its text-based representation

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2022-06-23.

JavaScript Diagram related posts


What are some of the best open-source Diagram projects in JavaScript? This list will help you:

Project Stars
1 jsplumb 6,996
2 cloudmapper 5,092
3 joint 3,614
4 react-lifecycle-methods-diagram 3,447
5 butterfly 2,985
6 beautiful-react-diagrams 2,414
7 vis-network 2,092
8 wavedrom 1,965
9 quiver 1,929
10 DrawThe.Net 887
11 grafana-flowcharting 693
12 swift-auto-diagram 438
13 netlistsvg 393
14 Azure-PlantUML 326
15 DgrmJS 324
16 schema-designer 112
17 sphinx-wavedrom 26
Find remote jobs at our new job board There are 2 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.
Clean code begins in your IDE with SonarLint
Up your coding game and discover issues early. SonarLint is a free plugin that helps you find & fix bugs and security issues from the moment you start writing code. Install from your favorite IDE marketplace today.