Image & Mermaid for Claude Code
Show local images and render Mermaid diagrams in the Claude Code chat panel. When Claude Code updates, this extension patches the new version again on its own.
This is an unofficial community extension. It is not affiliated with or endorsed by Anthropic.
What it adds
Local images. The Claude Code chat panel normally replaces Markdown images with [Image]. With this extension, these sources are displayed:
| Image source |
Example |
| Absolute path |
/tmp/chart.png |
file:// URL |
file:///home/me/chart.png |
| Workspace-relative path |
docs/chart.png |
| Windows path |
C:\work\chart.png |
| Inline data |
data:image/png;base64,... |
Images are loaded from the workspace folders, the system temp directory, /tmp and your home directory. Remote http(s) images stay blocked, so chat content cannot leak through image URLs.
Mermaid diagrams. A ```mermaid code block is rendered as an SVG diagram above its source. The source block and its copy button stay below the diagram. Diagrams follow the light or dark VS Code theme. While a reply is still streaming, incomplete source keeps the last diagram that rendered. Mermaid runs with securityLevel: "strict", and the extension bundles its own copy, so nothing is fetched from the network.
How it works
Claude Code has no extension API for its chat panel. This extension edits Claude Code's installed extension.js and webview/index.js:
- The original files are backed up as
*.orig next to them.
- All edits are computed before anything is written. If a Claude Code release changes the code structure the patch relies on, both files stay untouched and you get an error notification.
- The patch is re-applied automatically when VS Code starts, and when a Claude Code update is downloaded.
After a patch is applied, a notification offers Reload Window. The patched code is only loaded after a reload.
Notifications
| When |
Notification |
| A Claude Code version was patched |
Patched Claude Code 2.1.301. Reload the window ... with Reload Window / Show Log |
| Patch failed (for example, a Claude Code release this extension does not support yet) |
Error with the version and the reason, plus Show Log. Each distinct failure is shown once per version. |
| Already patched |
Silent on startup. The Apply Patch Now command reports it. |
Details are written to the Image & Mermaid for Claude Code output channel.
Commands
| Command |
Description |
Image & Mermaid for Claude Code: Apply Patch Now |
Patch now and report the result, including "already patched" and repeated failures. |
Image & Mermaid for Claude Code: Show Patch Status |
Show the patch state of every installed Claude Code version. |
Image & Mermaid for Claude Code: Restore Original Claude Code Files |
Restore the backups, remove the bundled Mermaid and turn off automatic patching. |
Settings
| Setting |
Default |
Description |
claudeCodeImageMermaid.autoPatch |
true |
Patch on startup and after Claude Code updates. |
Uninstalling
When this extension is uninstalled, VS Code runs its uninstall hook, which restores the original Claude Code files. You can also run Restore Original Claude Code Files first. Reinstalling Claude Code restores it too.
Notes
- VS Code may show "Your Code installation appears to be corrupt" for some modified extensions. This does not apply to Claude Code, which is a regular marketplace extension, but VS Code's own extension integrity checks could change in future versions.
- Works in local windows, WSL and Remote-SSH. The extension runs on the same host as Claude Code.
- Mermaid is © its authors, MIT licensed. The bundled license is at
media/mermaid.LICENSE.
中文说明
在 Claude Code 聊天面板中显示本地图片（绝对路径、file://、工作区相对路径、Windows 路径、data:），并把 mermaid 代码块渲染成图。外部 http(s) 图片仍会被拦截。
Claude Code 每次更新后，本插件都会自动重新打补丁。补丁成功会提示“重新加载窗口”，失败会显示原因，并且原文件不会被修改。可以通过 还原 Claude Code 原始文件 命令恢复原状，卸载本插件时也会自动还原。
