Awesome GitHub RepositoriesDiagram Element Styling

PlantUML is a text-to-diagram generator that translates human-readable markup into structured graphical representations. It functions as a diagram-as-code tool, allowing users to create and maintain technical documentation, architectural models, and flowcharts by decoupling diagram content from visual layout. The project distinguishes itself through a comprehensive rendering pipeline that processes domain-specific markup into various output formats, including vector and raster graphics. It utilizes a graph-based layout engine to calculate spatial positioning, while a declarative styling layer

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

react-diagrams is a framework for building interactive node-and-link diagrams and visual graphs within React applications. It functions as an interactive graph visualization tool and visual workflow designer, providing a system for rendering manipulatable canvases of connected nodes. The library is distinguished by its ability to act as a serializable state diagram manager, converting complex node layouts and connection states into storable data formats for session persistence. It further allows for custom behavior extensions to modify core logic and modules to implement project-specific func

Flowchart.js is a JavaScript library that converts a simple text-based domain-specific language into SVG flowcharts. It parses DSL keywords to define node types such as start, end, operation, condition, parallel, and subroutine, then renders them as distinct SVG shapes connected by directional paths. The library distinguishes itself through its styling and interactivity capabilities. It supports applying CSS classes to SVG elements for external stylesheet overrides, as well as inline attribute overrides for per-node and per-edge visual properties like fill, stroke, and font. Flowchart.js also

Fireworks Tech Graph is a tool that generates SVG and PNG technical diagrams from natural language descriptions, supporting both English and Chinese input. It produces publication-quality diagrams for AI architectures, UML types, and other technical domains without requiring manual drawing or diagramming syntax. The tool distinguishes itself through a semantic shape vocabulary and arrow-based flow encoding that conveys component roles and data flow types through consistent geometric shapes, stroke widths, dash patterns, and colors rather than relying on textual labels. It renders the same dia

Penrose is a compiler that transforms structured mathematical notation into optimized SVG diagrams. It uses a three-stage pipeline of separate domain, substance, and style files to define mathematical objects, relationships, and visual presentation, then solves continuous optimization problems with user-defined spatial constraints and objectives to automatically arrange diagram elements. The system separates diagram content from visual style using distinct declarative languages, and provides a typed domain language with subtype hierarchies for mathematical objects. It supports embedding compi

C4-PlantUML is a code-driven library that generates C4 model software architecture diagrams from PlantUML source text. It provides a set of reusable macros for creating system context, container, component, and deployment diagrams, enabling architects and developers to describe and communicate software architecture using the C4 model notation directly from diagram-as-code source files. The library distinguishes itself through hierarchical element nesting, which builds diagrams by nesting elements inside boundaries using PlantUML's rectangle and package constructs, and layout-direction control

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

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

Mermaid-cli is a command line interface and programmatic tool that converts text-based diagram syntax into static visual assets. It functions as a headless browser renderer and markdown diagram processor, enabling the generation of diagrams through a CLI or a JavaScript-based generator. The tool distinguishes itself by supporting the conversion of diagram definitions into multiple image formats, including SVG, PNG, and PDF. It allows for custom diagram styling by applying external CSS files to override default themes and add visual animations. The project provides capabilities for markdown i

VivaGraphJS is a JavaScript graph visualization library used to render interactive network diagrams and relational data in web browsers. It features a force-directed layout engine that employs physics-based simulations, using spring and charge models to calculate balanced spatial distributions for nodes and links. The library utilizes a modular rendering architecture that decouples mathematical layout logic from the visual output. This allows for interchangeable rendering pipelines, supporting both vector-based SVG diagrams and hardware-accelerated WebGL rendering for large-scale visualizatio

Flowchart Fun is a text-based diagram generator and interactive visual canvas editor that automatically transforms plain text input and natural language prompts into structured flowcharts and diagrams without requiring manual node placement. The application combines automated layout algorithms and structural templates with a web canvas interface for organizing layouts, applying custom shapes, borders, colors, and text sizes to diagram nodes and edges. The platform includes multi-format export pipelines that convert finished charts directly into vector graphics, raster images, and document dat

likec4 is an architecture-as-code framework that transforms text-based architecture definitions into interactive diagrams, static websites, and image files. It serves as a system architecture visualizer and C4 model diagram generator, allowing users to define software components, boundaries, and deployment infrastructure using a domain-specific language. The tool distinguishes itself by providing a modeling environment with Language Server Protocol integration for real-time validation and autocomplete. It enables interactive architecture documentation where users can navigate through hierarch