Repolode
Bogdan-Lyashenko

Bogdan-Lyashenko/js-code-to-svg-flowchart

A JavaScript library and CLI that converts JS source code into SVG flowcharts, with abstraction levels, code-block modifiers and themes.

Stars
7,105
Forks
478
Open issues
45
Last commit
3 years ago

What is it?

js2flowchart parses JavaScript code into an abstract syntax tree, builds a flow tree from it, and renders that tree as an SVG flowchart. It runs on both client and server and supports ES6 syntax. The output can be generated through a JavaScript API or from the command line with a single file argument.

The library lets you control how much detail appears. Predefined abstraction levels show only imports and exports, class and function names, or function dependencies, and you can define custom levels. Modifiers can map iterators such as map, forEach and filter to loop shapes, collapse a block into a single shape, or ignore nodes such as log calls. Focus and blur functions highlight or hide specific branches of the chart.

Rendering is configurable through predefined themes (default, black and white, blurred, light) or custom color and style settings. A presentation generator produces a series of SVGs at different abstraction levels, and a live online editor lets you paste code and download the result.

Key features

  • 01Converts JavaScript (ES6) source code into SVG flowcharts in browsers or Node.js.
  • 02Provides a CLI that generates an SVG file from a local JS file.
  • 03Offers predefined abstraction levels such as imports/exports, classes and function dependencies.
  • 04Lets you define custom abstraction levels and flow tree modifiers.
  • 05Includes focus, blur and block-destruction controls for the chart.
  • 06Ships with several color themes and supports custom styling.

Use cases

  • Documenting how a module or function works with a visual diagram.
  • Learning an unfamiliar codebase by viewing its control flow step by step.
  • Generating presentation slides that move from high-level structure to detailed logic.
  • Creating flowcharts for a process described in valid JS syntax.

Quick start

  1. 1

    Install the package from NPM

    yarn add js2flowchart
  2. 2

    Install globally to use the CLI anywhere

    yarn global add js2flowchart
  3. 3

    Generate an SVG flowchart from a JS file

    js2flowchart main.js

Things to know

  • Documentation mentions multiple-file support is handled by a separate project, Codecrumbs, not this library.
  • Last code push was in October 2023, so maintenance may be slow.
  • The README does not describe the flowchart output for code beyond the examples shown.

Topics

FAQ

What is js-code-to-svg-flowchart?
A JavaScript library and CLI that converts JS source code into SVG flowcharts, with abstraction levels, code-block modifiers and themes. js2flowchart parses JavaScript code into an abstract syntax tree, builds a flow tree from it, and renders that tree as an SVG flowchart. It runs on both client and server and supports ES6 syntax. The output can be generated through a JavaScript API or from the command line with a single file argument.
Is js-code-to-svg-flowchart free to use? What license does it have?
js-code-to-svg-flowchart is open source under the MIT license. Check the license terms before using it in commercial products.
Is js-code-to-svg-flowchart still maintained?
No commits for 6+ months. The last commit to js-code-to-svg-flowchart was on Oct 2, 2023.
What can I use js-code-to-svg-flowchart for?
Documenting how a module or function works with a visual diagram. Learning an unfamiliar codebase by viewing its control flow step by step. Generating presentation slides that move from high-level structure to detailed logic. Creating flowcharts for a process described in valid JS syntax.
How do I install js-code-to-svg-flowchart?
Install the package from NPM: yarn add js2flowchart Install globally to use the CLI anywhere: yarn global add js2flowchart Generate an SVG flowchart from a JS file: js2flowchart main.js
Where can I get js-code-to-svg-flowchart?
The source code and installation instructions are on GitHub: https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects