Top 6 JavaScript Diagram Projects
-
Project mention: Writing HTML sucks and No-code doesn't help | reddit.com/r/programming | 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!
-
Project mention: How can I create a Database schema in obsidian | reddit.com/r/ObsidianMD | 2022-07-30
Although I have never tried it before, you also have [Kroki obsidian](https://github.com/gregzuro/obsidian-kroki), which allows you to use [kroki diagrams](https://kroki.io/).
-
Project mention: Mermaid: Create diagrams and visualizations using text and code | news.ycombinator.com | 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 https://github.com/mermaid-js/mermaid-cli ... 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 draw.io
-
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.
The algorithm is implemented in the textareaCreate function. Function code in a separate file on GitHub.
JavaScript Diagrams related posts
- Build gorgeous flow diagrams with Svelvet
- Using kroki to embed vega-lite charts
- Show HN: Typograms, Markdown-like renderer for ASCII diagrams
- Kroki: Diagrams from Textual Descriptions
- any selfhosted solution for note app like onenote?
- Svelvet Launches Today
- looking for a notes app like OneNote to be used on laptops and mobile but hosted on the local server
Index
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 |
Are you hiring? Post a new remote job listing for free.
