A Claude agent skill that builds interactive isometric SVG illustrations of real machines and systems to explain technical ideas.
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
Install the package from NPM
yarn add js2flowchart - 2
Install globally to use the CLI anywhere
yarn global add js2flowchart - 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
A small, synchronous renderer that turns Mermaid diagram text into SVG with no runtime dependencies.
A experimental TypeScript and JavaScript compiler that turns programs into native executables or WebAssembly, without requiring Node.js at runtime.
A terminal tool that replays Git commits as animated typing sessions with syntax highlighting and file tree transitions.
An agent skill and zero-dependency linter that makes coding agents draw hand-placed SVG diagrams in one consistent house style.
Free domain registration service with multiple extensions, plus a DNS and website learning guide, documented in this repository.