Projects sharing features with Beautiful React Diagrams

This project is a comprehensive design system framework and component library built for React. It provides a suite of modular, accessible, and themeable interface elements designed to maintain a unified visual language and brand alignment across complex web applications. By encapsulating interaction logic and styling within individual components, it enables developers to build consistent, responsive interfaces through declarative composition. The library distinguishes itself by prioritizing inclusive user experiences through built-in accessibility management, including standardized keyboard n

drawio is a web-based diagramming tool and cross-platform visual designer used for creating flowcharts, network maps, and technical schemas. It functions as a vector graphics editor and an XML-based diagramming engine that allows users to design and export scalable graphics. The software supports a wide range of technical design tasks, including infrastructure mapping for server layouts and the creation of visual aids for technical documentation. It enables the import of diagram files from other tools to facilitate cross-tool migration.

This library provides a centralized system for managing and rendering transient alert messages within React applications. It functions as a frontend notification manager, using a provider-based architecture to track, update, and remove status alerts through a standardized reactive interface. The system distinguishes itself by allowing developers to replace default alert designs with custom components, ensuring that feedback elements align with specific application branding and design systems. It utilizes portal-based rendering to mount notifications outside the main component hierarchy, ensur

FastUI is a server-driven UI system and Pydantic UI framework that transforms backend data models into functional web interfaces. It operates as a model-based frontend generator where the server controls the layout and behavior of the user interface through structured data schemas, enabling a low-code approach to web development. The project allows for the definition of visual hierarchies and component properties on the backend, using a JSON-based protocol to communicate UI structure between the server and client. It utilizes schema-driven generation to automate the creation of interfaces, in

LogicFlow is an SVG-based flowchart editing framework and visual graph editor used for building customizable business process diagrams. It serves as a customizable diagramming engine for rendering business process models, entity relationship diagrams, and unified modeling language charts. The system is characterized by a plugin-based architecture that allows developers to define specialized graphical elements and register pluggable modules. A distinctive feature is its overlay system, which positions standard HTML components on top of the SVG canvas to create interactive menus and control pan

Butterfly is an interactive graph visualization library and SVG-based diagramming engine used to build node-based workflow designers and visual flow editors. It provides a framework for rendering interconnected nodes, edges, and groups to model technical architectures, business processes, and data-driven workflows. The project is distinguished by its ability to integrate custom UI components as graph nodes and its specialized support for data lineage visualization. It enables the mapping of relationships between data fields, tables, and business entities to track provenance and monitor workfl

imgui-node-editor is a C++ extension for Dear ImGui that adds a fully interactive node graph editor, enabling visual programming and blueprint-style graph editing within immediate-mode GUI applications. At its core, it provides a customizable node graph UI component where users can place, drag, and connect nodes with pins, supporting Bézier curve connections, automatic highlights, and a default theme modeled after blueprint editors. The editor handles graph navigation with smooth zooming, scrolling, selection rectangles, group dragging, and keyboard shortcuts for cut, copy, paste, and delete o

jsplumb is a JavaScript diagramming library and visual connectivity engine used to draw draggable connections between HTML elements. It functions as an SVG connector framework that renders dynamic links to create visual connectivity maps and flowcharts. The library provides tools for building node-based user interfaces, interactive workflow mapping, and visual diagramming. It enables the creation of dynamic relationship visualizations where users can link steps or pieces of information together on a web page.

This project is a cross-platform desktop application designed for creating, editing, and managing structured diagrams and technical workflows. It provides a visual modeling environment that allows users to construct complex charts through a drag-and-drop interface, supporting the documentation of processes, software architectures, and system flows. The application distinguishes itself by utilizing a layered canvas composition that enables independent manipulation of diagram components, paired with a keyboard-driven workflow that minimizes mouse reliance. It employs scalable vector graphics fo

This project is a component library that bridges the Bulma CSS framework with React. It provides a set of declarative building blocks that map standard CSS framework patterns to reusable interface elements, enabling the construction of responsive and accessible web layouts. The library utilizes a compositional architecture where modular components encapsulate specific styling rules and structural behaviors. It supports polymorphic rendering, allowing components to dynamically change their underlying HTML tags at runtime to maintain semantic structure. Developers can also utilize property mapp

Diagram Maker is a web-based library designed for building interactive graph visualization and data modeling tools. It provides a framework for rendering node and link structures, allowing users to create custom editing environments where complex data relationships can be visualized and manipulated directly in the browser. The library utilizes a modular, plugin-driven architecture that enables developers to extend the core editing functionality to meet specific requirements without altering the underlying source code. It manages the application state through a centralized, immutable store, en

mxgraph is a client-side graph visualization tool and JavaScript diagramming library. It functions as an SVG-based drawing framework used to create and render interactive diagrams directly within a web browser. The library enables the development of custom diagramming tools, such as network maps and flowcharts, by providing the means to draw and manipulate visual data structures. It focuses on client-side data visualization, allowing for the representation of complex node and edge relationships without requiring server-side rendering.

This project is a renderer and theme engine for Mermaid.js that converts diagram syntax into styled SVG graphics and ASCII text. It provides a type-safe diagram editor and a pipeline for transforming diagram source code into scalable vector graphics or plain text visuals. The system features a dedicated theme engine that maps editor colors and CSS variables to diagram elements. It enables dynamic diagram theming through CSS custom properties for real-time color updates and supports index-based styling to override the appearance of specific nodes and edges. The tool covers a range of visualiz

