JavaScript Diagrams

Open-source JavaScript projects categorized as Diagrams

Top 11 JavaScript Diagram Projects

  1. d2

    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

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

    SurveyJS logo
  3. flowy

    The minimal javascript library to create flowcharts ✨

  4. 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
  5. NN-SVG

    Publication-ready NN-architecture schematics.

  6. mermaid-cli

    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.

  7. kroki

    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.

  8. beautiful-react-diagrams

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

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

    Stream logo
  10. cascii-core

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

    Project mention: Cascii | news.ycombinator.com | 2025-03-23
  11. 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-30

    Give stars on GitHub.

  12. grafana-flowcharting

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

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

Log in or Post with

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

Sponsored
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.
surveyjs.io