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

★ 7,105JavaScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((js2flowchart))
    What it does
      Code to SVG diagram
      Shows branches and loops
      Shows function structure
    Detail levels
      Full logic trace
      Class and function names
      Imports and exports only
    Output options
      SVG file export
      Browser live demo
      Highlighted nodes
    Use cases
      Auto documentation
      Code explanation
      Architecture diagrams

mindmap root((js2flowchart)) What it does Code to SVG diagram Shows branches and loops Shows function structure Detail levels Full logic trace Class and function names Imports and exports only Output options SVG file export Browser live demo Highlighted nodes Use cases Auto documentation Code explanation Architecture diagrams

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Generate up-to-date architecture diagrams from JavaScript source files without drawing them by hand.

USE CASE 2

Document a module by exporting its import and export structure as an SVG for a README or wiki.

USE CASE 3

Visualize the logic flow inside a complex function to explain it clearly to a teammate.

Tech stack

JavaScriptES6SVG

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

js2flowchart is a JavaScript library that takes any JavaScript code and turns it into a visual flowchart exported as an SVG image. You paste in code, and the tool produces a diagram showing how the logic flows: which branches are taken, what loops exist, and how functions relate. It works both in a browser and on a server, and supports modern JavaScript including ES6 syntax. One of the more practical features is the ability to control how much detail the chart shows. You can ask it to render only the top-level imports and exports of a file, just the class and function names, or a full step-by-step logic trace. This lets you zoom out to get a bird's-eye view of a module or zoom in on a specific function's behavior. You can also highlight specific nodes to draw attention to an important section, or blur nodes to de-emphasize less critical parts. The library includes a command-line tool so you can point it at a local JavaScript file and get an SVG file back without writing any code. For projects where you want to document code or explain it to others, this gives you a way to generate up-to-date diagrams directly from the source rather than drawing them by hand. A live demo editor is linked from the repository where you can paste code and download the resulting SVG. Customization is supported through themes and style overrides. The project also lets you define your own abstraction levels or modify how specific code patterns are mapped to flowchart shapes, for example treating array methods like map and filter as loop structures in the diagram. The original motivation, as described in the README, was reducing the manual effort of drawing and redrawing architecture diagrams every time code changes.

Copy-paste prompts

Prompt 1

I want to use js2flowchart from the command line to generate an SVG from my main.js file. Walk me through the exact commands.

Prompt 2

How do I use js2flowchart to render only the top-level imports and exports of a JavaScript file, not the full step-by-step logic?

Prompt 3

Show me how to highlight one specific function in the js2flowchart output to draw attention to it in a diagram.

Prompt 4

How do I customize js2flowchart so that array methods like .map and .filter are shown as loop structures in the diagram?

Prompt 5

I want to blur out less important parts of a js2flowchart diagram to focus the viewer's attention. How do I do that?

Open on GitHub → Explain another repo

← bogdan-lyashenko on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.