The Directed Graph Markup Language (dgml) can be used to visualize things like processes, hierarchies, flows and many other things.
This extension for Visual Studio Code can be used to render a *.dgml file into a graphical representation of the graph. Find it on the Visual Studio Code marketplace.
To visualize a dgml file in Visual Studio Code you click on the file to open it, then you select the "DGMLViewer: Render the dgml graph" command from the command pallette to render the graph.
When the dgml file has been rendered you can save the representation as a Png, Jpg or Svg image file or save the internal Cytoscape json object if you need to extract data from the graph.
You can also choose to only save part of the graph. You do this by clicking the 'Save selection as png' button, then right-click and drag to select the area you want to save. The selection is saved when you let go of the mouse button.
In a DirectedGraph file you can link a node to an external file. DGMLViewer will determine if the file is accessible on the disk and if it is then the node is clickable and will open the file in vscode when the node is clicked.
You can change the rendered layout of the directed graph by clicking the 'Change layout' checkbox and the choose a layout in the dropdown box. It will not change the dgml file itself, it will only change the rendering of the graph.
The file-info command of the extension shows some metadata about the dgml file:
In the Visual Studio Code settings you find under File --> Preferences --> Settings, under Extensions, there is a section with all the settings for DGMLViewer. It is possible to change the default filenames used when the extension saves a file to the workspace folder. You can change how the graph nodes are rendered, the edge endings, the color of the root nodes and more.
See the full list of settings below the screenshot.
| Setting | Description |
|---|---|
| dgmlViewer.defaultNodeBackgroundColor | The color of the nodes of the directed graph. The string should be in rgb format. |
| dgmlViewer.edgeArrowToType | The default ending of the edges. |
| dgmlViewer.nodeShape | The shape of the nodes in the directed graph. Notice that 'ellipse','circle','database','box' and 'text' have the label inside the shape, the rest have the label outside the shape. |
| dgmlViewer.graphSelectionGuidelineColor | The color of the guidelines used when selecting part of a directed graph. The string should be in rgba format or standard css color names. |
| dgmlViewer.graphSelectionGuidelineWidth | The width of the guide lines shown when selecting part of a directed graph |
| dgmlViewer.graphSelectionColor | The color of the selection rectangle used when selecting part of a directed graph. The string should be in rgba format or standard css color names. |
| dgmlViewer.graphSelectionWidth | The width of the selection rectangle shown when selecting part of a directed graph. |
| dgmlViewer.saveAsFilename | The default name used when saving the directed graph as a Png, Jpg, Svg or Json file. |
| dgmlViewer.showPopupsOverNodesAndLinks | When the setting is set to true a popup with various information from node or edge will be shown when the mouse pointer hovers over nodes and edges. |
The Directed Graph Markup Language (dgml) has the ability to specify conditional rendering of the graph. This is done by using the Style elements in the specification. In the current version of this DGMLViewer extension for Visual Studio code this conditional rendering is very limited. Only the 'HasCategory(...)' condition is evaluated.
- Cytoscape.js - Used for rendering the directed graph.
- Icons are from Icon8