dsh-plugin-t-expert 0.4.9 → 0.4.36

package/data/experts/design/mermaid-diagram-expert/skills/mermaid-render/references/render-options.md

@@ -0,0 +1,161 @@
+# 渲染选项参考
+
+## SVG 渲染选项 (RenderOptions)
+
+### 颜色参数
+
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `bg` | string | `#FFFFFF` | 背景色，映射到 CSS 变量 `--bg` |
+| `fg` | string | `#27272A` | 前景/文本色，映射到 CSS 变量 `--fg` |
+| `line` | string? | 自动推导 | 连线/连接器色，映射到 `--line` |
+| `accent` | string? | 自动推导 | 箭头/高亮色，映射到 `--accent` |
+| `muted` | string? | 自动推导 | 次要文本/标签色，映射到 `--muted` |
+| `surface` | string? | 自动推导 | 节点填充色，映射到 `--surface` |
+| `border` | string? | 自动推导 | 节点/分组边框色，映射到 `--border` |
+
+### 布局参数
+
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `padding` | number | `40` | 画布内边距（px） |
+| `nodeSpacing` | number | `24` | 水平方向兄弟节点间距（px） |
+| `layerSpacing` | number | `40` | 垂直方向层间距（px） |
+| `componentSpacing` | number | `24` | 断开组件之间的间距（px） |
+| `thoroughness` | number | `3` | 交叉最小化优化级别（1-7，越高越好但越慢） |
+
+### 渲染参数
+
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `font` | string | `Inter` | 字体族名称 |
+| `transparent` | boolean | `false` | 透明背景（不渲染 bg 矩形） |
+| `interactive` | boolean | `false` | 启用 XY 图表的悬浮提示（仅 xychart） |
+
+---
+
+## ASCII 渲染选项 (AsciiRenderOptions)
+
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `useAscii` | boolean | `false` | `true`=纯 ASCII（`+---+`），`false`=Unicode（`┌───┐`） |
+| `paddingX` | number | `5` | 水平方向节点间距 |
+| `paddingY` | number | `5` | 垂直方向节点间距 |
+| `boxBorderPadding` | number | `1` | 节点内文字边距 |
+| `colorMode` | string | `auto` | 着色模式（见下表） |
+| `theme` | object? | — | 自定义 ASCII 颜色主题 |
+
+### colorMode 取值
+
+| 值 | 说明 |
+|------|------|
+| `none` | 无着色，纯文本输出 |
+| `auto` | 自动检测终端能力 |
+| `ansi16` | 16 色 ANSI |
+| `ansi256` | 256 色 ANSI |
+| `truecolor` | 24-bit 真彩色 ANSI |
+| `html` | HTML `<span>` 着色（适合网页嵌入） |
+
+---
+
+## 使用示例
+
+### 命令行调用
+
+```bash
+# 最简用法
+node render-svg.js input.mmd output.svg
+
+# 指定主题
+node render-svg.js input.mmd output.svg tokyo-night
+
+# 自定义配色 + 布局参数
+node render-svg.js input.mmd output.svg custom '{"bg":"#1a1a2e","fg":"#eaeaea","accent":"#e94560","padding":60,"nodeSpacing":32,"layerSpacing":48}'
+
+# 透明背景（适合嵌入 UI）
+node render-svg.js input.mmd output.svg github-light '{"transparent":true}'
+
+# 高质量优化（慢速但布局更优）
+node render-svg.js input.mmd output.svg zinc-light '{"thoroughness":7}'
+
+# 交互式 XY 图表
+node render-svg.js chart.mmd chart.svg catppuccin-latte '{"interactive":true}'
+```
+
+### ASCII 调用
+
+```bash
+# Unicode 输出（默认，更美观）
+node render-ascii.js input.mmd
+
+# 纯 ASCII（兼容所有终端）
+node render-ascii.js input.mmd '{"useAscii":true}'
+
+# 强制真彩色
+node render-ascii.js input.mmd '{"colorMode":"truecolor"}'
+
+# 无着色（适合管道/重定向）
+node render-ascii.js input.mmd '{"colorMode":"none"}' > output.txt
+
+# HTML 着色（适合网页展示）
+node render-ascii.js input.mmd '{"colorMode":"html"}' > output.html
+```
+
+---
+
+## 布局参数调优指南
+
+### nodeSpacing（节点间距）
+
+| 值 | 效果 | 适用场景 |
+|------|------|---------|
+| 16 | 紧凑 | 节点多、空间有限 |
+| 24 | 默认 | 通用 |
+| 32-40 | 宽松 | 强调清晰度 |
+| 48+ | 很宽松 | 少量节点、演示用 |
+
+### layerSpacing（层间距）
+
+| 值 | 效果 | 适用场景 |
+|------|------|---------|
+| 24 | 紧凑 | 层级多时压缩空间 |
+| 40 | 默认 | 通用 |
+| 56-64 | 宽松 | 强调层级关系 |
+
+### thoroughness（优化级别）
+
+| 值 | 速度 | 质量 | 适用场景 |
+|------|------|------|---------|
+| 1 | 最快 | 基本 | 实时预览、大图 |
+| 3 | 默认 | 良好 | 通用 |
+| 5 | 较慢 | 优秀 | 最终输出 |
+| 7 | 最慢 | 最优 | 复杂图表、对交叉敏感 |
+
+### padding（画布内边距）
+
+| 值 | 适用场景 |
+|------|---------|
+| 20 | 空间紧凑时 |
+| 40 | 默认，通用 |
+| 60-80 | 独立展示、PPT 嵌入 |
+
+---
+
+## 技术说明
+
+### 布局引擎
+- 使用 ELK.js（Eclipse Layout Kernel）层次化布局算法
+- 同步执行（通过 FakeWorker bypass，无 setTimeout 延迟）
+- 支持正交路由（边不对角线穿越节点）
+- 形状感知边缘裁剪（边终止于节点实际形状边界）
+
+### SVG 特点
+- 所有颜色注入为 CSS 自定义属性
+- 支持 `color-mix()` 自动推导中间色
+- 多行文本使用 `<tspan>` 元素
+- 支持格式化标签：`<b>`、`<i>`、`<s>`、`<u>`
+
+### 性能参考
+- 100+ 张图渲染 < 500ms
+- 单张典型图表 < 50ms
+- 内存占用极低，无 DOM 操作

