### Configuration Options

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/README.md

Lists configuration options available for customizing the extension's behavior, such as controlling minimap visibility and applying user-provided custom themes.

```APIDOC
Configuration Options:
- `minimap` setting documentation (added in 1.5.6)
- Configuration for controlling minimap visibility (added in 1.5.0)
- Apply user provided custom theme (added in 0.11.0)
- Added configuration options (added in 1.1.0)
```

--------------------------------

### Extension Pack and Highlighting

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/README.md

Details the inclusion of an extension pack and syntax highlighting for Mermaid diagrams.

```APIDOC
Extension Pack and Highlighting:
- Added extension pack containing: [syntax highlighting](https://marketplace.visualstudio.com/items?itemName=bpruitt-goddard.mermaid-markdown-syntax-highlighting) (0.11.2)
- Syntax Highlight for all Mermaid diagrams (2.0.0)
```

--------------------------------

### Diagram Help Integration

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/README.md

Access detailed documentation for specific diagram syntaxes or features directly from the extension. Links to the official Mermaid.js documentation are provided for comprehensive learning.

```Mermaid
classDiagram
    Animal <|-- Dog
    Animal <|-- Cat
```

--------------------------------

### Mermaid Preview Commands

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/README.md

Provides a list of commands available in the Mermaid Preview extension for interacting with Mermaid diagrams and the Mermaid Chart service.

```APIDOC
Mermaid Preview: Create Diagram
  Creates a new Mermaid diagram in the editor.

Mermaid Preview: Login
  Logs in to the Mermaid Chart service to access and manage diagrams.

Mermaid Preview: Logout
  Logs out from the Mermaid Chart service.

Mermaid Preview: Sync Diagram
  Synchronizes the current diagram with Mermaid Chart.

Mermaid Preview: Preview Diagram
  Opens a preview of the selected Mermaid diagram within the editor.
```

--------------------------------

### File Handling and Support

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/README.md

Details support for various file types and formats, including auto-detection of `.mmd` files, handling Mermaid diagrams in Markdown, and support for standalone Mermaid files.

```APIDOC
File Handling and Support:
- Auto-detect `.mmd` file extension (2.0.0)
- Handle Mermaid diagrams in Markdown files (2.0.0)
- Support for standalone Mermaid files .mmd (0.7.0)
- Support for mermaid metadata in [structured field values](https://www.rfc-editor.org/rfc/rfc8941.html) format (1.6.0)
```

--------------------------------

### VS Code Extension Manifest

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/vsc-extension-quickstart.md

The `package.json` file declares the extension and its commands. It specifies the extension's title and command name, allowing VS Code to display it in the command palette.

```JSON
{
  "name": "mermaid-chart",
  "displayName": "mermaid-chart",
  "description": "",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.80.0"
  },
  "categories": [
    "Other"
  ],
  "activationEvents": [
    "onCommand:mermaid-chart.helloWorld"
  ],
  "main": "./out/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "mermaid-chart.helloWorld",
        "title": "Hello World"
      }
    ]
  },
  "scripts": {
    "vscode:prepublish": "npm run compile",
    "compile": "tsc -p ./",
    "watch": "tsc -watch -p ./",
    "pretest": "npm run compile && npm run lint",
    "lint": "eslint src --ext ts",
    "test": "node ./out/test/runTest.js"
  },
  "devDependencies": {
    "@types/vscode": "1.80.0",
    "@types/mocha": "10.0.1",
    "@types/node": "16.11.7",
    "@typescript-eslint/eslint-plugin": "5.59.8",
    "@typescript-eslint/parser": "5.59.8",
    "eslint": "8.41.0",
    "glob": "8.1.0",
    "mocha": "10.2.0",
    "typescript": "5.1.3",
    "@vscode/test-electron": "2.3.2",
    "@vscode/test-cli": "0.24.0"
  }
}
```

--------------------------------

### Workflow and Publishing

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/README.md

Information regarding the extension's publishing workflow and related updates.

```APIDOC
Workflow and Publishing:
- Publish workflow with actions (1.3.0)
- Updated publish workflow (1.6.1)
- Added pipeline for publish on tag (0.12.1)
```

--------------------------------

### Mermaid Chart VS Code Extension Settings

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/README.md

Details the configurable settings for the Mermaid Chart VS Code extension, including base URL and theme preferences.

