vscode-markdown-mermaid

You can use VS Code's built-in markdown.styles setting to inject custom CSS (like Font Awesome) into the Markdown preview, which can then be used within Mermaid diagrams.

// In settings.json
"markdown.styles": [
    "https://use.fontawesome.com/releases/v5.7.1/css/all.css"
]

// In your Markdown file
```mermaid
graph LR
    fa:fa-check-->fa:fa-coffee

You can render Mermaid diagrams in VS Code's built-in Markdown preview and in Markdown cells within notebooks. This extension supports Mermaid version 11.12.0 and allows for the use of Iconify icons (MDI and logos) within diagrams.

To create a diagram, use either a fenced mermaid code block or a ::: mermaid block.

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

OR

::: mermaid graph TD; A-->B; A-->C; B-->D; C-->D; :::

You can specify which Mermaid theme to use depending on your VS Code color theme. Note that these settings are currently not supported in notebooks.

Supported theme values for both settings: base, forest, dark, default, neutral.

The Mermaid support in the Markdown preview is initialized automatically when the webview loads or when the content is updated via the vscode.markdown.updateContent event.

During initialization, the extension:

1. Aborts any ongoing rendering processes using an AbortController.
2. Loads extension configuration via loadExtensionConfig().
3. Configures the Mermaid theme based on the VS Code color theme (detecting vscode-dark or vscode-high-contrast on document.body).
4. Initializes Mermaid with the loaded configuration.
5. Registers Mermaid addons.
6. Scans the document body to render Mermaid blocks using renderMermaidBlocksInElement.
7. Manages diagram states (like zoom/pan) via a DiagramManager to ensure persistence across updates.

Control how diagrams are sized and how navigation controls are shown.

• markdown-mermaid.resizable: (Default: true) Allows dragging the bottom edge of a diagram to adjust height.
• markdown-mermaid.maxHeight: Sets a maximum height for diagrams. Accepts pixel numbers (e.g., 400) or CSS values (e.g., 80vh).
• markdown-mermaid.controls.show: Determines when navigation control buttons appear. Supported values: never, onHoverOrFocus (default), always.

The markdown-mermaid.mouseNavigation.enabled setting determines how the <kbd>alt</kbd> key interacts with panning and zooming.

• always: Click and drag always pans without a modifier key.
• alt: (Default) Click and drag only pans when holding <kbd>alt</kbd> (<kbd>option</kbd> on Mac).
• never: Disables mouse-based panning (navigation controls and pinch-to-zoom still work).

To render Mermaid diagrams within VS Code Markdown previews, wrap your Mermaid syntax in a fenced code block with the language identifier mermaid. The extension will automatically detect these blocks and render them as visual diagrams in the preview pane.

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

You can enable the tidy-tree layout engine for Mermaid diagrams by adding a YAML configuration block at the top of your Mermaid code block. This is particularly useful for mindmap diagrams to control how nodes are laid out.

To use it, include the following configuration header:

---
config:
  layout: tidy-tree
---

---
config:
  layout: tidy-tree
---
mindmap
root((mindmap is a long thing))
  A
  B
  C
  D

The MermaidExtensionConfig interface defines the available configuration options for the extension. These settings control themes, interaction modes, and layout constraints for Mermaid diagrams in the Markdown preview.

interface MermaidExtensionConfig {
    readonly darkModeTheme: string;
    readonly lightModeTheme: string;
    readonly maxTextSize: number;
    readonly clickDrag: ClickDragMode;
    readonly showControls: ShowControlsMode;
    readonly resizable: boolean;
    readonly maxHeight: string;
}

List of available configuration settings for the Mermaid extension.

{
  "markdown-mermaid.lightModeTheme": "base | forest | dark | default | neutral",
  "markdown-mermaid.darkModeTheme": "base | forest | dark | default | neutral",
  "markdown-mermaid.languages": ["mermaid"],
  "markdown-mermaid.mouseNavigation.enabled": "always | alt | never",
  "markdown-mermaid.controls.show": "never | onHoverOrFocus | always",
  "markdown-mermaid.resizable": true,
  "markdown-mermaid.maxHeight": "number | CSS value",
  "markdown-mermaid.maxTextSize": 50000
}