Diagrams Previewer extension for Visual Studio Code

An extension to preview Diagrams (Diagram as a Code) while editing the code in VSCode.

Features

Preview Diagram
Update Diagrams Preview on save
Pan/zoom diagram on the previewer window to have a closer view of components
Save the image to a destination of your choice

Usage

The extension can be activated with

Toggle Preview (Command+Shift+P for Mac, Ctrl+Shift+P for Windows)
Command Preview Diagrams to load the diagrams on a separate window on the right

Configurations

We provide the following settings to the extension:

	type	default
diagramspreviewer.pythonCommand	string	default	🆕 option: "VS Code Python Interpreter". This option will use the interpreter set on VS Code's python extension and it will be applicable to any platform (Windows / Mac). The other options will only apply to Mac platform.

Requirements (Set up)

Make sure you have installed the following before activating the extension:

Windows

Python 3
- choco install python3
- After installing python, make sure to install Diagrams package using pip3 install diagrams
GraphViz
- choco install graphviz
- Make sure graphviz is added into your environment variables. You may add C:\Program Files (x86)\Graphviz2.38\bin\dot.exe to System Path manually if it is not added automatically during the installation earlier.

Mac

Python 3
- brew install python3
- After installing python, make sure to install Diagrams package using pip3 install diagrams or python3 -m pip install diagrams reference from this github issue
GraphViz
- brew install graphviz

Demonstration

Demonstration GIF

Source Code Example:

from diagrams import Diagram
from diagrams.aws.compute import EC2
from diagrams.aws.database import RDS
from diagrams.aws.network import ELB

with Diagram("Web Service",show=False): # It is recommended to set "show" to false to prevent the pop out of the diagram in your image viewer
    ELB("lb") >> EC2("Production") >> RDS("Accounts")
    ELB("lb") >> EC2("UAT") >> RDS("Accounts")
    ELB("lb") >> EC2("Dev") >> RDS("Accounts")

Release Notes

Please refer to CHANGELOG.md.

Show Support

If you find this extension helpful, please star the repo and leave a review to help others find it easily too!

You may buy me a coffee if you would like to show some support in my open-source journey. It will be greatly appreciated! 🥰

chialiyun / DiagramsPreviewerVSCExt

readme