antonioru/beautiful-react-diagrams
antonioru/beautiful-react-diagrams has 2,725 GitHub stars and 170 forks. GitHot measured 0 stars in 24 hours and +1 in 7 days. Last checked 2026-11-09 17:54 UTC. Last push 2022-12-12.
💎 A collection of lightweight React components and hooks to build diagrams with ease 💎
What you can do
- Small and lightweight
- Easy to customise
Measured star growth
- in 24h
- 0
- in 7 days
- +1
- in 15 days
- Update delayed
- in 1 month
- Update delayed
Net star changes over overlapping periods, not daily totals. Missing measurements are left blank. Stars measure attention, not software quality.
README.md
Original
A tiny collection of lightweight React components for building diagrams with ease

💡 Why?
Javascript diagramming libraries are often difficult to integrate in React projects.
Different patterns not always fit the React nature and having a component's state in in sync with an external
diagramming library might be quite difficult especially when the latter had been built in a different paradigm (such as MVC, for example).
For this reason we created beautiful-react-diagrams an easy-to-customise functional diagramming library to build
diagrams with ease.
🎓 Principles
- Lightweights: import nothing but a single lightweight javascript.
- Controlled components: exports controlled components only.
- Renderers: the involved components can be easily replaced with your own by using the
rendererprops. - Easy to style: built using CSS vars only.
☕️ Features
- Concise API
- Small and lightweight
- Easy to use
- Easy to customise
Contributing
Contributions are very welcome and wanted.
To submit your custom pull request, please make sure your read our CONTRIBUTING guidelines.
Before submitting a new pull request, please make sure:
- You have updated the package.json version and reported your changes into the CHANGELOG file
- make sure you run
npm run lint,npm buildand thennpm testbefore submitting your merge request. - make sure you've added the documentation of your changes.
- if you've changed the signature of a component, please make sure you've updated the
index.d.tsfile.
Versioning
This library follows the semver versioning standard.
Pre-release commits on the master branch, including merge commits, lead
to automated publication to NPM under the next tag. Pre-release version
numbers must follow the <major>.<minor>.<patch>-<tag>.<number>, such as
5.1.0-rc.0.
This library logo has been created using images published by the user Freepik on www.flaticon.com
Explore related projects
ytdl-org/youtube-dl
Command-line program to download videos from YouTube.com and other video sites
141,527 starsexcalidraw/excalidraw
Virtual whiteboard for sketching hand-drawn like diagrams
135,396 starsgodotengine/godot
Godot Engine – Multi-platform 2D and 3D game engine
119,942 starsmrdoob/three.js
JavaScript 3D Library.
117,983 stars