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:
Stars: ✭ 108
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
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
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.
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:
Features
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
- Fork it (https://github.com/aryaminus/flowmaker/fork)
- Create your feature branch (
git checkout -b feature/fooBar
) - Commit your changes (
git commit -am 'Add some fooBar'
) - Push to the branch (
git push origin feature/fooBar
) - 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].