{"id":"1172c4f5-ee10-4c90-8dbb-16fff735c8dd","entityType":"agent","slug":"clawhub-chouraycn-beautiful-mermaid","name":"“Render Mermaid diagrams as beautiful SVG, PNG, or ASCII art. Supports 6 chart types (flowchart, sequence, state, class, ER, XY chart), 16 built-in themes, 5 style presets, CSS-level customization, interactive preview, and batch rendering. Works in termin","canonicalUrl":"https://www.xpersona.co/agent/clawhub-chouraycn-beautiful-mermaid","canonicalPath":"/agent/clawhub-chouraycn-beautiful-mermaid","generatedAt":"2026-10-10T02:12:03.604Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-09T17:41:14.941Z","emptyReason":null},"description":"Render Mermaid diagrams as beautiful SVG, PNG, or ASCII art. Supports 6 chart types (flowchart, sequence, state, class, ER, XY chart), 16 built-in themes, 5...","descriptionLabel":"Source description","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 2.2K downloads reported by the source. Last updated 10/9/2026.","installCommand":"clawhub skill install s17cgjcpz3n46wtafpz0mmxjtx83rk70:beautiful-mermaid","sourceUrl":"https://clawhub.ai/chouraycn/beautiful-mermaid","homepage":"https://clawhub.ai/chouraycn/skills/beautiful-mermaid","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/chouraycn/beautiful-mermaid","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/chouraycn/skills/beautiful-mermaid","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":44,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"“Render Mermaid diagrams as beautiful SVG, PNG, or ASCII art. Supports 6 chart types (flowchart, sequence, state, class, ER, XY chart), 16 built-in themes, 5 st"},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-09T17:41:14.941Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-09T17:41:14.941Z","emptyReason":null},"stars":null,"forks":null,"downloads":2193,"packageName":null,"latestVersion":"1.0.0","tractionLabel":"2.2K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-09T17:41:14.941Z","emptyReason":null},"lastUpdatedAt":"2026-10-09T17:41:14.941Z","lastCrawledAt":"2026-10-09T17:41:14.941Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-10T17:41:14.941Z","lastVerifiedAt":null,"highlights":[{"version":"1.0.0","createdAt":"2026-03-28T04:26:55.689Z","changelog":"Initial release of beautiful-mermaid. - Render Mermaid diagrams as SVG, PNG, or ASCII art with 6 chart types supported (flowchart, sequence, state, class, ER, XY charts). - Includes 16 built-in themes, 5 style presets, and supports full CSS-level customization. - Features an interactive preview tool (requires using preview_url before rendering, unless user opts out). - Batch rendering and rich HTML export with multi-diagram aggregation, theme inheritance, and metadata support. - Works in terminal, chat, and web environments. - Supports React integration and both synchronous/asynchronous rendering APIs.","fileCount":11,"zipByteSize":605800}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s17cgjcpz3n46wtafpz0mmxjtx83rk70:beautiful-mermaid","setupComplexity":"medium","setupSteps":["Install using `clawhub skill install s17cgjcpz3n46wtafpz0mmxjtx83rk70:beautiful-mermaid` in an isolated environment before connecting it to live workloads.","No published capability contract is available yet, so validate auth and request/response behavior manually.","Review the upstream CLAWHUB listing at https://clawhub.ai/chouraycn/beautiful-mermaid before using production credentials."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-chouraycn-beautiful-mermaid/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-chouraycn-beautiful-mermaid/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-chouraycn-beautiful-mermaid/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-chouraycn-beautiful-mermaid/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-chouraycn-beautiful-mermaid/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-chouraycn-beautiful-mermaid/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-10T02:12:03.603Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-chouraycn-beautiful-mermaid/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-chouraycn-beautiful-mermaid/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-chouraycn-beautiful-mermaid/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-chouraycn-beautiful-mermaid/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-09T17:41:14.941Z","emptyReason":null},"readme":"Skill: “Render Mermaid diagrams as beautiful SVG, PNG, or ASCII art. Supports 6 chart types (flowchart, sequence, state, class, ER, XY chart), 16 built-in themes, 5 style presets, CSS-level customization, interactive preview, and batch rendering. Works in terminal, chat, or web environments.” description_zh: “Mermaid 图表美化渲染工具，支持流程图/序列图/状态图/类图/ER图/XY图表6种类型，16主题5预设，可导出SVG/PNG/ASCII” description_en: “Beautiful Mermaid diagram renderer (SVG/PNG/ASCII, 16 themes, 5 presets, interactive preview)”\n\nOwner: chouraycn\n\nSummary: Render Mermaid diagrams as beautiful SVG, PNG, or ASCII art. Supports 6 chart types (flowchart, sequence, state, class, ER, XY chart), 16 built-in themes, 5...\n\nTags: latest:1.0.0, skill:1.0.0\n\nVersion history:\n\nv1.0.0 | 2026-03-28T04:26:55.689Z | user\n\nInitial release of beautiful-mermaid.\n\n- Render Mermaid diagrams as SVG, PNG, or ASCII art with 6 chart types supported (flowchart, sequence, state, class, ER, XY charts).\n- Includes 16 built-in themes, 5 style presets, and supports full CSS-level customization.\n- Features an interactive preview tool (requires using preview_url before rendering, unless user opts out).\n- Batch rendering and rich HTML export with multi-diagram aggregation, theme inheritance, and metadata support.\n- Works in terminal, chat, and web environments.\n- Supports React integration and both synchronous/asynchronous rendering APIs.\n\nArchive index:\n\nArchive v1.0.0: 11 files, 605800 bytes\n\nFiles: assets/preview.html (1688813b), package-lock.json (32877b), package.json (973b), README.md (5440b), references/api-config.json (8251b), scripts/render.js (14651b), scripts/rich-html.js (113265b), scripts/styles.js (35682b), skill-card.md (2458b), SKILL.md (39643b), _meta.json (136b)\n\nFile v1.0.0:SKILL.md\n\n---\nname: beautiful-mermaid\nversion: 1.0.0\ndescription: \"Render Mermaid diagrams as beautiful SVG, PNG, or ASCII art. Supports 6 chart types (flowchart, sequence, state, class, ER, XY chart), 16 built-in themes, 5 style presets, CSS-level customization, interactive preview, and batch rendering. Works in terminal, chat, or web environments.\"\ndescription_zh: \"Mermaid 图表美化渲染工具，支持流程图/序列图/状态图/类图/ER图/XY图表6种类型，16主题5预设，可导出SVG/PNG/ASCII\"\ndescription_en: \"Beautiful Mermaid diagram renderer (SVG/PNG/ASCII, 16 themes, 5 presets, interactive preview)\"\nhomepage: https://github.com/chouraycn/beautiful-mermaid\nicon: beautiful-mermaid.png\n---\n\n# Beautiful Mermaid Skill\n\n## 概述\n\nBeautiful Mermaid 是一个高性能的 Mermaid 图表渲染库，专为 AI 时代设计。它将 Mermaid 语法转换为美观的 SVG 图形、PNG 位图或 ASCII 艺术字，支持同步渲染、全主题定制、CSS级样式定制，零 DOM 依赖。\n\n| 说明 | 地址 |\n|------|------|\n| 本 Skill | [https://github.com/chouraycn/beautiful-mermaid](https://github.com/chouraycn/beautiful-mermaid) |\n| 上游项目 | [https://github.com/lukilabs/beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid) |\n\n## 核心能力\n\n### 1. 支持的图表类型\n\n- **流程图 (Flowchart)**：`graph TD`、`graph LR`、`graph BT`、`graph RL` 等方向\n- **序列图 (Sequence Diagram)**：参与者之间的交互\n- **状态图 (State Diagram)**：状态转换\n- **类图 (Class Diagram)**：面向对象设计\n- **实体关系图 (ER Diagram)**：数据库设计\n- **XY 图表**：条形图、折线图、组合图（`xychart-beta` 语法）\n\n### 2. 输出格式\n\n- **SVG**：适用于富 UI 界面，支持透明背景和内联样式\n- **PNG**：适用于文档嵌入、高清位图输出，支持自定义尺寸和 DPI\n- **ASCII/Unicode**：适用于终端环境，支持颜色输出\n\n### 3. 主题系统\n\n- **15 内置主题**：tokyo-night、dracula、github-dark、nord 等（9 暗色 + 6 亮色）\n- **完整 7 字段**：每个主题包含 `bg`、`fg`、`line`、`accent`、`muted`、`surface`、`border` 全部字段\n- **Mono 模式**：仅需提供背景色(bg)和前景色(fg)，自动推导整套配色\n- **自定义主题**：可覆盖任意元素颜色\n- **Shiki 集成**：通过 `fromShikiTheme()` 直接使用 VS Code 编辑器主题\n\n#### 主题完整对照表\n\n| 主题名 | 类型 | 背景色 | 强调色(accent) | 推荐预设 | 适用场景 |\n|--------|------|--------|--------------|---------|---------|\n| `zinc-light` | 亮色 | `#FFFFFF` | `#3F3F46` | outline | 极简文档 |\n| `zinc-dark` | 暗色 | `#18181B` | `#A1A1AA` | glass | 极简暗场景 |\n| `tokyo-night` | 暗色 | `#1a1b26` | `#7aa2f7` | glass | 代码架构图 |\n| `tokyo-night-storm` | 暗色 | `#24283b` | `#7aa2f7` | modern | 系统设计图 |\n| `tokyo-night-light` | 亮色 | `#d5d6db` | `#34548a` | modern | 亮色演示 |\n| `catppuccin-mocha` | 暗色 | `#1e1e2e` | `#cba6f7` | glass | 产品展示 |\n| `catppuccin-latte` | 亮色 | `#eff1f5` | `#8839ef` | modern | 分享文档 |\n| `nord` | 暗色 | `#2e3440` | `#88c0d0` | modern | 技术文档暗色 |\n| `nord-light` | 亮色 | `#eceff4` | `#5e81ac` | outline | 技术文档亮色 |\n| `dracula` | 暗色 | `#282a36` | `#bd93f9` | gradient | 视觉展示 |\n| `github-light` | 亮色 | `#ffffff` | `#0969da` | default | GitHub/文档 |\n| `github-dark` | 暗色 | `#0d1117` | `#4493f8` | modern | 代码深度分析 |\n| `solarized-light` | 亮色 | `#fdf6e3` | `#268bd2` | outline | 护眼亮色 |\n| `solarized-dark` | 暗色 | `#002b36` | `#268bd2` | modern | 护眼暗色 |\n| `one-dark` | 暗色 | `#282c34` | `#c678dd` | gradient | 紫色调 |\n\n#### 主题字段说明\n\n| 字段 | 说明 | 用途 |\n|------|------|------|\n| `bg` | 画布背景色 | 整体底色 |\n| `fg` | 主前景/文字色 | 节点标签、主要文字 |\n| `line` | 连线颜色 | 边/箭头连线 |\n| `accent` | 强调色 | 箭头头部、子图标题、高亮节点 |\n| `muted` | 次要色 | 边标签、辅助注释文字 |\n| `surface` | 节点填充次级色 | 比 bg 深/浅一级，用于节点内填充 |\n| `border` | 节点边框精确色 | 节点外框描边 |\n\n#### 推荐主题 × 预设搭配\n\n```\ntokyo-night   + glass     → 代码架构图的最佳组合（深蓝毛玻璃）\ndracula       + gradient  → 视觉展示最强（紫色渐变阴影）\ngithub-light  + default   → 文档嵌入首选（简洁中性）\ncatppuccin-mocha + glass  → 产品 Deck 展示（柔和紫色调）\nnord          + modern    → 技术报告暗色版（冰蓝现代感）\none-dark      + gradient  → 紫色调视觉最强（彩色阴影）\norange-dark   + glass     → 暖色系深色主题（橙色毛玻璃）\norange-light  + modern    → 暖色系浅色主题（橙色现代感）\n```\n\n> **AI 预览工作规则（最高优先级）**：任何涉及渲染 Mermaid 图表的请求，**无论用户是否已指定主题/预设**，都必须先调用 `preview_url` 打开预览工具，让用户在 preview.html 中直观确认效果后，再执行渲染命令。\n>\n> **触发场景（包括但不限于）**：\n> - 用户询问主题/配色推荐\n> - 用户已明确指定主题和预设（如\"用 tokyo-night + glass 渲染\"）→ **仍需先打开 preview 让用户确认，不得跳过**\n> - 需要查看图表效果\n> - 任何使用 skill 渲染图表的场景\n>\n> **打开方式**（唯一合法方式）：\n> - 工具：`preview_url`\n> - URL：`file://{__SKILL_DIR__}/assets/preview.html`（`__SKILL_DIR__` 为技能安装目录的绝对路径）\n>\n> **唯一例外**：用户明确说\"直接渲染，不用预览\"或\"跳过预览\"时，才可跳过 preview 步骤。\n>\n> **禁止**：\n> - 使用 `open`/`start`/`xdg-open` 等命令打开系统浏览器\n> - 启动 `python3 -m http.server` 或任何本地 HTTP 服务\n> - 用户未明确说跳过时，擅自跳过 preview 直接执行渲染\n>\n> 用户打开预览后，可在 Themes 和 Presets 标签页中直接点击切换对比效果。\n\n### 4. 样式定制系统\n\n- **节点样式**：圆角、边框、阴影、填充色\n- **连线样式**：粗细、颜色、箭头、圆角\n- **字体排版**：支持多种字体和响应式适配\n- **5种预设风格**：默认、现代简约、渐变、线条轮廓、毛玻璃\n\n## 使用方法\n\n### 安装\n\n```bash\nnpm install beautiful-mermaid\n# 或\nbun add beautiful-mermaid\n```\n\n### 交互式预览工具\n\n提供可视化的样式定制界面，**AI 必须用 `preview_url` 工具直接以文件路径打开**（在 IDE 内置浏览器中显示，无需服务器）：\n\n```\npreview_url(`file://{__SKILL_DIR__}/assets/preview.html`)\n```\n\n❌ 禁止使用 `open`/`start` 命令或启动任何 HTTP 服务器。\n\n**预览工具功能**：\n\n- **15 主题即时预览**：点击切换，实时查看效果\n- **5 种样式预设**：default / modern / gradient / outline / glass\n- **自定义颜色**：背景色、前景色、连线颜色\n- **9 种图表类型**：Flowchart、Sequence、State、Class、ER、Bar、Line、Combo、H-Bar\n- **实时代码编辑器**：支持自定义 Mermaid 代码，Tab 缩进，400ms debounce 自动渲染\n- **状态持久化**：所有选择（主题、预设、颜色、自定义代码）自动保存到 localStorage\n- **一键导出**：复制代码或导出带完整样式的 SVG 文件\n\n### 丰富结果 HTML（多图表聚合展示）\n\n当用户需要将**多张 Mermaid 图表**整合为一个专业的展示页面时，使用 `scripts/rich-html.js`。\n\n生成的 HTML 包含：\n- 顶部 **Badge**（显示主题和预设）+ 标题 + 副标题\n- **标签页导航**（每张图表对应一个 Tab，支持 ① ② ③ … 编号）\n- 每个 Tab 内的**信息卡片网格**（图表类型 + 自定义元数据）\n- **卡片式 SVG 图表区**（带图标、标题、描述）\n- 底部页脚（渲染信息）\n- **完整继承用户选择的主题风格**（背景、前景、强调色等）\n\n#### 基本用法\n\n```bash\n# 方式一：直接调用脚本\nnode scripts/rich-html.js \"标题\" \\\n  --diagrams file1.mmd file2.mmd file3.mmd \\\n  --theme tokyo-night --preset glass \\\n  --subtitle \"副标题\" \\\n  --output result.html\n\n# 方式二：通过 npm script（等效）\nnpm run rich-html -- \"标题\" \\\n  --diagrams file1.mmd file2.mmd file3.mmd \\\n  --theme tokyo-night --preset glass \\\n  --subtitle \"副标题\" \\\n  --output result.html\n```\n\n#### 批量模式（渲染整个目录）\n\n```bash\nnode scripts/rich-html.js \"示例集\" \\\n  --batch assets/examples \\\n  --theme dracula --preset gradient \\\n  --output examples-report.html\n\n# npm 方式\nnpm run rich-html -- \"示例集\" --batch assets/examples --theme dracula --preset gradient --output examples-report.html\n```\n\n#### 为图表添加元数据（可选）\n\n在 `.mmd` 文件中通过注释声明元数据，显示在信息卡片中：\n\n```\n# @title  用户下单完整流程\n# @desc   从进入活动页到订单完成的端到端链路，含限流、库存扣减、异步建单\n# @icon   🛒\n# @type   Flowchart\n# @meta   关键节点:8 个|覆盖阶段:全链路|主题:Tokyo Night|限流策略:Redis Lua\ngraph TD\n    A[用户进入秒杀页] --> B{限流检查}\n    ...\n```\n\n元数据字段说明：\n- `@title`：Tab 名称和卡片标题\n- `@desc`：卡片描述（小字，显示在标题下方）\n- `@icon`：图标 emoji（默认根据图表类型自动推断）\n- `@type`：图表类型说明（自动推断，可手动覆盖）\n- `@meta`：信息卡片内容，格式 `标签:值|标签:值`（最多 4 组）\n\n#### 主题继承规则\n\n生成的 HTML **完整继承**渲染时指定的主题颜色：\n- 页面背景 = 主题 `bg`\n- 卡片/导航背景 = 主题 `surface`\n- 边框 = 主题 `border`\n- 正文文字 = 主题 `fg`\n- 次要文字 = 主题 `muted`\n- 强调色（Badge、Tab 激活、数值） = 主题 `accent`\n- SVG 图表背景 = 比 `bg` 略深/浅，自动计算\n\n> **AI 工作规则**：生成 rich-html 后，必须用 `preview_url` 工具打开生成的 HTML 文件，让用户直观查看效果。\n\n### SVG 渲染\n\n```typescript\nimport { renderMermaidSVG, THEMES } from 'beautiful-mermaid';\n\n// 使用内置主题\nconst svg = renderMermaidSVG(`graph TD\n    A[开始] --> B{判断}\n    B -->|是| C[执行操作]\n    B -->|否| D[结束]`, THEMES['tokyo-night']);\n\n// 使用自定义主题\nconst customSvg = renderMermaidSVG(diagramCode, {\n  bg: '#1a1b26',\n  fg: '#a9b1d6',\n  accent: '#7aa2f7',\n  transparent: true,\n});\n\n// 使用 CSS 变量（支持实时主题切换）\nconst cssVarSvg = renderMermaidSVG(diagramCode, {\n  bg: 'var(--background)',\n  fg: 'var(--foreground)',\n  transparent: true,\n});\n\n// 异步渲染（适用于 async 上下文）\nconst asyncSvg = await renderMermaidSVGAsync(diagramCode, THEMES['dracula']);\n```\n\n### ASCII 渲染\n\n```typescript\nimport { renderMermaidASCII } from 'beautiful-mermaid';\n\n// Unicode 模式（默认）\nconst unicode = renderMermaidASCII(`graph LR\nA --> B --> C`);\n\n// 纯 ASCII 模式\nconst ascii = renderMermaidASCII(`graph LR\nA --> B --> C`, { useAscii: true });\n\n// 带颜色输出\nconst colored = renderMermaidASCII(`graph LR\nA --> B --> C`, { colorMode: 'truecolor' });\n\n// 输出示例：\n// ┌───┐     ┌───┐     ┌───┐\n// │   │     │   │     │   │\n// │ A │────►│ B │────►│ C │\n// │   │     │   │     │   │\n// └───┘     └───┘     └───┘\n```\n\n### React 集成\n\n```typescript\nimport { renderMermaidSVG } from 'beautiful-mermaid';\n\nfunction MermaidDiagram({ code }: { code: string }) {\n  const { svg, error } = React.useMemo(() => {\n    try {\n      return {\n        svg: renderMermaidSVG(code, {\n          bg: 'var(--background)',\n          fg: 'var(--foreground)',\n          transparent: true,\n        }),\n        error: null,\n      };\n    } catch (err) {\n      return { svg: null, error: err as Error };\n    }\n  }, [code]);\n\n  if (error) return <pre>{error.message}</pre>;\n  return <div dangerouslySetInnerHTML={{ __html: svg }} />;\n}\n```\n\n### XY 图表（柱状图、折线图、组合图）\n\n```typescript\nimport { renderMermaidSVG } from 'beautiful-mermaid';\n\n// 柱状图\nconst bar = renderMermaidSVG(`xychart-beta\n    title \"Monthly Revenue\"\n    x-axis [Jan, Feb, Mar, Apr, May, Jun]\n    y-axis \"Revenue ($K)\" 0 --> 500\n    bar [180, 250, 310, 280, 350, 420]`, THEMES['tokyo-night']);\n\n// 折线图\nconst line = renderMermaidSVG(`xychart-beta\n    title \"User Growth\"\n    x-axis [Jan, Feb, Mar, Apr, May, Jun]\n    line [1200, 1800, 2500, 3100, 3800, 4500]`, THEMES['github-dark']);\n\n// 组合图（柱状 + 折线）\nconst combo = renderMermaidSVG(`xychart-beta\n    title \"Sales with Trend\"\n    x-axis [Jan, Feb, Mar, Apr, May, Jun]\n    bar [300, 380, 280, 450, 350, 520]\n    line [300, 330, 320, 353, 352, 395]`, THEMES['dracula']);\n\n// 交互式 XY 图表（鼠标悬停显示 tooltip）\nconst interactive = renderMermaidSVG(chartCode, {\n  bg: '#1a1b26',\n  fg: '#a9b1d6',\n  accent: '#7aa2f7',\n  interactive: true,\n});\n```\n\n### Shiki 主题集成\n\n```typescript\nimport { getSingletonHighlighter } from 'shiki';\nimport { renderMermaidSVG, fromShikiTheme } from 'beautiful-mermaid';\n\n// 使用任意 VS Code 主题\nconst highlighter = await getSingletonHighlighter({\n  themes: ['vitesse-dark', 'rose-pine', 'material-theme-darker']\n});\n\nconst colors = fromShikiTheme(highlighter.getTheme('vitesse-dark'));\nconst svg = renderMermaidSVG(code, colors);\n```\n\n## CLI 命令行工具\n\n### 基本用法\n\n```bash\n# 渲染文件为 SVG\nnode scripts/render.js diagram.mmd -o output.svg\n\n# 使用指定主题\nnode scripts/render.js diagram.mmd -t dracula -o output.svg\n\n# 渲染为 PNG (高清位图)\nnode scripts/render.js diagram.mmd -f png -o output.png\n\n# PNG 自定义尺寸 (宽度)\nnode scripts/render.js diagram.mmd -f png -w 2400 -o output.png\n\n# PNG 高清缩放 (2x)\nnode scripts/render.js diagram.mmd -f png -s 2 -o output.png\n\n# PNG 高 DPI (印刷质量)\nnode scripts/render.js diagram.mmd -f png --dpi 300 -o output.png\n\n# 渲染为 ASCII (终端)\nnode scripts/render.js diagram.mmd -f ascii\n\n# XY 图表启用交互式 tooltip\nnode scripts/render.js chart.mmd --interactive -o chart.svg\n\n# 直接传入代码 (注意：Mermaid 代码中换行用 \\n)\nnode scripts/render.js -c \"graph TD\\nA --> B\" -o output.svg\n```\n\n### 命令行参数\n\n| 参数 | 说明 |\n|------|------|\n| `--format`, `-f` | 输出格式: `svg` (默认) \\| `ascii` \\| `png` |\n| `--theme`, `-t` | 主题名称: tokyo-night, dracula, nord 等 15 个，或自定义 JSON |\n| `--output`, `-o` | 输出文件路径（批量模式为输出目录） |\n| `--code`, `-c` | 直接传入 Mermaid 代码 |\n| `--bg` | 背景色 (如: #f7f7fa) |\n| `--fg` | 前景色/文字颜色 (如: #27272a) |\n| `--line` | 连线颜色 (如: #6b7280) |\n| `--preset`, `-p` | 样式预设: `default` \\| `modern` \\| `gradient` \\| `outline` \\| `glass`（可与 --theme 联用） |\n| `--width`, `-w` | PNG 输出宽度 (默认: 1200px) |\n| `--scale`, `-s` | PNG 缩放比例 (默认: 1, 范围: 0.5-4) |\n| `--dpi` | PNG 输出 DPI (默认: 144, 范围: 72-600) |\n| `--interactive` | 启用交互式 tooltip (仅 XY 图表) |\n| `--color-mode` | ASCII 颜色模式: `none` \\| `auto` \\| `ansi16` \\| `ansi256` \\| `truecolor` \\| `html` |\n| `--batch` | 批量模式: 渲染指定目录下所有 .mmd 文件 |\n| `--list-themes` | 列出所有可用主题及其推荐预设搭配 |\n| `--help`, `-h` | 显示帮助信息 |\n\n### PNG 输出说明\n\nPNG 格式适用于文档嵌入、PPT 演示等场景：\n\n- **默认宽度**：1200px\n- **默认 DPI**：144（适合屏幕显示）\n- **缩放范围**：0.5x - 4x (通过 `-s` 参数)\n- **DPI 范围**：72 - 600 (通过 `--dpi` 参数，72=屏幕，300=印刷)\n- **透明背景**：PNG 输出支持透明背景\n- **高质量**：默认 100% 质量输出\n\n```bash\n# 屏幕显示 (默认 144 DPI)\nnode scripts/render.js diagram.mmd -f png -o screen.png\n\n# 印刷质量 (300 DPI)\nnode scripts/render.js diagram.mmd -f png --dpi 300 -o print.png\n\n# 2K 高清 (2400px)\nnode scripts/render.js diagram.mmd -f png -w 2400 -o hd.png\n\n# 4K 超清 (4800px)\nnode scripts/render.js diagram.mmd -f png -s 4 -o 4k.png\n\n# 图标尺寸 (600px)\nnode scripts/render.js diagram.mmd -f png -w 600 -o icon.png\n```\n\n### 样式预设\n\n通过 `--preset` 参数使用与 `preview.html` 一致的样式预设。**推荐与 `--theme` 联用**：\n\n```bash\n# ✅ 推荐：主题 + 预设自由组合\nnode scripts/render.js diagram.mmd -t tokyo-night -p glass -o output.svg\nnode scripts/render.js diagram.mmd -t dracula -p gradient -o output.svg\nnode scripts/render.js diagram.mmd -t catppuccin-mocha -p glass -f png -o output.png\n\n# 也支持自定义颜色 + 预设\nnode scripts/render.js diagram.mmd --bg '#f7f7fa' --fg '#27272a' --line '#6b7280' -p modern -o output.svg\nnode scripts/render.js diagram.mmd --bg '#f7f7fa' --fg '#27272a' --line '#6b7280' -p gradient -o output.svg\nnode scripts/render.js diagram.mmd --bg '#f7f7fa' --fg '#27272a' --line '#6b7280' -p outline -o output.svg\nnode scripts/render.js diagram.mmd --bg '#f7f7fa' --fg '#27272a' --line '#6b7280' -p glass -f png -o output.png\n```\n\n**可用预设对比：**\n\n| 预设 | 圆角 | 边框 | 阴影 | 场景 |\n|------|------|------|------|------|\n| default | 8px | 2px | 中等 | 通用场景 |\n| modern | 16px | 1px | 柔和 | 现代产品 UI |\n| gradient | 12px | 0px | 彩色 | 视觉展示 |\n| outline | 4px | 2px | 无 | 技术文档 |\n| glass | 12px | 1px | 高模糊 | 深色叠加 |\n\n### 批量渲染\n\n使用 `--batch` 参数可以一次渲染目录下所有 `.mmd` 文件：\n\n```bash\n# 批量渲染为 SVG（输出到源目录）\nnode scripts/render.js --batch ./diagrams -t dracula\n\n# 批量渲染为 PNG，输出到指定目录\nnode scripts/render.js --batch ./diagrams -f png -t tokyo-night -o ./output\n\n# 批量渲染为 ASCII\nnode scripts/render.js --batch ./examples -f ascii --color-mode ansi256\n```\n\n批量模式会遍历指定目录下的所有 `.mmd` 文件，自动按文件名生成对应的 `.svg`/`.png`/`.txt` 输出文件。\n\n### ASCII 颜色模式\n\n通过 `--color-mode` 参数控制 ASCII 渲染的着色方式：\n\n```bash\n# 无颜色（纯 ASCII）\nnode scripts/render.js diagram.mmd -f ascii --color-mode none\n\n# 256 色模式（兼容更多终端）\nnode scripts/render.js diagram.mmd -f ascii --color-mode ansi256\n\n# HTML 模式（可在网页中展示）\nnode scripts/render.js diagram.mmd -f ascii --color-mode html\n```\n\n## 主题配置\n\n### `--theme` 与 `--preset` 联用（推荐）\n\n`--preset` 现在可以与 `--theme` 联用，不再互斥：\n\n```bash\n# ✅ 推荐：--theme + --preset 自由组合\nnode scripts/render.js diagram.mmd -t dracula -p gradient -o out.svg\nnode scripts/render.js diagram.mmd -t tokyo-night -p glass -o out.svg\nnode scripts/render.js diagram.mmd -t github-light -p modern -o out.svg\n\n# ✅ 仍然支持：--preset 配合 --bg/--fg\nnode scripts/render.js diagram.mmd --bg '#f7f7fa' --fg '#27272a' -p modern -o out.svg\n\n# ✅ 自动推荐预设：只指定 --theme，自动使用该主题的推荐预设\nnode scripts/render.js diagram.mmd -t dracula -o out.svg\n# 输出: ✓ SVG 已保存: out.svg + preset:gradient  (dracula 推荐 gradient)\n```\n\n### 查看所有主题\n\n```bash\n# 列出所有主题及其推荐预设\nnode scripts/render.js --list-themes\n\n# 输出示例:\n# ● 暗色主题 (Dark):\n#   tokyo-night               → 推荐预设: glass\n#   dracula                   → 推荐预设: gradient\n#   ...\n# ● 亮色主题 (Light):\n#   github-light              → 推荐预设: default\n#   ...\n```\n\n### 参数优先级\n\n1. `--bg` + `--fg` → 自定义基础配色（line/accent/muted 自动推导）\n2. `--theme` 名称 → 从内置 15 主题取完整 7 字段配色\n3. `--theme` JSON → 直接使用 JSON 对象（缺省字段自动补全）\n4. `--preset` → 应用形状预设（与任何颜色来源都可以搭配）\n5. 自动推荐预设 → 不传 `--preset` 时，自动使用主题推荐的预设\n\n### CSS 样式注入原理\n\n样式预设通过 **CSS 变量覆盖** 实现：\n\n1. beautiful-mermaid 库使用 CSS 变量：`var(--_node-fill)`、`var(--_line)`\n2. render.js 在 SVG `<svg>` 标签后注入 `<style>` 标签\n3. 通过 `!important` 覆盖 CSS 变量和元素属性\n\n```css\n/* 注入的 CSS 结构 */\nsvg {\n  --_text: #27272a !important;\n  --_line: #6b7280 !important;\n  --_node-fill: #f7f7fa !important;\n}\n\nrect { rx: 16px !important; }  /* 圆角 */\npath { stroke-width: 1.5px !important; }  /* 线宽 */\n```\n\n### Mono 主题（最简单）\n\n```typescript\nconst monoTheme = {\n  bg: '#0f0f0f',  // 背景色\n  fg: '#e0e0e0',  // 前景色\n};\n```\n\n### 丰富主题\n\n```typescript\nconst richTheme = {\n  bg: '#0f0f0f',      // 背景色\n  fg: '#e0e0e0',      // 前景色\n  accent: '#ff6b6b',  // 箭头/高亮色\n  muted: '#666666',   // 次要文字/标签\n  surface: '#1a1a1a', // 节点填充色\n  border: '#333333',  // 边框色\n};\n```\n\n## 风格选择 → 生成 → 管理 工作流\n\n### 推荐工作流（Playground → CLI → 管理）\n\n> ⚠️ **强制规则**：Step 1 不可跳过。即使用户已指定主题和预设，AI 也必须先打开 Playground 让用户在 preview.html 中确认效果，再执行 Step 2 渲染。唯一例外：用户明确说\"跳过预览\"。\n\n**Step 1 — 在 Playground 中确认风格（强制）**\n\nAI 直接用 `preview_url` 工具打开 `file://{__SKILL_DIR__}/assets/preview.html`（无需服务器，见上方\"AI 预览工作规则\"）。用户在页面中选择主题和预设后，底部会实时显示 CLI 命令栏：\n\n```\nnode scripts/render.js input.mmd -t dracula -p gradient -o output-dracula-gradient.svg\n```\n\n**Step 2 — 将选定风格传递给生成**\n\nPlayground 提供三种传递方式：\n\n| 按钮 | 内容 | 用途 |\n|------|------|------|\n| **CLI 命令栏（点击）** | `node scripts/render.js ... -t <theme> -p <preset>` | 直接在终端粘贴执行 |\n| **Copy Config** | JSON（含 theme、preset、颜色对象、CLI命令） | AI / 脚本读取，参数化批量生成 |\n| **Copy Code** | `renderMermaidSVG(code, THEMES['...'])` | 嵌入 JS/TS 代码 |\n\n**Step 3 — 统一管理生成的文件**\n\n- **Download SVG**：文件名自动为 `mermaid-{theme}-{preset}.svg`，方便按风格整理\n- **Export HTML**：生成包含图表 + 主题配色 + CLI 命令的独立 HTML，可直接分享或存档\n\n**Step 4（可选）— 多图表丰富展示 HTML**\n\n当用户有**多张 Mermaid 图表**需要整合展示时（如系统设计文档、架构评审、技术报告），使用 `scripts/rich-html.js`，生成带标签页导航和信息卡片的专业展示页面：\n\n```bash\n# 使用 Step 1 中用户确认的主题和预设\nnode scripts/rich-html.js \"报告标题\" \\\n  --diagrams file1.mmd file2.mmd file3.mmd \\\n  --theme <用户确认的主题> --preset <用户确认的预设> \\\n  --subtitle \"副标题\" \\\n  --output result.html\n```\n\n生成后**必须**用 `preview_url` 打开结果 HTML，让用户预览效果。\n\n> **工作流关键点**：rich-html.js 不需要单独指定颜色，只需传入 Step 1 中用户已在 preview.html 中确认的 `--theme` 和 `--preset`，所有颜色自动继承。\n\n---\n\n## 多图表丰富展示 HTML 规范\n\n> 当用户要求将**多张图表整合为报告/文档/展示页面**时，**必须使用 `scripts/rich-html.js`**，不要手动拼接 HTML。\n\n### 触发场景\n\n- 用户说「生成一个报告」「做一份文档」「整合成页面」「汇总展示」\n- 用户有 2 张及以上图表需要一并展示\n- 用户要求类似「像参考文件那样的丰富展示」\n\n### 生成命令（直接执行，无需用户确认）\n\n```bash\n# 方式一：直接调用脚本\nnode scripts/rich-html.js \"<标题>\" \\\n  --diagrams <file1.mmd> [file2.mmd ...] \\\n  --theme <主题> --preset <预设> \\\n  --subtitle \"<副标题>\" \\\n  --output <输出路径.html>\n\n# 方式二：npm script（等效，-- 之后的参数透传）\nnpm run rich-html -- \"<标题>\" \\\n  --diagrams <file1.mmd> [file2.mmd ...] \\\n  --theme <主题> --preset <预设> \\\n  --output <输出路径.html>\n```\n\n### 主题风格继承（核心规则）\n\n**rich-html.js 自动从 `--theme` 和 `--preset` 继承所有颜色**，AI **无需手动指定**任何颜色值：\n\n| 页面元素 | 来源 |\n|---------|------|\n| 页面背景 | 主题 `bg` |\n| 卡片/导航背景 | 主题 `surface` |\n| 边框线 | 主题 `border` |\n| 正文文字 | 主题 `fg` |\n| 次要文字/标签 | 主题 `muted` |\n| 强调色（Badge/激活Tab/数值） | 主题 `accent` |\n| SVG 图表背景 | `bg` 自动加深/变浅 |\n\n### .mmd 文件中添加元数据（可选但推荐）\n\n为了让信息卡片显示有意义的内容，在图表文件中添加注释元数据：\n\n```\n# @title  用户下单完整流程\n# @desc   从进入活动页到订单完成的端到端链路\n# @icon   🛒\n# @meta   关键节点:8 个|覆盖阶段:全链路|主题:Tokyo Night|限流:Redis Lua\ngraph TD\n    ...\n```\n\n### 生成后的展示规则\n\n生成 HTML 后，**必须**调用 `preview_url` 工具打开文件，让用户直接在 IDE 内预览：\n\n```\npreview_url(\"file:///绝对路径/result.html\")\n```\n\n---\n\n## ⚠️ AI 生成独立 HTML 文件的强制规范\n\n> 当用户要求将 Mermaid 图表输出为**独立 HTML 文件**时，AI **必须**严格按照本节模板生成，否则会出现样式串扰、SVG 裁剪、线条无颜色等问题。\n\n### SVG 内联进 HTML 的三件事（缺一不可）\n\n**① 每个 SVG 必须有唯一 id**\n用 `injectStylesToSVG(svg, theme, preset, 'diagram-flow')` 第 4 个参数传入不同 id。\n内联多个 SVG 时，每张图用不同 id（如 `diagram-flow`、`diagram-seq`、`diagram-3`）。\n\n**② 内部 `<style>` 选择器必须用 id 作用域化**\n`generateCSSStyles` 会自动完成（传入 svgId 参数后），输出：\n```css\n#diagram-flow { --_line: #A1A1AA; }   /* ✅ 有 id 作用域，不会污染其他 SVG */\n#diagram-flow text { ... }\n#diagram-flow path { ... }\n```\n而非裸选择器：\n```css\nsvg { --_line: #A1A1AA; }   /* ❌ 内联进 HTML 后会影响所有 SVG */\ntext { ... }\npath { ... }\n```\n\n**③ 外层 CSS 必须同时设 `max-width: 100%` + `height: auto`**\n`max-width: 100%` 单独不够。当容器宽度窄于 SVG 的硬编码宽度时，SVG 宽度被压缩，\n但若不设 `height: auto`，高度不跟随缩放，图表下半部分被截断。\n\n```css\n/* ✅ 正确：两个属性必须同时设置 */\n.diagram-wrap svg {\n  display: block;\n  max-width: 100%;\n  height: auto;   /* CRITICAL: 缺少这行会导致窄屏下图表被垂直截断 */\n  width: auto;\n}\n```\n\n### 独立打开 SVG 时线条无颜色的修复\n\nSVG 内部元素使用 `stroke=\"var(--_line)\"`，该变量通过 CSS 从 `--line` 映射而来。\n`injectStylesToSVG` 会自动在 `<svg style=\"...\">` 属性中内联所有 `--_xxx` 精确颜色值，\n确保在 Figma、Inkscape、系统预览等独立软件中打开时线条也有正确颜色。\n\n核心修复：\n```html\n<!-- 修复后的 SVG 开标签（--_line 等变量直接内联在 style 属性中） -->\n<svg id=\"diagram-flow\"\n     style=\"background:#FFF;--_line:#A1A1AA;--_arrow:#A1A1AA;--_text:#27272A;...\"\n     width=\"229\" height=\"606\" viewBox=\"0 0 229 606\">\n```\n\n### 核心禁忌（必须遵守）\n\n1. **绝对不要给容器 div 设置 `overflow: hidden`** — 这会截断超出容器的 SVG 内容\n2. **绝对不要设置固定的容器高度（如 `height: 400px`）再嵌入 SVG** — SVG 会被截断\n3. **多张 SVG 内联时，每张必须有不同 id** — 否则 `#id` 作用域化后还是会互相影响\n4. **容器 CSS 必须同时写 `max-width:100%` 和 `height:auto`** — 只写前者会在窄屏裁剪\n\n### 标准代码（Node.js 生成 HTML 时使用）\n\n```js\nimport { renderMermaidSVG } from 'beautiful-mermaid';\nimport { injectStylesToSVG, resolveTheme } from './scripts/styles.js';\n\nconst theme = resolveTheme('zinc-light');\n\n// 多张图时：每张图传入不同的 svgId（第 4 个参数）\nconst flowSVG = injectStylesToSVG(renderMermaidSVG(flowCode, theme), theme, 'default', 'diagram-flow');\nconst seqSVG  = injectStylesToSVG(renderMermaidSVG(seqCode,  theme), theme, 'default', 'diagram-seq');\n```\n\n```html\n<style>\n  /* ✅ 正确：max-width + height:auto 同时设置 */\n  .diagram-wrap svg {\n    display: block;\n    max-width: 100%;\n    height: auto;   /* CRITICAL：防止窄屏垂直裁剪 */\n    width: auto;\n  }\n</style>\n<div class=\"diagram-wrap\">\n  <!-- flowSVG 已含 id=\"diagram-flow\" 和作用域化 <style> -->\n</div>\n```\n\n### SVG 嵌入前的检查清单\n\nAI 在将 SVG 写入 HTML 前，必须确认：\n\n- [ ] `<svg id=\"diagram-xxx\">` — 每张图有**唯一 id**，多图时 id 不重复\n- [ ] `<svg width=\"XXX\" height=\"YYY\">` — `width` 和 `height` 都是**具体像素数值**，不是 `100%`\n- [ ] `<svg viewBox=\"0 0 XXX YYY\">` — `viewBox` 存在\n- [ ] SVG 内 `<style>` 选择器以 `#id` 开头（如 `#diagram-flow {`），无裸 `svg {` 或 `text {`\n- [ ] SVG `style` 属性含 `--_line`、`--_arrow` 等直接颜色值\n- [ ] 外层 CSS 同时设 `max-width: 100%` + `height: auto`\n\n### 常见错误对比\n\n```html\n<!-- ❌ 错误1：裸选择器污染（两张图样式互串） -->\n<style>svg { --_line: red; } text { color: blue; }</style>\n\n<!-- ❌ 错误2：只设 max-width，窄屏下图表被竖向截断 -->\n.diagram-wrap svg { max-width: 100%; }  /* 缺 height:auto */\n\n<!-- ❌ 错误3：固定容器高度截断图表 -->\n<div style=\"height:400px; overflow:hidden\">\n  <svg width=\"800\" height=\"600\" ...>...</svg>\n</div>\n\n<!-- ✅ 正确：id 作用域 + max-width/height:auto + 具体宽高 -->\n.diagram-wrap svg { display:block; max-width:100%; height:auto; width:auto; }\n<svg id=\"diagram-flow\" width=\"229\" height=\"606\" viewBox=\"0 0 229 606\" style=\"--_line:#A1A1AA;...\">\n  <style>#diagram-flow { --_line: #A1A1AA; } #diagram-flow path { stroke:#A1A1AA; }</style>\n</svg>\n```\n\n---\n\n### AI 使用 Copy Config 的格式\n\n当 AI 拿到「Copy Config」的内容后，可直接解析并用于批量渲染：\n\n```json\n{\n  \"theme\": \"dracula\",\n  \"preset\": \"gradient\",\n  \"themeColors\": { \"bg\": \"#282a36\", \"fg\": \"#f8f8f2\", ... },\n  \"cliCommand\": \"node scripts/render.js input.mmd -t dracula -p gradient -o output-dracula-gradient.svg\",\n  \"npmUsage\": \"renderMermaidSVG(code, THEMES['dracula'])\"\n}\n```\n\nAI 工作流示例：\n1. 用户在 Playground 选好 `tokyo-night + glass`，点「Copy Config」\n2. 将 JSON 粘贴给 AI\n3. AI 解析 `theme` / `preset`，用 `-t tokyo-night -p glass` 批量渲染所有 `.mmd` 文件\n\n---\n\n## 常见用例\n\n### 1. 系统架构图\n\n```mermaid\ngraph TB\n    User[用户] -->|HTTP| Nginx[Nginx]\n    Nginx -->|反向代理| App[应用服务器]\n    App -->|查询| Redis[(Redis缓存)]\n    App -->|读写| MySQL[(MySQL数据库)]\n```\n\n### 2. 流程图\n\n```mermaid\ngraph TD\n    Start([开始]) --> Input[输入数据]\n    Input --> Validate{验证?}\n    Validate -->|通过| Process[处理数据]\n    Validate -->|失败| Error[显示错误]\n    Process --> Save[保存结果]\n    Save --> End([结束])\n    Error --> Input\n```\n\n### 3. 序列图\n\n```mermaid\nsequenceDiagram\n    participant U as 用户\n    participant A as API网关\n    participant S as 服务\n    participant D as 数据库\n\n    U->>A: 发送请求\n    A->>S: 转发请求\n    S->>D: 查询数据\n    D-->>S: 返回数据\n    S-->>A: 处理结果\n    A-->>U: 响应\n```\n\n### 4. 状态图\n\n```mermaid\nstateDiagram-v2\n    [*] --> 待处理\n    待处理 --> 处理中: 开始处理\n    处理中 --> 已完成: 处理成功\n    处理中 --> 失败: 处理失败\n    失败 --> 待处理: 重试\n    已完成 --> [*]\n```\n\n### 5. 类图\n\n```mermaid\nclassDiagram\n    class Animal {\n        +String name\n        +int age\n        +makeSound()\n    }\n    class Dog {\n        +bark()\n    }\n    class Cat {\n        +meow()\n    }\n    Animal <|-- Dog\n    Animal <|-- Cat\n```\n\n### 6. ER 图\n\n```mermaid\nerDiagram\n    CUSTOMER ||--o{ ORDER : places\n    ORDER ||--|{ LINE-ITEM : contains\n    PRODUCT ||--o{ LINE-ITEM : \"is in\"\n    CUSTOMER {\n        int id PK\n        string name\n        string email\n    }\n    ORDER {\n        int id PK\n        date created\n        string status\n    }\n```\n\n### 7. XY 图表 — 柱状图\n\n```mermaid\nxychart-beta\n    title \"Monthly Revenue\"\n    x-axis [Jan, Feb, Mar, Apr, May, Jun]\n    y-axis \"Revenue ($K)\" 0 --> 500\n    bar [180, 250, 310, 280, 350, 420]\n```\n\n### 8. XY 图表 — 折线图\n\n```mermaid\nxychart-beta\n    title \"User Growth\"\n    x-axis [Jan, Feb, Mar, Apr, May, Jun]\n    line [1200, 1800, 2500, 3100, 3800, 4500]\n```\n\n### 9. XY 图表 — 组合图\n\n```mermaid\nxychart-beta\n    title \"Sales with Trend\"\n    x-axis [Jan, Feb, Mar, Apr, May, Jun]\n    bar [300, 380, 280, 450, 350, 520]\n    line [300, 330, 320, 353, 352, 395]\n```\n\n## API 参考\n\n### `renderMermaidSVG(text, options?): string`\n\n将 Mermaid 代码渲染为 SVG 字符串。**同步**，可直接用于 React `useMemo()`。\n\n**参数：**\n- `text: string` - Mermaid 图表代码\n- `options?: RenderOptions` - 渲染选项\n\n**RenderOptions：**\n\n| 选项 | 类型 | 默认值 | 说明 |\n|------|------|--------|------|\n| `bg` | `string` | `#FFFFFF` | 背景色（支持 CSS 变量） |\n| `fg` | `string` | `#27272A` | 前景色（支持 CSS 变量） |\n| `line` | `string?` | — | 连线颜色 |\n| `accent` | `string?` | — | 箭头、高亮色 |\n| `muted` | `string?` | — | 次要文字、标签 |\n| `surface` | `string?` | — | 节点填充色 |\n| `border` | `string?` | — | 节点边框色 |\n| `font` | `string` | `Inter` | 字体族 |\n| `transparent` | `boolean` | `false` | 透明背景 |\n| `padding` | `number` | `40` | 画布内边距 (px) |\n| `nodeSpacing` | `number` | `24` | 同级节点水平间距 |\n| `layerSpacing` | `number` | `40` | 层间垂直间距 |\n| `componentSpacing` | `number` | `24` | 断开组件间距 |\n| `interactive` | `boolean` | `false` | XY 图表悬浮 tooltip |\n\n**返回：** `string` - SVG 字符串\n\n### `renderMermaidSVGAsync(text, options?): Promise<string>`\n\n异步版本，相同输出。适用于 async 上下文。\n\n### `renderMermaidASCII(text, options?): string`\n\n将 Mermaid 代码渲染为 ASCII/Unicode 艺术字。**同步**。\n\n**参数：**\n- `text: string` - Mermaid 图表代码\n- `options?: AsciiRenderOptions` - 渲染选项\n\n**AsciiRenderOptions：**\n\n| 选项 | 类型 | 默认值 | 说明 |\n|------|------|--------|------|\n| `useAscii` | `boolean` | `false` | 使用 ASCII（true）或 Unicode（false） |\n| `paddingX` | `number` | `5` | 节点水平间距 |\n| `paddingY` | `number` | `5` | 节点垂直间距 |\n| `boxBorderPadding` | `number` | `1` | 节点框内边距 |\n| `colorMode` | `string` | `'auto'` | `'none'` \\| `'auto'` \\| `'ansi16'` \\| `'ansi256'` \\| `'truecolor'` \\| `'html'` |\n| `theme` | `Partial<AsciiTheme>` | — | 自定义 ASCII 颜色 |\n\n**返回：** `string` - ASCII 字符串\n\n### `parseMermaid(text): MermaidGraph`\n\n将 Mermaid 代码解析为结构化图对象（用于自定义处理）。支持流程图和状态图。\n\n### `fromShikiTheme(theme): DiagramColors`\n\n从 Shiki 主题对象提取图表颜色。映射关系：\n\n| 编辑器颜色 | 图表角色 |\n|-----------|---------|\n| `editor.background` | `bg` |\n| `editor.foreground` | `fg` |\n| `editorLineNumber.foreground` | `line` |\n| `focusBorder` / keyword token | `accent` |\n| comment token | `muted` |\n| `editor.selectionBackground` | `surface` |\n| `editorWidget.border` | `border` |\n\n### `THEMES`\n\n内置主题集合，每个主题包含完整 7 字段（`bg`/`fg`/`line`/`accent`/`muted`/`surface`/`border`）。完整色值见\"核心能力 → 主题完整对照表\"。\n\n| 主题名 | 类型 | accent 色 | 推荐预设 |\n|--------|------|-----------|---------|\n| `tokyo-night` | 暗色 | `#7aa2f7` | glass |\n| `tokyo-night-storm` | 暗色 | `#7aa2f7` | modern |\n| `tokyo-night-light` | 亮色 | `#34548a` | modern |\n| `dracula` | 暗色 | `#bd93f9` | gradient |\n| `github-dark` | 暗色 | `#4493f8` | modern |\n| `github-light` | 亮色 | `#0969da` | default |\n| `nord` | 暗色 | `#88c0d0` | modern |\n| `nord-light` | 亮色 | `#5e81ac` | outline |\n| `one-dark` | 暗色 | `#c678dd` | gradient |\n| `catppuccin-mocha` | 暗色 | `#cba6f7` | glass |\n| `catppuccin-latte` | 亮色 | `#8839ef` | modern |\n| `solarized-dark` | 暗色 | `#268bd2` | modern |\n| `solarized-light` | 亮色 | `#268bd2` | outline |\n| `zinc-light` | 亮色 | `#3F3F46` | outline |\n| `zinc-dark` | 暗色 | `#A1A1AA` | glass |\n\n### `DEFAULTS`\n\n默认颜色值（完整 7 字段）：\n\n```typescript\n{\n  bg:      '#FFFFFF',  // 画布背景\n  fg:      '#27272A',  // 主文字\n  line:    '#A1A1AA',  // 连线\n  accent:  '#3F3F46',  // 强调色\n  muted:   '#71717A',  // 次要色\n  surface: '#F4F4F5',  // 节点填充次级色\n  border:  '#D4D4D8',  // 节点边框\n}\n```\n\n## 代码级样式预设\n\n```javascript\n// 导入样式预设模块（ESM）\nimport { STYLE_PRESETS, generateCSSStyles, injectStylesToSVG } from './scripts/styles.js';\nimport { renderMermaidSVG } from 'beautiful-mermaid';\n\n// 1. 渲染基础 SVG\nconst svg = renderMermaidSVG(code, {\n  bg: '#f7f7fa',\n  fg: '#27272a',\n  line: '#6b7280'\n});\n\n// 2. 应用样式预设 (Node.js 环境)\nconst styledSvg = injectStylesToSVG(svg, {\n  bg: '#f7f7fa',\n  fg: '#27272a',\n  line: '#6b7280'\n}, 'modern');\n\n// 3. 获取 CSS 字符串（可选）\nconst css = generateCSSStyles({ bg: '#f7f7fa', fg: '#27272a' }, 'modern');\nconsole.log(css);\n```\n\n## 安全注意事项\n\n1. **SVG 输出安全**：SVG 内容包含用户控制的文本，直接嵌入 HTML 可能导致 XSS。不要将不可信来源提供的 Mermaid 代码直接渲染后嵌入网页。如果 SVG 需要在浏览器中展示，建议对输出进行 sanitize 处理（如使用 DOMPurify）。\n2. **输入信任边界**：本 Skill 设计用于渲染开发者自己编写的 .mmd 文件。如果渲染来自用户输入的 Mermaid 代码，请务必进行输入校验和输出清理。\n3. **依赖安全**：定期检查 `npm audit` 输出，及时升级 beautiful-mermaid 至包含安全修复的最新版本。\n\n## 注意事项\n\n1. **同步渲染**：`renderMermaidSVG` 和 `renderMermaidASCII` 都是同步函数，可直接用于 React 的 `useMemo`\n2. **异步渲染**：`renderMermaidSVGAsync` 返回 `Promise<string>`，适用于 async 上下文\n3. **无 DOM 依赖**：可在 Node.js、浏览器、终端等多环境运行\n4. **错误处理**：建议用 try-catch 包裹渲染调用\n5. **性能**：100+ 图表可在 500ms 内完成渲染\n6. **`--preset` 与 `--theme` 可以自由联用**：`-t dracula -p gradient` 完全合法；不传 `--preset` 时自动使用该主题的推荐预设\n7. **CSS 注入顺序**：注入的 `<style>` 标签位于 `<svg>` 之后，使用 `!important` 确保覆盖\n8. **CSS 变量主题切换**：传递 `var(--xxx)` 作为颜色值，SVG 可实时响应主题变化\n9. **XY 图表**：使用 `xychart-beta` 语法，`accent` 颜色驱动图表系列配色\n10. **linkStyle 支持**：流程图和状态图支持 `linkStyle` 内联边样式覆盖\n\n## 相关链接\n\n- [在线演示](https://agents.craft.do/mermaid)\n- [Mermaid 语法文档](https://mermaid.js.org/)\n- [GitHub 仓库](https://github.com/lukilabs/beautiful-mermaid)\n- [Issue #79: Mermaid config 支持](https://github.com/lukilabs/beautiful-mermaid/issues/79) — 上游计划中，待实现后将跟进\n- [Issue #59: 更多图表类型](https://github.com/lukilabs/beautiful-mermaid/issues/59) — Mindmap、Pie、Gantt 等类型待上游支持后同步\n\nFile v1.0.0:README.md\n\n# Beautiful Mermaid Skill 使用指南\n\n## 项目地址\n\n| 说明 | 地址 |\n|------|------|\n| 本 Skill | [https://github.com/chouraycn/beautiful-mermaid](https://github.com/chouraycn/beautiful-mermaid) |\n| 上游项目 | [https://github.com/lukilabs/beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid) |\n\n## 快速开始\n\n### 1. 安装依赖\n\n```bash\ncd beautiful-mermaid\nnpm install\n```\n\n### 2. 交互式预览 (推荐)\n\n```bash\n# 在浏览器中打开样式定制预览工具\nopen assets/preview.html\n```\n\n**预览工具功能**：\n\n- 15 个内置主题即时预览，点击切换\n- 9 种图表类型：流程图、序列图、状态图、类图、ER 图、柱状图、折线图、组合图、水平柱状图\n- 节点样式：背景色、圆角、边框、阴影\n- 连线样式：粗细、颜色、箭头、圆角\n- 5 种预设风格：默认、现代简约、渐变、线条轮廓、毛玻璃\n- 一键导出带完整样式的 SVG 文件\n- 使用 beautiful-mermaid 库渲染，与 CLI 输出一致\n\n### 3. 运行示例\n\n```bash\n# 流程图\nnode scripts/render.js assets/examples/flowchart-basic.mmd -o flowchart-basic.svg\n\n# 序列图\nnode scripts/render.js assets/examples/sequence-diagram.mmd -o sequence-diagram.svg\n\n# 状态图\nnode scripts/render.js assets/examples/state-diagram.mmd -o state-diagram.svg\n\n# ER 图\nnode scripts/render.js assets/examples/er-diagram.mmd -o er-diagram.svg\n\n# 类图\nnode scripts/render.js assets/examples/class-diagram.mmd -o class-diagram.svg\n\n# XY 柱状图\nnode scripts/render.js assets/examples/xychart-bar.mmd -o xychart-bar.svg\n\n# XY 折线图\nnode scripts/render.js assets/examples/xychart-line.mmd -o xychart-line.svg\n\n# XY 组合图\nnode scripts/render.js assets/examples/xychart-combo.mmd -o xychart-combo.svg\n```\n\n### 4. 使用不同主题\n\n```bash\n# 使用 dracula 主题\nnode scripts/render.js assets/examples/flowchart-basic.mmd -t dracula -o flowchart-dracula.svg\n\n# 使用 catppuccin-mocha 主题\nnode scripts/render.js assets/examples/flowchart-basic.mmd -t catppuccin-mocha -o flowchart-catppuccin.svg\n\n# 使用 github-light 主题 (亮色)\nnode scripts/render.js assets/examples/flowchart-basic.mmd -t github-light -o flowchart-light.svg\n```\n\n### 5. 渲染为 PNG (高清位图)\n\n```bash\n# 标准尺寸 PNG (1200px)\nnode scripts/render.js assets/examples/flowchart-basic.mmd -f png -o flowchart.png\n\n# 2K 高清 PNG (2400px)\nnode scripts/render.js assets/examples/flowchart-basic.mmd -f png -w 2400 -o flowchart-hd.png\n\n# 2x 缩放 PNG\nnode scripts/render.js assets/examples/flowchart-basic.mmd -f png -s 2 -o flowchart-2x.png\n\n# 4K 超清 PNG (4800px)\nnode scripts/render.js assets/examples/flowchart-basic.mmd -f png -s 4 -o flowchart-4k.png\n\n# 印刷质量 (300 DPI)\nnode scripts/render.js assets/examples/flowchart-basic.mmd -f png --dpi 300 -o flowchart-print.png\n```\n\n### 6. 渲染为 ASCII (终端输出)\n\n```bash\nnode scripts/render.js assets/examples/flowchart-basic.mmd -f ascii\n```\n\n### 7. 自定义颜色 (Mono 模式)\n\n```bash\n# 自定义背景和前景色\nnode scripts/render.js assets/examples/flowchart-basic.mmd \\\n  --bg '#1a1b2e' \\\n  --fg '#e0e0e0' \\\n  --accent '#ff6b6b' \\\n  -o flowchart-custom.svg\n```\n\n### 8. XY 图表交互式 tooltip\n\n```bash\n# 启用鼠标悬停 tooltip\nnode scripts/render.js assets/examples/xychart-bar.mmd --interactive -o chart-interactive.svg\n```\n\n## 示例文件说明\n\n| 文件 | 说明 |\n|------|------|\n| `flowchart-basic.mmd` | 基础流程图示例 |\n| `sequence-diagram.mmd` | 序列图示例 |\n| `state-diagram.mmd` | 状态图示例 |\n| `er-diagram.mmd` | 实体关系图示例 |\n| `class-diagram.mmd` | 类图示例 |\n| `xychart-bar.mmd` | XY 柱状图示例 |\n| `xychart-line.mmd` | XY 折线图示例 |\n| `xychart-combo.mmd` | XY 组合图示例 |\n| `system-architecture.mmd` | 复杂系统架构图 |\n| `erp-*.mmd` | ERP 业务流程图 |\n\n## 可用主题列表\n\n| 主题 | 类型 | 说明 |\n|------|------|------|\n| tokyo-night | 暗色 | 东京之夜 |\n| tokyo-night-storm | 暗色 | 东京之夜·暴风雨 |\n| catppuccin-mocha | 暗色 | Catppuccin Mocha |\n| nord | 暗色 | Nord 蓝 |\n| dracula | 暗色 | 德古拉红 |\n| github-dark | 暗色 | GitHub 暗色 |\n| one-dark | 暗色 | One Dark |\n| solarized-dark | 暗色 | Solarized 暗色 |\n| zinc-dark | 暗色 | Zinc 暗色 |\n| github-light | 亮色 | GitHub 亮色 |\n| solarized-light | 亮色 | Solarized 亮色 |\n| nord-light | 亮色 | Nord 亮色 |\n| zinc-light | 亮色 | Zinc 亮色 |\n| catppuccin-latte | 亮色 | Catppuccin Latte |\n| tokyo-night-light | 亮色 | 东京之夜·亮色 |\n\n## 提示\n\n1. **交互式预览**：使用 `open assets/preview.html` 打开可视化样式定制工具\n2. **SVG 输出**：适合嵌入网页、PPT 或文档中，支持透明背景和内联样式\n3. **PNG 输出**：适合文档嵌入、PPT 演示，支持自定义尺寸 (默认 1200px，缩放 0.5-4x，DPI 72-600)\n4. **ASCII 输出**：适合在终端、聊天界面或 Markdown 文档中展示\n5. **透明背景**：设置 `transparent: true` 可以生成透明背景的 SVG\n6. **主题选择**：暗色主题适合开发文档，亮色主题适合正式文档\n7. **样式预设**：5 种预设风格（默认、现代简约、渐变、线条轮廓、毛玻璃）\n8. **XY 图表**：使用 `xychart-beta` 语法，支持柱状图、折线图、组合图\n9. **交互式图表**：使用 `--interactive` 参数为 XY 图表添加鼠标悬停 tooltip\n\nFile v1.0.0:_meta.json\n\n{\n  \"ownerId\": \"kn7f72xykk4r98gjxj6pgyec0s832w86\",\n  \"slug\": \"beautiful-mermaid\",\n  \"version\": \"1.0.0\",\n  \"publishedAt\": 1774672015689\n}\n\nFile v1.0.0:references/api-config.json\n\n{\n  \"type\": \"module\",\n  \"title\": \"Mermaid 配置选项\",\n  \"description\": \"renderMermaidSVG、renderMermaidSVGAsync、renderMermaidASCII、parseMermaid、fromShikiTheme 的完整配置选项\",\n  \"version\": \"1.1.3\",\n  \"options\": {\n    \"renderMermaidSVG\": {\n      \"parameters\": {\n        \"text\": {\n          \"type\": \"string\",\n          \"required\": true,\n          \"description\": \"Mermaid 图表代码\"\n        },\n        \"options\": {\n          \"type\": \"RenderOptions\",\n          \"required\": false,\n          \"default\": \"{}\"\n        }\n      },\n      \"render_options\": {\n        \"bg\": {\n          \"type\": \"string\",\n          \"default\": \"#FFFFFF\",\n          \"description\": \"背景色，支持 CSS 变量\",\n          \"examples\": [\"#1a1b26\", \"var(--background)\"]\n        },\n        \"fg\": {\n          \"type\": \"string\",\n          \"default\": \"#27272A\",\n          \"description\": \"前景色/文字颜色，支持 CSS 变量\",\n          \"examples\": [\"#a9b1d6\", \"var(--foreground)\"]\n        },\n        \"line\": {\n          \"type\": \"string\",\n          \"required\": false,\n          \"description\": \"连线颜色\"\n        },\n        \"accent\": {\n          \"type\": \"string\",\n          \"required\": false,\n          \"description\": \"箭头/高亮色\",\n          \"examples\": [\"#7aa2f7\", \"#61afef\"]\n        },\n        \"muted\": {\n          \"type\": \"string\",\n          \"required\": false,\n          \"description\": \"次要文字/标签颜色\",\n          \"examples\": [\"#565f89\", \"#5c6370\"]\n        },\n        \"surface\": {\n          \"type\": \"string\",\n          \"required\": false,\n          \"description\": \"节点填充色\",\n          \"examples\": [\"#1f2335\", \"#21252b\"]\n        },\n        \"border\": {\n          \"type\": \"string\",\n          \"required\": false,\n          \"description\": \"节点边框色\",\n          \"examples\": [\"#3b4261\", \"#181a1f\"]\n        },\n        \"font\": {\n          \"type\": \"string\",\n          \"default\": \"Inter\",\n          \"description\": \"字体族\"\n        },\n        \"transparent\": {\n          \"type\": \"boolean\",\n          \"default\": false,\n          \"description\": \"是否使用透明背景\"\n        },\n        \"padding\": {\n          \"type\": \"number\",\n          \"default\": 40,\n          \"description\": \"画布内边距 (px)\"\n        },\n        \"nodeSpacing\": {\n          \"type\": \"number\",\n          \"default\": 24,\n          \"description\": \"同级节点水平间距\"\n        },\n        \"layerSpacing\": {\n          \"type\": \"number\",\n          \"default\": 40,\n          \"description\": \"层间垂直间距\"\n        },\n        \"componentSpacing\": {\n          \"type\": \"number\",\n          \"default\": 24,\n          \"description\": \"断开组件间距\"\n        },\n        \"interactive\": {\n          \"type\": \"boolean\",\n          \"default\": false,\n          \"description\": \"启用 XY 图表悬浮 tooltip\"\n        }\n      }\n    },\n    \"renderMermaidSVGAsync\": {\n      \"description\": \"renderMermaidSVG 的异步版本，返回 Promise<string>\",\n      \"parameters\": {\n        \"text\": {\n          \"type\": \"string\",\n          \"required\": true,\n          \"description\": \"Mermaid 图表代码\"\n        },\n        \"options\": {\n          \"type\": \"RenderOptions\",\n          \"required\": false,\n          \"description\": \"与 renderMermaidSVG 相同的选项\"\n        }\n      }\n    },\n    \"renderMermaidASCII\": {\n      \"parameters\": {\n        \"text\": {\n          \"type\": \"string\",\n          \"required\": true,\n          \"description\": \"Mermaid 图表代码\"\n        },\n        \"options\": {\n          \"type\": \"AsciiRenderOptions\",\n          \"required\": false,\n          \"default\": \"{}\"\n        }\n      },\n      \"ascii_options\": {\n        \"useAscii\": {\n          \"type\": \"boolean\",\n          \"default\": false,\n          \"description\": \"使用 ASCII 字符 (true) 或 Unicode 框线 (false)\"\n        },\n        \"paddingX\": {\n          \"type\": \"number\",\n          \"default\": 5,\n          \"description\": \"节点水平间距\"\n        },\n        \"paddingY\": {\n          \"type\": \"number\",\n          \"default\": 5,\n          \"description\": \"节点垂直间距\"\n        },\n        \"boxBorderPadding\": {\n          \"type\": \"number\",\n          \"default\": 1,\n          \"description\": \"节点框内边距\"\n        },\n        \"colorMode\": {\n          \"type\": \"string\",\n          \"default\": \"auto\",\n          \"description\": \"颜色模式\",\n          \"enum\": [\"none\", \"auto\", \"ansi16\", \"ansi256\", \"truecolor\", \"html\"],\n          \"examples\": [\n            \"none - 无颜色\",\n            \"auto - 自动检测\",\n            \"ansi16 - 16色模式\",\n            \"ansi256 - 256色模式\",\n            \"truecolor - 真彩色\",\n            \"html - HTML span 标签（浏览器渲染）\"\n          ]\n        },\n        \"theme\": {\n          \"type\": \"Partial<AsciiTheme>\",\n          \"required\": false,\n          \"description\": \"自定义 ASCII 颜色\",\n          \"properties\": {\n            \"fg\": \"文字颜色\",\n            \"border\": \"边框颜色\",\n            \"line\": \"连线颜色\",\n            \"arrow\": \"箭头颜色\",\n            \"accent\": \"强调色 (可选)\",\n            \"bg\": \"背景色 (可选)\"\n          }\n        }\n      }\n    },\n    \"parseMermaid\": {\n      \"description\": \"解析 Mermaid 源码为结构化图对象\",\n      \"parameters\": {\n        \"text\": {\n          \"type\": \"string\",\n          \"required\": true,\n          \"description\": \"Mermaid 图表代码\"\n        }\n      },\n      \"returns\": {\n        \"direction\": \"TD | TB | LR | BT | RL\",\n        \"nodes\": \"Map<string, MermaidNode>\",\n        \"edges\": \"MermaidEdge[]\",\n        \"subgraphs\": \"MermaidSubgraph[]\",\n        \"classDefs\": \"Map<string, Record<string, string>>\",\n        \"nodeStyles\": \"Map<string, Record<string, string>>\",\n        \"linkStyles\": \"Map<number | 'default', Record<string, string>>\"\n      }\n    },\n    \"fromShikiTheme\": {\n      \"description\": \"从 Shiki 主题对象提取图表颜色\",\n      \"parameters\": {\n        \"theme\": {\n          \"type\": \"ShikiThemeLike\",\n          \"required\": true,\n          \"description\": \"Shiki 的 ThemeRegistrationResolved 对象\"\n        }\n      },\n      \"returns\": \"DiagramColors 对象\",\n      \"mapping\": {\n        \"editor.background\": \"bg\",\n        \"editor.foreground\": \"fg\",\n        \"editorLineNumber.foreground\": \"line\",\n        \"focusBorder / keyword\": \"accent\",\n        \"comment token\": \"muted\",\n        \"editor.selectionBackground\": \"surface\",\n        \"editorWidget.border\": \"border\"\n      }\n    }\n  },\n  \"example_usage\": {\n    \"svg_with_builtin_theme\": {\n      \"code\": \"import { renderMermaidSVG, THEMES } from 'beautiful-mermaid';\",\n      \"call\": \"const svg = renderMermaidSVG('graph TD; A --> B', THEMES.dracula);\"\n    },\n    \"svg_with_custom_theme\": {\n      \"code\": \"import { renderMermaidSVG } from 'beautiful-mermaid';\",\n      \"call\": \"const svg = renderMermaidSVG('graph TD; A --> B', { bg: '#1a1b26', fg: '#e0e0e0', accent: '#7aa2f7' });\"\n    },\n    \"svg_async\": {\n      \"code\": \"import { renderMermaidSVGAsync } from 'beautiful-mermaid';\",\n      \"call\": \"const svg = await renderMermaidSVGAsync('graph TD; A --> B', THEMES['nord']);\"\n    },\n    \"svg_with_css_vars\": {\n      \"code\": \"import { renderMermaidSVG } from 'beautiful-mermaid';\",\n      \"call\": \"const svg = renderMermaidSVG('graph TD; A --> B', { bg: 'var(--background)', fg: 'var(--foreground)', transparent: true });\"\n    },\n    \"ascii_unicode\": {\n      \"code\": \"import { renderMermaidASCII } from 'beautiful-mermaid';\",\n      \"call\": \"const ascii = renderMermaidASCII('graph TD; A --> B');\"\n    },\n    \"ascii_pure_ascii\": {\n      \"code\": \"import { renderMermaidASCII } from 'beautiful-mermaid';\",\n      \"call\": \"const ascii = renderMermaidASCII('graph TD; A --> B', { useAscii: true, colorMode: 'truecolor' });\"\n    },\n    \"parse_mermaid\": {\n      \"code\": \"import { parseMermaid } from 'beautiful-mermaid';\",\n      \"call\": \"const graph = parseMermaid('graph TD; A --> B --> C');\"\n    },\n    \"shiki_theme\": {\n      \"code\": \"import { fromShikiTheme } from 'beautiful-mermaid';\",\n      \"call\": \"const colors = fromShikiTheme(highlighter.getTheme('vitesse-dark'));\"\n    },\n    \"xychart_interactive\": {\n      \"code\": \"import { renderMermaidSVG } from 'beautiful-mermaid';\",\n      \"call\": \"const svg = renderMermaidSVG('xychart-beta\\\\n    bar [100, 200, 300]', { interactive: true, accent: '#7aa2f7' });\"\n    }\n  }\n}\n\nFile v1.0.0:skill-card.md\n\n## Description:\n\nRender Mermaid diagrams as beautiful SVG, PNG, or ASCII art with support for flowchart, sequence, state, class, ER, and XY chart types, built-in themes, style presets, CSS customization, interactive preview, and batch rendering.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[chouraycn](https://clawhub.ai/user/chouraycn)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers and engineers use this skill to render Mermaid diagrams into polished SVG, PNG, ASCII, or rich HTML outputs for documentation, presentations, terminal workflows, and web previews.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: The security review reports active local HTML preview behavior and confirmed unsanitized HTML/SVG insertion paths, making untrusted Mermaid input risky.\n\nMitigation: Use the skill only with trusted .mmd files, skip automatic previews when not needed, and avoid opening generated HTML from untrusted Mermaid input until the @icon and preview innerHTML paths are sanitized.\n\nRisk: Generated diagrams or rich HTML may include content derived from user-provided diagram metadata.\n\nMitigation: Review generated SVG, PNG, ASCII, or HTML outputs before publishing or embedding them in downstream documents or sites.\n\n## Reference(s):\n\n- [ClawHub skill page](https://clawhub.ai/chouraycn/skills/beautiful-mermaid)\n- [Publisher profile](https://clawhub.ai/user/chouraycn)\n- [Beautiful Mermaid repository](https://github.com/chouraycn/beautiful-mermaid)\n- [Upstream Beautiful Mermaid project](https://github.com/lukilabs/beautiful-mermaid)\n- [Mermaid documentation](https://mermaid.js.org/)\n- [API configuration](references/api-config.json)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, shell commands, configuration, guidance, files]\n\n**Output Format:** [Markdown guidance with shell commands and generated SVG, PNG, ASCII, or HTML files]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May open an interactive local HTML preview and may batch-render multiple .mmd files.]\n\n## Skill Version(s):\n\n1.0.0 (source: SKILL.md frontmatter, package.json, ClawHub release metadata)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nFile v1.0.0:package-lock.json\n\n{\n  \"name\": \"beautiful-mermaid-skill\",\n  \"version\": \"1.0.0\",\n  \"lockfileVersion\": 3,\n  \"requires\": true,\n  \"packages\": {\n    \"\": {\n      \"name\": \"beautiful-mermaid-skill\",\n      \"version\": \"1.0.0\",\n      \"license\": \"MIT\",\n      \"dependencies\": {\n        \"beautiful-mermaid\": \"^1.1.3\",\n        \"sharp\": \"^0.34.5\"\n      },\n      \"devDependencies\": {\n        \"@types/node\": \"^20.10.0\",\n        \"esbuild\": \"^0.27.4\"\n      },\n      \"engines\": {\n        \"node\": \">=16.0.0\"\n      }\n    },\n    \"node_modules/@emnapi/runtime\": {\n      \"version\": \"1.9.1\",\n      \"resolved\": \"https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.1.tgz\",\n      \"integrity\": \"sha512-VYi5+ZVLhpgK4hQ0TAjiQiZ6ol0oe4mBx7mVv7IflsiEp0OWoVsp/+f9Vc1hOhE0TtkORVrI1GvzyreqpgWtkA==\",\n      \"optional\": true,\n      \"dependencies\": {\n        \"tslib\": \"^2.4.0\"\n      }\n    },\n    \"node_modules/@esbuild/aix-ppc64\": {\n      \"version\": \"0.27.4\",\n      \"resolved\": \"https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.4.tgz\",\n      \"integrity\": \"sha512-cQPwL2mp2nSmHHJlCyoXgHGhbEPMrEEU5xhkcy3Hs/O7nGZqEpZ2sUtLaL9MORLtDfRvVl2/3PAuEkYZH0Ty8Q==\",\n      \"cpu\": [\n        \"ppc64\"\n      ],\n      \"dev\": true,\n      \"optional\": true,\n      \"os\": [\n        \"aix\"\n      ],\n      \"engines\": {\n        \"node\": \">=18\"\n      }\n    },\n    \"node_modules/@esbuild/android-arm\": {\n      \"version\": \"0.27.4\",\n      \"resolved\": \"https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.4.tgz\",\n      \"integrity\": \"sha512-X9bUgvxiC8CHAGKYufLIHGXPJWnr0OCdR0anD2e21vdvgCI8lIfqFbnoeOz7lBjdrAGUhqLZLcQo6MLhTO2DKQ==\",\n      \"cpu\": [\n        \"arm\"\n      ],\n      \"dev\": true,\n      \"optional\": true,\n      \"os\": [\n        \"android\"\n      ],\n      \"engines\": {\n        \"node\": \">=18\"\n      }\n    },\n    \"node_modules/@esbuild/android-arm64\": {\n      \"version\": \"0.27.4\",\n      \"resolved\": \"https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.4.tgz\",\n      \"integrity\": \"sha512-gdLscB7v75wRfu7QSm/zg6Rx29VLdy9eTr2t44sfTW7CxwAtQghZ4ZnqHk3/ogz7xao0QAgrkradbBzcqFPasw==\",\n      \"cpu\": [\n        \"arm64\"\n      ],\n      \"dev\": true,\n      \"optional\": true,\n      \"os\": [\n        \"android\"\n      ],\n      \"engines\": {\n        \"node\": \">=18\"\n      }\n    },\n    \"node_modules/@esbuild/android-x64\": {\n      \"version\": \"0.27.4\",\n      \"resolved\": \"https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.4.tgz\",\n      \"integrity\": \"sha512-PzPFnBNVF292sfpfhiyiXCGSn9HZg5BcAz+ivBuSsl6Rk4ga1oEXAamhOXRFyMcjwr2DVtm40G65N3GLeH1Lvw==\",\n      \"cpu\": [\n        \"x64\"\n      ],\n      \"dev\": true,\n      \"optional\": true,\n      \"os\": [\n        \"android\"\n      ],\n      \"engines\": {\n        \"node\": \">=18\"\n      }\n    },\n    \"node_modules/@esbuild/darwin-arm64\": {\n      \"version\": \"0.27.4\",\n      \"resolved\": \"https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.4.tgz\",\n      \"integrity\": \"sha512-b7xaGIwdJlht8ZFCvMkpDN6uiSmnxxK56N2GDTMYPr2/gzvfdQN8rTfBsvVKmIVY/X7EM+/hJKEIbbHs9oA4tQ==\",\n      \"cpu\": [\n        \"arm64\"\n      ],\n      \"dev\": true,\n      \"optional\": true,\n      \"os\": [\n        \"darwin\"\n      ],\n      \"engines\": {\n        \"node\": \">=18\"\n      }\n    },\n    \"node_modules/@esbuild/darwin-x64\": {\n      \"version\": \"0.27.4\",\n      \"resolved\": \"https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.4.tgz\",\n      \"integrity\": \"sha512-sR+OiKLwd15nmCdqpXMnuJ9W2kpy0KigzqScqHI3Hqwr7IXxBp3Yva+yJwoqh7rE8V77tdoheRYataNKL4QrPw==\",\n      \"cpu\": [\n        \"x64\"\n      ],\n      \"dev\": true,\n      \"optional\": true,\n      \"os\": [\n        \"darwin\"\n      ],\n      \"engines\": {\n        \"node\": \">=18\"\n      }\n    },\n    \"node_modules/@esbuild/freebsd-arm64\": {\n      \"version\": \"0.27.4\",\n      \"resolved\": \"https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.4.tgz\",\n      \"integrity\": \"sha512-jnfpKe+p79tCnm4GVav68A7tUFeKQwQyLgESwEAUzyxk/TJr4QdGog9sqWNcUbr/bZt/O/HXouspuQDd9JxFSw==\",\n      \"cpu\": [\n        \"arm64\"\n      ],\n      \"dev\": true,\n      \"optional\": true,\n      \"os\": [\n        \"freebsd\"\n      ],\n      \"engines\": {\n        \"node\": \">=18\"\n      }\n    },\n    \"node_modules/@esbuild/freebsd-x64\": {\n      \"version\": \"0.27.4\",\n      \"resolved\": \"https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.4.tgz\",\n      \"integrity\": \"sha512-2kb4ceA/CpfUrIcTUl1wrP/9ad9Atrp5J94Lq69w7UwOMolPIGrfLSvAKJp0RTvkPPyn6CIWrNy13kyLikZRZQ==\",\n      \"cpu\": [\n        \"x64\"\n      ],\n      \"dev\": true,\n      \"optional\": true,\n      \"os\": [\n        \"freebsd\"\n      ],\n      \"engines\": {\n        \"node\": \">=18\"\n      }\n    },\n    \"node_modules/@esbuild/linux-arm\": {\n      \"version\": \"0.27.4\",\n      \"resolved\": \"https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.4.tgz\",\n      \"integrity\": \"sha512-aBYgcIxX/wd5n2ys0yESGeYMGF+pv6g0DhZr3G1ZG4jMfruU9Tl1i2Z+Wnj9/KjGz1lTLCcorqE2viePZqj4Eg==\",\n      \"cpu\": [\n        \"arm\"\n      ],\n      \"dev\": true,\n      \"optional\": true,\n      \"os\": [\n        \"linux\"\n      ],\n      \"engines\": {\n        \"node\": \">=18\"\n      }\n    },\n    \"node_modules/@esbuild/linux-arm64\": {\n      \"version\": \"0.27.4\",\n      \"resolved\": \"https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.4.tgz\",\n      \"integrity\": \"sha512-7nQOttdzVGth1iz57kxg9uCz57dxQLHWxopL6mYuYthohPKEK0vU0C3O21CcBK6KDlkYVcnDXY099HcCDXd9dA==\",\n      \"cpu\": [\n        \"arm64\"\n      ],\n      \"dev\": true,\n      \"optional\": true,\n      \"os\": [\n        \"linux\"\n      ],\n      \"engines\": {\n        \"node\": \">=18\"\n      }\n    },\n    \"node_modules/@esbuild/linux-ia32\": {\n      \"version\": \"0.27.4\",\n      \"resolved\": \"https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.4.tgz\",\n      \"integrity\": \"sha512-oPtixtAIzgvzYcKBQM/qZ3R+9TEUd1aNJQu0HhGyqtx6oS7qTpvjheIWBbes4+qu1bNlo2V4cbkISr8q6gRBFA==\",\n      \"cpu\": [\n        \"ia32\"\n      ],\n      \"dev\": true,\n      \"optional\": true,\n      \"os\": [\n        \"linux\"\n      ],\n      \"engines\": {\n        \"node\": \">=18\"\n      }\n    },\n    \"node_modules/@esbuild/linux-loong64\": {\n      \"version\": \"0.27.4\",\n      \"resolved\": \"https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.4.tgz\",\n      \"integrity\": \"sha512-8mL/vh8qeCoRcFH2nM8wm5uJP+ZcVYGGayMavi8GmRJjuI3g1v6Z7Ni0JJKAJW+m0EtUuARb6Lmp4hMjzCBWzA==\",\n      \"cpu\": [\n        \"loong64\"\n      ],\n      \"dev\": true,\n      \"optional\": true,\n      \"os\": [\n        \"linux\"\n      ],\n      \"engines\": {\n        \"node\": \">=18\"\n      }\n    },\n    \"node_modules/@esbuild/linux-mips64el\": {\n      \"version\": \"0.27.4\",\n      \"resolved\": \"https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.4.tgz\",\n      \"integrity\": \"sha512-1RdrWFFiiLIW7LQq9Q2NES+HiD4NyT8Itj9AUeCl0IVCA459WnPhREKgwrpaIfTOe+/2rdntisegiPWn/r/aAw==\",\n      \"cpu\": [\n        \"mips64el\"\n      ],\n      \"dev\": true,\n      \"optional\": true,\n      \"os\": [\n        \"linux\"\n      ],\n      \"engines\": {\n        \"node\": \">=18\"\n      }\n    },\n    \"node_modules/@esbuild/linux-ppc64\": {\n      \"version\": \"0.27.4\",\n      \"resolved\": \"https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.4.tgz\",\n      \"integrity\": \"sha512-tLCwNG47l3sd9lpfyx9LAGEGItCUeRCWeAx6x2Jmbav65nAwoPXfewtAdtbtit/pJFLUWOhpv0FpS6GQAmPrHA==\",\n      \"cpu\": [\n        \"ppc64\"\n      ],\n      \"dev\": true,\n      \"optional\": true,\n      \"os\": [\n        \"linux\"\n      ],\n      \"engines\": {\n        \"node\": \">=18\"\n      }\n    },\n    \"node_modules/@esbuild/linux-riscv64\": {\n      \"version\": \"0.27.4\",\n      \"resolved\": \"https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.4.tgz\",\n      \"integrity\": \"sha512-BnASypppbUWyqjd1KIpU4AUBiIhVr6YlHx/cnPgqEkNoVOhHg+YiSVxM1RLfiy4t9cAulbRGTNCKOcqHrEQLIw==\",\n      \"cpu\": [\n        \"riscv64\"\n      ],\n      \"dev\": true,\n      \"optional\": true,\n      \"os\": [\n        \"linux\"\n      ],\n      \"engines\": {\n        \"node\": \">=18\"\n      }\n    },\n    \"node_modules/@esbuild/linux-s390x\": {\n      \"version\": \"0.27.4\",\n      \"resolved\": \"https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.4.tgz\",\n      \"integrity\": \"sha512-+eUqgb/Z7vxVLezG8bVB9SfBie89gMueS+I0xYh2tJdw3vqA/0ImZJ2ROeWwVJN59ihBeZ7Tu92dF/5dy5FttA==\",\n      \"cpu\": [\n        \"s390x\"\n      ],\n      \"dev\": true,\n      \"optional\": true,\n      \"os\": [\n        \"linux\"\n      ],\n      \"engines\": {\n        \"node\": \">=18\"\n      }\n    },\n    \"node_modules/@esbuild/linux-x64\": {\n      \"version\": \"0.27.4\",\n      \"resolved\": \"https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.4.tgz\",\n      \"integrity\": \"sha512-S5qOXrKV8BQEzJPVxAwnryi2+Iq5pB40gTEIT69BQONqR7JH1EPIcQ/Uiv9mCnn05jff9umq/5nqzxlqTOg9NA==\",\n      \"cpu\": [\n        \"x64\"\n      ],\n      \"dev\": true,\n      \"optional\": true,\n      \"os\": [\n        \"linux\"\n      ],\n      \"engines\": {\n        \"node\": \">=18\"\n      }\n    },\n    \"node_modules/@esbuild/netbsd-arm64\": {\n      \"version\": \"0.27.4\",\n      \"resolved\": \"https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.4.tgz\",\n      \"integrity\": \"sha512-xHT8X4sb0GS8qTqiwzHqpY00C95DPAq7nAwX35Ie/s+LO9830hrMd3oX0ZMKLvy7vsonee73x0lmcdOVXFzd6Q==\",\n      \"cpu\": [\n        \"arm64\"\n      ],\n      \"dev\": true,\n      \"optional\": true,\n      \"os\": [\n        \"netbsd\"\n      ],\n      \"engines\": {\n        \"node\": \">=18\"\n      }\n    },\n    \"node_modules/@esbuild/netbsd-x64\": {\n      \"version\": \"0.27.4\",\n      \"resolved\": \"https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.4.tgz\",\n      \"integrity\": \"sha512-RugOvOdXfdyi5Tyv40kgQnI0byv66BFgAqjdgtAKqHoZTbTF2QqfQrFwa7cHEORJf6X2ht+l9ABLMP0dnKYsgg==\",\n      \"cpu\": [\n        \"x64\"\n      ],\n      \"dev\": true,\n      \"optional\": true,\n      \"os\": [\n        \"netbsd\"\n      ],\n      \"engines\": {\n        \"node\": \">=18\"\n      }\n    },\n    \"node_modules/@esbuild/openbsd-arm64\": {\n      \"version\": \"0.27.4\",\n      \"resolved\": \"https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.4.tgz\",\n      \"integrity\": \"sha512-2MyL3IAaTX+1/qP0O1SwskwcwCoOI4kV2IBX1xYnDDqthmq5ArrW94qSIKCAuRraMgPOmG0RDTA74mzYNQA9ow==\",\n      \"cpu\": [\n        \"arm64\"\n      ],\n      \"dev\": true,\n      \"optional\": true,\n      \"os\": [\n        \"openbsd\"\n      ],\n      \"engines\": {\n        \"node\": \">=18\"\n      }\n    },\n    \"node_modules/@esbuild/openbsd-x64\": {\n      \"version\": \"0.27.4\",\n      \"resolved\": \"https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.4.tgz\",\n      \"integrity\": \"sha512-u8fg/jQ5aQDfsnIV6+KwLOf1CmJnfu1ShpwqdwC0uA7ZPwFws55Ngc12vBdeUdnuWoQYx/SOQLGDcdlfXhYmXQ==\",\n      \"cpu\": [\n        \"x64\"\n      ],\n      \"dev\": true,\n      \"optional\": true,\n      \"os\": [\n        \"openbsd\"\n      ],\n      \"engines\": {\n        \"node\": \">=18\"\n      }\n    },\n    \"node_modules/@esbuild/openharmony-arm64\": {\n      \"version\": \"0.27.4\",\n      \"resolved\": \"https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.4.tgz\",\n      \"integrity\": \"sha512-JkTZrl6VbyO8lDQO3yv26nNr2RM2yZzNrNHEsj9bm6dOwwu9OYN28CjzZkH57bh4w0I2F7IodpQvUAEd1mbWXg==\",\n      \"cpu\": [\n        \"arm64\"\n      ],\n      \"dev\": true,\n      \"optional\": true,\n      \"os\": [\n        \"openharmony\"\n      ],\n      \"engines\": {\n        \"node\": \">=18\"\n      }\n    },\n    \"node_modules/@esbuild/sunos-x64\": {\n      \"version\": \"0.27.4\",\n      \"resolved\": \"https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.4.tgz\",\n      \"integrity\": \"sha512-/gOzgaewZJfeJTlsWhvUEmUG4tWEY2Spp5M20INYRg2ZKl9QPO3QEEgPeRtLjEWSW8FilRNacPOg8R1uaYkA6g==\",\n      \"cpu\": [\n        \"x64\"\n      ],\n      \"dev\": true,\n      \"optional\": true,\n      \"os\": [\n        \"sunos\"\n      ],\n      \"engines\": {\n        \"node\": \">=18\"\n      }\n    },\n    \"node_modules/@esbuild/win32-arm64\": {\n      \"version\": \"0.27.4\",\n      \"resolved\": \"https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.4.tgz\",\n      \"integrity\": \"sha512-Z9SExBg2y32smoDQdf1HRwHRt6vAHLXcxD2uGgO/v2jK7Y718Ix4ndsbNMU/+1Qiem9OiOdaqitioZwxivhXYg==\",\n      \"cpu\": [\n        \"arm64\"\n      ],\n      \"dev\": true,\n      \"optional\": true,\n      \"os\": [\n        \"win32\"\n      ],\n      \"engines\": {\n        \"node\": \">=18\"\n      }\n    },\n    \"node_modules/@esbuild/win32-ia32\": {\n      \"version\": \"0.27.4\",\n      \"resolved\": \"https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.4.tgz\",\n      \"integrity\": \"sha512-DAyGLS0Jz5G5iixEbMHi5KdiApqHBWMGzTtMiJ72ZOLhbu/bzxgAe8Ue8CTS3n3HbIUHQz/L51yMdGMeoxXNJw==\",\n      \"cpu\": [\n        \"ia32\"\n      ],\n      \"dev\": true,\n      \"optional\": true,\n      \"os\": [\n        \"win32\"\n      ],\n      \"engines\": {\n        \"node\": \">=18\"\n      }\n    },\n    \"node_modules/@esbuild/win32-x64\": {\n      \"version\": \"0.27.4\",\n      \"resolved\": \"https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.4.tgz\",\n      \"integrity\": \"sha512-+knoa0BDoeXgkNvvV1vvbZX4+hizelrkwmGJBdT17t8FNPwG2lKemmuMZlmaNQ3ws3DKKCxpb4zRZEIp3UxFCg==\",\n      \"cpu\": [\n        \"x64\"\n      ],\n      \"dev\": true,\n      \"optional\": true,\n      \"os\": [\n        \"win32\"\n      ],\n      \"engines\": {\n        \"node\": \">=18\"\n      }\n    },\n    \"node_modules/@img/colour\": {\n      \"version\": \"1.1.0\",\n      \"resolved\": \"https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz\",\n      \"integrity\": \"sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==\",\n      \"engines\": {\n        \"node\": \">=18\"\n      }\n    },\n    \"node_modules/@img/sharp-darwin-arm64\": {\n      \"version\": \"0.34.5\",\n      \"resolved\": \"https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz\",\n      \"integrity\": \"sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==\",\n      \"cpu\": [\n        \"arm64\"\n      ],\n      \"optional\": true,\n      \"os\": [\n        \"darwin\"\n      ],\n      \"engines\": {\n        \"node\": \"^18.17.0 || ^20.3.0 || >=21.0.0\"\n      },\n      \"funding\": {\n        \"url\": \"https://opencollective.com/libvips\"\n      },\n      \"optionalDependencies\": {\n        \"@img/sharp-libvips-darwin-arm64\": \"1.2.4\"\n      }\n    },\n    \"node_modules/@img/sharp-darwin-x64\": {\n      \"version\": \"0.34.5\",\n      \"resolved\": \"https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz\",\n      \"integrity\": \"sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==\",\n      \"cpu\": [\n        \"x64\"\n      ],\n      \"optional\": true,\n      \"os\": [\n        \"darwin\"\n      ],\n      \"engines\": {\n        \"node\": \"^18.17.0 || ^20.3.0 || >=21.0.0\"\n      },\n      \"funding\": {\n        \"url\": \"https://opencollective.com/libvips\"\n      },\n      \"optionalDependencies\": {\n        \"@img/sharp-libvips-darwin-x64\": \"1.2.4\"\n      }\n    },\n    \"node_modules/@img/sharp-libvips-darwin-arm64\": {\n      \"version\": \"1.2.4\",\n      \"resolved\": \"https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz\",\n      \"integrity\": \"sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==\",\n      \"cpu\": [\n        \"arm64\"\n      ],\n      \"optional\": true,\n      \"os\": [\n        \"darwin\"\n      ],\n      \"funding\": {\n        \"url\": \"https://opencollective.com/libvips\"\n      }\n    },\n    \"node_modules/@img/sharp-libvips-darwin-x64\": {\n      \"version\": \"1.2.4\",\n      \"resolved\": \"https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz\",\n      \"integrity\": \"sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==\",\n      \"cpu\": [\n        \"x64\"\n      ],\n      \"optional\": true,\n      \"os\": [\n        \"darwin\"\n      ],\n      \"funding\": {\n        \"url\": \"https://opencollective.com/libvips\"\n      }\n    },\n    \"node_modules/@img/sharp-libvips-linux-arm\": {\n      \"version\": \"1.2.4\",\n      \"resolved\": \"https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz\",\n      \"integrity\": \"sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==\",\n      \"cpu\": [\n        \"arm\"\n      ],\n      \"optional\": true,\n      \"os\": [\n        \"linux\"\n      ],\n      \"funding\": {\n        \"url\": \"https://opencollective.com/libvips\"\n      }\n    },\n    \"node_modules/@img/sharp-libvips-linux-arm64\": {\n      \"version\": \"1.2.4\",\n      \"resolved\": \"https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz\",\n      \"integrity\": \"sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==\",\n      \"cpu\": [\n        \"arm64\"\n      ],\n      \"optional\": true,\n      \"os\": [\n        \"linux\"\n      ],\n      \"funding\": {\n        \"url\": \"https://opencollective.com/libvips\"\n      }\n    },\n    \"node_modules/@img/sharp-libvips-linux-ppc64\": {\n      \"version\": \"1.2.4\",\n      \"resolved\": \"https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz\",\n      \"integrity\": \"sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==\",\n      \"cpu\": [\n        \"ppc64\"\n      ],\n      \"optional\": true,\n      \"os\": [\n        \"linux\"\n      ],\n      \"funding\": {\n        \"url\": \"https://opencollective.com/libvips\"\n      }\n    },\n    \"node_modules/@img/sharp-libvips-linux-riscv64\": {\n      \"version\": \"1.2.4\",\n      \"resolved\": \"https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz\",\n      \"integrity\": \"sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==\",\n      \"cpu\": [\n        \"riscv64\"\n      ],\n      \"optional\": true,\n      \"os\": [\n        \"linux\"\n      ],\n      \"funding\": {\n        \"url\": \"https://opencollective.com/libvips\"\n      }\n    },\n    \"node_modules/@img/sharp-libvips-linux-s390x\": {\n      \"version\": \"1.2.4\",\n      \"resolved\": \"https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz\",\n      \"integrity\": \"sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==\",\n      \"cpu\": [\n        \"s390x\"\n      ],\n      \"optional\": true,\n      \"os\": [\n        \"linux\"\n      ],\n      \"funding\": {\n        \"url\": \"https://opencollective.com/libvips\"\n      }\n    },\n    \"node_modules/@img/sharp-libvips-linux-x64\": {\n      \"version\": \"1.2.4\",\n      \"resolved\": \"https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz\",\n      \"integrity\": \"sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==\",\n      \"cpu\": [\n        \"x64\"\n      ],\n      \"optional\": true,\n      \"os\": [\n        \"linux\"\n      ],\n      \"funding\": {\n        \"url\": \"https://opencollective.com/libvips\"\n      }\n    },\n    \"node_modules/@img/sharp-libvips-linuxmusl-arm64\": {\n      \"version\": \"1.2.4\",\n      \"resolved\": \"https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz\",\n      \"integrity\": \"sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==\",\n      \"cpu\": [\n        \"arm64\"\n      ],\n      \"optional\": true,\n      \"os\": [\n        \"linux\"\n      ],\n      \"funding\": {\n        \"url\": \"https://opencollective.com/libvips\"\n      }\n    },\n    \"node_modules/@img/sharp-libvips-linuxmusl-x64\": {\n      \"version\": \"1.2.4\",\n      \"resolved\": \"https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz\",\n      \"integrity\": \"sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==\",\n      \"cpu\": [\n        \"x64\"\n      ],\n      \"optional\": true,\n      \"os\": [\n        \"linux\"\n      ],\n      \"funding\": {\n        \"url\": \"https://opencollective.com/libvips\"\n      }\n    },\n    \"node_modules/@img/sharp-linux-arm\": {\n      \"version\": \"0.34.5\",\n      \"resolved\": \"https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz\",\n      \"integrity\": \"sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==\",\n      \"cpu\": [\n        \"arm\"\n      ],\n      \"optional\": true,\n      \"os\": [\n        \"linux\"\n      ],\n      \"engines\": {\n        \"node\": \"^18.17.0 || ^20.3.0 || >=21.0.0\"\n      },\n      \"funding\": {\n        \"url\": \"https://opencollective.com/libvips\"\n      },\n      \"optionalDependencies\": {\n        \"@img/sharp-libvips-linux-arm\": \"1.2.4\"\n      }\n    },\n    \"node_modules/@img/sharp-linux-arm64\": {\n      \"version\": \"0.34.5\",\n      \"resolved\": \"https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz\",\n      \"integrity\": \"sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==\",\n      \"cpu\": [\n        \"arm64\"\n      ],\n      \"optional\": true,\n      \"os\": [\n        \"linux\"\n      ],\n      \"engines\": {\n        \"node\": \"^18.17.0 || ^20.3.0 || >=21.0.0\"\n      },\n      \"funding\": {\n        \"url\": \"https://opencollective.com/libvips\"\n      },\n      \"optionalDependencies\": {\n        \"@img/sharp-libvips-linux-arm64\": \"1.2.4\"\n      }\n    },\n    \"node_modules/@img/sharp-linux-ppc64\": {\n      \"version\": \"0.34.5\",\n      \"resolved\": \"https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz\",\n      \"integrity\": \"sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==\",\n      \"cpu\": [\n        \"ppc64\"\n      ],\n      \"optional\": true,\n      \"os\": [\n        \"linux\"\n      ],\n      \"engines\": {\n        \"node\": \"^18.17.0 || ^20.3.0 || >=21.0.0\"\n      },\n      \"funding\": {\n        \"url\": \"https://opencollective.com/libvips\"\n      },\n      \"optionalDependencies\": {\n        \"@img/sharp-libvips-linux-ppc64\": \"1.2.4\"\n      }\n    },\n    \"node_modules/@img/sharp-linux-riscv64\": {\n      \"version\": \"0.34.5\",\n      \"resolved\": \"https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz\",\n      \"integrity\": \"sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==\",\n      \"cpu\": [\n        \"riscv64\"\n      ],\n      \"optional\": true,\n      \"os\": [\n        \"linux\"\n      ],\n      \"engines\": {\n        \"node\": \"^18.17.0 || ^20.3.0 || >=21.0.0\"\n      },\n      \"funding\": {\n        \"url\": \"https://opencollective.com/libvips\"\n      },\n      \"optionalDependencies\": {\n        \"@img/sharp-libvips-linux-riscv64\": \"1.2.4\"\n      }\n    },\n    \"node_modules/@img/sharp-linux-s390x\": {\n      \"version\": \"0.34.5\",\n      \"resolved\": \"https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz\",\n      \"integrity\": \"sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==\",\n      \"cpu\": [\n        \"s390x\"\n      ],\n      \"optional\": true,\n      \"os\": [\n        \"linux\"\n      ],\n      \"engines\": {\n        \"node\": \"^18.17.0 || ^20.3.0 || >=21.0.0\"\n      },\n      \"funding\": {\n        \"url\": \"https://opencollective.com/libvips\"\n      },\n      \"optionalDependencies\": {\n        \"@img/sharp-libvips-linux-s390x\": \"1.2.4\"\n      }\n    },\n    \"node_modules/@img/sharp-linux-x64\": {\n      \"version\": \"0.34.5\",\n      \"resolved\": \"https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz\",\n      \"integrity\": \"sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==\",\n      \"cpu\": [\n        \"x64\"\n      ],\n      \"optional\": true,\n      \"os\": [\n        \"linux\"\n      ],\n      \"engines\": {\n        \"node\": \"^18.17.0 || ^20.3.0 || >=21.0.0\"\n      },\n      \"funding\": {\n        \"url\": \"https://opencollective.com/libvips\"\n      },\n      \"optionalDependencies\": {\n        \"@img/sharp-libvips-linux-x64\": \"1.2.4\"\n      }\n    },\n    \"node_modules/@img/sharp-linuxmusl-arm64\": {\n      \"version\": \"0.34.5\",\n      \"resolved\": \"https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz\",\n      \"integrity\": \"sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==\",\n      \"cpu\": [\n        \"arm64\"\n      ],\n      \"optional\": true,\n      \"os\": [\n        \"linux\"\n      ],\n      \"engines\": {\n        \"node\": \"^18.17.0 || ^20.3.0 || >=21.0.0\"\n      },\n      \"funding\": {\n        \"url\": \"https://opencollective.com/libvips\"\n      },\n      \"optionalDependencies\": {\n        \"@img/sharp-libvips-linuxmusl-arm64\": \"1.2.4\"\n      }\n    },\n    \"node_modules/@img/sharp-linuxmusl-x64\": {\n      \"version\": \"0.34.5\",\n      \"resolved\": \"https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz\",\n      \"integrity\": \"sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==\",\n      \"cpu\": [\n        \"x64\"\n      ],\n      \"optional\": true,\n      \"os\": [\n        \"linux\"\n      ],\n      \"engines\": {\n        \"node\": \"^18.17.0 || ^20.3.0 || >=21.0.0\"\n      },\n      \"funding\": {\n        \"url\": \"https://opencollective.com/libvips\"\n      },\n      \"optionalDependencies\": {\n        \"@img/sharp-libvips-linuxmusl-x64\": \"1.2.4\"\n      }\n    },\n    \"node_modules/@img/sharp-wasm32\": {\n      \"version\": \"0.34.5\",\n      \"resolved\": \"https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz\",\n      \"integrity\": \"sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==\",\n      \"cpu\": [\n        \"wasm32\"\n      ],\n      \"optional\": true,\n      \"dependencies\": {\n        \"@emnapi/runtime\": \"^1.7.0\"\n      },\n      \"engines\": {\n        \"node\": \"^18.17.0 || ^20.3.0 || >=21.0.0\"\n      },\n      \"funding\": {\n        \"url\": \"https://opencollective.com/libvips\"\n      }\n    },\n    \"node_modules/@img/sharp-win32-arm64\": {\n      \"version\": \"0.34.5\",\n      \"resolved\": \"https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz\",\n      \"integrity\": \"sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==\",\n      \"cpu\": [\n        \"arm64\"\n      ],\n      \"optional\": true,\n      \"os\": [\n        \"win32\"\n      ],\n      \"engines\": {\n        \"node\": \"^18.17.0 || ^20.3.0 || >=21.0.0\"\n      },\n      \"funding\": {\n        \"url\": \"https://opencollective.com/libvips\"\n      }\n    },\n    \"node_modules/@img/sharp-win32-ia32\": {\n      \"version\": \"0.34.5\",\n      \"resolved\": \"https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz\",\n      \"integrity\": \"sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==\",\n      \"cpu\": [\n        \"ia32\"\n      ],\n      \"optional\": true,\n      \"os\": [\n        \"win32\"\n      ],\n      \"engines\": {\n        \"node\": \"^18.17.0 || ^20.3.0 || >=21.0.0\"\n      },\n      \"funding\": {\n        \"url\": \"https://opencollective.com/libvips\"\n      }\n    },\n    \"node_modules/@img/sharp-win32-x64\": {\n      \"version\": \"0.34.5\",\n      \"resolved\": \"https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz\",\n      \"integrity\": \"sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==\",\n      \"cpu\": [\n        \"x64\"\n      ],\n      \"optional\": true,\n      \"os\": [\n        \"win32\"\n      ],\n      \"engines\": {\n        \"node\": \"^18.17.0 || ^20.3.0 || >=21.0.0\"\n      },\n      \"funding\": {\n        \"url\": \"https://opencollective.com/libvips\"\n      }\n    },\n    \"node_modules/@types/node\": {\n      \"version\": \"20.19.37\",\n      \"resolved\": \"https://registry.npmjs.org/@types/node/-/node-20.19.37.tgz\",\n      \"integrity\": \"sha512-8kzdPJ3FsNsVIurqBs7oodNnCEVbni9yUEkaHbgptDACOPW04jimGagZ51E6+lXUwJjgnBw+hyko/lkFWCldqw==\",\n      \"dev\": true,\n      \"dependencies\": {\n        \"undici-types\": \"~6.21.0\"\n      }\n    },\n    \"node_modules/beautiful-mermaid\": {\n      \"version\": \"1.1.3\",\n      \"resolved\": \"https://registry.npmjs.org/beautiful-mermaid/-/beautiful-mermaid-1.1.3.tgz\",\n      \"integrity\": \"sha512-TItrtrAyHp1vwFfFVYauWGrquouk/6SS21Aq3RsxindSYZODcN4xYrPZD6BiZRU+o5mKJzDPz9MUSMvELdylyg==\",\n      \"dependencies\": {\n        \"elkjs\": \"^0.11.0\",\n        \"entities\": \"^7.0.1\"\n      }\n    },\n    \"node_modules/detect-libc\": {\n      \"version\": \"2.1.2\",\n      \"resolved\": \"https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz\",\n      \"integrity\": \"sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==\",\n      \"engines\": {\n        \"node\": \">=8\"\n      }\n    },\n    \"node_modules/elkjs\": {\n      \"version\": \"0.11.1\",\n      \"resolved\": \"https://registry.npmjs.org/elkjs/-/elkjs-0.11.1.tgz\",\n      \"integrity\": \"sha512-zxxR9k+rx5ktMwT/FwyLdPCrq7xN6e4VGGHH8hA01vVYKjTFik7nHOxBnAYtrgYUB1RpAiLvA1/U2YraWxyKKg==\"\n    },\n    \"node_modules/entities\": {\n      \"version\": \"7.0.1\",\n      \"resolved\": \"https://registry.npmjs.org/entities/-/entities-7.0.1.tgz\",\n      \"integrity\": \"sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==\",\n      \"engines\": {\n        \"node\": \">=0.12\"\n      },\n      \"funding\": {\n        \"url\": \"https://github.com/fb55/entities?sponsor=1\"\n      }\n    },\n    \"node_modules/esbuild\": {\n      \"version\": \"0.27.4\",\n      \"resolved\": \"https://registry.npmjs.org/esbuild/-/esbuild-0.27.4.tgz\",\n      \"integrity\": \"sha512-Rq4vbHnYkK5fws5NF7MYTU68FPRE1ajX7heQ/8QXXWqNgqqJ/GkmmyxIzUnf2Sr/bakf8l54716CcMGHYhMrrQ==\",\n      \"dev\": true,\n      \"hasInstallScript\": true,\n      \"bin\": {\n        \"esbuild\": \"bin/esbuild\"\n      },\n      \"engines\": {\n        \"node\": \">=18\"\n      },\n      \"optionalDependencies\": {\n        \"@esbuild/aix-ppc64\": \"0.27.4\",\n        \"@esbuild/android-arm\": \"0.27.4\",\n        \"@esbuild/android-arm64\": \"0.27.4\",\n        \"@esbuild/android-x64\": \"0.27.4\",\n        \"@esbuild/darwin-arm64\": \"0.27.4\",\n        \"@esbuild/darwin-x64\": \"0.27.4\",\n        \"@esbuild/freebsd-arm64\": \"0.27.4\",\n        \"@esbuild/freebsd-x64\": \"0.27.4\",\n        \"@esbuild/linux-arm\": \"0.27.4\",\n        \"@esbuild/linux-arm64\": \"0.27.4\",\n        \"@esbuild/linux-ia32\": \"0.27.4\",\n        \"@esbuild/linux-loong64\": \"0.27.4\",\n        \"@esbuild/linux-mips64el\": \"0.27.4\",\n        \"@esbuild/linux-ppc64\": \"0.27.4\",\n        \"@esbuild/linux-riscv64\": \"0.27.4\",\n        \"@esbuild/linux-s390x\": \"0.27.4\",\n        \"@esbuild/linux-x64\": \"0.27.4\",\n        \"@esbuild/netbsd-arm64\": \"0.27.4\",\n        \"@esbuild/netbsd-x64\": \"0.27.4\",\n        \"@esbuild/openbsd-arm64\": \"0.27.4\",\n        \"@esbuild/openbsd-x64\": \"0.27.4\",\n        \"@esbuild/openharmony-arm64\": \"0.27.4\",\n        \"@esbuild/sunos-x64\": \"0.27.4\",\n        \"@esbuild/win32-arm64\": \"0.27.4\",\n        \"@esbuild/win32-ia32\": \"0.27.4\",\n        \"@esbuild/win32-x64\": \"0.27.4\"\n      }\n    },\n    \"node_modules/semver\": {\n      \"version\": \"7.7.4\",\n      \"resolved\": \"https://registry.npmjs.org/semver/-/semver-7.7.4.tgz\",\n      \"integrity\": \"sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==\",\n      \"bin\": {\n        \"semver\": \"bin/semver.js\"\n      },\n      \"engines\": {\n        \"node\": \">=10\"\n      }\n    },\n    \"node_modules/sharp\": {\n      \"version\": \"0.34.5\",\n      \"resolved\": \"https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz\",\n      \"integrity\": \"sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==\",\n      \"hasInstallScript\": true,\n      \"dependencies\": {\n        \"@img/colour\": \"^1.0.0\",\n        \"detect-libc\": \"^2.1.2\",\n        \"semver\": \"^7.7.3\"\n      },\n      \"engines\": {\n        \"node\": \"^18.17.0 || ^20.3.0 || >=21.0.0\"\n      },\n      \"funding\": {\n        \"url\": \"https://opencollective.com/libvips\"\n      },\n      \"optionalDependencies\": {\n        \"@img/sharp-darwin-arm64\": \"0.34.5\",\n        \"@img/sharp-darwin-x64\": \"0.34.5\",\n        \"@img/sharp-libvips-darwin-arm64\": \"1.2.4\",\n        \"@img/sharp-libvips-darwin-x64\": \"1.2.4\",\n        \"@img/sharp-libvips-linux-arm\": \"1.2.4\",\n        \"@img/sharp-libvips-linux-arm64\": \"1.2.4\",\n        \"@img/sharp-libvips-linux-ppc64\": \"1.2.4\",\n        \"@img/sharp-libvips-linux-riscv64\": \"1.2.4\",\n        \"@img/sharp-libvips-linux-s390x\": \"1.2.4\",\n        \"@img/sharp-libvips-linux-x64\": \"1.2.4\",\n        \"@img/sharp-libvips-linuxmusl-arm64\": \"1.2.4\",\n        \"@img/sharp-libvips-linuxmusl-x64\": \"1.2.4\",\n        \"@img/sharp-linux-arm\": \"0.34.5\",\n        \"@img/sharp-linux-arm64\": \"0.34.5\",\n        \"@img/sharp-linux-ppc64\": \"0.34.5\",\n        \"@img/sharp-linux-riscv64\": \"0.34.5\",\n        \"@img/sharp-linux-s390x\": \"0.34.5\",\n        \"@img/sharp-linux-x64\": \"0.34.5\",\n        \"@img/sharp-linuxmusl-arm64\": \"0.34.5\",\n        \"@img/sharp-linuxmusl-x64\": \"0.34.5\",\n        \"@img/sharp-wasm32\": \"0.34.5\",\n        \"@img/sharp-win32-arm64\": \"0.34.5\",\n        \"@img/sharp-win32-ia32\": \"0.34.5\",\n        \"@img/sharp-win32-x64\": \"0.34.5\"\n      }\n    },\n    \"node_modules/tslib\": {\n      \"version\": \"2.8.1\",\n      \"resolved\": \"https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz\",\n      \"integrity\": \"sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==\",\n      \"optional\": true\n    },\n    \"node_modules/undici-types\": {\n      \"version\": \"6.21.0\",\n      \"resolved\": \"https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz\",\n      \"integrity\": \"sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==\",\n      \"dev\": true\n    }\n  }\n}\n\nFile v1.0.0:package.json\n\n{\n  \"name\": \"beautiful-mermaid-skill\",\n  \"version\": \"1.0.0\",\n  \"description\": \"CodeBuddy Skill for rendering beautiful Mermaid diagrams to SVG or ASCII art\",\n  \"type\": \"commonjs\",\n  \"scripts\": {\n    \"render\": \"node scripts/render.js\",\n    \"render:svg\": \"node scripts/render.js --format svg\",\n    \"render:ascii\": \"node scripts/render.js --format ascii\",\n    \"render:png\": \"node scripts/render.js --format png\",\n    \"rich-html\": \"node scripts/rich-html.js\"\n  },\n  \"dependencies\": {\n    \"beautiful-mermaid\": \"^1.1.3\",\n    \"sharp\": \"^0.34.5\"\n  },\n  \"devDependencies\": {\n    \"@types/node\": \"^20.10.0\",\n    \"esbuild\": \"^0.27.4\"\n  },\n  \"keywords\": [\n    \"mermaid\",\n    \"diagram\",\n    \"svg\",\n    \"ascii\",\n    \"flowchart\",\n    \"sequence-diagram\",\n    \"class-diagram\",\n    \"er-diagram\",\n    \"state-diagram\",\n    \"codebuddy-skill\"\n  ],\n  \"license\": \"MIT\",\n  \"author\": {\n    \"name\": \"chouray\",\n    \"url\": \"https://github.com/chouraycn\"\n  },\n  \"engines\": {\n    \"node\": \">=16.0.0\"\n  }\n}","readmeExcerpt":"Skill: “Render Mermaid diagrams as beautiful SVG, PNG, or ASCII art. Supports 6 chart types (flowchart, sequence, state, class, ER, XY chart), 16 built-in themes, 5 style presets, CSS-level customization, interactive preview, and batch rendering. Works in terminal, chat, or web environments.” description_zh: “Mermaid 图表美化渲染工具，支持流程图/序列图/状态图/类图/ER图/XY图表6种类型，16主题5预设，可导出SVG/PNG/ASCII” description_en: “Beautiful Mermaid d","codeSnippets":[],"executableExamples":[{"language":"text","snippet":"tokyo-night   + glass     → 代码架构图的最佳组合（深蓝毛玻璃）\ndracula       + gradient  → 视觉展示最强（紫色渐变阴影）\ngithub-light  + default   → 文档嵌入首选（简洁中性）\ncatppuccin-mocha + glass  → 产品 Deck 展示（柔和紫色调）\nnord          + modern    → 技术报告暗色版（冰蓝现代感）\none-dark      + gradient  → 紫色调视觉最强（彩色阴影）\norange-dark   + glass     → 暖色系深色主题（橙色毛玻璃）\norange-light  + modern    → 暖色系浅色主题（橙色现代感）"},{"language":"bash","snippet":"npm install beautiful-mermaid\n# 或\nbun add beautiful-mermaid"},{"language":"text","snippet":"preview_url(`file://{__SKILL_DIR__}/assets/preview.html`)"},{"language":"bash","snippet":"# 方式一：直接调用脚本\nnode scripts/rich-html.js \"标题\" \\\n  --diagrams file1.mmd file2.mmd file3.mmd \\\n  --theme tokyo-night --preset glass \\\n  --subtitle \"副标题\" \\\n  --output result.html\n\n# 方式二：通过 npm script（等效）\nnpm run rich-html -- \"标题\" \\\n  --diagrams file1.mmd file2.mmd file3.mmd \\\n  --theme tokyo-night --preset glass \\\n  --subtitle \"副标题\" \\\n  --output result.html"},{"language":"bash","snippet":"node scripts/rich-html.js \"示例集\" \\\n  --batch assets/examples \\\n  --theme dracula --preset gradient \\\n  --output examples-report.html\n\n# npm 方式\nnpm run rich-html -- \"示例集\" --batch assets/examples --theme dracula --preset gradient --output examples-report.html"},{"language":"text","snippet":"# @title  用户下单完整流程\n# @desc   从进入活动页到订单完成的端到端链路，含限流、库存扣减、异步建单\n# @icon   🛒\n# @type   Flowchart\n# @meta   关键节点:8 个|覆盖阶段:全链路|主题:Tokyo Night|限流策略:Redis Lua\ngraph TD\n    A[用户进入秒杀页] --> B{限流检查}\n    ..."}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: beautiful-mermaid\nversion: 1.0.0\ndescription: \"Render Mermaid diagrams as beautiful SVG, PNG, or ASCII art. Supports 6 chart types (flowchart, sequence, state, class, ER, XY chart), 16 built-in themes, 5 style presets, CSS-level customization, interactive preview, and batch rendering. Works in terminal, chat, or web environments.\"\ndescription_zh: \"Mermaid 图表美化渲染工具，支持流程图/序列图/状态图/类图/ER图/XY图表6种类型，16主题5预设，可导出SVG/PNG/ASCII\"\ndescription_en: \"Beautiful Mermaid diagram renderer (SVG/PNG/ASCII, 16 themes, 5 presets, interactive preview)\"\nhomepage: https://github.com/chouraycn/beautiful-mermaid\nicon: beautiful-mermaid.png\n---\n\n# Beautiful Mermaid Skill\n\n## 概述\n\nBeautiful Mermaid 是一个高性能的 Mermaid 图表渲染库，专为 AI 时代设计。它将 Mermaid 语法转换为美观的 SVG 图形、PNG 位图或 ASCII 艺术字，支持同步渲染、全主题定制、CSS级样式定制，零 DOM 依赖。\n\n| 说明 | 地址 |\n|------|------|\n| 本 Skill | [https://github.com/chouraycn/beautiful-mermaid](https://github.com/chouraycn/beautiful-mermaid) |\n| 上游项目 | [https://github.com/lukilabs/beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid) |\n\n## 核心能力\n\n### 1. 支持的图表类型\n\n- **流程图 (Flowchart)**：`graph TD`、`graph LR`、`graph BT`、`graph RL` 等方向\n- **序列图 (Sequence Diagram)**：参与者之间的交互\n- **状态图 (State Diagram)**：状态转换\n- **类图 (Class Diagram)**：面向对象设计\n- **实体关系图 (ER Diagram)**：数据库设计\n- **XY 图表**：条形图、折线图、组合图（`xychart-beta` 语法）\n\n### 2. 输出格式\n\n- **SVG**：适用于富 UI 界面，支持透明背景和内联样式\n- **PNG**：适用于文档嵌入、高清位图输出，支持自定义尺寸和 DPI\n- **ASCII/Unicode**：适用于终端环境，支持颜色输出\n\n### 3. 主题系统\n\n- **15 内置主题**：tokyo-night、dracula、github-dark、nord 等（9 暗色 + 6 亮色）\n- **完整 7 字段**：每个主题包含 `bg`、`fg`、`line`、`accent`、`muted`、`surface`、`border` 全部字段\n- **Mono 模式**：仅需提供背景色(bg)和前景色(fg)，自动推导整套配色\n- **自定义主题**：可覆盖任意元素颜色\n- **Shiki 集成**：通过 `fromShikiTheme()` 直接使用 VS Code 编辑器主题\n\n#### 主题完整对照表\n\n| 主题名 | 类型 | 背景色 | 强调色(accent) | 推荐预设 | 适用场景 |\n|--------|------|--------|--------------|---------|---------|\n| `zinc-light` | 亮色 | `#FFFFFF` | `#3F3F46` | outline | 极简文档 |\n| `zinc-dark` | 暗色 | `#18181B` | `#A1A1AA` | glass | 极简暗场景 |\n| `tokyo-night` | 暗色 | `#1a1b26` | `#7aa2f7` | glass | 代码架构图 |\n| `tokyo-night-storm` | 暗色 | `#24283b` | `#7aa2f7` | modern | 系统设计图 |\n| `tokyo-night-light` | 亮色 | `#d5d6db` | `#34548a` | modern | 亮色演示 |\n| `catppuccin-mocha` | 暗色 | `#1e1e2e` | `#cba6f7` | glass | 产品展示 |\n| `catppuccin-latte` | 亮色 | `#eff1f5` | `#8839ef` | modern | 分享文档 |\n| `nord` | 暗色 | `#2e3440` | `#88c0d0` | modern | 技术文档暗色 |\n| `nord-light` | 亮色 | `#eceff4` | `#5e81ac` | outline | 技术文档亮色 |\n| `dracula` | 暗色 | `#282a36` | `#bd93f9` | gradient | 视觉展示 |\n| `github-light` | 亮色 | `#ffffff` | `#0969da` | default | GitHub/文档 |\n| `github-dark` | 暗色 | `#0d1117` | `#4493f8` | modern | 代码深度分析 |\n| `solarized-light` | 亮色 | `#fdf6e3` | `#268bd2` | outline | 护眼亮色 |\n| `solarized-dark` | 暗色 | `#002b36` | `#268bd2` | modern | 护眼暗色 |\n| `one-dark` | 暗色 | `#282c34` | `#c678dd` | gradient | 紫色调 |\n\n#### 主题字段说明\n\n| 字段 | 说明 | 用途 |\n|------|------|------|\n| `bg` | 画布背景色 | 整体底色 |\n| `fg` | 主前景/文字色 | 节点标签、主要文字 |\n| `line` | 连线颜色 | 边/箭头连线 |\n| `accent` | 强调色 | 箭头头部、子图标题、高亮节点 |\n| `muted` | 次要色"},{"path":"README.md","content":"# Beautiful Mermaid Skill 使用指南\n\n## 项目地址\n\n| 说明 | 地址 |\n|------|------|\n| 本 Skill | [https://github.com/chouraycn/beautiful-mermaid](https://github.com/chouraycn/beautiful-mermaid) |\n| 上游项目 | [https://github.com/lukilabs/beautiful-mermaid](https://github.com/lukilabs/beautiful-mermaid) |\n\n## 快速开始\n\n### 1. 安装依赖\n\n```bash\ncd beautiful-mermaid\nnpm install\n```\n\n### 2. 交互式预览 (推荐)\n\n```bash\n# 在浏览器中打开样式定制预览工具\nopen assets/preview.html\n```\n\n**预览工具功能**：\n\n- 15 个内置主题即时预览，点击切换\n- 9 种图表类型：流程图、序列图、状态图、类图、ER 图、柱状图、折线图、组合图、水平柱状图\n- 节点样式：背景色、圆角、边框、阴影\n- 连线样式：粗细、颜色、箭头、圆角\n- 5 种预设风格：默认、现代简约、渐变、线条轮廓、毛玻璃\n- 一键导出带完整样式的 SVG 文件\n- 使用 beautiful-mermaid 库渲染，与 CLI 输出一致\n\n### 3. 运行示例\n\n```bash\n# 流程图\nnode scripts/render.js assets/examples/flowchart-basic.mmd -o flowchart-basic.svg\n\n# 序列图\nnode scripts/render.js assets/examples/sequence-diagram.mmd -o sequence-diagram.svg\n\n# 状态图\nnode scripts/render.js assets/examples/state-diagram.mmd -o state-diagram.svg\n\n# ER 图\nnode scripts/render.js assets/examples/er-diagram.mmd -o er-diagram.svg\n\n# 类图\nnode scripts/render.js assets/examples/class-diagram.mmd -o class-diagram.svg\n\n# XY 柱状图\nnode scripts/render.js assets/examples/xychart-bar.mmd -o xychart-bar.svg\n\n# XY 折线图\nnode scripts/render.js assets/examples/xychart-line.mmd -o xychart-line.svg\n\n# XY 组合图\nnode scripts/render.js assets/examples/xychart-combo.mmd -o xychart-combo.svg\n```\n\n### 4. 使用不同主题\n\n```bash\n# 使用 dracula 主题\nnode scripts/render.js assets/examples/flowchart-basic.mmd -t dracula -o flowchart-dracula.svg\n\n# 使用 catppuccin-mocha 主题\nnode scripts/render.js assets/examples/flowchart-basic.mmd -t catppuccin-mocha -o flowchart-catppuccin.svg\n\n# 使用 github-light 主题 (亮色)\nnode scripts/render.js assets/examples/flowchart-basic.mmd -t github-light -o flowchart-light.svg\n```\n\n### 5. 渲染为 PNG (高清位图)\n\n```bash\n# 标准尺寸 PNG (1200px)\nnode scripts/render.js assets/examples/flowchart-basic.mmd -f png -o flowchart.png\n\n# 2K 高清 PNG (2400px)\nnode scripts/render.js assets/examples/flowchart-basic.mmd -f png -w 2400 -o flowchart-hd.png\n\n# 2x 缩放 PNG\nnode scripts/render.js assets/examples/flowchart-basic.mmd -f png -s 2 -o flowchart-2x.png\n\n# 4K 超清 PNG (4800px)\nnode scripts/render.js assets/examples/flowchart-basic.mmd -f png -s 4 -o flowchart-4k.png\n\n# 印刷质量 (300 DPI)\nnode scripts/render.js assets/examples/flowchart-basic.mmd -f png --dpi 300 -o flowchart-print.png\n```\n\n### 6. 渲染为 ASCII (终端输出)\n\n```bash\nnode scripts/render.js assets/examples/flowchart-basic.mmd -f ascii\n```\n\n### 7. 自定义颜色 (Mono 模式)\n\n```bash\n# 自定义背景和前景色\nnode scripts/render.js assets/examples/flowchart-basic.mmd \\\n  --bg '#1a1b2e' \\\n  --fg '#e0e0e0' \\\n  --accent '#ff6b6b' \\\n  -o flowchart-custom.svg\n```\n\n### 8. XY 图表交互式 tooltip\n\n```bash\n# 启用鼠标悬停 tooltip\nnode scripts/render.js assets/examples/xychart-bar.mmd --interactive -o chart-interactive.svg\n```\n\n## 示例文件说明\n\n| 文件 | 说明 |\n|------|------|\n| `flowchart-basic.mmd` | 基础流程图示例 |\n| `sequence-diagram.mmd` | 序列图示例 |\n| `state-diagram.mmd` | 状态图示例 |\n| `er-diagram.mmd` | 实体关系图示例 |\n| `class-diagram.mmd` | 类图示例 |\n| `xych"},{"path":"_meta.json","content":"{\n  \"ownerId\": \"kn7f72xykk4r98gjxj6pgyec0s832w86\",\n  \"slug\": \"beautiful-mermaid\",\n  \"version\": \"1.0.0\",\n  \"publishedAt\": 1774672015689\n}"},{"path":"references/api-config.json","content":"{\n  \"type\": \"module\",\n  \"title\": \"Mermaid 配置选项\",\n  \"description\": \"renderMermaidSVG、renderMermaidSVGAsync、renderMermaidASCII、parseMermaid、fromShikiTheme 的完整配置选项\",\n  \"version\": \"1.1.3\",\n  \"options\": {\n    \"renderMermaidSVG\": {\n      \"parameters\": {\n        \"text\": {\n          \"type\": \"string\",\n          \"required\": true,\n          \"description\": \"Mermaid 图表代码\"\n        },\n        \"options\": {\n          \"type\": \"RenderOptions\",\n          \"required\": false,\n          \"default\": \"{}\"\n        }\n      },\n      \"render_options\": {\n        \"bg\": {\n          \"type\": \"string\",\n          \"default\": \"#FFFFFF\",\n          \"description\": \"背景色，支持 CSS 变量\",\n          \"examples\": [\"#1a1b26\", \"var(--background)\"]\n        },\n        \"fg\": {\n          \"type\": \"string\",\n          \"default\": \"#27272A\",\n          \"description\": \"前景色/文字颜色，支持 CSS 变量\",\n          \"examples\": [\"#a9b1d6\", \"var(--foreground)\"]\n        },\n        \"line\": {\n          \"type\": \"string\",\n          \"required\": false,\n          \"description\": \"连线颜色\"\n        },\n        \"accent\": {\n          \"type\": \"string\",\n          \"required\": false,\n          \"description\": \"箭头/高亮色\",\n          \"examples\": [\"#7aa2f7\", \"#61afef\"]\n        },\n        \"muted\": {\n          \"type\": \"string\",\n          \"required\": false,\n          \"description\": \"次要文字/标签颜色\",\n          \"examples\": [\"#565f89\", \"#5c6370\"]\n        },\n        \"surface\": {\n          \"type\": \"string\",\n          \"required\": false,\n          \"description\": \"节点填充色\",\n          \"examples\": [\"#1f2335\", \"#21252b\"]\n        },\n        \"border\": {\n          \"type\": \"string\",\n          \"required\": false,\n          \"description\": \"节点边框色\",\n          \"examples\": [\"#3b4261\", \"#181a1f\"]\n        },\n        \"font\": {\n          \"type\": \"string\",\n          \"default\": \"Inter\",\n          \"description\": \"字体族\"\n        },\n        \"transparent\": {\n          \"type\": \"boolean\",\n          \"default\": false,\n          \"description\": \"是否使用透明背景\"\n        },\n        \"padding\": {\n          \"type\": \"number\",\n          \"default\": 40,\n          \"description\": \"画布内边距 (px)\"\n        },\n        \"nodeSpacing\": {\n          \"type\": \"number\",\n          \"default\": 24,\n          \"description\": \"同级节点水平间距\"\n        },\n        \"layerSpacing\": {\n          \"type\": \"number\",\n          \"default\": 40,\n          \"description\": \"层间垂直间距\"\n        },\n        \"componentSpacing\": {\n          \"type\": \"number\",\n          \"default\": 24,\n          \"description\": \"断开组件间距\"\n        },\n        \"interactive\": {\n          \"type\": \"boolean\",\n          \"default\": false,\n          \"description\": \"启用 XY 图表悬浮 tooltip\"\n        }\n      }\n    },\n    \"renderMermaidSVGAsync\": {\n      \"description\": \"renderMermaidSVG 的异步版本，返回 Promise<string>\",\n      \"parameters\": {\n        \"text\": {\n          \"type\": \"string\",\n          \"required\": true,\n          \"description\": \"Mermaid 图表代码\"\n        },\n        \"options\": {\n          \"type\": \"RenderOptions\",\n          \"required\": false,\n          \"description\": \"与 renderMermaidSVG 相同的选项\"\n        }\n      }\n    },\n "},{"path":"skill-card.md","content":"## Description:\n\nRender Mermaid diagrams as beautiful SVG, PNG, or ASCII art with support for flowchart, sequence, state, class, ER, and XY chart types, built-in themes, style presets, CSS customization, interactive preview, and batch rendering.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[chouraycn](https://clawhub.ai/user/chouraycn)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers and engineers use this skill to render Mermaid diagrams into polished SVG, PNG, ASCII, or rich HTML outputs for documentation, presentations, terminal workflows, and web previews.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: The security review reports active local HTML preview behavior and confirmed unsanitized HTML/SVG insertion paths, making untrusted Mermaid input risky.\n\nMitigation: Use the skill only with trusted .mmd files, skip automatic previews when not needed, and avoid opening generated HTML from untrusted Mermaid input until the @icon and preview innerHTML paths are sanitized.\n\nRisk: Generated diagrams or rich HTML may include content derived from user-provided diagram metadata.\n\nMitigation: Review generated SVG, PNG, ASCII, or HTML outputs before publishing or embedding them in downstream documents or sites.\n\n## Reference(s):\n\n- [ClawHub skill page](https://clawhub.ai/chouraycn/skills/beautiful-mermaid)\n- [Publisher profile](https://clawhub.ai/user/chouraycn)\n- [Beautiful Mermaid repository](https://github.com/chouraycn/beautiful-mermaid)\n- [Upstream Beautiful Mermaid project](https://github.com/lukilabs/beautiful-mermaid)\n- [Mermaid documentation](https://mermaid.js.org/)\n- [API configuration](references/api-config.json)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, shell commands, configuration, guidance, files]\n\n**Output Format:** [Markdown guidance with shell commands and generated SVG, PNG, ASCII, or HTML files]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May open an interactive local HTML preview and may batch-render multiple .mmd files.]\n\n## Skill Version(s):\n\n1.0.0 (source: SKILL.md frontmatter, package.json, ClawHub release metadata)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment."}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":null,"editorialQuality":{"score":100,"threshold":65,"status":"thin","wordCount":1587,"uniquenessScore":35,"reasons":["uniqueness-below-45"]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-09T17:41:14.941Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-09T17:41:14.941Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-10T02:12:03.604Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}