pjaerr / code-flow-extension Goto Github PK
View Code? Open in Web Editor NEWVS Code Extension to map code flow output as a diagram
License: MIT License
VS Code Extension to map code flow output as a diagram
License: MIT License
When considering a rebuild a while back my plan was to use a frontend framework for the webview as trying to do anything complex (like a diagram that can be moved around and tweaked on an infinite canvas) seemed very cumbersome to do with the default webview behaviour of telling it vscode to render a html file and using vanilla js for anything dynamic. A framework would have made the development experience 10x better. That said, from looking at Sprotty it seems the approach taken would clash with wanting to use a frontend framework as it handles the rendering itself. It would be good to explore Sprotty and see if it makes sense for the scope of this extension or if it makes more sense to do the rendering ourselves, just need to figure out what we want this extension to actually do.
The following tasks are to create a quick proof of concept to figure out how things could potentially work (with Sprotty or otherwise) instead of just guessing ๐
Once the above tasks have been explored, we should have a better idea of what is possible and what approach to take and it's probably the minimum functionality that's still a bit useful however we'd probably want the diagram to be interactive in terms of being able to move it around and disconnect/connect code blocks directly in the webview.
Currently when clicking a file link, it will open the file as a new virtual document in the vs code editor. It navigates to the last selected line, which may not have been the line that was selected when the data point was created.
Fix this by opening the document and navigating to the selected line.
I haven't investigated how this would work but it would be a good feature alongside PNG export to allow the diagram to be exported as XML so it can be loaded into external tools such as Draw.IO or Lucidchart.
Can a sub branch sequence function added into this extension?
Currently the diagram only shows the inputted name & detail as well as the selected line in the active file.
It would be a nice addition, to show a snippet of code within each data point surrounding the selected line. This would give a better picture whilst looking at the diagram.
This is a nice to have feature and isn't strictly neccessary.
Resources:
One neat benefit is that this could hook into any language's LSP implementation for some nice interactivity. ๐ค
Like what happens with anchor tags, try and style the entire diagram based on the currently active editor theme so that it fits in with the editor.
This would be a nice little additions to just visualise where data points are throughout the workspace.
Potentially useful link: https://vscode.rocks/decorations/
Grok seemed to have disappeared:
Now the original URL redirects to spam/phishing content. ๐
That being said, your extension looks awesome and I'd love to contribute. I've wanted a tool like this for a long time.
Currently the diagram can only be seen in the editor it is generated. It would be nice to be able to export this diagram as a PNG.
This would most likely be done by converting the DOM to HTML5 Canvas and then saving the canvas as an image.
Worth noting to only load any used libraries when this action is requested so as to not bloat the VS Code webview.
Hey! I'm being unable to run this extension under the WSL 2 environment. An error stating command 'extension.codeflow' not found
when I click on CodeFlow
appears:
However, I am able to run the extension outside of WSL 2 environment.
Is this a problem with my set-up or with the extension?
What do we want the extension to do? What is the smallest amount of functionality for it to be useful?
Related issue: #42
Related tweet: https://twitter.com/Nezteb/status/1648148867173715970?s=20
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.