package/data/experts/design/mermaid-diagram-expert/skills/mermaid-render/references/themes.md

@@ -0,0 +1,239 @@
+# 主题配色参考
+
+## 一、配色系统原理
+
+### 双色基础
+
+所有图表只需两个基础色即可自动推导完整配色：
+
+| 变量 | 说明 | CSS 变量 |
+|------|------|---------|
+| `bg` | 背景色 | `--bg` |
+| `fg` | 前景色（文本） | `--fg` |
+
+系统通过 `color-mix()` 从 bg/fg 自动推导出以下层级：
+
+| 元素 | 推导规则 | 权重 |
+|------|---------|------|
+| 主文本 | fg 100% | 100 |
+| 次要文本 | fg 60% 混入 bg | 60 |
+| 边标签 | fg 40% 混入 bg | 40 |
+| 淡化文本 | fg 25% 混入 bg | 25 |
+| 连线 | fg 50% 混入 bg | 50 |
+| 箭头 | fg 85% 混入 bg | 85 |
+| 节点填充 | fg 3% 混入 bg | 3 |
+| 分组标题 | fg 5% 混入 bg | 5 |
+| 内边框 | fg 12% 混入 bg | 12 |
+| 节点边框 | fg 20% 混入 bg | 20 |
+
+### 富化模式（可选）
+
+提供额外颜色覆盖自动推导值：
+
+| 变量 | 说明 | CSS 变量 | 覆盖目标 |
+|------|------|---------|---------|
+| `line` | 连线/连接器色 | `--line` | 边/连接线 |
+| `accent` | 强调色 | `--accent` | 箭头、高亮、XY 图表系列色 |
+| `muted` | 低调色 | `--muted` | 次要文本、边标签 |
+| `surface` | 表面色 | `--surface` | 节点填充 |
+| `border` | 边框色 | `--border` | 节点/分组边框 |
+
+### 自定义主题示例
+
+**极简双色**：
+```json
+{"bg": "#0f0f0f", "fg": "#e0e0e0"}
+```
+
+**丰富配色**：
+```json
+{
+  "bg": "#0f0f0f",
+  "fg": "#e0e0e0",
+  "accent": "#ff6b6b",
+  "muted": "#666666",
+  "line": "#444444",
+  "surface": "#1a1a1a",
+  "border": "#333333"
+}
+```
+
+---
+
+## 二、内置主题详情
+
+### 浅色主题
+
+#### zinc-light（默认通用）
+```json
+{"bg": "#FFFFFF", "fg": "#27272A"}
+```
+- 适用：通用文档、打印输出、白底场景
+- 特点：纯黑白极简，所有颜色自动推导
+
+#### tokyo-night-light
+```json
+{"bg": "#d5d6db", "fg": "#343b58", "line": "#34548a", "accent": "#34548a", "muted": "#9699a3"}
+```
+- 适用：技术文档、代码说明
+- 特点：淡灰底+深蓝强调，温和不刺眼
+
+#### catppuccin-latte
+```json
+{"bg": "#eff1f5", "fg": "#4c4f69", "line": "#9ca0b0", "accent": "#8839ef", "muted": "#9ca0b0"}
+```
+- 适用：设计文档、创意项目
+- 特点：淡紫强调，优雅温暖
+
+#### nord-light
+```json
+{"bg": "#eceff4", "fg": "#2e3440", "line": "#aab1c0", "accent": "#5e81ac", "muted": "#7b88a1"}
+```
+- 适用：企业报告、正式文档
+- 特点：冰蓝色调，北欧极简
+
+#### github-light
+```json
+{"bg": "#ffffff", "fg": "#1f2328", "line": "#d1d9e0", "accent": "#0969da", "muted": "#59636e"}
+```
+- 适用：GitHub README、开源文档、Markdown
+- 特点：GitHub 标志蓝强调，开发者熟悉
+
+#### solarized-light
+```json
+{"bg": "#fdf6e3", "fg": "#657b83", "line": "#93a1a1", "accent": "#268bd2", "muted": "#93a1a1"}
+```
+- 适用：学术论文、长时间阅读
+- 特点：暖黄底色，护眼
+
+---
+
+### 深色主题
+
+#### zinc-dark
+```json
+{"bg": "#18181B", "fg": "#FAFAFA"}
+```
+- 适用：深色 UI 嵌入
+- 特点：纯黑白极简深色版
+
+#### tokyo-night
+```json
+{"bg": "#1a1b26", "fg": "#a9b1d6", "line": "#3d59a1", "accent": "#7aa2f7", "muted": "#565f89"}
+```
+- 适用：开发者文档、技术博客
+- 特点：经典深色主题，蓝紫色调
+
+#### tokyo-night-storm
+```json
+{"bg": "#24283b", "fg": "#a9b1d6", "line": "#3d59a1", "accent": "#7aa2f7", "muted": "#565f89"}
+```
+- 适用：IDE 集成、稍亮深色场景
+- 特点：比 tokyo-night 背景略亮
+
+#### catppuccin-mocha
+```json
+{"bg": "#1e1e2e", "fg": "#cdd6f4", "line": "#585b70", "accent": "#cba6f7", "muted": "#6c7086"}
+```
+- 适用：创意项目、设计展示
+- 特点：淡紫强调色，柔和深色
+
+#### nord
+```json
+{"bg": "#2e3440", "fg": "#d8dee9", "line": "#4c566a", "accent": "#88c0d0", "muted": "#616e88"}
+```
+- 适用：北欧极简风格
+- 特点：冰蓝色调深色版
+
+#### dracula
+```json
+{"bg": "#282a36", "fg": "#f8f8f2", "line": "#6272a4", "accent": "#bd93f9", "muted": "#6272a4"}
+```
+- 适用：暗黑风格、个人项目
+- 特点：经典 Dracula 紫色
+
+#### github-dark
+```json
+{"bg": "#0d1117", "fg": "#e6edf3", "line": "#3d444d", "accent": "#4493f8", "muted": "#9198a1"}
+```
+- 适用：GitHub Dark Mode、深色 README
+- 特点：GitHub 深色版标志蓝
+
+#### solarized-dark
+```json
+{"bg": "#002b36", "fg": "#839496", "line": "#586e75", "accent": "#268bd2", "muted": "#586e75"}
+```
+- 适用：终端友好、深色阅读
+- 特点：Solarized 经典深色，护眼
+
+#### one-dark
+```json
+{"bg": "#282c34", "fg": "#abb2bf", "line": "#4b5263", "accent": "#c678dd", "muted": "#5c6370"}
+```
+- 适用：编辑器风格
+- 特点：VS Code One Dark 风格，紫色强调
+
+---
+
+## 三、场景推荐
+
+| 场景 | 推荐主题 | 原因 |
+|------|---------|------|
+| 技术文档/README | github-light | 开发者最熟悉的风格 |
+| PPT/演示（浅色） | nord-light | 专业正式 |
+| PPT/演示（深色） | tokyo-night | 视觉冲击力 |
+| 打印输出 | zinc-light | 纯黑白，省墨 |
+| UI 嵌入（浅色） | catppuccin-latte | 优雅温暖 |
+| UI 嵌入（深色） | catppuccin-mocha | 柔和不刺眼 |
+| 终端/CLI 文档 | solarized-dark | 终端配色协调 |
+| 学术论文 | solarized-light | 暖底护眼 |
+| 品牌自定义 | custom（双色模式） | 输入品牌主色即可 |
+
+---
+
+## 四、VS Code 主题兼容
+
+可通过 Shiki 集成直接使用任何 VS Code 主题配色：
+
+```javascript
+import { fromShikiTheme } from 'beautiful-mermaid'
+
+// 颜色映射规则
+// editor.background   → bg
+// editor.foreground   → fg
+// editorLineNumber.foreground → line
+// focusBorder / keyword token → accent
+// comment token       → muted
+// editor.selectionBackground → surface
+// editorWidget.border → border
+```
+
+---
+
+## 五、CSS 自定义属性（实时切换）
+
+渲染后的 SVG 使用 CSS 自定义属性，支持在不重新渲染的情况下切换主题：
+
+```css
+/* 渲染时使用 CSS 变量 */
+svg {
+  --bg: var(--my-background);
+  --fg: var(--my-foreground);
+  --accent: var(--my-accent);
+}
+
+/* 切换主题只需改变变量值 */
+.dark svg {
+  --bg: #1a1b26;
+  --fg: #a9b1d6;
+}
+```
+
+对 React 应用，渲染时传入 CSS 变量引用：
+```javascript
+renderMermaidSVG(code, {
+  bg: 'var(--background)',
+  fg: 'var(--foreground)',
+  transparent: true
+})
+```

