{"id":15634535,"url":"https://github.com/tintinweb/vscode-interactive-graphviz","last_synced_at":"2025-04-10T05:06:38.922Z","repository":{"id":37024117,"uuid":"184148611","full_name":"tintinweb/vscode-interactive-graphviz","owner":"tintinweb","description":"Interactive Graphviz Dot Preview for Visual Studio Code","archived":false,"fork":false,"pushed_at":"2024-06-26T14:54:57.000Z","size":2347,"stargazers_count":172,"open_issues_count":46,"forks_count":31,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-10T05:06:24.631Z","etag":null,"topics":["graphviz","graphviz-dot","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=tintinweb.graphviz-interactive-preview","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tintinweb.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":"AUTHORS","dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-04-29T21:45:50.000Z","updated_at":"2025-04-09T17:53:56.000Z","dependencies_parsed_at":"2024-10-23T03:16:36.730Z","dependency_job_id":null,"html_url":"https://github.com/tintinweb/vscode-interactive-graphviz","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tintinweb%2Fvscode-interactive-graphviz","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tintinweb%2Fvscode-interactive-graphviz/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tintinweb%2Fvscode-interactive-graphviz/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tintinweb%2Fvscode-interactive-graphviz/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tintinweb","download_url":"https://codeload.github.com/tintinweb/vscode-interactive-graphviz/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248161274,"owners_count":21057555,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["graphviz","graphviz-dot","vscode","vscode-extension"],"created_at":"2024-10-03T10:53:54.464Z","updated_at":"2025-04-10T05:06:38.878Z","avatar_url":"https://github.com/tintinweb.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[\u003cimg width=\"200\" alt=\"get in touch with Consensys Diligence\" src=\"https://user-images.githubusercontent.com/2865694/56826101-91dcf380-685b-11e9-937c-af49c2510aa0.png\"\u003e](https://diligence.consensys.net)\u003cbr/\u003e\n\u003csup\u003e\n[[  🌐  ](https://diligence.consensys.net)  [  📩  ](mailto:diligence@consensys.net)  [  🔥  ](https://consensys.github.io/diligence/)]\n\u003c/sup\u003e\u003cbr/\u003e\u003cbr/\u003e\n\n[![Version](https://vsmarketplacebadge.apphb.com/version/tintinweb.graphviz-interactive-preview.svg)](https://marketplace.visualstudio.com/items?itemName=tintinweb.graphviz-interactive-preview)\n[![Installs](https://vsmarketplacebadge.apphb.com/installs/tintinweb.graphviz-interactive-preview.svg)](https://marketplace.visualstudio.com/items?itemName=tintinweb.graphviz-interactive-preview)\n[![Ratings](https://vsmarketplacebadge.apphb.com/rating/tintinweb.graphviz-interactive-preview.svg)](https://vsmarketplacebadge.apphb.com/rating/tintinweb.graphviz-interactive-preview.svg)\n\n# Graphviz Interactive Preview (Visual Studio Code Extension)\n\nA VSCode extension that provides syntax highlighting, snippets, and an interactive, zoom-, pan- and searchable, live preview with edge tracing for graphs in Graphviz / dot format.\n\n![graphviz_v01](https://user-images.githubusercontent.com/2865694/151164049-9c89e167-d0c1-43eb-ae96-0f5004847bde.gif)\n\n## Language Features\n\n* Graphviz/Dot Language Support / Syntax Highlighting and Snippets (thanks [@joaompinto](https://github.com/joaompinto))\n* AutoCompletion\n* Rename Symbols\n* Find References of node IDs\n* Color selection via Color decoration\n* Hover information for settings\n* Shows syntax errors (only available when the preview of the document is active)\n\n\u003cimg width=\"472\" alt=\"image\" src=\"https://user-images.githubusercontent.com/2865694/163130099-30227a10-e471-4fe0-9564-1d3338f09726.png\"\u003e\n\u003cimg width=\"303\" alt=\"image\" src=\"https://user-images.githubusercontent.com/27259/161251962-6aa3792c-70da-4f48-a9fa-5933012fede2.png\"\u003e\n\u003cimg width=\"576\" alt=\"image\" src=\"https://user-images.githubusercontent.com/2865694/163143275-05f0547b-ce69-43ce-af66-ed76b1f7aa88.png\"\u003e\n\n\n## Interactivity Features\n* Renders dot/Graphviz sources in an interactive live preview.\n* Updates preview as you type.\n* Search for nodes in the graph.\n* Export the graph as `svg` or `dot`.\n* Interactive edge tracing. Click on a node to highlight incoming and outgoing edges (`ESC` to unselect). The Direction of the highlighting can be changed (options: single, upstream, downstream, bidirectional)\n* Configurable render engine, render options \u0026 tracing preference: e.g. `transitionDelay`, `transitionDuration`.\n\n\n![graphviz_v01_open](https://user-images.githubusercontent.com/2865694/151163938-f667acf2-bc87-4555-ad93-866a4ca33822.gif)\n\u003cimg width=\"576\" alt=\"image\" src=\"https://user-images.githubusercontent.com/27259/161146471-6fb269df-5e3a-4f71-ab6e-37391b33c09c.png\"\u003e\n\n\n## Other features\n* Available on [github.dev](https://github.dev), [vscode.dev](https://vscode.dev)\n* 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. \n\n## How to preview\n\nOpen a Graphviz/Dot file in the active editor and use either of the following methods to render the preview:\n\n* (a) open the command prompt (\u003ckbd\u003ecmd\u003c/kbd\u003e+\u003ckbd\u003eshift\u003c/kbd\u003e+\u003ckbd\u003ep\u003c/kbd\u003e) and type  `\u003e graphviz preview`\n* (b) click the \u003cimg width=\"35\" alt=\"image\" src=\"https://user-images.githubusercontent.com/2865694/155575822-720a76d0-68a8-481f-92b4-752d8c6e6242.png\"\u003e button in the editor title\n* (c) from the editor window's context menu, select `Preview Graphviz / Dot (beside)`\n\n\u003cimg width=\"200\" alt=\"image\" src=\"https://user-images.githubusercontent.com/2865694/154029863-7d7dd582-2b9a-480c-b0de-bcccb9136ae4.png\"\u003e\n\u003cimg width=\"400\" alt=\"image\" src=\"https://user-images.githubusercontent.com/2865694/155575303-8c429902-5599-47cf-855f-c9694a32b829.png\"\u003e\n\n\n## Render Examples\n\n\u003ca href=\"https://user-images.githubusercontent.com/2865694/151163516-fbb956ab-607c-45dc-8c83-db3477ceccf9.png\"\u003e\u003cimg width=\"250\" alt=\"semantic-arg-dark\" src=\"https://user-images.githubusercontent.com/2865694/151163516-fbb956ab-607c-45dc-8c83-db3477ceccf9.png\" \u003e\u003c/a\u003e\n\u003ca href=\"https://user-images.githubusercontent.com/2865694/151163623-8714f717-a4ed-428c-bd87-213c8035892d.png\"\u003e\u003cimg width=\"250\" alt=\"semantic-arg-dark\" src=\"https://user-images.githubusercontent.com/2865694/151163623-8714f717-a4ed-428c-bd87-213c8035892d.png\" \u003e\u003c/a\u003e\n\u003ca href=\"https://user-images.githubusercontent.com/2865694/151163732-0a0113c6-7328-4345-b71a-7df782aa0387.png\"\u003e\u003cimg width=\"250\" alt=\"semantic-arg-dark\" src=\"https://user-images.githubusercontent.com/2865694/151163732-0a0113c6-7328-4345-b71a-7df782aa0387.png\" \u003e\u003c/a\u003e\n\u003ca href=\"https://user-images.githubusercontent.com/2865694/151163840-ceb6d75e-983d-4126-9169-6431d1dbfe1d.png\"\u003e\u003cimg width=\"250\" alt=\"semantic-arg-dark\" src=\"https://user-images.githubusercontent.com/2865694/151163840-ceb6d75e-983d-4126-9169-6431d1dbfe1d.png\" \u003e\u003c/a\u003e\n\n\n## Developer Notes\n\n**Note**:❗v0.0.8 introduced a breaking change: the render command was renamed from `interactive-graphviz.preview.beside` to `graphviz-interactive-preview.preview.beside`\n\nThe extension can be set run on development machines with\n```\nnpm run watch\n```\n\nIn order to test the extension as a web extension you have to start\n```\nnpm run open-in-browser\n```\n\n### Interact with this extension\n\n* add `graphviz-interactive-preview` to your `package.json` extension dependencies.\n  \n```json\n{\n    \"name\": \"your-extension\",\n    \"extensionDependencies\": [\"tintinweb.graphviz-interactive-preview\"],\n}\n```\n\n* Create one or multiple new panels displaying the rendered dot graph. Provide the `document` or `uri` object reference of the source code you want to render. Alternatively, you can also provide a `document` or `uri` reference of a virtual document and provide the graphviz dot source with the `content` field. In this case the extension will render the `content` and use the virtual document to extract the path information. The callback function receives the newly created [webPanel](https://github.com/tintinweb/vscode-interactive-graphviz/blob/be9c496/src/features/interactiveWebview.js#L312-L328). Overload `webPanel.handleMessage((message)` from your callback function to receive message events like `onClick` and `onDblClick` emitted from inside the dot render window. \n\n\n```javascript\nlet options = {\n    document: \u003cvscode.document\u003e,\n    uri: \u003cvscode.uri\u003e,\n    content: \u003cstring: dotSrc\u003e,\n    callback: \u003cfunction(webpanel){}\u003e,\n    allowMultiplePanels: \u003cbool: false|[true]\u003e,\n    title: \u003cstring: RenderWindowTitle\u003e,\n    search: \u003coptional string: Search | object: searchOptions\u003e\n}\n            \nvscode.commands.executeCommand(\"graphviz-interactive-preview.preview.beside\", options)\n```\n\nPlease do not hesitate to reach out if you are missing specific functionality.\n\n## Maintainers\n\n* [@tintinweb](https://github.com/tintinweb)\n* [@bigbug](https://github.com/bigbug)\n\nsee [AUTHORS](AUTHORS) for a list contributors.\n\n## Credits\n\n* graph engine: [d3-graphviz](https://github.com/magjac/d3-graphviz)\n* edge tracking: [jquery.graphviz.svg](https://github.com/mountainstorm/jquery.graphviz.svg/)\n* webview handling: [vscode-graphviz](https://github.com/joaompinto/vscode-graphviz/)\n* dot language support, syntax highlighting, snippets: taken from [vscode-graphviz](https://github.com/joaompinto/vscode-graphviz/) with permission from the author [@joaompinto](https://github.com/joaompinto)\n\nCopyright (c) Microsoft Corporation:\n* icons: [vscode-codicons](https://github.com/microsoft/vscode-codicons)\n* UI: [vscode-webview-ui-toolkit](https://github.com/microsoft/vscode-webview-ui-toolkit)\n\n## Release Notes\n\nsee [CHANGELOG](./CHANGELOG.md)\n\n\n-----------------------------------------------------------------------------------------------------------\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftintinweb%2Fvscode-interactive-graphviz","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftintinweb%2Fvscode-interactive-graphviz","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftintinweb%2Fvscode-interactive-graphviz/lists"}