JavaScript Diagram

Open-source JavaScript projects categorized as Diagram
Edit details
Topics: Flowchart SVG JavaScript Diagrams HacktoberFest
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
surveyjs.io
Sponsored

Top 18 JavaScript Diagram Projects

  • draw.io

    draw.io is a JavaScript, client-side editor for general diagramming.

    • Project mention: Show HN: Open source database diagram editor | news.ycombinator.com | 2024-04-06

    At first I thought this was drawio: https://www.drawio.com/ with which you can generate a schema diagram from SQL. Is this the other way around.

  • jsplumb

    Visual connectivity for webapps

    • Project mention: How to make beautiful flowchart with Angular ? | /r/Frontend | 2023-07-27

    ❔jsPlumb - Seems like JointJS

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo

  • cloudmapper

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

  • butterfly

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

    • Project mention: FLaNK AI Weekly 25 March 2025 | dev.to | 2024-03-25

  • vis-network

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

  • wavedrom

    :ocean: Digital timing diagram rendering engine

    • Project mention: WaveDrom draws your Timing Diagram or Waveform | news.ycombinator.com | 2023-10-23

  • beautiful-react-diagrams

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

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo

  • quiver

    A modern commutative diagram editor for the web.

  • blast-radius

    Interactive visualizations of Terraform dependency graphs using d3.js

    • Project mention: Top Terraform Tools to Know in 2024 | dev.to | 2024-03-26

    ‍Blast Radius is a tool designed to provide interactive visualizations of Terraform dependency graphs. It's particularly useful for understanding and communicating the architecture and potential impact of changes in Terraform-managed infrastructure.

  • DrawThe.Net

    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: How to draw beautiful software architecture diagrams | news.ycombinator.com | 2023-10-27

  • grafana-flowcharting

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

  • DgrmJS

    Dgrm.net - flowchart editor. Works on desktop, phone and tablet. Has no dependency. Pure JavaScript.

  • netlistsvg

    draws an SVG schematic from a JSON netlist

  • 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.

  • Azure-PlantUML

    PlantUML sprites, macros, and other includes for Azure services

  • puml-for-markdown

    A CLI tool to embed interactive PUML diagrams to your github markdown files.

  • schema-designer

    Database schema designer for Laravel & Lumen

  • sphinx-wavedrom

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

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

    WorkOS logo
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).

JavaScript Diagram related posts

Index

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

Project Stars
1 draw.io 38,525
2 jsplumb 7,714
3 cloudmapper 5,830
4 butterfly 4,158
5 vis-network 2,835
6 wavedrom 2,764
7 beautiful-react-diagrams 2,626
8 quiver 2,317
9 blast-radius 1,986
10 DrawThe.Net 1,078
11 grafana-flowcharting 934
12 DgrmJS 867
13 netlistsvg 582
14 swift-auto-diagram 482
15 Azure-PlantUML 444
16 puml-for-markdown 276
17 schema-designer 119
18 sphinx-wavedrom 31

Sponsored
The modern identity platform for B2B SaaS
The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
workos.com