steeleprice / vscode-interactive-graphviz

Interactive Graphviz Dot Preview for Visual Studio Code

^{[ 🌐 📩 🔥 ]}

vscode-interactive-graphviz

Interactive Graphviz Dot Preview for Visual Studio Code

• Preview dot/Graphviz source.
• Updates preview as you type.
• Interactive edge tracking. click on a node to highlight incoming and outgoing edges.
• Export the graph as svg or dot.
• Configurable graph options: e.g. transitionDelay, transitionDuration.
• Developers: you can pass a callback function that receives the webPanel when executing the preview command. This allows you to override functionality that is provided by the webPanel like handlers for click/dblClick events.

Developer Notes

Note:❗v0.0.8 introduced a breaking change: the render command was renamed from interactive-graphviz.preview.beside to graphviz-interactive-preview.preview.beside

Interact with this extension

• add graphviz-interactive-preview to your package.json extension dependencies.

{
    "name": "your-extension",
    "extensionDependencies": ["tintinweb.graphviz-interactive-preview"],
}

• Create a new panel displaying the rendered dot graph. Either provide a document or both the document and the graphviz dot source. The callback function receives the newly created webPanel. Overload webPanel.handleMessage((message) from your callback function to receive message events like onClick and onDblClick emitted from inside the dot render window.

let args = {
    document: <vscode.document>,
    content: <string:dotSrc>,
    callback: <function (webpanel){}>
}
            
vscode.commands.executeCommand("graphviz-interactive-preview.preview.beside", args)

Credits

• graph engine: d3-graphviz
• edge tracking: jquery.graphviz.svg
• webview handling: vscode-graphviz

Release Notes

see CHANGELOG

---