{"id":34550031,"url":"https://github.com/onlyutkarsh/mermaid-viewer","last_synced_at":"2026-03-10T23:22:17.713Z","repository":{"id":328476313,"uuid":"1115306694","full_name":"onlyutkarsh/mermaid-viewer","owner":"onlyutkarsh","description":"Lens into your Mermaid diagrams with independent theming, exports, and focused previews.","archived":false,"fork":false,"pushed_at":"2026-03-01T16:23:22.000Z","size":5237,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-01T18:42:03.354Z","etag":null,"topics":["vscode-extension","vsmarketplace"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=onlyutkarsh.mermaid-diagram-lens","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/onlyutkarsh.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-12T16:46:22.000Z","updated_at":"2026-03-01T16:23:25.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/onlyutkarsh/mermaid-viewer","commit_stats":null,"previous_names":["onlyutkarsh/mermaid-diagram-lens","onlyutkarsh/mermaid-live-preview"],"tags_count":24,"template":false,"template_full_name":null,"purl":"pkg:github/onlyutkarsh/mermaid-viewer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onlyutkarsh%2Fmermaid-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onlyutkarsh%2Fmermaid-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onlyutkarsh%2Fmermaid-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onlyutkarsh%2Fmermaid-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/onlyutkarsh","download_url":"https://codeload.github.com/onlyutkarsh/mermaid-viewer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onlyutkarsh%2Fmermaid-viewer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30361591,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-10T21:41:54.280Z","status":"ssl_error","status_checked_at":"2026-03-10T21:40:59.357Z","response_time":106,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["vscode-extension","vsmarketplace"],"created_at":"2025-12-24T07:53:53.803Z","updated_at":"2026-03-10T23:22:17.708Z","avatar_url":"https://github.com/onlyutkarsh.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mermaid Viewer\n\nA VSCode extension that gives you a powerful viewer for Mermaid diagrams with independent theme selection, appearance overrides, and export controls. Everything stays local-no accounts, Copilot prompts, or external services-while the dedicated preview surface (plus CodeLens buttons and gutter highlights) keeps multi- and single-diagram workflows fast.\n\n## Features\n\n- **Syntax Highlighting**: Full syntax highlighting for Mermaid diagrams in markdown code blocks and standalone .mmd/.mermaid files\n- **Independent Theme Selection**: Choose from multiple Mermaid themes (default, dark, forest, neutral, base) directly in the preview panel\n- **Optional VSCode Theme Sync**: Toggle option to automatically sync Mermaid theme with your VSCode theme (dark/light)\n- **Live Preview**: Automatic preview updates as you edit your Mermaid diagrams\n- **Rich Preview Toolbar**: Zoom, pan, reset, navigate between diagrams, and change the preview chrome (match VS Code, light, or dark) without leaving the panel\n- **Keyboard Shortcuts**: Use `+`/`-` to zoom, `R` to reset, and arrow keys to pan around diagrams\n- **Export Options**: Save any diagram as SVG, PNG (1x-4x), or JPG (1x-4x) right from the preview toolbar. Dimensions are displayed in the menu, so you know exactly what you're exporting\n- **Copy to Clipboard**: Copy diagrams directly to your clipboard as SVG, PNG, or JPG for quick pasting into other apps\n- **On-Document Shortcuts**: Click the CodeLens button or gutter icon on each Mermaid block (fenced `mermaid` blocks or `::: mermaid` containers) to open the preview (to the side) without leaving the editor\n- **Side-by-Side View**: Open preview beside your editor for convenient editing\n- **Theme Persistence**: Save your preferred theme as default\n- **Multi-Diagram Support**: Preview every Mermaid block in a document and jump between them with the toolbar navigation controls\n- **Offline Friendly**: Bundles Mermaid 11.12.2 locally, so previews work without a network connection or account\n\n## Demo\n\n![Demo](https://raw.githubusercontent.com/onlyutkarsh/mermaid-viewer/main/marketplace/demo.gif)\n\n## Usage\n\n### Opening the Preview\n\n1. Open a Markdown file containing Mermaid diagrams\n2. Use one of these methods:\n   - Click the preview icon in the editor title bar\n   - Right-click in the editor and select \"Mermaid Viewer: Open Preview\"\n   - Use Command Palette (`Cmd+Shift+P` / `Ctrl+Shift+P`) and search for \"Mermaid Viewer: Open Preview\"\n   - For side-by-side view: \"Mermaid Viewer: Open Preview to the Side\"\n\n### Changing Themes\n\nIn the preview panel toolbar:\n- Use the **Theme** dropdown to select different themes\n- Check **\"Sync with VSCode theme\"** to automatically match VSCode's theme\n- Click **\"Save as Default\"** to persist your theme choice\n\n### Previewing Individual Diagrams\n\n- A **CodeLens button** labeled *Preview Diagram* appears above every Mermaid block in Markdown (fenced `mermaid` blocks and `::: mermaid` containers); clicking it opens a panel focused on that diagram.\n- In standalone `.mmd`/`.mermaid` files, the CodeLens appears at the top so you can preview or copy quickly.\n- A subtle **gutter icon** highlights Mermaid block starts in Markdown, so you can spot diagrams quickly (it's a visual cue only; use CodeLens to open preview).\n- The editor toolbar/title icon still opens the multi-diagram preview, so you can see every Mermaid block at once.\n\n![CodeLens and Gutter Icon](https://raw.githubusercontent.com/onlyutkarsh/mermaid-viewer/main/marketplace/preview.webp)\n\n### Supported Themes\n\n- **Default**: Classic Mermaid theme with clean, neutral colors\n- **Dark**: Dark background with light elements\n- **Forest**: Green-themed palette\n- **Neutral**: Minimalist grayscale theme\n- **Base**: Simple base theme\n\n## Configuration\n\nConfigure the extension through VSCode settings:\n\n```json\n{\n  // Default theme for Mermaid diagrams\n  \"mermaidLivePreview.theme\": \"default\",\n\n  // Automatically sync Mermaid theme with VSCode theme\n  \"mermaidLivePreview.useVSCodeTheme\": false,\n\n  // Automatically refresh preview on document changes\n  \"mermaidLivePreview.autoRefresh\": true,\n\n  // Delay in milliseconds before refreshing preview after changes\n  \"mermaidLivePreview.refreshDelay\": 500\n}\n```\n\n## Example Mermaid Diagram\n\n````\n```mermaid\ngraph TD\n    A[Start] --\u003e B{Is it working?}\n    B --\u003e|Yes| C[Awesome!]\n    B --\u003e|No| D[Debug it]\n    D --\u003e B\n    C --\u003e E[End]\n```\n````\n## Commands\n\n- `Mermaid Viewer: Open Preview` - Shows Mermaid diagrams from the active Markdown or Mermaid file in the current editor column.\n- `Mermaid Viewer: Open Preview to the Side` - Same preview behavior, but always opens in the column beside the editor for live editing.\n- `Mermaid Viewer: Preview Diagram Here` - Focuses only the Mermaid block at the current cursor (or the CodeLens target) and keeps that single-diagram panel in sync while you type.\n\n## Requirements\n\n- VSCode 1.85.0 or higher\n- Markdown files with Mermaid code blocks (fenced `mermaid`) or ADO-style Mermaid containers (`::: mermaid ... :::`)\n- Mermaid files (`.mmd`, `.mermaid`)\n\n## Known Limitations\n\n- Markdown preview supports Mermaid fenced blocks and ADO-style `::: mermaid` containers.\n- ADO containers must be properly closed with `:::` to be extracted as a diagram.\n\n## Extension Settings\n\nThis extension contributes the following settings:\n\n* `mermaidLivePreview.theme`: Choose the default Mermaid theme\n* `mermaidLivePreview.useVSCodeTheme`: Sync theme with VSCode\n* `mermaidLivePreview.autoRefresh`: Enable/disable auto-refresh\n* `mermaidLivePreview.refreshDelay`: Set refresh delay in milliseconds\n\n## Contributing\n\nFound a bug or have a feature request? Please open an issue!\n\n## License\n\nMIT - if you build on Mermaid Viewer, please keep the copyright notice intact and include attribution to Utkarsh Shigihalli in your distribution or documentation.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonlyutkarsh%2Fmermaid-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fonlyutkarsh%2Fmermaid-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonlyutkarsh%2Fmermaid-viewer/lists"}