package/data/experts/design/mermaid-diagram-expert/skills/mermaid-render/scripts/list-themes.js

@@ -0,0 +1,40 @@
+#!/usr/bin/env node
+/**
+ * 列出所有可用的内置主题
+ * 
+ * 用法: node list-themes.js
+ */
+
+let THEMES
+try {
+  const lib = require('beautiful-mermaid')
+  THEMES = lib.THEMES
+} catch (e) {
+  console.error('❌ 渲染引擎未安装。请先执行: bash scripts/setup.sh')
+  process.exit(1)
+}
+
+console.log('📎 可用内置主题列表\n')
+console.log('━'.repeat(60))
+console.log(`${'主题名称'.padEnd(24)} ${'类型'.padEnd(6)} ${'背景'.padEnd(10)} ${'强调色'}`)
+console.log('━'.repeat(60))
+
+for (const [name, colors] of Object.entries(THEMES)) {
+  const type = isLight(colors.bg) ? '浅色' : '深色'
+  const accent = colors.accent || '自动推导'
+  console.log(`${name.padEnd(24)} ${type.padEnd(6)} ${colors.bg.padEnd(10)} ${accent}`)
+}
+
+console.log('━'.repeat(60))
+console.log(`\n共 ${Object.keys(THEMES).length} 个主题`)
+console.log('\n💡 使用方式:')
+console.log('   node render-svg.js input.mmd output.svg <主题名>')
+console.log('\n💡 自定义配色:')
+console.log('   node render-svg.js input.mmd output.svg custom \'{"bg":"#1a1a2e","fg":"#eaeaea"}\'')
+
+function isLight(hex) {
+  const r = parseInt(hex.slice(1, 3), 16)
+  const g = parseInt(hex.slice(3, 5), 16)
+  const b = parseInt(hex.slice(5, 7), 16)
+  return (r * 299 + g * 587 + b * 114) / 1000 > 128
+}

