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 →
Top 11 JavaScript Diagram Projects
-
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
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.
-
-
jsplumb
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 -
-
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.
-
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
💎 A collection of lightweight React components and hooks to build diagrams with ease 💎
-
Stream
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.
-
-
DgrmJS
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-30Give stars on GitHub.
-
grafana-flowcharting
Flowcharting, plugin for Grafana to create complexe visio's draws style like technical architectures, floorplan, diagrams, hierarchical schema based on draw.io
-
d2-playground
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-21https://play.d2lang.com/ loads https://play.d2lang.com/d2.wasm so presumably "all done"
JavaScript Diagrams discussion
JavaScript Diagrams related posts
-
Mermaid: Generation of diagrams like flowcharts or sequence diagrams from text
-
Whimsy: a Tiny Game Engine I Made for Storytellers
-
"10 Free Tools Every Developer Should Bookmark in 2025"
-
D2: Modern diagram scripting language that turns text to diagrams
-
Cascii
-
Show HN: Cascii – A portable ASCII diagram builder written in vanilla JavaScript
-
Show HN: Put Diagrams in Your Code
-
A note from our sponsor - Stream
getstream.io | 13 Jul 2025
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 |