Top 17 JavaScript Diagram Projects
-
Amazing!!! I am looking specifically for something like react flow as well. After looking into it the best option might be jsplumb.
-
-
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!
-
joint
Flexible Javascript library for building interactive SVG-based diagrams and visual applications.
Project mention: GoJS 2.2: JavaScript and TypeScript Diagramming library | news.ycombinator.com | 2022-01-20 -
Read up on React lifecycles. Here's a useful diagram. The official docs are important to understand too. useState let's you use setState under the hood, and that causes a render. useEffect runs during the commit phase.
-
butterfly
🦋Butterfly，A JavaScript/React/Vue2 Diagramming library which concentrate on flow layout field. (基于JavaScript/React/Vue2的流程图组件) (by alibaba)
-
beautiful-react-diagrams
💎 A collection of lightweight React components and hooks to build diagrams with ease 💎
-
Project mention: I custom-built this high resolution character map for TLK and wanted to gift it to the community. Please note that it's not perfect, as I ignored minor and/or unlinkable characters. Let me know if I missed anything major. I also built an interactive visualization tool if there's interest. Enjoy<3 | reddit.com/r/TheLastKingdom | 2022-04-16
I'm not familiar with Animate by name. The viewer is pretty straight-forward given the underlying library (https://github.com/visjs/vis-network) if you come from a tech background. The trick is coming up with a maintainable way to manage the data structure for the network as it scales up. I wanted to type as little as possible to make additions :).
-
Scout APM
Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.
-
Project mention: WaveDrom: Free and open source digital timing diagrams | news.ycombinator.com | 2022-04-23
-
Project mention: What software/site to use for drawing graphs (with vertices and edges, not of functions)? | reddit.com/r/math | 2022-05-23
Tikz is nice, with some internal libraries (well documented in tikz own docs) If you want commutative diagrams, you can use quiver, which is a « frontend » to tikz
-
DrawThe.Net
drawthe.net draws network diagrams dynamically from a text file describing the placement, layout and icons. Given a yaml file describing the hierarchy of the network and it's connections, a resulting diagram will be created.
https://github.com/cidrblock/drawthe.net might be a good option for generating diagrams from text. It’s not exactly CSV though, so you might need to script a transform.
-
grafana-flowcharting
Flowcharting, plugin for Grafana to create complexe visio's draws style like technical architectures, floorplan, diagrams, hierarchical schema based on draw.io
You could draw a floorplan using diagrams.net and display it in Grafana using https://github.com/algenty/grafana-flowcharting this plugin
-
swift-auto-diagram
A Ruby script that scans all swift code from the specified folders and files and automatically generates an entity diagram (similar to a class diagram) which can be viewed in a browser.
Project mention: I strongly wish Xcode would provide natively generating /viewing the Class Diagrams of the module/library/projects | reddit.com/r/iOSProgramming | 2022-01-14I found some tools (just google with the text I provided) like generateEntityDiagram.rb, swift-auto-diagram etc.
-
Project mention: FPGA Interchange format to enable interoperable FPGA tooling | news.ycombinator.com | 2022-02-12
Soon: there are 15 different formats for passing netlists around.
I have very little hope that any netlist format that comes from Yosys. Not only has it changed a couple times in the last years, but the latest iteration is some JSON-based monstrosity that has to be by far the most inconvenient netlist format ever created (see https://github.com/nturley/netlistsvg/blob/master/test/digit... ) .
-
-
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.
-
-
sphinx-wavedrom
A sphinx extension that allows including wavedrom diagrams by using its text-based representation
JavaScript Diagram related posts
- Tool to map out resources!
- We need a flowchart editor that doesn't give you carpal tunnel
- Building diagrams with data from list ?
- WaveDrom: Free and open source digital timing diagrams
- Design process diagramming
- WaveDrom – Digital timing diagram everywhere
- How do you document your setup and progress?
Index
What are some of the best open-source Diagram projects in JavaScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | jsplumb | 6,996 |
| 2 | cloudmapper | 5,092 |
| 3 | joint | 3,614 |
| 4 | react-lifecycle-methods-diagram | 3,447 |
| 5 | butterfly | 2,985 |
| 6 | beautiful-react-diagrams | 2,414 |
| 7 | vis-network | 2,092 |
| 8 | wavedrom | 1,965 |
| 9 | quiver | 1,929 |
| 10 | DrawThe.Net | 887 |
| 11 | grafana-flowcharting | 693 |
| 12 | swift-auto-diagram | 438 |
| 13 | netlistsvg | 393 |
| 14 | Azure-PlantUML | 326 |
| 15 | DgrmJS | 324 |
| 16 | schema-designer | 112 |
| 17 | sphinx-wavedrom | 26 |
Are you hiring? Post a new remote job listing for free.
