Top 11 JavaScript Diagram Projects

d2

1 101 20,953 9.7 JavaScript

D2 is a modern diagram scripting language that turns text to diagrams.

Project mention: Mermaid: Generation of diagrams like flowcharts or sequence diagrams from text | news.ycombinator.com | 2025-05-21

They were working on a wasm version some time ago I believe [0]. Not sure how usable this is insofar, but it may be of interest.
[0]: https://github.com/terrastruct/d2/pull/436/files
SurveyJS

surveyjs.io featured

JavaScript Form Builder with No-Code UI & Built-In JSON Schema Editor. Keep full control over the data you collect and tailor the form builder’s entire look and feel to your users’ needs. SurveyJS works with React, Angular, Vue 3, and is compatible with any backend or auth system. Learn more.
flowy

2 6 11,750 0.0 JavaScript

The minimal javascript library to create flowcharts ✨
jsplumb

3 9 7,778 1.3 JavaScript

Build Connectivity Quickly. Rapidly build diagramming apps and rich graphical front ends with React, Angular, Svelte, Vue, Javascript and Typescript.

Project mention: GoJS, a JavaScript Library for HTML Diagrams VS jsplumb - a user suggested alternative | libhunt.com/r/GoJS | 2025-04-12
NN-SVG

4 4 5,548 3.5 JavaScript

Publication-ready NN-architecture schematics.
mermaid-cli

5 10 3,339 8.8 JavaScript

Command line tool for the Mermaid library

Project mention: Show HN: GUI for Editing Mermaid Class Diagrams | news.ycombinator.com | 2025-01-17

I think there are two slightly different issues here!
1. SVGs generated by Mermaid use the SVG 2 features, but other than browsers, most libraries only support SVG 1.1 features, i.e. <https://github.com/mermaid-js/mermaid/issues/2102>, which is what the other comment mentioned.
2. Mermaid requires a browser layout engine to render the diagrams (your issue), i.e. <https://github.com/mermaid-js/mermaid/issues/3650>. This is something I also really want to fix (I maintain the [`mermaid-js/mermaid-cli`][1] project and we need to use Puppeteer/Headless Chrome to render mermaid diagrams, which isn't ideal.) However, I don't think this would be easy, since we'd need a browserless tool that supports a browser-like layout engine (although I'm hoping that [Servo][2] might eventually be able to support it).
And if you do want to do headless renders of Mermaid diagrams, I'd recommend using (or adapting, since the code is all MIT licensed and I'm not aware of one that uses Selenium):
- <https://github.com/mermaid-js/mermaid-cli>, which uses Puppeteer as the headless browser API.
kroki

6 57 3,311 9.0 JavaScript

Creates diagrams from textual descriptions!

Project mention: ROQ: Creating a custom section helper | dev.to | 2025-07-01

In this blog post, we will implement a custom section helper that allows to invoke a Kroki.io server to generate images from almost every possible diagram as code language.
beautiful-react-diagrams

7 2 2,706 0.0 JavaScript

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

getstream.io featured

Stream - Scalable APIs for Chat, Feeds, Moderation, & Video. Stream helps developers build engaging apps that scale to millions with performant and flexible Chat, Feeds, Moderation, and Video APIs and SDKs powered by a global edge network and enterprise-grade infrastructure.
cascii-core

8 6 1,061 9.4 JavaScript

A web-based ASCII and Unicode diagram builder written in vanilla Javascript

Project mention: Cascii | news.ycombinator.com | 2025-03-23
DgrmJS

9 17 1,002 4.2 JavaScript

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

Project mention: JavaScript. How to Make a Blazingly Fast Multithreaded Data Grid for 1,000,000 Rows. Part 1/2: The Nuances of Working with DOM | dev.to | 2024-11-30

Give stars on GitHub.
grafana-flowcharting

10 4 1,002 0.0 JavaScript

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

11 29 95 6.9 JavaScript

An online runner to play, learn, and create with D2, the modern diagram scripting language that turns text to diagrams.

Project mention: Mermaid: Generation of diagrams like flowcharts or sequence diagrams from text | news.ycombinator.com | 2025-05-21

https://play.d2lang.com/ loads https://play.d2lang.com/d2.wasm so presumably "all done"

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 Diagrams discussion

JavaScript Diagrams related posts

Mermaid: Generation of diagrams like flowcharts or sequence diagrams from text

10 projects | news.ycombinator.com | 21 May 2025
Whimsy: a Tiny Game Engine I Made for Storytellers

3 projects | dev.to | 23 May 2025
"10 Free Tools Every Developer Should Bookmark in 2025"

6 projects | dev.to | 16 May 2025
D2: Modern diagram scripting language that turns text to diagrams

1 project | news.ycombinator.com | 2 Apr 2025
Cascii

1 project | news.ycombinator.com | 23 Mar 2025
Show HN: Cascii – A portable ASCII diagram builder written in vanilla JavaScript

6 projects | news.ycombinator.com | 16 Mar 2025
Show HN: Put Diagrams in Your Code

1 project | news.ycombinator.com | 16 Mar 2025
A note from our sponsor - Stream
getstream.io | 13 Jul 2025

Stream helps developers build engaging apps that scale to millions with performant and flexible Chat, Feeds, Moderation, and Video APIs and SDKs powered by a global edge network and enterprise-grade infrastructure. Learn more →

Index

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

#	Project	Stars
1	d2	20,953
2	flowy	11,750
3	jsplumb	7,778
4	NN-SVG	5,548
5	mermaid-cli	3,339
6	kroki	3,311
7	beautiful-react-diagrams	2,706
8	cascii-core	1,061
9	DgrmJS	1,002
10	grafana-flowcharting	1,002
11	d2-playground	95