```APIDOC
preview.mermaidChart.baseUrl
  Description: This points to the instance of the mermaid chart you are running, for the public service this is `https://www.mermaidchart.com/`.

mermaid.vscode.dark_theme
  Description: Defines the theme used for Mermaid diagrams when VS Code is in dark mode.

mermaid.vscode.light_theme
  Description: Defines the theme used for Mermaid diagrams when VS Code is in light mode.
```

--------------------------------

### AI Chat Participant and Tools

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/README.md

Details the introduction and enhancement of AI features, including an AI chat participant, smart diagram regeneration, and specialized AI tools for syntax documentation, validation, and preview.

```APIDOC
AI Features:
- AI chat participant with `@mermaid-chart` command.
- Smart diagram regeneration based on source file changes.
- Specialized AI tools:
  - Syntax Documentation Tool: Instant access to detailed diagram syntax guides.
  - Diagram Validation Tool: Ensures correct syntax before rendering.
  - Diagram Preview Tool: Streamlined visualization of Mermaid diagrams.
```

--------------------------------

### Smart Auto-Suggest

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/README.md

Offers intelligent code suggestions and snippets based on the diagram type. Typing 'm' triggers suggestions that expand into complete code snippets, streamlining diagram creation.

```Mermaid
mindmap
  root((mindmap))
    A
      B
      C
```

--------------------------------

### External Integrations and Support

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/README.md

Details integrations with external services and platforms, including OAuth support for MermaidChart, Azure DevOps support, and integration with GitHub Copilot Chat.

```APIDOC
External Integrations:
- Added OAuth support for MermaidChart (2.0.0)
- Added support for Azure DevOps (1.4.0)
- Fixed the fixed Azure DevOps regex (1.5.2)
- Fixed Azure DevOps regex (1.5.1)
- Better integration with GitHub Copilot Chat (2.0.0)
```

--------------------------------

### Rendering and Preview Features

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/README.md

Covers various rendering and preview enhancements, including pan and zoom support, horizontal scrolling for wide diagrams, and improved theme handling.

```APIDOC
Rendering and Preview Features:
- Pan & Zoom for diagram preview (2.0.0)
- Pan and zoom support for the rendered diagram (0.8.0)
- Reverted pan and zoom (0.8.1)
- Flowcharts can be scrolled horizontally if diagram wider than pane (0.8.1)
- Improved rendering customization/theme handling (1.1.0)
- Fixed theme selection using new mermaid api (0.5.4)
- Center vertically graph diagrams (0.11.2)
```

--------------------------------

### Mermaid Diagram Commands

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/docs/MermaidFreeFeatures.md

Provides commands for interacting with Mermaid diagrams within VS Code, including creating, previewing, and managing authentication for the Mermaid Chart service.

```APIDOC
Mermaid Preview: Create Diagram
  Creates a new Mermaid diagram in the editor.

Mermaid Preview: Login
  Logs in to the Mermaid Chart service to access and manage diagrams.

Mermaid Preview: Logout
  Logs out from the Mermaid Chart service.

Mermaid Preview: Preview Diagram
  Opens a preview of the selected Mermaid diagram within the editor.
```

--------------------------------

### New General Features (2.0.0)

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/README.md

Details the new features introduced in version 2.0.0, including real-time editing, syntax highlighting, pan/zoom, error highlighting, file extension detection, Markdown integration, code snippet support, and AI-powered capabilities.

```APIDOC
Version 2.0.0 - 2025-04-29

New General Features:
- Real-Time Local Edit & Preview
- Syntax Highlight for all Mermaid diagrams
- Pan & Zoom for diagram preview
- Error Highlighting
- Auto-detect `.mmd` file extension
- Handle Mermaid diagrams in Markdown files
- Support for Code Snippets
- Diagram Help linking to official documentation
- New features for LoggedIn Users
- Smart sync & Save
- Refresh diagram
- Dependency Update
- Upgraded to latest Mermaid version `v11.4.1`
- Added OAuth support for MermaidChart.
- Added AI-powered diagramming capabilities
- Introduced AI chat participant with `@mermaid-chart` command
- Added smart diagram regeneration based on source file changes
- Added three specialized AI tools:
  - Syntax Documentation Tool
  - Diagram Validation Tool
  - Diagram Preview Tool
