# adrai/flowchart.js **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/adrai-flowchart-js).** 8,689 stars · 1,204 forks · JavaScript · MIT ## Links - GitHub: https://github.com/adrai/flowchart.js - Homepage: http://flowchart.js.org/ - awesome-repositories: https://awesome-repositories.com/repository/adrai-flowchart-js.md ## Topics `diagram` `flowchart` `javascript` `svg` ## Description 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 enables state-driven visual mapping, where semantic states such as past, current, or future are assigned predefined color and opacity values to reflect process progress. Additionally, it allows embedding clickable hyperlinks within nodes for external URL navigation. Beyond core rendering, the tool provides options for customizing diagram appearance, including colors, fonts, line widths, and arrow styles. It supports conditional and parallel branches with custom labels, and allows styling individual flowchart symbols or connections directly within the DSL syntax. The library is distributed as a JavaScript package with documentation covering its DSL syntax and API. ## Tags ### Graphics & Multimedia - [Flowchart Rendering](https://awesome-repositories.com/f/graphics-multimedia/flowchart-rendering.md) — Renders SVG flowcharts by parsing a simple text-based DSL that defines nodes and connections. ([source](https://cdn.jsdelivr.net/gh/adrai/flowchart.js@master/README.md)) - [Flowchart DSL Parsers](https://awesome-repositories.com/f/graphics-multimedia/flowchart-rendering/flowchart-dsl-parsers.md) — Parses a custom DSL that defines nodes, connections, and visual styles into structured diagram data. - [Customizable Flowchart Stylers](https://awesome-repositories.com/f/graphics-multimedia/flowchart-rendering/customizable-flowchart-stylers.md) — Ships per-node and per-edge styling overrides for fill, stroke, font, and CSS classes directly in the DSL. - [Progress-Annotated Flowcharts](https://awesome-repositories.com/f/graphics-multimedia/flowchart-rendering/progress-annotated-flowcharts.md) — Annotates flowchart nodes with statuses like past, current, or approved to track process progress. - [State-Annotated Flowcharts](https://awesome-repositories.com/f/graphics-multimedia/flowchart-rendering/state-annotated-flowcharts.md) — Assigns visual states such as past, current, future, approved, or rejected to flowchart elements. ([source](http://flowchart.js.org/)) - [Symbol-Specific Stylers](https://awesome-repositories.com/f/graphics-multimedia/flowchart-rendering/symbol-specific-stylers.md) — Sets distinct colors, fonts, and CSS classes for specific symbol types such as start, end, or process nodes. ([source](http://flowchart.js.org/)) ### Data & Databases - [SVG Diagramming Libraries](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/visualization-frameworks-libraries/svg-diagramming-libraries.md) — Generates SVG flow chart diagrams from textual representations without requiring a graphical editor. - [Diagram Edge Routers](https://awesome-repositories.com/f/data-databases/node-connection-extractions/diagram-edge-routers.md) — Links nodes using the arrow operator and specifies connection directions to control the flow layout. ([source](https://cdn.jsdelivr.net/gh/adrai/flowchart.js@master/README.md)) ### Scientific & Mathematical Computing - [Flowchart Symbol Renderers](https://awesome-repositories.com/f/scientific-mathematical-computing/mathematical-symbol-rendering/point-symbol-mark-renderers/flowchart-symbol-renderers.md) — Maps each DSL keyword to a distinct SVG shape (rectangle, diamond, parallelogram) for flowchart symbols. - [SVG Path Routers](https://awesome-repositories.com/f/scientific-mathematical-computing/route-path-smoothing/svg-path-routers.md) — Computes SVG path coordinates from node connections and arrow directions to produce routed edges. ### Software Engineering & Architecture - [DSL-to-SVG Parsers](https://awesome-repositories.com/f/software-engineering-architecture/abstract-syntax-tree-parsing/dsl-to-svg-parsers.md) — Parses a domain-specific language into an abstract syntax tree and renders it as SVG graphics. - [Branch-Labeled Paths](https://awesome-repositories.com/f/software-engineering-architecture/conditional-branching/branch-labeled-paths.md) — Directs flow into multiple paths from condition or parallel nodes with custom branch labels. ([source](https://cdn.jsdelivr.net/gh/adrai/flowchart.js@master/README.md)) - [Labeled Branch Paths](https://awesome-repositories.com/f/software-engineering-architecture/execution-flow-control/conditional-branching/labeled-branch-paths.md) — Models decision points and concurrent branches in a process with labeled paths. - [Text-to-Diagram Generators](https://awesome-repositories.com/f/software-engineering-architecture/text-to-diagram-generators.md) — Converts a text-based DSL into SVG flowcharts for documentation and planning purposes. - [Flowchart Node Types](https://awesome-repositories.com/f/software-engineering-architecture/workflow-nodes/node-type-registries/flowchart-node-types.md) — Supports multiple node shapes like start, end, operation, condition, parallel, and subroutine for flowchart steps. ([source](https://cdn.jsdelivr.net/gh/adrai/flowchart.js@master/README.md)) - [Node URL Attachers](https://awesome-repositories.com/f/software-engineering-architecture/project-management-governance/project-management/issue-linking-utilities/external-link-attachers/node-url-attachers.md) — Attaches clickable hyperlinks to any node that open in a new tab or navigate the current page. ([source](https://cdn.jsdelivr.net/gh/adrai/flowchart.js@master/README.md)) ### Content Management & Publishing - [External Hyperlinks](https://awesome-repositories.com/f/content-management-publishing/external-hyperlinks.md) — Embeds clickable SVG anchor elements around nodes to support external URL navigation. ### Development Tools & Productivity - [URL-Attached Nodes](https://awesome-repositories.com/f/development-tools-productivity/visual-to-code-sync-engines/code-to-graph-parsers/symbol-to-node-linking/url-attached-nodes.md) — Attaches clickable URLs to flowchart nodes for navigation to external resources or details. ### User Interface & Experience - [Graph Connection Styling](https://awesome-repositories.com/f/user-interface-experience/visual-style-customization/chart-visual-style-customizations/graph-connection-styling.md) — Applies custom stroke colors, widths, and arrow styles to individual nodes or connection paths directly in the DSL. ([source](https://cdn.jsdelivr.net/gh/adrai/flowchart.js@master/README.md)) - [Diagram Element Styling](https://awesome-repositories.com/f/user-interface-experience/visual-styling-rules/diagram-element-styling.md) — Applies visual styling options like colors, fonts, line widths, and arrow styles to the generated flowchart. ([source](http://flowchart.js.org/)) ### Web Development - [State-Driven Visuals](https://awesome-repositories.com/f/web-development/component-based-architectures/component-based-architectures/state-driven-visuals.md) — Maps semantic states (past, current, future) to predefined color and opacity values for progress visualization.