Bootstrap-vue is a Vue.js component library and responsive UI kit based on the Bootstrap CSS framework. It provides a frontend component suite of reusable interface elements designed for building mobile-first websites and web applications. The project wraps Bootstrap CSS classes in Vue components to manage styles and behaviors through reactive state. It integrates a responsive layout management system that synchronizes internal component states with Bootstrap's grid system and device breakpoints. The library covers a wide range of interface capabilities, including data display with sortable

This project is an interactive Git tutorial and version control simulator. It provides a visual learning environment where users practice Git commands through structured lessons and a simulated terminal that does not affect the local file system. The application functions as a branching visualizer, rendering a graphical representation of commit trees and branch pointers that update in real time as commands are executed. It allows for the creation of custom exercises and the sharing of specific command sequences via unique links. The software covers educational challenges for mastering reposi

This library provides a set of tools for building dynamic data visualizations within React applications. It functions as a declarative framework that allows developers to define complex graphical representations through configuration settings rather than manual manipulation of the document object model. The library specializes in rendering interactive Cartesian charts, including line, bar, bubble, and area plots. It distinguishes itself by utilizing a coordinate-system-based mapping approach that translates raw data into pixel positions, combined with a component-based architecture that enabl

FUXA is a web-based SCADA system and industrial HMI software designed for monitoring and controlling industrial hardware. It functions as an industrial protocol gateway and data historian, enabling the ingestion of telemetry from programmable logic controllers and sensors through standard industrial communication protocols. The project features a flow-based automation engine that allows for the construction of complex operational logic using a visual node-and-edge environment. It utilizes SVG-based rendering for its graphical interfaces, allowing users to develop custom HMI widgets and dashbo

React is a JavaScript library for building user interfaces based on a component-driven architecture and unidirectional data flow.

This repository is a collection of node-based pipeline configurations, examples, and templates for generating AI media. It provides a workflow library and a curated gallery of blueprints designed for creating images, videos, and 3D assets using diffusion models. The project specifically offers a set of pre-configured node graphs for implementing advanced image generation and refinement techniques, with a focus on Stable Diffusion workflows. These examples demonstrate how to interconnect processing nodes to define complex generative logic without writing code. The available templates cover a

Elemental is a component-based design system and React UI framework. It provides a collection of pre-styled interface components and CSS patterns used to build consistent user interfaces and layout designs for web applications. The library functions as a customizable CSS UI library, allowing for the implementation of custom design systems by mapping design tokens and stylesheets to reusable elements. It integrates vector icon rendering to embed scalable graphic glyphs directly within interface components. The framework supports the composition of complex layouts using pre-made elements such

React Base Table is a library of reusable interface components designed for building complex, responsive data grids within web applications. It provides a high-performance foundation for rendering large datasets by utilizing window-based row virtualization, which ensures the user interface remains responsive even when displaying extensive collections of data. The library distinguishes itself through flexible layout and navigation capabilities, including support for hierarchical data structures that can be rendered as expandable tree rows. It allows for precise control over table geometry thro

Pencil is a cross-platform design environment and vector drawing application used for GUI prototyping and diagramming. It provides a canvas-based editor to create interactive user interface mockups, system architecture diagrams, and scalable visual representations of technical flows. The tool functions as a vector graphic editor that renders shapes as mathematical paths to ensure scalability across different resolutions. It includes a PDF export layout engine specifically designed to convert screen-based visual designs into fixed-layout documents for physical printing and distribution. The p

Vue Flow is a TypeScript library for building interactive node-based editors and flowcharts. It provides the core infrastructure for creating diagrams where users can drag, select, and connect nodes with edges, supporting pan and zoom navigation of the canvas. The library offers extensive control over graph behavior and appearance, including the ability to customize connection lines, define custom edge types, and configure zoom constraints and viewport defaults. It includes built-in components like a minimap for navigation, zoom controls, and a fit-view button, along with features for node re

ChatUI is a React conversational UI library and framework designed for building messaging interfaces. It provides a set of components for creating conversation flows, including message bubbles, input areas, and structured message hierarchies. The library distinguishes itself through specialized AI agent interface features, such as the visualization of an agent's reasoning process and simulated typing animations that render text character-by-character. It also includes a system of pre-designed conversational card templates for rendering banners, selection lists, and questionnaires within a cha

This project is a React component library and web UI design system designed for creating interactive web interfaces. It functions as a responsive frontend framework that provides a collection of modular building blocks to ensure visual consistency across different application pages and devices. The system utilizes a CSS-in-JS styling framework that generates and injects styles at runtime through a centralized property injection system. This approach allows for the implementation of a theme-driven architecture where layouts and color themes automatically adjust based on screen size and user pr

Arco Design is a React UI component library and design system framework used to build professional web interfaces. It provides a collection of pre-built visual elements and layouts designed to maintain a consistent design language across applications. The system features a token-based theming engine that utilizes hierarchical design variables and CSS variables to enable granular visual customization. This allows for the modification of global and component-level styles through a dedicated theme editor or loader to align the interface with specific brand identities. The framework supports ent