JavaScript Diagrams

Open-source JavaScript projects categorized as Diagrams Edit details

Top 6 JavaScript Diagram Projects

  • flowy

    The minimal javascript library to create flowcharts ✨

    Project mention: Writing HTML sucks and No-code doesn't help | | 2022-05-09

    What problems do you have with all the existing options (just a couple links I picked from a google search)?

  • beautiful-react-diagrams

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

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

  • kroki

    Creates diagrams from textual descriptions!

    Project mention: How can I create a Database schema in obsidian | | 2022-07-30

    Although I have never tried it before, you also have [Kroki obsidian](, which allows you to use [kroki diagrams](

  • mermaid-cli

    Command line tool for the Mermaid library

    Project mention: Mermaid: Create diagrams and visualizations using text and code | | 2022-05-05

    I come from past experiments with (py)graphviz, yed, probably a couple other forgotten things. (As well as manual diagrams in LucidChart and even Inkscape.) And am generally a non-web python guy.

    I was looking at Mermaid last weekend, since a coworker has praised it a few times and I was wanting to play with it.

    I think my expectation of how to use it was wrong? I typically expect to share my diagrams as .png files. The main documentation didn't seem to give much guidance in this usecase.

    I ended up going to ... there didn't seem to be a simple install-and-use pathway similar to `apt` or `pip`, so I ended up trying the docker image for it. I got it working to create pngs, but I thought having to mess with docker volume mounts and defining my own aliases (`alias mermaid='docker run -u $UID -it --rm -v ~/mermaid:/data minlag/mermaid-cli -i'` so I can do `mermaid blah.mmd` in my ~/mermaid folder) was a bit cumbersome...

    Just sharing to see if there's hot takes on where I went wrong, I guess. (for example, I certainly didn't extensively read the docs to understand the usage paradigm it's intended for)

  • grafana-flowcharting

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

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

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-07-30.

JavaScript Diagrams related posts


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

Project Stars
1 flowy 9,443
2 beautiful-react-diagrams 2,434
3 kroki 1,599
4 mermaid-cli 914
5 grafana-flowcharting 717
6 DgrmJS 335
Find remote jobs at our new job board There are 3 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.