Agents365-ai
Skill Visualizer
Development community
Description
Claude Code skill for visualizing skill structures using Mermaid flowcharts
Installation
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open the source below and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
README
Skill Visualizer
[中文文档](README_CN.md)
A Claude Code skill for visualizing and analyzing skill structures using Mermaid flowcharts.
Features
- Automatic Analysis: Reads and comprehends skill logic
- Mermaid Diagrams: Generates flowcharts for skill workflows
- PDF Output: Renders diagrams to timestamped PDF files
- Structure Suggestions: Provides actionable improvement recommendations
Requirements
System Requirements
- Node.js 16+
- npm
Installation
npm install -g @mermaid-js/mermaid-cliDependencies
pdfskill (for merging multiple PDFs)
Quick Start
Natural Language (Claude Code)
Just tell Claude what you want:
Visualize the video-podcast-maker skill
Diagram the ffmpeg skill structure
Analyze the remotion skill flowProcess
- Read - Scans skill directory and all files
- Analyze - Determines complexity (simple vs complex)
- Generate - Creates Mermaid
.mmddiagrams - Render - Converts to PDF via
mmdc - Report - Writes summary and suggestions
Output
~/.claude/skills//
├── SKILL.md
├── -YYYYMMDD-HHMMSS.pdf # diagrams + summary + suggestions
├── -YYYYMMDD-HHMMSS-summary.md # optional
└── -YYYYMMDD-HHMMSS-suggestions.md # optionalComplexity Criteria
| Type | Criteria | Diagrams |
|---|---|---|
| Simple | ≤3 sections, no scripts, linear flow | 1 comprehensive flowchart |
| Complex | Multiple scripts, multi-phase | Overview + per-phase diagrams |
License
MIT License
Support
If this project helps you, consider supporting the author:
