MermaidEyes

Inline Mermaid diagrams in the Markdown Preview — themes, presets, and hover preview. Compatible with VS Code and Cursor.

Table of contents

• Features
• Getting started
• Examples
• Configuration
• Commands
• CI / CD & Release
• Development
• Troubleshooting
• Links

Features

• Inline Mermaid diagrams — Renders ```mermaid code fences directly in the Markdown Preview with theme colors (Ocean, Coral Reef, etc.).
• Hover in editor — Hover over a Mermaid block in the editor to see the diagram and a link to open the preview.
• View with MermaidEyes — Command to open the preview next to the active file (editor title bar, context menu, or explorer right-click on .md files).
• First install — Welcome page and preview open automatically after installation.
• Diagram on hover (preview) — Optional mermaideyes.diagramOnHover setting: show a "View diagram" placeholder; hover or click to reveal the diagram.
• Themes and presets — Ocean by default; configurable themes and presets (e.g. architecture for flowcharts).

Getting started

1. Install the extension from the Marketplace or from Releases (VSIX).
2. Open a Markdown file (.md).
3. Add a Mermaid code block (see Examples).
4. Open the Markdown Preview (Ctrl+Shift+V / Cmd+Shift+V) or use View with MermaidEyes. Diagrams render inline with your chosen theme.

Examples

Flowchart

graph TD
  A[Start] --> B{Decision}
  B -->|Yes| C[Ship it]
  B -->|No| D[Iterate]
  D --> B

Sequence diagram

sequenceDiagram
  participant User
  participant Extension
  User->>Extension: Open Markdown Preview
  Extension->>Extension: Render Mermaid blocks
  Extension-->>User: Inline diagrams with theme

Flowchart (LR)

flowchart LR
  A[Input] --> B[Process]
  B --> C[Output]

Your Mermaid block must start with a diagram type keyword: graph, flowchart, sequenceDiagram, gantt, pie, stateDiagram, etc. Empty or invalid blocks show a placeholder.

Configuration

Open Settings and search for mermaideyes to change these.

Commands

CI / CD & Release

The project uses GitHub Actions for packaging and publishing.

Version bump → tag

• Workflow: Tag on version bump
• Trigger: Push to master when extension/package.json or package.json version changes.
• Behavior: Creates and pushes a tag vX.Y.Z (e.g. v0.2.6). Tags are only created if they do not already exist (remote tags are fetched before checking).

Tag → build & publish

• Workflow: Release
• Trigger: Push of a tag matching v* (e.g. v0.2.6), or manual run via Actions → Release → Run workflow with a tag input.
• Steps:
  1. Checkout at the tag ref.
  2. Create GitHub Release for the tag (if it does not exist).
  3. Set extension version from the tag, run tests, build, and prepack for vsce.
  4. Package the VSIX with @vscode/vsce package --no-dependencies.
  5. Publish to the VS Code Marketplace using the VS_MARKETPLACE_TOKEN secret (Azure DevOps Personal Access Token).
  6. Upload the VSIX to the GitHub Release and as a workflow artifact.

Manual release

• Create a release: GitHub Releases → Draft a new release → choose or create tag vX.Y.Z.
• Run release from Actions: Actions → Release → Run workflow → enter tag (e.g. v0.2.6) and run.

Secrets

• VS_MARKETPLACE_TOKEN — Personal Access Token (Azure DevOps) with Marketplace (Publish) scope. Without it, the Release workflow still builds and attaches the VSIX to the GitHub Release but does not publish to the Marketplace.

Development

# From repository root
npm install --include=dev
npm run build

Press F5 in VS Code/Cursor to launch the Extension Development Host. Open a Markdown file, add a Mermaid block, and open the preview.

npm test

Troubleshooting

Links

• Repository
• Releases (VSIX)
• Issues
• Marketplace