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.

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.

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 😅

• Bare bones functionality for selecting a block of code and sending it through to the webview
• Rendering a diagram with all of the code blocks (connected in the order they were created for the time being)
• For each code block, render a preview of the code that was selected (ideally this is a live preview pulled directly from the file, does Sprotty help with this?)
• Give the ability to attach a note to each code block

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.

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

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.

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?

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.

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.

This would be a nice little additions to just visualise where data points are throughout the workspace.

Potentially useful link: https://vscode.rocks/decorations/

Resources:

• https://www.typefox.io/blog/using-sprotty-in-vs-code-extensions
• https://github.com/eclipse-sprotty/sprotty-vscode
• https://github.com/eclipse-sprotty/sprotty-server

One neat benefit is that this could hook into any language's LSP implementation for some nice interactivity. 🤔

Grok seemed to have disappeared:

• https://web.archive.org/web/20210812070223/https://www.trygrok.com/
• https://web.archive.org/web/20210705001921/https://marketplace.visualstudio.com/items?itemName=Adaptilab.grok

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.

After Installing the extension, the above error came. If you've any solution, please let me know. I very much liked the idea of the extension and would like to use this anyhow. :)
IDE: VS Code

Can a sub branch sequence function added into this extension?