# bogdan-lyashenko/js-code-to-svg-flowchart

**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/bogdan-lyashenko-js-code-to-svg-flowchart).**

7,121 stars · 483 forks · JavaScript · mit

## Links

- GitHub: https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart
- awesome-repositories: https://awesome-repositories.com/repository/bogdan-lyashenko-js-code-to-svg-flowchart.md

## Topics

`ast` `es6` `flowchart` `javascript` `learning` `scheme` `svg` `svg-flowchart` `visualisation`

## Description

js-code-to-svg-flowchart is a JavaScript source code visualizer and static code analysis tool that converts programming blocks and iterators into scalable vector graphics flowcharts. It functions as a code-to-diagram converter that maps the structural logic and sequence of operations from source files into visual representations.

The system includes a command line interface for generating SVG flowcharts directly from local source code. It features a transformation engine that maps code nodes to schematic shapes and supports a sequence of images at varying abstraction levels to explain logic step-by-step.

The tool provides capabilities for abstraction level filtering and logic branch management to simplify visualizations by including or excluding specific elements. It also includes a customization system for applying predefined color schemes and styles to different node types in the generated diagrams.

## Tags

### Development Tools & Productivity

- [Flowchart Generators](https://awesome-repositories.com/f/development-tools-productivity/diagramming-tools/process-and-flow-mapping/flowchart-generators.md) — Ships a command line interface that automatically generates SVG flowcharts from source code for technical documentation.
- [Code-to-Diagram Converters](https://awesome-repositories.com/f/development-tools-productivity/code-to-diagram-converters.md) — Turns programming blocks and iterators into schematic shapes and flow-based SVG representations.
- [Code-to-SVG Visualizers](https://awesome-repositories.com/f/development-tools-productivity/code-to-svg-visualizers.md) — Transforms JavaScript source code into visual SVG flowcharts for logic analysis and documentation. ([source](https://bogdan-lyashenko.github.io/js-code-to-svg-flowchart/docs/live-editor/index.html))
- [Source Code Mapping](https://awesome-repositories.com/f/development-tools-productivity/source-code-mapping.md) — Maps JavaScript source code to visual SVG flowcharts to represent program execution flow.
- [AST Node Collection Filtering](https://awesome-repositories.com/f/development-tools-productivity/ast-transformation-tools/ast-node-interpolation/ast-node-collection-filtering.md) — Provides filtering of AST nodes to control the level of detail in generated diagrams.
- [AST Structure Modification](https://awesome-repositories.com/f/development-tools-productivity/ast-transformation-tools/ast-structure-modification.md) — Transforms code nodes into schematic shapes, such as converting iterators into loop representations. ([source](https://cdn.jsdelivr.net/gh/bogdan-lyashenko/js-code-to-svg-flowchart@master/README.md))
- [Visualization Detail Controls](https://awesome-repositories.com/f/development-tools-productivity/visualization-detail-controls.md) — A rendering control to include or exclude specific logical elements like imports or class definitions to simplify visualizations. ([source](https://cdn.jsdelivr.net/gh/bogdan-lyashenko/js-code-to-svg-flowchart@master/README.md))

### Graphics & Multimedia

- [SVG Path Serializers](https://awesome-repositories.com/f/graphics-multimedia/svg-path-serializers.md) — Converts structured logic trees into XML-based SVG path data for vector rendering.
- [Diagram Layout Algorithms](https://awesome-repositories.com/f/graphics-multimedia/diagram-layout-algorithms.md) — Calculates X and Y positions for logical elements to ensure a clear and linear visual flow.
- [SVG Image Exports](https://awesome-repositories.com/f/graphics-multimedia/svg-image-exports.md) — Saves generated code logic representations as standalone XML-formatted SVG files. ([source](https://bogdan-lyashenko.github.io/js-code-to-svg-flowchart/docs/live-editor/index.html))
- [Automated Visual Documentation](https://awesome-repositories.com/f/graphics-multimedia/website-snapshot-generators/automated-visual-documentation.md) — Automates the creation of visual logic diagrams for use in technical architecture documentation.

### Programming Languages & Runtimes

- [Logic Visualizers](https://awesome-repositories.com/f/programming-languages-runtimes/source-code-compilers/source-code-templates/source-code-transformation-engines/javascript-source-parsers/logic-visualizers.md) — Transforms JavaScript source code into SVG flowcharts to visualize program logic and execution flow.

### Scientific & Mathematical Computing

- [Recursive Tree Traversal Algorithms](https://awesome-repositories.com/f/scientific-mathematical-computing/recursive-tree-traversal-algorithms.md) — Uses recursive tree traversal algorithms to flatten hierarchical code blocks into sequential flowchart steps.

### Software Engineering & Architecture

- [Abstract Syntax Tree Parsing](https://awesome-repositories.com/f/software-engineering-architecture/abstract-syntax-tree-parsing.md) — Implements the conversion of JavaScript source code into a structured tree for logic analysis.
- [Static Logic Visual Analysis](https://awesome-repositories.com/f/software-engineering-architecture/static-logic-visual-analysis.md) — Maps complex code branches and sequences visually to identify bottlenecks and simplify codebase understanding.

### Testing & Quality Assurance

- [Static Code Analysis Tools](https://awesome-repositories.com/f/testing-quality-assurance/code-quality-review/code-quality-tools/static-code-analysis-tools.md) — Provides automated structural analysis of JavaScript source code to map logical sequences into visual diagrams.

### Education & Learning Resources

- [Incremental Logic Presentations](https://awesome-repositories.com/f/education-learning-resources/incremental-logic-presentations.md) — Produces a sequence of SVG images at varying abstraction levels to explain code logic step-by-step. ([source](https://cdn.jsdelivr.net/gh/bogdan-lyashenko/js-code-to-svg-flowchart@master/README.md))
- [Architectural Onboarding](https://awesome-repositories.com/f/education-learning-resources/technical-onboarding-programs/architectural-onboarding.md) — Helps new developers understand system logic through step-by-step visual presentations of the codebase.