Using DOT classes (and some other properties) to apply styles to a DOT file was a good call.

```
head -> body [class="consequence"]
body -> head [dir=back]
head -> exit [class="alternative"]
```

Becomes https://dreampuf.github.io/GraphvizOnline/?compressed=CYSw5gTghgDgFgAgN4CgEIEZgMYHsA2uECAvAgEQDEAZrXeQNxoICmwYLCA2s+nocTJUADKOG1GvBHBZRgMIgBdSFAHaT06RVBD4FEZUIDOGzTBaqA7iGCLEZAIxN0AXWcJVuYJx6aERxQBPfE4hal0Q4FN0fCgMFnwVcmj-OFhQigxcAA8U8Px8fiIkymAAZnLylKLBCkoxMTzcVUVVKABbDPIjKFUjAFojFggQalM3ZnIZOXIEfoA+TK9A2d9NbFijIyS8PpYARwBXC2wWaoJioXrhAA5G9wn0KdkoucXyLOAV7ilQWo+oNgANYpcxWGx2FQAJnc6Gm8iUSRMsIQ2l0+kManG7meMzeFBY2RAilWUg2UC2SSg+EUwzaihAADcziiaiVaA1sSgAL5AA&engine=dot#digraph%20%7B%0A%20%20bgcolor%20%3D%20%22%23ffffff%22%3B%0A%20%20edge%20%5B%0A%20%20%20%20color%20%3D%20%22%230000ff%22%3B%0A%20%20%20%20headport%20%3D%20%22n%22%3B%0A%20%20%20%20tailport%20%3D%20%22s%22%3B%0A%20%20%20%20penwidth%20%3D%201%3B%0A%20%20%5D%3B%0A%20%20node%20%5B%0A%20%20%20%20style%20%3D%20%22filled%22%3B%0A%20%20%20%20label%20%3D%20%22%22%3B%0A%20%20%20%20shape%20%3D%20%22box%22%3B%0A%20%20%20%20fillcolor%20%3D%20%22%23d3d3d3%22%3B%0A%20%20%20%20color%20%3D%20%22%23000000%22%3B%0A%20%20%20%20fontname%20%3D%20%22sans-serif%22%3B%0A%20%20%5D%3B%0A%20%20%22head%22%20-%3E%20%22body%22%20%5B%0A%20%20%20%20class%20%3D%20%22consequence%22%3B%0A%20%20%20%20color%20%3D%20%22%23008000%22%3B%0A%20%20%5D%3B%0A%20%20%22head%22%20-%3E%20%22body%22%20%5B%0A%20%20%20%20dir%20%3D%20%22back%22%3B%0A%20%20%20%20penwidth%20%3D%202%3B%0A%20%20%20%20headport%20%3D%20%22s%22%3B%0A%20%20%20%20tailport%20%3D%20%22n%22%3B%0A%20%20%5D%3B%0A%20%20%22head%22%20-%3E%20%22exit%22%20%5B%0A%20%20%20%20class%20%3D%20%22alternative%22%3B%0A%20%20%20%20color%20%3D%20%22%23ff0000%22%3B%0A%20%20%5D%3B%0A%7D

Now back to writing that talk...

#graphviz #FunctionGraphOverview

Graphviz Online

Writing proper docs for function-graph-overview requires some fake control-flow-graphs. So now I'm writing a tool that applies my styling to an existing DOT file based on simple attributes.
Once that's done, I'll be able to write those graphs by hand without (too much) pain.

#FunctionGraphOverview #graphviz

Finally managed to push my Vite/Svelte frontend into a VSCode webview!

Still needs some cleanup before it gets into the plugin, but it should allow for much nicer UI soon!

CSP makes things tricky. And even more so when you're hosting a file locally and 'serve' it without modification...
I'm still not sure how to generate a nonce dynamically in VSCode.

#vscode #vite #vscodeextension #FunctionGraphOverview

Added the overlay-note-region-name-pending feature to the demo behind a feature-flag.

You can play with them at https://tmr232.github.io/function-graph-overview/?showRegions

Use `cfg-overlay-start: message` and `cfg-overlay-end` comments to denote the start and end of a region.

#FunctionGraphOverview

Function Graph Overview - Demo

Took more work than I expected (SVG manipulation is tricky business), but I now have a working version of on-graph region comments!

#FunctionGraphOverview

Currently working on adding comment-overlays to Function-Graph-Overview.

The idea is to add special begin- and end- comments, and use those to draw overlays on the graph (think C#'s region thingy).

I hope this will make the CFG more viable as a code-understanding tool, as we'll be able to better document our findings.

#FunctionGraphOverview

Function Graph Overview - IntelliJ IDEs Plugin | Marketplace

See live control-flow-graphs of your code! This plugin adds a CFG (Control-Flow-Graph) view for the current function. Before installing, you can also try an...

JetBrains Marketplace

New version of Function-Graph-Overview is out!

This version adds TypeScript (& JavaScript) support!

And fixes some bugs with Go CFG generation.

Get it while it's hot!

https://tmr232.github.io/function-graph-overview/?language=4

#golang #typescript #javascript #FunctionGraphOverview

Function Graph Overview - Demo

New version of the Function-Graph-Overview plugin for JetBrains IDEs is out!

Now with click-to-navigate - click the nodes in the graph to jump to the relevant code!

https://plugins.jetbrains.com/plugin/25676-function-graph-overview

#FunctionGraphOverview #JetBrains #PyCharm #GoLang #CLion

Function Graph Overview - IntelliJ IDEs Plugin | Marketplace

See live control-flow-graphs of your code! This plugin adds a CFG (Control-Flow-Graph) view for the current function. Before installing, you can also try an...

JetBrains Marketplace
Function Graph Overview - Demo