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
@diagramchat participant. - Slash Commands: Use commands like
/simpleUML,/relationUML, and/sequencefor 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.pngfiles using theExportfeature- Note: Exporting to
.svgor.pngrequires 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.vsixpath/to/dive-extension.vsixwith 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




