Skip to content

Extension for Visual Studio Code to preview Typescript property declarations as a DAG.

License

Notifications You must be signed in to change notification settings

natessilva/ts-prop-dag

Repository files navigation

TS Property DAG

An extension for Visual Studio Code to preview Typescript classes as directed acyclic graphs using Graphviz (DOT).

screenshot

Installation

You can install this extension from the Visual Studio Marketplace.

Usage

Open preview

Open the Command Palette (usually by pressing Ctrl + Shift + P), then select “Prop DAG: Show Preview”.

Manipulate preview

Action Gesture
Zoom in Mouse wheel up / +
Zoom out Mouse wheel down / -
Toggle 100% zoom Mouse double click / Space
Pan Mouse drag / Left / Right / Up / Down / A / D / W / S
Zoom to 100% 0
Move to center X

There are three zooming modes: Fixed, Fit and Auto Fit.

  • Fixed: The zoom ratio does not change when the source changes or the window size changes.
  • Fit: The graph is scaled to align to the border of the visible view area.
  • Auto Fit: When the view area is big enough to contain a 100% sized graph, the graph will be set a zoom ratio of 100%, otherwise the graph is scaled to fit into the view area.

Export graph

To export the generated graph, click the “Export” button on the top right corner.

Configuration

Configuration Type Description
propDag.dotPath string | null null means to use the “dot” program in your PATH environment variable, or a string value to indicate the “dot” program you want to use.
propDag.engine "dot" | null The layout engine to use. null means to use the “dot” layout engine. Currently, only the “dot” engine is supported.

Make sure the extension can find the “dot” program. You can set propDag.dotPath option to the path of the dot executable, or make sure the directory containing the dot program is in your PATH environment variable.

To set the propDag.dotPath option, go to File → Preference → Settings.

Known issues

  • After saving an untitled file, the preview becomes invalid.
  • When the zoom ratio is too large, the graph may be at a wrong position.

About

Extension for Visual Studio Code to preview Typescript property declarations as a DAG.

Resources

License

Stars

Watchers

Forks

Packages

No packages published