Flowmaker is an VSCode extension used to generate a flowchart in SVG format of javascript code to demonstrate Code flow scheme from different level of conduct.

Note: For only using the onEditor SVG generation follow the livepreview branch code.

• Write Javascript.
• Select a function or object or entire file.
• Hit ctrl-f1.
• Choose either 'Flowmake onEditor' or 'Flowmake onBrowser'.
• 'Flowmake onEditor' generates the SVG layout in side column of editor itself.
• 'Flowmake onBrowser' starts a node server on localhost with port 8080 to view and download the SVG code.

From VS Code Market Install Flowmaker:

Install Flowmaker extension
Open any .js file
hit Fn+f1 or F1
choose Flowmake onEditor or Flowmake onBrowser

or, Clone the source locally:

$ git clone https://github.com/aryaminus/flowmaker
$ cd flowmaker
$ npm install

and, Start the application in development mode

hit Ctrl+f5
hit Fn+f1 or F1
choose Flowmake onEditor or Flowmake onBrowser

1. js2flowchart
2. atom-js-code-to-svg-to-preview
3. express
4. socket.io

• JSX support
• Flow,CLI and Typescript support
• Chrome extension for dev-tools
• Fetching SVG to generate and manipulate code to genrate code from flowchart

1. Node server installed
2. Socket.io and express installed ie.

npm install --save express socket.io

1. Fork it (https://github.com/aryaminus/flowmaker/fork)
2. Create your feature branch (git checkout -b feature/fooBar)
3. Commit your changes (git commit -am 'Add some fooBar')
4. Push to the branch (git push origin feature/fooBar)
5. Create a new Pull Request

Enjoy!