用途
beautiful-mermaid 用于将 Mermaid 图表渲染为 SVG 和 PNG 图像，基于 Beautiful Mermaid 库实现。当用户提出渲染 Mermaid 图表的需求时，可使用该技能。
依赖
该技能在进行 PNG 渲染时需要 agent-browser 技能，需先加载该技能再执行 PNG 截图。
支持的图表类型
支持流程图（流程流、决策树、CI/CD 流水线）、时序图（API 调用、OAuth 流程、数据库事务）、状态图（状态机、连接生命周期）、类图（UML 类图、设计模式）、实体关系图（数据库模式、数据模型）。
可选主题
提供 Default、Dracula、Solarized、Zinc Dark、Tokyo Night、Tokyo Night Storm、Tokyo Night Light、Catppuccin Latte、Nord、Nord Light、GitHub Dark、GitHub Light、One Dark 等主题。未指定主题时使用默认主题。
常用语法要点
流程图边标签使用管道语法，如 A -->|label| B 或 A ---|label| B；避免使用空格-连字符语法（如 A -- label --> B），可能导致渲染不完整。包含特殊字符的节点标签需使用引号包裹，如 A["Label with (parens)"]、B["Label with / slash"]。
使用流程
第一步：生成或校验 Mermaid 代码。若用户提供的是描述而非代码，需生成合法的 Mermaid 语法，可参考 references/mermaid-syntax.md 获取完整语法细节。
第二步：渲染 SVG。运行渲染脚本生成 SVG 文件，例如：bun run scripts/render.ts --code "graph TD; A-->B" --output diagram --theme default；也可从文件输入：bun run scripts/render.ts --input diagram.mmd --output diagram --theme tokyo-night。可选运行方式包括：npx tsx scripts/render.ts --code "..." --output diagram；deno run --allow-read --allow-write --allow-net scripts/render.ts --code "..." --output diagram。生成的 <output>.svg 保存在当前工作目录。
第三步：创建 HTML 包装文件。运行 HTML 包装脚本准备截图：bun run scripts/create-html.ts --svg diagram.svg --output diagram.html，生成一个带有适当内边距和背景的极简 HTML 文件。
第四步：使用 agent-browser 捕获高分辨率 PNG。设置 4K 视口（agent-browser set viewport 3840 2160），打开 HTML 包装文件，等待渲染完成后进行全页面截图，最后关闭浏览器。复杂图表如需更高分辨率，可进一步增大视口或在使用 HTML 包装脚本时使用 --padding 选项为图表留出更多空间。
第五步：清理中间文件。渲染完成后删除所有中间文件，仅保留最终的 .svg 和 .png 文件，需清理的文件包括 HTML 包装文件、临时 .mmd 文件以及渲染过程中创建的其他文件。
输出
始终生成两种输出：SVG 为矢量格式，可无限缩放且文件体积小；PNG 为高分辨率栅格图，以 4K（3840×2160）视口捕获，图表宽度至少 1200px。除非用户明确指定其他路径，文件保存在当前工作目录。
主题选择参考
default 为浅灰背景，适合通用场景；dracula 为深紫背景，适合偏好深色模式；tokyo-night 为深蓝背景，适合现代深色美学；tokyo-night-storm 为更深蓝色，对比度更高；nord 为深色北极风，视觉柔和冷静；nord-light 为浅色北极风，适合柔和浅色模式；github-dark 与 github-light 分别匹配 GitHub 界面；catppuccin-latte 为暖色浅底，柔和粉彩风格；solarized 为棕褐/奶油色，Solarized 配色方案；one-dark 为 Atom 深色风格；zinc-dark 为中性深色，极简无色彩偏向。
故障排查
主题未生效时，可检查渲染脚本输出中的 bg 和 fg 值，或查看 SVG 开头标签中的 --bg 和 --fg CSS 自定义属性。图表被截断或不完整时，检查边标签语法是否使用 -->|label| 管道写法而非 -- label -->，确认节点 ID 唯一，并检查节点标签中括号是否闭合。渲染结果为空或 SVG 格式错误时，可在 https://mermaid.live 校验 Mermaid 语法，检查需要转义的特殊字符（用引号包裹），并确保指定了流程图方向（graph TD、graph LR 等）。
限制
资料未提供除 Mermaid 图表渲染之外的其他功能说明，也未提供收费、价格或平台支持等额外信息。