Obsidian plugin that improves notes saved by Obsidian Web Clipper. Diagrams first; more clipper-side fixes can land here later.
When you clip a page with the official Web Clipper, Mermaid diagrams are often saved as large inline <svg> blobs. Those SVGs usually lack the site’s CSS, so they render poorly (or not at all) inside Obsidian.
This plugin post-processes those notes in Obsidian: prefer recovering the original Mermaid source so Obsidian can render it natively; if that isn’t possible, fall back to extracting SVGs into asset files and wiki embeds.
-
Enhancer: Restore Mermaid from source (recommended)
Reads the note’s frontmattersourceURL, fetches Mermaid from the original page, and replaces inline SVGs with```mermaidfences. -
Enhancer: Extract inline SVGs to assets (fallback)
Writes.svgfiles next to the note and replaces them with![[…]]embeds. Optional local LM Studio naming.
Both actions appear in the command palette and the file context menu (grouped under one menu section, titles prefixed with Enhancer: / 增强:). UI: English / 简体中文 (follows Obsidian’s language).
npm install
npm run buildCopy into your vault:
<vault>/.obsidian/plugins/web-clipper-enhancer/
main.js
manifest.json
styles.css
Enable Web Clipper Enhancer under Community plugins and reload. Use npm run dev while iterating.
- Open a clipped note that contains inline SVGs (ideally with a
source:URL). - Run Enhancer: Restore Mermaid from source first.
- If the original page has no Mermaid, use Enhancer: Extract inline SVGs.
Optional backup before changes: Note.pre-svg-extract.md.
| Setting | Default | Notes |
|---|---|---|
| Assets folder | assets |
Where extracted SVGs go |
| Backup before extract | on | Writes .pre-svg-extract.md |
| Embed width | 600 |
![[file.svg|600]]; 0 omits width |
| LM Studio | on / localhost:1234 |
SVG naming only; heuristics on failure |
Theme fonts can make restored Mermaid labels look too wide. See Mermaid font CSS for an optional vault CSS snippet.
MIT