### Install Mermaid MCP Server via Smithery for Claude

Source: https://github.com/peng-shawn/mermaid-mcp-server/blob/main/README.md

Installs the Mermaid MCP server automatically using the Smithery CLI, specifically targeting Claude desktop as the client.

```bash
npx -y @smithery/cli install @peng-shawn/mermaid-mcp-server --client claude
```

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

### Run Mermaid MCP Server with Inspector

Source: https://github.com/peng-shawn/mermaid-mcp-server/blob/main/README.md

Starts the Mermaid MCP server using the Model Context Protocol inspector for debugging and testing purposes, listening for MCP messages on standard I/O.

```bash
npx @modelcontextprotocol/inspector node dist/index.js
```

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

### Mermaid Diagram Generation Basic Usage Example

Source: https://github.com/peng-shawn/mermaid-mcp-server/blob/main/README.md

Demonstrates a basic JSON payload for the `generate` tool, providing Mermaid flowchart code to be rendered with default settings.

```json
{
  "code": "flowchart TD\n    A[Start] --> B{Is it?}\n    B -->|Yes| C[OK]\n    B -->|No| D[End]"
}
```

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

### Generate and Save State Diagram as SVG

Source: https://github.com/peng-shawn/mermaid-mcp-server/blob/main/README.md

Illustrates how to configure the mermaid-mcp-server to generate a Mermaid state diagram and save it as an SVG file. This example explicitly sets the output format to SVG, providing flexibility for different rendering needs.

```javascript
{
  "code": "stateDiagram-v2\n    [*] --> Still\n    Still --> [*]\n    Still --> Moving\n    Moving --> Still\n    Moving --> Crash\n    Crash --> [*]",
  "outputFormat": "svg",
  "name": "state_diagram",
  "folder": "/path/to/diagrams"
}
```

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

### Manual Project Publishing via Git Tags

Source: https://github.com/peng-shawn/mermaid-mcp-server/blob/main/README.md

Outlines the manual steps for publishing the project to npm. This process involves updating code, committing changes, and then creating and pushing a new Git tag, which automatically triggers a GitHub workflow for building and publishing.

```bash
git tag v0.1.4  # Use the appropriate version number
git push origin v0.1.4
```

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

### Mermaid MCP Server API Reference

Source: https://github.com/peng-shawn/mermaid-mcp-server/blob/main/README.md

Detailed API documentation for the Mermaid Model Context Protocol (MCP) server, outlining the `generate` tool's functionality, parameters, and behavior based on the `CONTENT_IMAGE_SUPPORTED` environment variable.

```APIDOC
Tool: generate
  Description: Converts Mermaid diagram code to a PNG image or SVG file.
  Parameters:
    code: The Mermaid diagram code to render (string, required)
    theme: Theme for the diagram. Options: "default", "forest", "dark", "neutral" (string, optional)
    backgroundColor: Background color for the diagram, e.g. 'white', 'transparent', '#F0F0F0' (string, optional)
    outputFormat: Output format for the diagram. Options: "png", "svg" (string, optional, defaults to "png")
    name: Name for the generated file (string, required when CONTENT_IMAGE_SUPPORTED=false)
    folder: Absolute path to save the image/SVG to (string, required when CONTENT_IMAGE_SUPPORTED=false)

  Behavior based on CONTENT_IMAGE_SUPPORTED environment variable:
    - When CONTENT_IMAGE_SUPPORTED=true (default): The tool returns the image/SVG directly in the response.
    - When CONTENT_IMAGE_SUPPORTED=false: The tool saves the image/SVG to the specified folder and returns the file path.

Environment Variable: CONTENT_IMAGE_SUPPORTED
  Description: Controls whether images are returned directly in the response or saved to disk.
  Values:
    - true (default): Images are returned directly in the response.
    - false: Images are saved to disk, requiring `name` and `folder` parameters for the `generate` tool.
```

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

### Configure Mermaid MCP Server for Claude Desktop

Source: https://github.com/peng-shawn/mermaid-mcp-server/blob/main/README.md

Provides the JSON configuration snippet required to integrate the Mermaid MCP server as a tool within Claude desktop, specifying the command and arguments for execution.

```json
{
  "mcpServers": {
    "mermaid": {
      "command": "npx",
      "args": ["-y", "@peng-shawn/mermaid-mcp-server"]
    }
  }
}
```

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

### Automated Project Publishing with npm Release Script

Source: https://github.com/peng-shawn/mermaid-mcp-server/blob/main/README.md

Provides commands for automating the publishing process to npm using a dedicated release script. This method ensures consistent versioning and simplifies the release workflow by supporting direct version numbers or semantic version increments (patch, minor, major).

```bash
# Using a specific version number
npm run release 0.1.4

# Using semantic version increments
npm run release patch  # Increments the patch version (e.g., 0.1.3 → 0.1.4)
npm run release minor  # Increments the minor version (e.g., 0.1.3 → 0.2.0)
npm run release major  # Increments the major version (e.g., 0.1.3 → 1.0.0)
```

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

### Run Mermaid MCP Server with Cursor and Cline

Source: https://github.com/peng-shawn/mermaid-mcp-server/blob/main/README.md

Executes the Mermaid MCP server for use with Cursor and Cline, disabling content image support to save output to disk instead of returning it directly.

```bash
env CONTENT_IMAGE_SUPPORTED=false npx -y @peng-shawn/mermaid-mcp-server
```

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

### Build Mermaid MCP Server

Source: https://github.com/peng-shawn/mermaid-mcp-server/blob/main/README.md

Compiles the TypeScript source code of the Mermaid MCP server using `npx tsc`.

```bash
npx tsc
```

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

### Mermaid Diagram Generation with Custom Theme and Background

Source: https://github.com/peng-shawn/mermaid-mcp-server/blob/main/README.md

Illustrates a JSON payload for the `generate` tool, specifying Mermaid sequence diagram code along with custom `forest` theme and a light gray background color.

```json
{
  "code": "sequenceDiagram\n    Alice->>John: Hello John, how are you?\n    John-->>Alice: Great!",
  "theme": "forest",
  "backgroundColor": "#F0F0F0"
}
```

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

### Generate and Save Class Diagram to Disk (PNG)

Source: https://github.com/peng-shawn/mermaid-mcp-server/blob/main/README.md

Demonstrates how to configure the mermaid-mcp-server to generate a Mermaid class diagram and save it as a PNG file to a specified folder. This configuration is particularly useful when inline image support is disabled in the client environment.

```javascript
{
  "code": "classDiagram\n    Class01 <|-- AveryLongClass\n    Class03 *-- Class04\n    Class05 o-- Class06",
  "theme": "dark",
  "name": "class_diagram",
  "folder": "/path/to/diagrams"
}
```

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