package/data/experts/design/mermaid-diagram-expert/skills/mermaid-render/scripts/render-ascii.js

@@ -0,0 +1,83 @@
+#!/usr/bin/env node
+/**
+ * Mermaid ASCII/Unicode 渲染脚本
+ * 
+ * 用法: node render-ascii.js <输入文件> [选项JSON]
+ * 
+ * 参数:
+ *   输入文件  - Mermaid 源代码文件路径 (.mmd/.txt)
+ *   选项JSON  - 可选，JSON 格式的渲染选项
+ * 
+ * 选项:
+ *   useAscii        - true 使用纯 ASCII, false 使用 Unicode (默认 false)
+ *   paddingX        - 水平节点间距 (默认 5)
+ *   paddingY        - 垂直节点间距 (默认 5)
+ *   boxBorderPadding - 节点内边距 (默认 1)
+ *   colorMode       - 着色模式: none/auto/ansi16/ansi256/truecolor/html (默认 auto)
+ * 
+ * 示例:
+ *   node render-ascii.js flow.mmd
+ *   node render-ascii.js flow.mmd '{"useAscii":true}'
+ *   node render-ascii.js flow.mmd '{"colorMode":"truecolor"}'
+ */
+
+const fs = require('fs')
+
+// 加载渲染引擎
+let renderMermaidASCII
+try {
+  const lib = require('beautiful-mermaid')
+  renderMermaidASCII = lib.renderMermaidASCII
+} catch (e) {
+  console.error('❌ 渲染引擎未安装。请先执行: bash scripts/setup.sh')
+  process.exit(1)
+}
+
+// 解析命令行参数
+const args = process.argv.slice(2)
+
+if (args.length < 1) {
+  console.error('用法: node render-ascii.js <输入文件> [选项JSON]')
+  console.error('')
+  console.error('选项:')
+  console.error('  useAscii: true/false (默认 false，使用 Unicode)')
+  console.error('  paddingX: 水平间距 (默认 5)')
+  console.error('  paddingY: 垂直间距 (默认 5)')
+  console.error('  colorMode: none/auto/ansi16/ansi256/truecolor/html')
+  process.exit(1)
+}
+
+const inputFile = args[0]
+const optionsJson = args[1] || '{}'
+
+// 读取源文件
+let source
+try {
+  source = fs.readFileSync(inputFile, 'utf-8').trim()
+} catch (e) {
+  console.error(`❌ 无法读取文件: ${inputFile}`)
+  process.exit(1)
+}
+
+if (!source) {
+  console.error('❌ 输入文件为空')
+  process.exit(1)
+}
+
+// 解析选项
+let options = {}
+try {
+  options = JSON.parse(optionsJson)
+} catch (e) {
+  console.error(`❌ 选项 JSON 格式错误: ${optionsJson}`)
+  process.exit(1)
+}
+
+// 执行 ASCII 渲染
+try {
+  const ascii = renderMermaidASCII(source, options)
+  console.log(ascii)
+} catch (e) {
+  console.error(`❌ ASCII 渲染失败: ${e.message}`)
+  process.exit(1)
+}

