# skill-visualizer

**Repository Path**: Agents365-ai/skill-visualizer

## Basic Information

- **Project Name**: skill-visualizer
- **Description**: Claude Code skill for visualizing skill structures using Mermaid flowcharts
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-18
- **Last Updated**: 2026-06-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Skill Visualizer - 技能可视化工具

[English](README.md)

一个用于可视化和分析 Claude Code 技能结构的工具，使用 Mermaid 流程图。

## 功能

- **自动分析**: 读取并理解技能逻辑
- **Mermaid 图表**: 生成技能工作流程图
- **PDF 输出**: 渲染为带时间戳的 PDF 文件
- **结构建议**: 提供可操作的改进建议

## 系统要求

### 环境要求

- Node.js 16+
- npm

### 安装

```bash
npm install -g @mermaid-js/mermaid-cli
```

### 依赖技能

- `pdf` 技能（用于合并多个 PDF）

## 快速开始

### 自然语言（Claude Code）

直接告诉 Claude 你想要什么：

```
可视化 video-podcast-maker 技能
图解 ffmpeg 技能结构
分析 remotion 技能流程
```

### 处理流程

1. **读取** - 扫描技能目录和所有文件
2. **分析** - 判断复杂度（简单 vs 复杂）
3. **生成** - 创建 Mermaid `.mmd` 图表
4. **渲染** - 通过 `mmdc` 转换为 PDF
5. **报告** - 编写摘要和建议

## 输出结构

```
~/.claude/skills/<skill-name>/
├── SKILL.md
├── <skill-name>-YYYYMMDD-HHMMSS.pdf           # 图表 + 摘要 + 建议
├── <skill-name>-YYYYMMDD-HHMMSS-summary.md    # 可选
└── <skill-name>-YYYYMMDD-HHMMSS-suggestions.md # 可选
```

## 复杂度判断

| 类型 | 标准 | 图表数量 |
|------|------|----------|
| 简单 | ≤3 个章节，无脚本，线性流程 | 1 个综合流程图 |
| 复杂 | 多个脚本，多阶段 | 概览图 + 各阶段图 |

## 许可证

MIT License

## 支持

如果这个项目对你有帮助，欢迎支持作者：

<table>
  <tr>
    <td align="center">
      <img src="https://raw.githubusercontent.com/Agents365-ai/images_payment/main/qrcode/wechat-pay.png" width="180" alt="微信支付">
      <br>
      <b>微信支付</b>
    </td>
    <td align="center">
      <img src="https://raw.githubusercontent.com/Agents365-ai/images_payment/main/qrcode/alipay.png" width="180" alt="支付宝">
      <br>
      <b>支付宝</b>
    </td>
    <td align="center">
      <img src="https://raw.githubusercontent.com/Agents365-ai/images_payment/main/qrcode/buymeacoffee.png" width="180" alt="Buy Me a Coffee">
      <br>
      <b>Buy Me a Coffee</b>
    </td>
  </tr>
</table>

## 作者

**Agents365-ai**

- Bilibili: https://space.bilibili.com/441831884
- GitHub: https://github.com/Agents365-ai