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:
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.
After installing python, make sure to install Diagrams package using pip3 install diagrams or python3 -m pip install diagramsreference from this github issue
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! 🥰
