# antonioru/beautiful-react-diagrams

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

Repository: https://github.com/antonioru/beautiful-react-diagrams
Canonical: https://ross.abutalabs.com/products/beautiful-react-diagrams
Homepage: https://antonioru.github.io/beautiful-react-diagrams/
Language: JavaScript
License: MIT
License Family: permissive
Topics: react, diagram, hooks, javascript, flowcharts, flowchart-diagrams, diagrams
Last push: 2022-12-12T09:06:30+00:00

## Health v2 (maintenance only)
Score: 32/100 (v2, computed 2026-09-03T02:20:16.233290+00:00)
- activity 0, release rhythm 35, longevity 100
- inputs: {"age_days": 2367, "days_push": 1360, "days_rel": null, "gap_med": null, "n_releases_24m": 0}
- flags: no_releases
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 2721, forks 171 (observed 2026-08-28T04:07:15.578312+00:00)

## What it is
beautiful-react-diagrams is a lightweight collection of React components and hooks for building diagrams and flowcharts. It uses controlled components, custom renderers, and CSS variables so diagrams stay in sync with React state and are easy to style.

## Use cases
- build flowcharts in a react app
- create node-based diagram editors
- render interactive diagrams with react hooks
- add a lightweight diagramming library to react
- build custom node and port renderers
- keep diagram state in sync with react state

## When to choose
- you need a small, dependency-light diagram library that fits React's component model
- you want controlled components and easy custom styling with CSS variables
- you're building simple flowcharts or node diagrams in React

## When to avoid
- you need advanced features like auto-layout, zoom/pan canvas, or complex graph algorithms
- you need a battle-tested library with frequent releases and long-term support
- you're not using React

## Facets
- artifact type: library
- maturity: maintenance
- function: ui-components, state-management, frontend-framework
- domain: web-development, frontend, developer-tools, data-visualization
- platform: cross-platform
- tags: react, diagrams, flowcharts, hooks, node-editor, controlled-components, web-server, nodejs

## Member repositories
- antonioru/beautiful-react-diagrams (main) score 32

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:07:15.578312+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-30T02:15:12.325243+00:00, confidence not recorded.
  - readme: https://github.com/antonioru/beautiful-react-diagrams (fetched 2026-08-28T04:07:15.578312+00:00, sha 73a2544a7811)
  - homepage: https://antonioru.github.io/beautiful-react-diagrams/ (fetched 2026-08-29T09:58:24.393825+00:00, sha 7e156a0e441b)
  - registry_npm: https://registry.npmjs.org/beautiful-react-diagrams (fetched 2026-08-29T09:58:24.403299+00:00, sha 954c6270517f)
- Data as of 2026-08-30T08:39:29.467469+00:00.