All Projects → speks7 → Flowmaker

speks7 / Flowmaker

Licence: mit
flowmaker: JS to SVG flowchart generation extension for Vscode in realtime written in typescript and also download the SVG through local node server. Extension:

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Projects that are alternatives of or similar to Flowmaker

Vscode Svgviewer
SVG Viewer for Visual Studio Code
Stars: ✭ 60 (-44.44%)
Mutual labels:  vscode, vscode-extension, svg
Chrome Vs Code
A web browser integrated in VS Code editor tabs. ☢️ experimental ☢️
Stars: ✭ 351 (+225%)
Mutual labels:  vscode, vscode-extension, plugin
Vscode Numbered Bookmarks
Numbered Bookmarks Extension for Visual Studio Code
Stars: ✭ 90 (-16.67%)
Mutual labels:  vscode, vscode-extension
Vscode Mdx
MDX for Visual Studio Code
Stars: ✭ 91 (-15.74%)
Mutual labels:  vscode, vscode-extension
Aaronvandenberg.nl
⚛️ Web Developers portfolio build with Gatsby.js & React.js
Stars: ✭ 98 (-9.26%)
Mutual labels:  express, socket-io
Css Flexbox Cheatsheet
VS Code extension that lets you open a CSS Flexbox cheatsheet directly in the editor.
Stars: ✭ 87 (-19.44%)
Mutual labels:  vscode, vscode-extension
Syntax Highlighter
Syntax Highlighter extension for Visual Studio Code (VSCode). Based on Tree-sitter.
Stars: ✭ 88 (-18.52%)
Mutual labels:  vscode, vscode-extension
Happy Chat
基于node+express的聊天室,支持发送文本、图片、表情、自定义字体颜色、窗口震动
Stars: ✭ 96 (-11.11%)
Mutual labels:  express, socket-io
Vscode Cssrem
Converts between `px` and `rem` units in VSCode
Stars: ✭ 81 (-25%)
Mutual labels:  vscode, vscode-extension
Laserwave
A retro outrun / cyberpunk inspired VS Code theme
Stars: ✭ 102 (-5.56%)
Mutual labels:  vscode, vscode-extension
Vscode Rss
An RSS reader embedded in Visual Studio Code
Stars: ✭ 102 (-5.56%)
Mutual labels:  vscode, vscode-extension
Vscode Yuml
yUML extension for Visual Studio Code
Stars: ✭ 102 (-5.56%)
Mutual labels:  vscode, vscode-extension
Xmake Vscode
🍩 A XMake integration in Visual Studio Code
Stars: ✭ 84 (-22.22%)
Mutual labels:  vscode, plugin
Php Namespace Resolver
PHP Namespace Resolver - VSCode Extension
Stars: ✭ 83 (-23.15%)
Mutual labels:  vscode, vscode-extension
Vueno
Vue Conversion Plugin
Stars: ✭ 89 (-17.59%)
Mutual labels:  vscode-extension, plugin
Vim
⭐ Vim for Visual Studio Code
Stars: ✭ 9,782 (+8957.41%)
Mutual labels:  vscode, vscode-extension
Vscode Code Runner
Code Runner for Visual Studio Code
Stars: ✭ 1,332 (+1133.33%)
Mutual labels:  vscode, vscode-extension
Vscode Winteriscoming
Dark theme with fun and bright foreground colors
Stars: ✭ 105 (-2.78%)
Mutual labels:  vscode, vscode-extension
Kikoeru Express
kikoeru 后端,不再维护,请到https://github.com/umonaca/kikoeru-express 获取更新
Stars: ✭ 79 (-26.85%)
Mutual labels:  express, socket-io
Laravel Blade Snippets Vscode
Laravel blade snippets and syntax highlight support for Visual Studio Code
Stars: ✭ 80 (-25.93%)
Mutual labels:  vscode, vscode-extension

Flowmaker

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.

Flowmaker features

onBrowser demo

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

For showing in both Browser and Editor follow the onBrowser branch code.

Instructions

  • Write Javascript.
  • Select a function or object or entire file.
  • Hit ctrl-f1.
  • Choose either 'Flowmaker: Preview' or 'Flowmaker: Save'.
  • 'Flowmaker: Preview' generates the SVG layout in side column of editor itself.
  • 'Flowmaker: Save' allows the user to download the SVG code in the same directory as the file.

Installation

From VS Code Market Install Flowmaker: Install Flowmaker extension:

Launch VS Code Quick Open (Ctrl+P), paste the following command:
ext install speks.flowmaker

Then,

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 Flowmaker: Save or Flowmaker: Preview

Packages:

  1. js2flowchart
  2. atom-js-code-to-svg-to-preview

Features

onEditor demo

TODO:

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

Contributing

  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!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].