{"id":15033638,"url":"https://github.com/bogdan-lyashenko/js-code-to-svg-flowchart","last_synced_at":"2025-05-13T21:10:18.382Z","repository":{"id":38716336,"uuid":"98823234","full_name":"Bogdan-Lyashenko/js-code-to-svg-flowchart","owner":"Bogdan-Lyashenko","description":"js2flowchart - a visualization library to convert any JavaScript code into beautiful SVG flowchart. Learn other’s code. Design your code. Refactor code. Document code. Explain code.","archived":false,"fork":false,"pushed_at":"2023-10-02T19:41:41.000Z","size":14235,"stargazers_count":7095,"open_issues_count":44,"forks_count":482,"subscribers_count":138,"default_branch":"master","last_synced_at":"2025-04-28T14:57:27.907Z","etag":null,"topics":["ast","es6","flowchart","javascript","learning","scheme","svg","svg-flowchart","visualisation"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Bogdan-Lyashenko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2017-07-30T20:34:13.000Z","updated_at":"2025-04-26T11:35:04.000Z","dependencies_parsed_at":"2023-10-03T04:32:35.319Z","dependency_job_id":null,"html_url":"https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart","commit_stats":{"total_commits":223,"total_committers":10,"mean_commits":22.3,"dds":"0.058295964125560484","last_synced_commit":"d320335ecc673bf1e14526a97dd8d68ea8e64bd6"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bogdan-Lyashenko%2Fjs-code-to-svg-flowchart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bogdan-Lyashenko%2Fjs-code-to-svg-flowchart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bogdan-Lyashenko%2Fjs-code-to-svg-flowchart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bogdan-Lyashenko%2Fjs-code-to-svg-flowchart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Bogdan-Lyashenko","download_url":"https://codeload.github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254029002,"owners_count":22002283,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ast","es6","flowchart","javascript","learning","scheme","svg","svg-flowchart","visualisation"],"created_at":"2024-09-24T20:22:04.768Z","updated_at":"2025-05-13T21:10:13.369Z","avatar_url":"https://github.com/Bogdan-Lyashenko.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e 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...\n\n\n### 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.\n\nImagine 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.\n\n# js2flowchart.js [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Generate%20beautiful%20flowcharts%20from%20JavaScript\u0026url=https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart\u0026via=bliashenko\u0026hashtags=javascript,flowchart,svg)\n[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php) [![npm version](https://badge.fury.io/js/js2flowchart.svg)](https://badge.fury.io/js/js2flowchart)\n\njs2flowchart is a tool for generating beautiful SVG flowcharts\u0026trade; from JavaScript code.\n\nTo get started install package from NPM\n\u003e yarn add js2flowchart\n\nor try it right away at [codepen sample](https://codepen.io/Bogdan-Lyashenko/pen/XzmzNv), or play with the demo below.\n\n## [Demo](https://bogdan-lyashenko.github.io/js-code-to-svg-flowchart/docs/live-editor/index.html)\nCheck 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!\n\n[\u003cimg src=\"/docs/live-editor/demo.gif\" width=\"700\"\u003e](https://bogdan-lyashenko.github.io/js-code-to-svg-flowchart/docs/live-editor/index.html)\n\n### What does js2flowchart do?\njs2flowchart takes your JS code and returns SVG flowchart, works on client/server, support ES6.\n\nMain features:\n- **defined abstractions levels** to render only import/exports, classes/function names, function dependencies to learn/explain the code step by step.\n- **custom abstractions levels support** create your own one\n- **presentation generator** to generate list of SVGs in order to different abstractions levels\n- **defined flow tree modifiers** to map well-known APIs like i.e. [].map, [].forEach, [].filter to Loop structure on scheme etc.\n- **destruction modifier** to replace block of code with one shape on scheme\n- **custom flow tree modifiers support** create your own one\n- **flow tree ignore filter** to omit some code nodes completely i.e. log lines\n- **focus node or entire code logic branch** to highlight important section on scheme\n- **blur node or entire code logic branch** to hide less-important stuff\n- **defined styles themes supports** choose one you like\n- **custom themes support** create your own one which fits your context colors better\n- **custom colors and styles support** provides handy API to change specific styles without boilerplate\n\nUse cases:\n- **explain/document** your code by flowcharts\n- **learn** other's code by visual understanding\n- **create** flowcharts for any process simply described by valid JS syntax\n\n### CLI\nYou can simply generate SVG files from your local JS files using CLI tool.\nInstall js2flowchart globally by running:\n\u003e yarn global add js2flowchart\n\nOr in a project by running:\n\u003e yarn add js2flowchart --dev\n\nOpen terminal and navigate to needed directory with JS file you want to visualize (e.g. './my-project/main.js').\nRun the command (if you installed it globally)\n```cli\njs2flowchart main.js\n```\nOr add this to your _package.json_ file:\n```json\n{\n  \"scripts\": {\n    \"js2flowchart\": \"js2flowchart\"\n  }\n}\n```\nAnd run (with either npm or yarn):\n```cli\nyarn run js2flowchart main.js\n```\n\nAfter 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.\n\n### API and examples\nYou can find sources for examples explained below in [docs directory](/docs).\n\n**In examples only** js2flowchart library included explicitly, by ```\u003cscript\u003e``` tag and accessed by global variable from ```window``` **to make it simpler to run for you without boilerplate**. But feel free to use it through ES6 modules as well, when you have Babel\u0026Webpack local server configured.\n```javascript\n/**\n* Access APIs when js2flowchart injected into HTML page\n*/\nconst {convertCodeToFlowTree, convertFlowTreeToSvg} = window.js2flowchart;\n\n/**\n* or import from node_modules \n*/ \nimport {convertCodeToFlowTree, convertFlowTreeToSvg} from 'js2flowchart';//way 1\nimport * as js2flowchart from 'js2flowchart';//way 2\n```\n\n#### Default\n\nHere is a code function for classic case Binary search\n\n```javascript\nconst code = `function indexSearch(list, element) {\n    let currentIndex,\n        currentElement,\n        minIndex = 0,\n        maxIndex = list.length - 1;\n\n    while (minIndex \u003c= maxIndex) {\n        currentIndex = Math.floor(minIndex + maxIndex) / 2;\n        currentElement = list[currentIndex];\n\n        if (currentElement === element) {\n            return currentIndex;\n        }\n\n        if (currentElement \u003c element) {\n            minIndex = currentIndex + 1;\n        }\n\n        if (currentElement \u003e element) {\n            maxIndex = currentIndex - 1;\n        }\n    }\n\n    return -1;\n}`;\n```\nlet's convert it to SVG(the simplest way):\n```javascript\nconst svg = js2flowchart.convertCodeToSvg(code);\n```\nResult:\n\n![](/docs/examples/default/flowchart-image.png)\n\nIf you need to modify default behavior you can split ```js2flowchart.convertCodeToSvg``` into two building block:\n- flow tree building\n- shapes printing\n\n```javascript\nconst {convertCodeToFlowTree, convertFlowTreeToSvg} = js2flowchart;\n\nconst flowTree = convertCodeToFlowTree(code);\n\nconst svg = convertFlowTreeToSvg(flowTree);//XML string\n```\n\nor when you need full control create main instances manually:\n```javascript\nconst {createFlowTreeBuilder, createSVGRender} = js2flowchart;\n\nconst flowTreeBuilder = createFlowTreeBuilder(),\n    svgRender = createSVGRender();\n\nconst flowTree = flowTreeBuilder.build(code),\n    shapesTree = svgRender.buildShapesTree(flowTree);\n\nconst svg = shapesTree.print();//XML string\n```\n\nSee the example running [here](https://bogdan-lyashenko.github.io/js-code-to-svg-flowchart/docs/examples/default/index.html) or check out complete source code [of it](/docs/examples/default/index.html).\n\n#### Defined abstraction level\n\nWhat is called 'abstraction level'? Let's say you would like to omit some details, like, e.g. for given module you are interested only in what the module ```exports```, or, what classes it contains.\nThere is a list of defined levels you can do that with. Accessible by ```ABSTRACTION_LEVELS``` interface.\n- ```FUNCTION```\n- ```FUNCTION_DEPENDENCIES```\n- ```CLASS```\n- ```IMPORT```\n- ```EXPORT```\n\nLet's take example with module imports\u0026exports. Below is the code of some ```print-util.js```.\n```javascript\nconst code = `\n    import {format, trim} from 'formattier';\n    import {log} from 'logger';\n\n    const data = [];\n\n    export default print = (list) =\u003e {\n        list.forEach(i =\u003e {\n            console.log(i);\n        });\n    }\n\n    export const formatString = (str) =\u003e formatter(str);\n    export const MAX_STR_LENGTH = 15;\n`;\n```\nwe need to instantiate ```flowTreeBuilder``` and assign abstraction level on it.\n\n```javascript\n    const {\n        ABSTRACTION_LEVELS,  createFlowTreeBuilder, convertFlowTreeToSvg\n    } = js2flowchart;\n\n    const flowTreeBuilder = createFlowTreeBuilder();\n\n    //you can pass one level or multiple levels\n    flowTreeBuilder.setAbstractionLevel([\n        ABSTRACTION_LEVELS.IMPORT,\n        ABSTRACTION_LEVELS.EXPORT\n    ]);\n\n    const flowTree = flowTreeBuilder.build(code);\n    const svg = convertFlowTreeToSvg(flowTree);\n```\n\nResult:\n\n![](/docs/examples/defined-abstraction-level/flowchart-image.png)\n\nSee the example running [here](https://bogdan-lyashenko.github.io/js-code-to-svg-flowchart/docs/examples/defined-abstraction-level/index.html) or check out complete source code [of it](/docs/examples/defined-abstraction-level/index.html).\n\n**Custom abstraction level (label:advanced)**\n\nWhat if you want your 'own' level? To the same API endpoint ```flowTreeBuilder.setAbstractionLevel``` you can provide configuration object.\nFor example, have a look at the code of [function dependencies](/src/builder/abstraction-levels/functionDependencies.js) abstraction level.\nCheck out the export of it\n```javascript\nexport const getFunctionDependenciesLevel = () =\u003e ({\n    defined: [TOKEN_TYPES.CALL_EXPRESSION],\n    custom: [\n        getCustomFunctionDeclaration(),\n        getCustomAssignmentExpression(),\n        getCustomVariableDeclarator()\n    ]\n});\n```\nIt's a format of data you need to pass:\n\n```javascript\nflowTreeBuilder.setAbstractionLevel({\n    defined: [TOKEN_TYPES.CALL_EXPRESSION],\n    custom: [\n        getCustomFunctionDeclaration(),\n        getCustomAssignmentExpression(),\n        getCustomVariableDeclarator()\n    ]\n})\n\n````\nAnd what is behind of ```getCustomAssignmentExpression``` for example?\nThere is a token parsing config.\n```javascript\n{\n    type: 'TokenType', /*see types in TOKEN_TYPES map*/\n    getName: (path) =\u003e {/*extract name from token*/},\n    ignore: (path) =\u003e {/*return true if want to omit entry*/}\n    body: true /* should it contain nested blocks? */\n}\n```\nCheck out more token parsing configs from [source code (entryDefinitionsMap.js)](/src/builder/entryDefinitionsMap.js)\n\n\n#### Presentation generator\n\nWhen you learn other's code it's good to go through it by different abstractions levels.\nTake a look what module exports, which function and classes contains etc.\nThere is a sub-module ```createPresentationGenerator``` to generate list of SVGs in order to different abstractions levels.\n\nLet's take the next code for example:\n```javascript\nconst code = `\n    import {format} from './util/string';\n\n    function formatName(name) {\n        if (!name) return 'no-name';\n\n        return format(name);\n    }\n\n    class Animal {\n        constructor(breed) {\n            this.breed = breed;\n        }\n\n        getBreed() {\n            return this.breed;\n        }\n\n        setName(name) {\n            if (this.nameExist()) {\n                return;\n            }\n\n            this.name = name;\n        }\n    }\n\n    class Man extends Animal {\n       sayName() {\n            console.log('name', this.name);\n       }\n    }\n\n    export default Man;\n`;\n```\npass it to\n```javascript\nconst { createPresentationGenerator } = js2flowchart;\n\nconst presentationGenerator = createPresentationGenerator(code);\nconst slides = presentationGenerator.buildSlides();//array of SVGs\n```\n\nResult (one of slides):\n\n![](/docs/examples/one-module-presentation/flowchart-image.png)\n\nYou can switch slides by prev-next buttons.\n\n[\u003cimg src=\"/docs/examples/one-module-presentation/slides.gif\" width=\"500\"\u003e](https://bogdan-lyashenko.github.io/js-code-to-svg-flowchart/docs/examples/one-module-presentation/index.html)\n\nSee the example running [here](https://bogdan-lyashenko.github.io/js-code-to-svg-flowchart/docs/examples/one-module-presentation/index.html) or check out complete source code [of it](/docs/examples/one-module-presentation/index.html).\n\n\n#### Defined colors theme\n\nYou can apply different themes to your ```svgRender``` instance. Simply calling e.g. ```svgRender.applyLightTheme()``` to apply light scheme.\n\nThere are next predefined color schemes:\n- DEFAULT: ```applyDefaultTheme```\n- BLACK_AND_WHITE: ```applyBlackAndWhiteTheme```\n- BLURRED: ```applyBlurredTheme```\n- LIGHT: ```applyLightTheme```\n\nLet's simple code sample of ```switch``` statement from Mozzila Web Docs.\n```javascript\nconst code = `\n    function switchSampleFromMDN() {\n        const foo = 0;\n\n        switch (foo) {\n          case -1:\n            console.log('negative 1');\n            break;\n          case 0:\n            console.log(0);\n          case 1:\n            console.log(1);\n            return 1;\n          default:\n            console.log('default');\n        }\n    }\n`;\n```\nand apply scheme to render.\n\n```javascript\nconst {createSVGRender, convertCodeToFlowTree} = js2flowchart;\n\nconst flowTree = convertCodeToFlowTree(code),\n    svgRender = createSVGRender();\n\n//applying another theme for render\nsvgRender.applyLightTheme();\n\nconst svg = svgRender.buildShapesTree(flowTree).print();\n```\n\nResult:\n\n![](/docs/examples/defined-color-theme/flowchart-image.png)\n\nSee the example running [here](https://bogdan-lyashenko.github.io/js-code-to-svg-flowchart/docs/examples/defined-color-theme/index.html) or check out complete source code [of it](/docs/examples/defined-color-theme/index.html).\n\n#### Custom colors theme\n\nWell, but what if you would like to have different colors? Sure, below is an example of Light theme colors but created manually.\n```javascript\nsvgRender.applyColorBasedTheme({\n   strokeColor: '#555',\n   defaultFillColor: '#fff',\n   textColor: '#333',\n   arrowFillColor: '#444',\n   rectangleFillColor: '#bbdefb',\n   rectangleDotFillColor: '#ede7f6',\n   functionFillColor: '#c8e6c9',\n   rootCircleFillColor: '#fff9c4',\n   loopFillColor: '#d1c4e9',\n   conditionFillColor: '#e1bee7',\n   destructedNodeFillColor: '#ffecb3',\n   classFillColor: '#b2dfdb',\n   debuggerFillColor: '#ffcdd2',\n   exportFillColor: '#b3e5fc',\n   throwFillColor: '#ffccbc',\n   tryFillColor: '#FFE082',\n   objectFillColor: '#d1c4e9',\n   callFillColor: '#dcedc8',\n   debugModeFillColor: '#666'\n});\n```\n\n#### Custom styles\n\nWhat if you need different styles, not only colors? Here it's ```svgRender.applyTheme({})```. You can apply styles above of current theme, overriding only that behaviour you need.\nLet's take an example with Return statement.\n```javascript\nsvgRender.applyTheme({\n    common: {\n        maxNameLength: 100\n    },\n    ReturnStatement: {\n        fillColor: 'red',\n        roundBorder: 10\n    }\n});\n```\n\nPlease check definition of [```DefaultBaseTheme```](/src/render/svg/appearance/themes/DefaultBaseTheme.js) to see all possible shapes names and properties.\n\n\n#### Shapes tree editor\n\nThere is sub-module for modifying shapes tree called 'ShapesTreeEditor'.\nIt provides next interfaces:\n- ```findShape```\n- ```applyShapeStyles```\n- ```blur```\n- ```focus```\n- ```blurShapeBranch```\n- ```focusShapeBranch```\n- ```print```\n\nLet's learn its usage on an example as well. Below is the code with some 'devMode hooks'.\n```javascript\nconst code = `\nconst doStuff = (stuff) =\u003e {\n    if (stuff) {\n        if (devFlag) {\n            log('perf start');\n            doRecursion();\n            log('perf end');\n\n            return;\n        }\n\n        doRecursion();\n        end();\n    } else {\n        throw new Error('No stuff!');\n    }\n\n    return null;\n};\n`;\n```\n\nwhat we want here is 'blur' that dev-branch condition, because it interferes code readability.\n\n```javascript\nconst {\n    convertCodeToFlowTree,\n    createSVGRender,\n    createShapesTreeEditor\n} = js2flowchart;\n\nconst flowTree = convertCodeToFlowTree(code),\n    svgRender = createSVGRender();\n    shapesTree = svgRender.buildShapesTree(flowTree);\n\nconst shapesTreeEditor = createShapesTreeEditor(shapesTree);\n\nshapesTreeEditor.blurShapeBranch(\n    (shape) =\u003e shape.getName() === '(devFlag)'\n);\n\nconst svg = shapesTreeEditor.print();\n```\n\nResult:\n\n![](/docs/examples/blur-shape-branch/flowchart-image.png)\n\nSee the example running [here](https://bogdan-lyashenko.github.io/js-code-to-svg-flowchart/docs/examples/blur-shape-branch/index.html) or check out complete source code [of it](/docs/examples/blur-shape-branch/index.html).\n\n\n#### Flow tree modifier\n\nThere is sub-module for modifying flow tree called 'FlowTreeModifier' which allows you to apply modifiers defined separately to your existing flow tree.\nLet's take simple use-case: you want to change 'names'(titles) on tree-nodes, here it is, just define modifier for that. But, actually, there are some behaviours where we already know we need to modify flow tree.\n\nLet's have a look at ES5 Array iterators, like ```forEach```, ```map``` and so on. We all know they behave like a loop, right? Let's treat them as a 'loop' then.  \n\n```javascript\nconst code = `\nfunction print(list) {\n    const newList = list.map(i =\u003e {\n        return i + 1;\n    });\n\n    newList.forEach(i =\u003e {\n        console.debug('iteration start');\n        console.log(i);\n        console.debug('iteration end');\n    });\n}\n`;\n```\n\n\n```javascript\nconst {\n    createFlowTreeBuilder,\n    createFlowTreeModifier,\n    convertFlowTreeToSvg,\n    MODIFIER_PRESETS\n} = js2flowchart;\n\nconst flowTreeBuilder = createFlowTreeBuilder(),\n    flowTree = flowTreeBuilder.build(code);\n\nconst flowTreeModifier = createFlowTreeModifier();\n\nflowTreeModifier.setModifier(MODIFIER_PRESETS.es5ArrayIterators);\nflowTreeModifier.applyToFlowTree(flowTree);\n\nconst svg = convertFlowTreeToSvg(flowTree);\n```\n\nResult:\n\nAs you can see, both iterators handled as a loop. And ```forEach``` omit function-callback as well.\n\n![](/docs/examples/defined-modifier/flowchart-image.png)\n\nSee the example running [here](https://bogdan-lyashenko.github.io/js-code-to-svg-flowchart/docs/examples/defined-modifier/index.html) or check out complete source code [of it](/docs/examples/defined-modifier/index.html).\n\n\nThere is one more defined modifier for node destruction. It takes a block you specified and destruct it to on block.\n```javascript\nflowTreeModifier.destructNodeTree((node) =\u003e node.name.indexOf('.forEach') !== -1, 'and print list...');\n```\nWhat if you want **custom modifier**?\n```javascript\nflowTreeModifier.registerNewModifier((node)=\u003e node.name.includes('hello'), {\n    name: 'world'\n});\n```\n\n#### Debug rendering\nWhat if you want to select a shape for applying special styles and want some unique id selector? Just pass ```debug``` flag to ```print```;\n\n```javascript\n    const {\n        convertCodeToFlowTree,\n        createSVGRender,\n        createShapesTreeEditor\n    } = js2flowchart;\n\n    const svgRender = createSVGRender();\n\n    const shapesTree = svgRender.buildShapesTree(convertCodeToFlowTree(code));\n    const shapesTreeEditor = createShapesTreeEditor(shapesTree);\n\n    shapesTreeEditor.applyShapeStyles(\n        shape =\u003e shape.getNodePathId() === 'NODE-ID:|THIS.NAME=N|TCCP-', {\n        fillColor: '#90caf9'\n    });\n\n    const svg = shapesTreeEditor.print({debug: true});\n```\n\nResult:\n\n![](/docs/examples/debug-rendering/flowchart-image.png)\n\nSee the example running [here](https://bogdan-lyashenko.github.io/js-code-to-svg-flowchart/docs/examples/debug-rendering/index.html) or check out complete source code [of it](/docs/examples/debug-rendering/index.html).\n\n### Tools\nThanks to @LucasBadico we got Visual Studio extension. Check [it out](https://marketplace.visualstudio.com/items?itemName=lucasbadico.code-flowchart).\n![](https://user-images.githubusercontent.com/16516889/32584821-824634c8-c4e1-11e7-9e83-4c97561f01e0.png)\n\n### Under the hood\nMain stages:\n- get AST from code, [Babylon](https://github.com/babel/babel/tree/master/packages/babylon) parser is used (develops by Babel team)\n- convert AST to FlowTree, remove and combing nodes ([FlowTreeBuilder](src/builder/FlowTreeBuilder.js))\n  - apply modifiers ([FlowTreeModifier](src/builder/FlowTreeModifier.js))\n- create SVG objects based on FlowTree ([SVGRender](src/render/svg/SVGRender.js))\n  - apply ShapesTreeEditor\n  - apply theme ([see themes](src/render/svg/appearance/themes))\n- print SVG objects to XML string\n\n\n### Things planned TODO\n- Full CLI support\n- JSX support\n- Flow support\n- TypeScript support\n- Multi files support\n- Webstorm plugin\n- Chrome extension for dev-tools\n\n### Contributing\nFeel free to file an issue if it doesn't work for your code sample (please add 'breaking' lines of code if it's possible to identify) or for any other things you think can be improved.\nHighly appreciated if you can join and help with any TODOs above. Thanks.\n\n### License\nMIT license\n\n### Version\nFirst shoot! Take it easy (check version number above in NPM badge)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbogdan-lyashenko%2Fjs-code-to-svg-flowchart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbogdan-lyashenko%2Fjs-code-to-svg-flowchart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbogdan-lyashenko%2Fjs-code-to-svg-flowchart/lists"}