Repository: Bogdan-Lyashenko/js-code-to-svg-flowchart
Branch: master
Commit: d320335ecc67
Files: 118
Total size: 1.0 MB
Directory structure:
gitextract_yc8pzj4j/
├── .editorconfig
├── .github/
│ └── workflows/
│ └── codesee-arch-diagram.yml
├── .gitignore
├── .npmignore
├── .nvmrc
├── .prettierrc
├── LICENSE
├── README.md
├── _config.yml
├── babel.config.js
├── cli/
│ └── index.cli.js
├── dist/
│ ├── js2flowchart.js
│ └── js2flowchart.js.LICENSE.txt
├── docs/
│ ├── _config.yml
│ ├── examples/
│ │ ├── blur-shape-branch/
│ │ │ ├── code-sample.js
│ │ │ ├── index.html
│ │ │ └── index.js
│ │ ├── custom-modifier/
│ │ │ ├── code-sample.js
│ │ │ ├── index.html
│ │ │ └── index.js
│ │ ├── debug-rendering/
│ │ │ ├── code-sample.js
│ │ │ ├── index.html
│ │ │ └── index.js
│ │ ├── default/
│ │ │ ├── code-sample.js
│ │ │ ├── index.html
│ │ │ └── index.js
│ │ ├── defined-abstraction-level/
│ │ │ ├── code-sample.js
│ │ │ ├── index.html
│ │ │ └── index.js
│ │ ├── defined-color-theme/
│ │ │ ├── code-sample.js
│ │ │ ├── index.html
│ │ │ └── index.js
│ │ ├── defined-modifier/
│ │ │ ├── code-sample.js
│ │ │ ├── index.html
│ │ │ └── index.js
│ │ ├── dev/
│ │ │ ├── code-sample.js
│ │ │ ├── index.html
│ │ │ └── index.js
│ │ ├── node-destruction/
│ │ │ ├── code-sample.js
│ │ │ ├── index.html
│ │ │ └── index.js
│ │ └── one-module-presentation/
│ │ ├── code-sample.js
│ │ ├── index.html
│ │ └── index.js
│ └── live-editor/
│ ├── index.html
│ ├── index.js
│ └── worker.js
├── index.js
├── package.json
├── samples/
│ ├── blurShapeBranch.js
│ ├── customModifier.js
│ ├── debugRendering.js
│ ├── default.js
│ ├── definedAbstractionLevel.js
│ ├── definedColorTheme.js
│ ├── definedModifier.js
│ ├── dev.js
│ ├── nodeDestruction.js
│ └── oneModulePresentation.js
├── src/
│ ├── builder/
│ │ ├── FlowTreeBuilder.js
│ │ ├── FlowTreeModifier.js
│ │ ├── abstraction-levels/
│ │ │ ├── functionDependencies.js
│ │ │ └── functions.js
│ │ ├── abstractionLevelsConfigurator.js
│ │ ├── astBuilder.js
│ │ ├── astParserConfig.js
│ │ ├── converters/
│ │ │ ├── Harmony.js
│ │ │ └── core.js
│ │ ├── entryDefinitionsMap.js
│ │ └── modifiers/
│ │ └── modifiersFactory.js
│ ├── presentation-generator/
│ │ └── PresentationGenerator.js
│ ├── render/
│ │ └── svg/
│ │ ├── SVGBase.js
│ │ ├── SVGRender.js
│ │ ├── appearance/
│ │ │ ├── StyleThemeFactory.js
│ │ │ ├── TextContentConfigurator.js
│ │ │ └── themes/
│ │ │ ├── BlackAndWhite.js
│ │ │ ├── Blurred.js
│ │ │ ├── DefaultBaseTheme.js
│ │ │ └── Light.js
│ │ ├── connections/
│ │ │ └── ConnectionArrow.js
│ │ ├── shapes/
│ │ │ ├── BaseShape.js
│ │ │ ├── BreakStatement.js
│ │ │ ├── CallExpression.js
│ │ │ ├── CatchClause.js
│ │ │ ├── ClassDeclaration.js
│ │ │ ├── ConditionRhombus.js
│ │ │ ├── ContinueStatement.js
│ │ │ ├── DebuggerStatement.js
│ │ │ ├── DestructedNode.js
│ │ │ ├── ExportDeclaration.js
│ │ │ ├── ImportDeclaration.js
│ │ │ ├── ImportSpecifier.js
│ │ │ ├── LoopRhombus.js
│ │ │ ├── ObjectProperty.js
│ │ │ ├── Rectangle.js
│ │ │ ├── ReturnStatement.js
│ │ │ ├── Rhombus.js
│ │ │ ├── RootCircle.js
│ │ │ ├── SwitchCase.js
│ │ │ ├── SwitchStatement.js
│ │ │ ├── ThrowStatement.js
│ │ │ ├── TryStatement.js
│ │ │ └── VerticalEdgedRectangle.js
│ │ ├── shapesDefinitionsMap.js
│ │ ├── shapesFactory.js
│ │ └── svgObjectsBuilder.js
│ └── shared/
│ ├── constants.js
│ └── utils/
│ ├── composition.js
│ ├── flatten.js
│ ├── geometry.js
│ ├── iteratorBuilder.js
│ ├── logger.js
│ ├── string.js
│ ├── svgPrimitives.js
│ ├── traversal.js
│ ├── traversalWithTreeLevelsPointer.js
│ └── treeLevelsPointer.js
└── webpack.config.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .editorconfig
================================================
root = true
[*]
indent_style = space
indent_size = 4
end_of_line = LF
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
================================================
FILE: .github/workflows/codesee-arch-diagram.yml
================================================
on:
push:
branches:
- master
pull_request_target:
types: [opened, synchronize, reopened]
name: CodeSee Map
jobs:
test_map_action:
runs-on: ubuntu-latest
continue-on-error: true
name: Run CodeSee Map Analysis
steps:
- name: checkout
id: checkout
uses: actions/checkout@v2
with:
repository: ${{ github.event.pull_request.head.repo.full_name }}
ref: ${{ github.event.pull_request.head.ref }}
fetch-depth: 0
# codesee-detect-languages has an output with id languages.
- name: Detect Languages
id: detect-languages
uses: Codesee-io/codesee-detect-languages-action@latest
- name: Configure JDK 16
uses: actions/setup-java@v2
if: ${{ fromJSON(steps.detect-languages.outputs.languages).java }}
with:
java-version: '16'
distribution: 'zulu'
# CodeSee Maps Go support uses a static binary so there's no setup step required.
- name: Configure Node.js 14
uses: actions/setup-node@v2
if: ${{ fromJSON(steps.detect-languages.outputs.languages).javascript }}
with:
node-version: '14'
- name: Configure Python 3.x
uses: actions/setup-python@v2
if: ${{ fromJSON(steps.detect-languages.outputs.languages).python }}
with:
python-version: '3.x'
architecture: 'x64'
- name: Configure Ruby '3.x'
uses: ruby/setup-ruby@v1
if: ${{ fromJSON(steps.detect-languages.outputs.languages).ruby }}
with:
ruby-version: '3.0'
# CodeSee Maps Rust support uses a static binary so there's no setup step required.
- name: Generate Map
id: generate-map
uses: Codesee-io/codesee-map-action@latest
with:
step: map
github_ref: ${{ github.ref }}
languages: ${{ steps.detect-languages.outputs.languages }}
- name: Upload Map
id: upload-map
uses: Codesee-io/codesee-map-action@latest
with:
step: mapUpload
api_token: ${{ secrets.CODESEE_ARCH_DIAG_API_TOKEN }}
github_ref: ${{ github.ref }}
- name: Insights
id: insights
uses: Codesee-io/codesee-map-action@latest
with:
step: insights
api_token: ${{ secrets.CODESEE_ARCH_DIAG_API_TOKEN }}
github_ref: ${{ github.ref }}
================================================
FILE: .gitignore
================================================
# Logs
logs
*.log
build/
# Runtime data
pids
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directory
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
node_modules
# Remove some common IDE working directories
.idea
.vscode
.DS_STORE
================================================
FILE: .npmignore
================================================
docs
================================================
FILE: .nvmrc
================================================
v6.10
================================================
FILE: .prettierrc
================================================
{
"printWidth": 100,
"parser": "babylon",
"singleQuote": true,
"tabWidth": 4
}
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2017 Bohdan Liashenko
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
> Why? While I've been working on [Under-the-hood-ReactJS](https://github.com/Bogdan-Lyashenko/Under-the-hood-ReactJS) I spent enormous amount of time on creating schemes. Each change in code or flowchart affects all entire scheme instantly, forcing you to move and align 'broken pieces'. Just repeated manual work...
### For multiple files support (and other cool features to simplify codebase learning and documentation) checkout [Codecrumbs project](https://codecrumbs.io/) I am building right now.
Imagine a library which takes any JS code and generate SVG flowchart from it, works on client and server. Allows you easily adjust styles scheme for your context or demonstrate your code logic from different abstractions levels. Highlighting, destructing whole blocks, custom modifiers for your needs etc.
# js2flowchart.js [](https://twitter.com/intent/tweet?text=Generate%20beautiful%20flowcharts%20from%20JavaScript&url=https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart&via=bliashenko&hashtags=javascript,flowchart,svg)
[](https://opensource.org/licenses/mit-license.php) [](https://badge.fury.io/js/js2flowchart)
js2flowchart is a tool for generating beautiful SVG flowcharts™ from JavaScript code.
To get started install package from NPM
> yarn add js2flowchart
or try it right away at [codepen sample](https://codepen.io/Bogdan-Lyashenko/pen/XzmzNv), or play with the demo below.
## [Demo](https://bogdan-lyashenko.github.io/js-code-to-svg-flowchart/docs/live-editor/index.html)
Check out live [**code editor**](https://bogdan-lyashenko.github.io/js-code-to-svg-flowchart/docs/live-editor/index.html), paste your code and **download SVG file** of flowchart!
[
](https://bogdan-lyashenko.github.io/js-code-to-svg-flowchart/docs/live-editor/index.html)
### What does js2flowchart do?
js2flowchart takes your JS code and returns SVG flowchart, works on client/server, support ES6.
Main features:
- **defined abstractions levels** to render only import/exports, classes/function names, function dependencies to learn/explain the code step by step.
- **custom abstractions levels support** create your own one
- **presentation generator** to generate list of SVGs in order to different abstractions levels
- **defined flow tree modifiers** to map well-known APIs like i.e. [].map, [].forEach, [].filter to Loop structure on scheme etc.
- **destruction modifier** to replace block of code with one shape on scheme
- **custom flow tree modifiers support** create your own one
- **flow tree ignore filter** to omit some code nodes completely i.e. log lines
- **focus node or entire code logic branch** to highlight important section on scheme
- **blur node or entire code logic branch** to hide less-important stuff
- **defined styles themes supports** choose one you like
- **custom themes support** create your own one which fits your context colors better
- **custom colors and styles support** provides handy API to change specific styles without boilerplate
Use cases:
- **explain/document** your code by flowcharts
- **learn** other's code by visual understanding
- **create** flowcharts for any process simply described by valid JS syntax
### CLI
You can simply generate SVG files from your local JS files using CLI tool.
Install js2flowchart globally by running:
> yarn global add js2flowchart
Or in a project by running:
> yarn add js2flowchart --dev
Open terminal and navigate to needed directory with JS file you want to visualize (e.g. './my-project/main.js').
Run the command (if you installed it globally)
```cli
js2flowchart main.js
```
Or add this to your _package.json_ file:
```json
{
"scripts": {
"js2flowchart": "js2flowchart"
}
}
```
And run (with either npm or yarn):
```cli
yarn run js2flowchart main.js
```
After script is executed observe log ```SVG file was created: ./js2flowchart/main.js.svg```. SVG file will be placed in new directory '/js2flowchart' near your JS file.
### API and examples
You can find sources for examples explained below in [docs directory](/docs).
**In examples only** js2flowchart library included explicitly, by ```