This Visual Studio Code extension integrates with GitHub Copilot Chat to help you generate diagrams directly within the editor. Using the @diagram
chat participant, you can create various diagrams based on your code or natural language descriptions.
Key features include:
- Diagram Generation: Create Mermaid diagrams (flowcharts, class diagrams, sequence diagrams, relationship diagrams) by interacting with the
@diagram
chat participant. - Slash Commands: Use commands like
/simpleUML
,/relationUML
, and/sequence
for quick diagram generation from the active editor's code. - Code Analysis: The extension analyzes your code context to generate relevant diagrams.
- Diagram Rendering: Renders generated Mermaid diagrams in a VS Code Webview panel.
- Theme Selection: Allows choosing different themes for the rendered Mermaid diagrams.
- Save Functionality: Save diagrams as
.mmd
,.md
,.svg
, or.png
files using theExport
feature- Note: Exporting to
.svg
or.png
requires the Mermaid CLI (mmdc
) to be installed globally. If you don't have it, you can install it using npm:npm install -g @mermaid-js/mermaid-cli
- Note: Exporting to
This extension is currently distributed as a VSIX package. To install:
- Download the VSIX file from the provided link or location
- Open VS Code
- Go to the Extensions view (click the Extensions icon in the Activity Bar or press
Ctrl+Shift+X
) - Click the "..." (More Actions) menu at the top of the Extensions view
- Select "Install from VSIX..."
- Browse to and select the downloaded VSIX file
- Reload VS Code when prompted
- Download the VSIX file from the provided link or location
- Open a terminal/command prompt
- Run the following command:
(Replace
code --install-extension path/to/dive-extension.vsix
path/to/dive-extension.vsix
with the actual path to the downloaded VSIX file)
- Visual Studio Code 1.85.0 or higher
- GitHub Copilot Chat extension (for full functionality)
- For exporting to SVG/PNG: Mermaid CLI (
mmdc
) installed globally