vscode画的图清晰度不够怎么办

vs code 中 svg 模糊是预览器 canvas 渲染所致，并非图像质量差；应保存后用浏览器验证，优先使用 cli 工具（如 mmdc、plantuml.jar）导出矢量 svg 并用 svgo 优化。

导出的 SVG 图在 VS Code 里模糊？先确认是不是渲染问题

VS Code 自带的预览器（比如 PlantUML、Mermaid 插件的内嵌预览）默认用 Canvas 渲染，不是原生 SVG 缩放，放大后就会糊。这不是图本身质量差，而是预览器“画布像素固定”导致的假性模糊。

• 右键预览区 → “Open Preview to the Side”，再右键图片 → “Save As…” 保存为 .svg 文件，用浏览器打开——如果清晰，说明是预览器限制，不是生成逻辑问题
• 如果是 Mermaid，检查是否用了 securityLevel: "loose" 或旧版 mermaid-cli，它们可能强制降级为 PNG 回退渲染
• PlantUML 默认输出 PNG，哪怕你写了 @startuml format=svg，也得配插件支持（如 PlantUML 插件需开启 plantuml.render 设为 svg）

Mermaid 图导出 SVG 清晰但缩放失真？检查 renderer 和 scale 参数

Mermaid 的 renderer 决定底层绘图引擎：svg 是矢量，pdf 或 png 是位图。但即使设了 svg，若没关掉自动缩放，浏览器或 VS Code 预览仍会用 CSS 强制拉伸，破坏矢量特性。

• 在 settings.json 中确保："mermaid.preview.securityLevel": "loose"（否则禁用 SVG）
• 在 diagram 开头加声明：%%{init: {'theme': 'default', 'renderer': 'svg', 'scale': 1}}%%，scale: 1 禁止插件内部重采样
• 避免在 Markdown 里用 ![](xxx.svg) + HTML <img style="max-width:90%" alt="vscode画的图清晰度不够怎么办" > 混用，这会让浏览器重采样；改用纯 CSS 控制容器宽高，保留 SVG 原生缩放

PlantUML 导出 SVG 后文字发虚？字体嵌入和 DPI 设置是关键

PlantUML 默认用 Java AWT 渲染，SVG 输出不嵌入字体，浏览器找不到对应字体时会 fallback 到系统默认字体，字形错位+抗锯齿异常，看起来像“模糊”。

• 启动 PlantUML 服务时加参数：-DPLANTUML_LIMIT_SIZE=8192 -Dawt.useSystemAA=true，启用系统级抗锯齿
• 在 diagram 顶部加：skinparam defaultFontName "DejaVu Sans"，选一个常见开源字体，降低 fallback 概率
• 如果用本地 jar，升级到 v1.2023.12+，旧版 SVG 输出不带 font-family 声明，新版已修复
• 导出后手动编辑 SVG，把 <text></text> 标签里的 font-family 改成 "DejaVu Sans, sans-serif"，能立刻改善

VS Code 插件预览始终糊？绕过预览，直接用外部工具链

别依赖插件内置预览器做终稿审查。它的核心定位是“快速草稿”，不是出版级输出。真正要高清交付，就得跳出 VS Code 视图层。

• Mermaid：用 CLI 工具 mmdc 直接生成 SVG：mmdc -i seq.mmd -o seq.svg -s 2，-s 2 是缩放倍数，输出仍是矢量
• PlantUML：命令行调用 jar：java -DPLANTUML_SVG_FONT=DejaVuSans -jar plantuml.jar -tsvg diagram.puml
• 所有 SVG 导出后，用 svgo 压缩优化：svgo --multipass --precision=3 diagram.svg，减少冗余 transform，提升渲染一致性

真正麻烦的不是导出设置，而是 VS Code 插件把“渲染”和“导出”混在一起处理——你调的是导出参数，它却在预览时偷偷套了一层 Canvas 包装。盯住最终文件本身，比调预览器设置更可靠。