Mermaid Ink

A VS Code / Cursor extension that renders Mermaid diagrams in markdown preview with proper dark/light theme support.

No more black text on dark backgrounds.

Features

Renders Mermaid diagrams directly in markdown preview
Auto-detects your editor theme (dark/light/high-contrast)
Re-renders when you switch themes
Supports all Mermaid diagram types: flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, pie charts, and more

Search for "Mermaid Ink" in the Extensions sidebar.

git clone https://github.com/YOUR_USERNAME/mermaid-ink.git
cd mermaid-ink
npm install
npm run build

Then press F5 in VS Code/Cursor to launch with the extension loaded.

Just write mermaid code blocks in your markdown:

```mermaid
flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Do something]
    B -->|No| D[Do something else]
```

Open markdown preview (Cmd+Shift+V / Ctrl+Shift+V) and the diagram renders with colors matching your theme.

npm install
npm run watch   # Rebuild on changes

Press F5 to launch Extension Development Host.

Create a publisher on VS Code Marketplace
Generate a Personal Access Token (PAT) with Marketplace publish scope
Add secrets to your GitHub repo:
- VSCE_PAT - VS Code Marketplace token
- OVSX_PAT - Open VSX token (optional, for Cursor/VSCodium)
Convert media/icon.svg to 128x128 PNG and save as media/icon.png
Update publisher in package.json to your publisher name

git tag v0.1.0
git push origin v0.1.0

GitHub Actions will build and publish to marketplaces.

MIT