repository·master·Indexed 42 days ago
https://github.com/mermaid-chart/vscode-mermaid-previewA local-first Visual Studio Code extension for real-time previewing and editing of Mermaid.js diagrams. It provides side-by-side editing, syntax highlighting, pan and zoom capabilities, and support for exporting diagrams as SVG or PNG. The extension automatically detects Mermaid diagrams within Markdown files and supports a wide range of diagram types, including Flowchart, Sequence, Gantt, and Mindmap. Version 2.2.0 focuses on local use, while cloud-based features have moved to the separate Mermaid extension.
Mermaid Preview is a Visual Studio Code extension focused on free, local diagram previewing. It provides real-time side-by-side editing, syntax highlighting, pan and zoom capabilities, and support for exporting diagrams as SVG or PNG.
Note on Feature Split: This extension is for local use. Features such as account login, cloud sync, AI diagramming, and cloud saving have moved to the Mermaid extension.
The extension project is organized as follows:
package.json: The manifest file. It is used to declare the extension, define commands, and set their titles/names so they appear in the Command Palette.src/mermaidChart.ts: The main implementation file. It must export an activate function, which VS Code calls when the extension is first triggered. Inside activate, you use registerCommand to bind your logic to a command name.src/test/suite/: Contains test files (matching **.test.ts).The functionality of the ecosystem is split between two extensions. Use Mermaid Preview for local development and the Mermaid extension for cloud/account-based workflows.
.mmd and .mermaid filesTo execute the test suite:
Ctrl+Shift+D or Cmd+Shift+D on Mac).Extension Tests from the launch configuration dropdown.F5 to run the tests in a new window.Test Configuration Rules:
**.test.ts.test directory.src/test/suite/mermaidChart.test.ts.# Select 'Extension Tests' in the Debug viewlet and press F5The extension automatically detects Mermaid diagrams within Markdown files using the ```mermaid code block.
You can export your diagrams to high-quality image formats for use in documentation, presentations, or version control. Supported formats include:
After modifying code in src/mermaidChart.ts, you can apply changes using one of two methods:
Ctrl+R (or Cmd+R on Mac) to reload the VS Code window, which will reload your extension with the updated code.As of version 2.2.0, Mermaid Preview is a local-only extension. Features requiring a Mermaid account (such as syncing, connecting, or AI-assisted generation) have been moved to the official Mermaid extension.
To continue using cloud-based features, follow these steps:
To start developing, press F5 to launch a new VS Code window (Extension Development Host) with your extension loaded. You can execute your extension's commands via the Command Palette (Ctrl+Shift+P or Cmd+Shift+P) by typing the command name defined in package.json (e.g., Hello World).
To debug, set breakpoints in src/mermaidChart.ts. When the command is executed, the execution will pause at your breakpoints, and you can inspect variables and view output in the Debug Console.
# Press F5 to launch the extension host
# Press Ctrl+Shift+P then type 'Hello World' to run the commandThe extension provides several configuration options to customize the preview experience. You can access these via the sidebar or the standard VS Code settings menu.
| Key | Description |
|---|---|
mermaid.vscode.dark_theme | Defines the theme used for Mermaid diagrams when VS Code is in dark mode. |
mermaid.vscode.light_theme | Defines the theme used for Mermaid diagrams when VS Code is in light mode. |
mermaid.vscode.max_Zoom | Maximum zoom level for diagrams, as a multiple of 100%. (e.g., 5 = 500%). |
mermaid.vscode.max_CharLength | Maximum number of characters allowed in a diagram's source. |
mermaid.vscode.max_Edges | Maximum number of edges allowed in a diagram's source. |
preview.mermaid.enableTelemetry | Allow Mermaid Preview to send anonymous preview failure analytics. |
preview.mermaid.showFeaturePopups | Show notifications when a feature has moved to the Mermaid extension. |
preview.mermaid.baseUrl | Base URL used for extension usage analytics. |
The Mermaid Preview sidebar allows you to manage extension settings directly within the webview. You can toggle telemetry and feature popups, which updates the preview.mermaid configuration namespace in VS Code.
Available settings via the sidebar:
enableTelemetry: Controls whether telemetry data is sent.showFeaturePopups: Controls whether feature announcement popups are displayed.Note that the sidebar also reflects the global VS Code telemetry state (vscode.env.isTelemetryEnabled).
The sidebar provides a feedback form to help improve the extension. When submitting, the following fields are required:
activity: The activity being performed.frequency: How often the activity occurs.details: A text description of the feedback.email: Your contact email.Rate Limiting:
Feedback submissions are rate-limited to once every 24 hours. If you attempt to submit more frequently, you will receive a warning message: "You can only send one feedback submission every 24 hours."