package/data/experts/design/mermaid-diagram-expert/skills/mermaid-render/scripts/render-svg.js

@@ -0,0 +1,113 @@
+#!/usr/bin/env node
+/**
+ * Mermaid SVG 渲染脚本
+ * 
+ * 用法: node render-svg.js <输入文件> <输出文件> [主题名] [选项JSON]
+ * 
+ * 参数:
+ *   输入文件  - Mermaid 源代码文件路径 (.mmd/.txt)
+ *   输出文件  - SVG 输出路径
+ *   主题名    - 可选，内置主题名（默认 zinc-light）或 "custom"
+ *   选项JSON  - 可选，JSON 格式的渲染选项
+ * 
+ * 示例:
+ *   node render-svg.js flow.mmd flow.svg
+ *   node render-svg.js flow.mmd flow.svg tokyo-night
+ *   node render-svg.js flow.mmd flow.svg custom '{"bg":"#1a1a2e","fg":"#eaeaea"}'
+ */
+
+const fs = require('fs')
+const path = require('path')
+
+// 加载渲染引擎
+let renderMermaidSVG, THEMES, DEFAULTS
+try {
+  const lib = require('beautiful-mermaid')
+  renderMermaidSVG = lib.renderMermaidSVG
+  THEMES = lib.THEMES
+  DEFAULTS = lib.DEFAULTS
+} catch (e) {
+  console.error('❌ 渲染引擎未安装。请先执行: bash scripts/setup.sh')
+  process.exit(1)
+}
+
+// 解析命令行参数
+const args = process.argv.slice(2)
+
+if (args.length < 2) {
+  console.error('用法: node render-svg.js <输入文件> <输出文件> [主题名] [选项JSON]')
+  console.error('')
+  console.error('主题列表: ' + Object.keys(THEMES).join(', '))
+  process.exit(1)
+}
+
+const inputFile = args[0]
+const outputFile = args[1]
+const themeName = args[2] || 'zinc-light'
+const optionsJson = args[3] || '{}'
+
+// 读取源文件
+let source
+try {
+  source = fs.readFileSync(inputFile, 'utf-8').trim()
+} catch (e) {
+  console.error(`❌ 无法读取文件: ${inputFile}`)
+  process.exit(1)
+}
+
+if (!source) {
+  console.error('❌ 输入文件为空')
+  process.exit(1)
+}
+
+// 解析渲染选项
+let customOptions = {}
+try {
+  customOptions = JSON.parse(optionsJson)
+} catch (e) {
+  console.error(`❌ 选项 JSON 格式错误: ${optionsJson}`)
+  process.exit(1)
+}
+
+// 构建最终渲染选项
+let renderOptions = {}
+
+if (themeName === 'custom') {
+  // 自定义配色模式
+  renderOptions = {
+    bg: customOptions.bg || DEFAULTS.bg,
+    fg: customOptions.fg || DEFAULTS.fg,
+    ...customOptions,
+  }
+} else if (THEMES[themeName]) {
+  // 使用内置主题
+  renderOptions = { ...THEMES[themeName], ...customOptions }
+} else {
+  console.error(`❌ 未知主题: ${themeName}`)
+  console.error('可用主题: ' + Object.keys(THEMES).join(', '))
+  process.exit(1)
+}
+
+// 执行渲染
+try {
+  const svg = renderMermaidSVG(source, renderOptions)
+  
+  // 确保输出目录存在
+  const outputDir = path.dirname(outputFile)
+  if (outputDir && !fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true })
+  }
+  
+  fs.writeFileSync(outputFile, svg, 'utf-8')
+  
+  const stats = fs.statSync(outputFile)
+  const sizeKB = (stats.size / 1024).toFixed(1)
+  
+  console.log(`✅ 渲染成功`)
+  console.log(`   输出: ${outputFile}`)
+  console.log(`   主题: ${themeName}`)
+  console.log(`   大小: ${sizeKB} KB`)
+} catch (e) {
+  console.error(`❌ 渲染失败: ${e.message}`)
+  process.exit(1)
+}