- Enhanced VS Code Agent Mode with dedicated Mermaid tools
- Improved AI chat participant capabilities
- Better integration with GitHub Copilot Chat
- Support to render Mermaid diagrams directly in VS Code Markdown preview
- Support for redux-color & redux-dark-color theme
```

--------------------------------

### Syntax Highlighting

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/README.md

The extension provides robust syntax highlighting for Mermaid diagrams, adapting to your VS Code theme. It also offers specific highlighting for diagrams embedded within Markdown files.

```Mermaid
%% This is a comment
```mermaid
graph TD;
    A[Start] --> B(Process);
```
```

--------------------------------

### Markdown Preview Integration

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/README.md

Explains the capability to render Mermaid diagrams directly within the VS Code Markdown preview, replacing raw Mermaid code blocks for a seamless viewing experience.

```APIDOC
Markdown Preview Integration:
- Render Mermaid diagrams directly in the VS Code Markdown preview.
- Replaces raw Mermaid code blocks.
```

--------------------------------

### Mermaid Version Upgrades

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/README.md

Tracks the upgrades of the Mermaid library used by the extension, indicating compatibility with newer Mermaid features and syntax.

```APIDOC
Mermaid Version History:

- v11.4.1 (2025-04-29)
- v9.1.2 (2022-06-24)
- v8.10.2 (2020-06-11)
- v8.9.1 (2020-03-11)
- v8.8.3 (2020-11-16)
- v8.8.0 (2020-09-29)
- v8.4 (2019-12-04)
- v8.2.2 (2019-07-22)
- v8.0.0-rc8 (2018-05-31)
- v7.1.0 (2017-09-18)
- v7.0.17 (2017-09-12)
- v7.0.4 (2017-08-21)
- v7.0.0 (2017-02-01)
```

--------------------------------

### VS Code Extension Activation

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/vsc-extension-quickstart.md

The `activate` function in `src/mermaidChart.ts` is called when the extension is activated, typically by executing a registered command. It registers the command implementation.

```TypeScript
import * as vscode from "vscode";

