{"id":13527650,"url":"https://github.com/speks7/flowmaker","last_synced_at":"2025-04-01T09:31:52.504Z","repository":{"id":46238390,"uuid":"116342385","full_name":"speks7/flowmaker","owner":"speks7","description":"flowmaker: JS to SVG flowchart generation extension for Vscode in realtime written in typescript and also download the SVG through local node server. Extension:","archived":true,"fork":false,"pushed_at":"2018-11-30T09:43:25.000Z","size":156,"stargazers_count":121,"open_issues_count":2,"forks_count":34,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-11-02T12:35:05.295Z","etag":null,"topics":["developer-tools","express","flowchart","javascript","js2flowchart","nodejs","plugin","socket-io","svg","typescript","visualization","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":"https://goo.gl/yRmQNk","language":"TypeScript","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/speks7.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-05T04:38:31.000Z","updated_at":"2024-10-08T12:15:05.000Z","dependencies_parsed_at":"2022-09-13T08:00:45.125Z","dependency_job_id":null,"html_url":"https://github.com/speks7/flowmaker","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/speks7%2Fflowmaker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/speks7%2Fflowmaker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/speks7%2Fflowmaker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/speks7%2Fflowmaker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/speks7","download_url":"https://codeload.github.com/speks7/flowmaker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246616252,"owners_count":20806093,"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":["developer-tools","express","flowchart","javascript","js2flowchart","nodejs","plugin","socket-io","svg","typescript","visualization","vscode","vscode-extension"],"created_at":"2024-08-01T06:01:55.547Z","updated_at":"2025-04-01T09:31:52.035Z","avatar_url":"https://github.com/speks7.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Flowmaker\n\nFlowmaker 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.\n\n[![Flowmaker features](https://i.imgur.com/FIacJUP.gif)](https://youtu.be/ySW2ejs6f84)\n\n[![onBrowser demo](https://i.imgur.com/k77hQLy.png)](https://youtu.be/ySW2ejs6f84)\n\n**Note:**\nFor only using the onEditor SVG generation follow the \u003ca href=\"https://github.com/aryaminus/flowmaker/tree/livepreview\" target=\"_blank\"\u003elivepreview\u003c/a\u003e branch code.\n\nFor showing in both Browser and Editor follow the \u003ca href=\"https://github.com/aryaminus/flowmaker/tree/onBrowser\" target=\"_blank\"\u003eonBrowser\u003c/a\u003e branch code.\n\n## Instructions\n- Write Javascript.\n- Select a function or object or entire file.\n- Hit ctrl-f1.\n- Choose either 'Flowmaker: Preview' or 'Flowmaker: Save'.\n- 'Flowmaker: Preview' generates the SVG layout in side column of editor itself.\n- 'Flowmaker: Save' allows the user to download the SVG code in the same directory as the file.\n\n## Installation\n\nFrom [VS Code](https://code.visualstudio.com) Market [Install Flowmaker](https://goo.gl/yRmQNk):\n**Install Flowmaker extension:**\n```\nLaunch VS Code Quick Open (Ctrl+P), paste the following command:\next install speks.flowmaker\n```\nThen,\n```\nOpen any .js file\nhit Fn+f1 or F1\nchoose Flowmake onEditor or Flowmake onBrowser\n```\n***or,***\nClone the source locally:\n```\n$ git clone https://github.com/aryaminus/flowmaker\n$ cd flowmaker\n$ npm install\n```\n***and,***\n**Start the application in development mode**\n```\nhit Ctrl+f5\nhit Fn+f1 or F1\nchoose Flowmaker: Save or Flowmaker: Preview\n```\n\n## Packages:\n1. \u003ca href=\"https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart\" target=\"_blank\"\u003ejs2flowchart\u003c/a\u003e\n2. \u003ca href=\"https://github.com/GramParallelo/atom-js-code-to-svg-to-preview\" target=\"_blank\"\u003eatom-js-code-to-svg-to-preview\u003c/a\u003e\n\n## Features\n\n[![onEditor demo](https://i.imgur.com/F3LC8LA.png)](https://youtu.be/ySW2ejs6f84)\n\n### TODO:\n- [ ] JSX support\n- [ ] Flow,CLI and Typescript support\n- [ ] Chrome extension for dev-tools\n- [ ] Fetching SVG to generate and manipulate code to genrate code from flowchart\n\n-----------------------------------------------------------------------------------------------------------\n\n## Contributing\n\n1. Fork it (\u003chttps://github.com/aryaminus/flowmaker/fork\u003e)\n2. Create your feature branch (`git checkout -b feature/fooBar`)\n3. Commit your changes (`git commit -am 'Add some fooBar'`)\n4. Push to the branch (`git push origin feature/fooBar`)\n5. Create a new Pull Request\n\n**Enjoy!**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspeks7%2Fflowmaker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspeks7%2Fflowmaker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspeks7%2Fflowmaker/lists"}