package/data/experts/design/mermaid-diagram-expert/skills/mermaid-render/scripts/setup.sh

@@ -0,0 +1,52 @@
+#!/bin/bash
+# Mermaid 渲染引擎环境安装脚本
+# 首次使用前执行一次即可
+
+set -e
+
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+
+echo "🔧 正在安装 Mermaid 渲染引擎..."
+
+# 检查 Node.js 版本
+if ! command -v node &> /dev/null; then
+  echo "❌ 未找到 Node.js。请安装 Node.js 18+ 后重试。"
+  exit 1
+fi
+
+NODE_VERSION=$(node -v | cut -d'v' -f2 | cut -d'.' -f1)
+if [ "$NODE_VERSION" -lt 18 ]; then
+  echo "❌ Node.js 版本过低（当前 v${NODE_VERSION}）。需要 Node.js 18+。"
+  exit 1
+fi
+
+echo "   Node.js 版本: $(node -v) ✓"
+
+# 进入脚本目录安装依赖
+cd "$SCRIPT_DIR"
+
+# 如果没有 package.json，创建一个
+if [ ! -f "package.json" ]; then
+  echo "   初始化 package.json..."
+  cat > package.json << 'EOF'
+{
+  "name": "mermaid-render-scripts",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Mermaid diagram rendering scripts",
+  "type": "commonjs"
+}
+EOF
+fi
+
+# 安装渲染引擎
+echo "   安装渲染引擎..."
+npm install beautiful-mermaid --save --silent 2>/dev/null || npm install beautiful-mermaid --save
+
+echo ""
+echo "✅ 安装完成！"
+echo ""
+echo "📝 使用方式:"
+echo "   SVG 渲染:   node ${SCRIPT_DIR}/render-svg.js input.mmd output.svg [主题名]"
+echo "   ASCII 渲染: node ${SCRIPT_DIR}/render-ascii.js input.mmd"
+echo "   查看主题:   node ${SCRIPT_DIR}/list-themes.js"