export function activate(context: vscode.ExtensionContext) {

	console.log('Congratulations, your extension "mermaid-chart" is now active!');

	let disposable = vscode.commands.registerCommand('mermaid-chart.helloWorld', () => {
		vscode.window.showInformationMessage('Hello World from mermaidChart!');
	});

	context.subscriptions.push(disposable);
}
```

--------------------------------

### Other Features and Changes

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/README.md

Includes miscellaneous features and changes not covered in other categories, such as adding links to the Mermaid website and fixing loop text style.

```APIDOC
Other Features and Changes:
- Added link to Mermaid website (0.10.2)
- Fixed loop text style in sequence diagrams (0.10.1)
- Added Sphinx directive support (0.10.0)
- Added Hugo shortcodes support (0.9.0)
- Added Mermaid language contribution (0.8.3)
- Added a minimap of the diagram (0.8.2)
- Added FontAwesome (4.7) support (0.5.0)
- Convert mermaid resource path to a file URL for OS compatibility [FrodgE](https://github.com/FrodgE) (0.4.4)
- Rerender on configuration change (0.11.0)
- Removed travis (1.0.0)
- Remove mermaid processing in builtin markdown previewer (1.0.0)
```

--------------------------------

### Support for .mmd File Extension

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/README.md

Provides native support for the .mmd file extension, treating them as local Mermaid Markdown files. These files are visually indicated with the Mermaid logo in the file explorer.

```Mermaid
%% Mermaid diagram in .mmd file
gantt
    title Project Timeline
    section Planning
    Design :done, 2023-01-01, 7d
```

--------------------------------

### Dependency Management and Updates

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/README.md

Tracks changes in dependencies, including upgrades to the Mermaid library and removal of specific libraries like lodash.

```APIDOC
Dependency Management:
- Dependency Update (2.0.0)
- Pinned parcel-bundler (1.6.1)
- Removed `lodash` dependency (1.5.5)
- Switched from using hardcoded `vscode-resource` scheme to `Webview.asWebviewUri` (1.5.4)
- Fixed peer dependencies (0.11.1)
```

--------------------------------

### Mermaid Diagram Support

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/README.md

This extension supports a comprehensive list of Mermaid diagram types, enabling users to create various visualizations directly within VS Code. It leverages the latest Mermaid.js version for enhanced features and bug fixes.

```Mermaid
Flowchart
Sequence
Block
Class
Entity Relationship
Gantt
Mindmap
State
Timeline
Gitgraph
C4
Sankey
Pie chart
Quadrant
Requirement
User Journey
Sankey
XY chart
Kanban
Architecture
Packet
Radar
```

--------------------------------

### MermaidChart VS Code Commands

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/docs/MermaidAdvancedFeatures.md

Provides commands for linking, syncing, and connecting diagrams with MermaidChart projects directly within VS Code.

```APIDOC
Mermaid Preview: Link Diagram
  Inserts a linked MermaidChart diagram ID at the current cursor position.

Mermaid Preview: Sync Diagram
  Syncs the edited diagram with the linked MermaidChart version.

Mermaid Preview: Connect Diagram
  Connects the current diagram with an online MermaidChart project.
```

--------------------------------

### VS Code Agent Mode Enhancements

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/README.md

Describes improvements to the VS Code Agent Mode, specifically focusing on the integration and enhancement of Mermaid tools for better accuracy and functionality.

```APIDOC
Enhanced VS Code Agent Mode:
- Dedicated Mermaid tools for improved accuracy.
```

--------------------------------

### Bug Fixes and Minor Adjustments

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/README.md

Lists various bug fixes and minor adjustments made across different versions to improve stability and user experience.

```APIDOC
Bug Fixes and Adjustments:
- Fixed parse crash #91 (1.3.1)
- Fixed the fixed Azure DevOps regex (1.5.2)
- Fixed Azure DevOps regex (1.5.1)
- Made arrowhead fix a configuration extension. Fixed #13 (0.4.2)
```

--------------------------------

### Specific Diagram Type Support

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/README.md

Highlights support for specific diagram types, such as state diagrams and pie charts, enabled by Mermaid version updates.

```APIDOC
Diagram Type Support:
- Added support for state diagrams and pie charts via mermaid@8.4 (1.3.0)
```

--------------------------------

### Error Highlighting

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/README.md

The extension identifies and highlights syntax errors in your Mermaid code, providing error messages and indicating the specific line causing the issue, aiding in quick error resolution.

```Mermaid
graph TD
    A -- Invalid Syntax --> B
```

--------------------------------

### Real-Time Editing and Preview

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/README.md

Experience a side-by-side real-time preview of your Mermaid diagrams as you edit the code. This feature ensures immediate reflection of changes, showcasing the power of text-based diagramming.

```Mermaid
graph TD;
    A-->B;
    B-->C;
```

--------------------------------

### VS Code Extension Testing

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/vsc-extension-quickstart.md

Tests for the extension are located in the `src/test/suite` folder. The test runner considers files matching the pattern `**.test.ts`. You can create new test files or folders within the `test` directory.

```TypeScript
import * as vscode from "vscode";
import * as path from "path";

export function activate(context: vscode.ExtensionContext) {

	console.log('Congratulations, your extension "mermaid-chart" is now active!');

	let disposable = vscode.commands.registerCommand('mermaid-chart.helloWorld', () => {
		vscode.window.showInformationMessage('Hello World from mermaidChart!');
	});

	context.subscriptions.push(disposable);
}

export function deactivate() {}
```

--------------------------------

### Export Diagrams

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/README.md

Export your Mermaid diagrams in high-quality SVG and PNG formats. This facilitates easy inclusion in documentation, sharing with teams, use in presentations, and version control of diagram assets.

```Mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>Bob: Hello Bob, how are you?
```

--------------------------------

### Pan and Zoom Functionality

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/README.md

Navigate large diagrams with ease using the pan and zoom features. The zoom level is sticky, maintaining its setting during edits, and a reset option is available to fit the preview to the screen.

```Mermaid
graph LR
    A -- Link --> B
```

--------------------------------

### Auto-Detect Mermaid in Markdown

Source: https://github.com/mermaid-chart/vscode-mermaid-preview/blob/master/README.md

Automatically detects Mermaid diagrams within Markdown files using the ```mermaid``` code block. Allows for direct editing of diagrams from within the Markdown file.

```Markdown
# My Document

Here is a diagram:

```mermaid
graph TD;
    X --> Y;
```

Edit the diagram above.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.