mcpField
V
visualize

visualize

github.com/camacho生产力296 次安装
代码仓库

关于 visualize

根据内容结构选择合适形式进行可视化的技能，支持 Mermaid 图、表格或 ASCII。适用于将概念、流程、比较和结构转换为适合当前输出界面的表示形式。

主要功能

  1. 01从参数或上下文识别内容
  2. 02按内容结构选择格式
  3. 03支持 Mermaid、表格和 ASCII
  4. 04遵循输出界面的渲染规则
  5. 05允许指定格式覆盖默认选择

适用场景

  1. 01绘制架构或请求流程
  2. 02展示生命周期状态或数据关系
  3. 03比较选项或呈现层级结构

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/camacho/ai-skills --skill visualize

安装后在 Claude Code 中输入/visualize确认已加载。

附带文件scripts/render-mermaid.ts

详细介绍

/visualize

自动检测内容形状并渲染合适的可视化内容。遵循 ai-workspace/rules/visualizations.md 中的活动选择规则。

用法

/visualize                              # visualize the last discussed concept
/visualize <topic or file>              # visualize specific content
/visualize --format mermaid <topic>     # force a specific format

步骤

  1. 识别内容。 从参数、近期对话上下文或文件路径中确定需要可视化的内容。

  2. 对内容形状进行分类。 使用此决策表：

    内容形状信号格式
    带节点和边的图架构、依赖关系、组件间的流动Mermaid graph 或 flowchart
    序列／交互请求流、API 调用、多步协议Mermaid sequenceDiagram
    状态转换模式、生命周期、状态变更Mermaid stateDiagram-v2
    比较（3 项及以上）选项、权衡、功能矩阵Markdown 表格
    层级／树文件结构、组织架构图、简单嵌套ASCII 艺术图
    对比（2 项）前后对比、好／坏、该做／不该做行内成对列出
    实体关系数据模型、架构Mermaid erDiagram

  3. 检查渲染界面。 已提交的 .md 文件中的 Mermaid 可在 iOS/web/GitHub/VS Code 上渲染。在终端分块中，Mermaid 会显示为纯文本——请改用 ASCII。界面未知时，默认使用 ASCII。

  4. 渲染。

    • ASCII／表格／行内成对列出：直接在响应中输出。
    • Mermaid：在响应中以围栏代码块输出，标记为 mermaid。如果需要高分辨率 PNG： 
      node --import tsx "${SKILL_DIR}/scripts/render-mermaid.ts" --input <mermaid-file> --output <png-path> --width 2400 --height 1800
    • 格式覆盖：如果用户传入了 --format，无论自动检测结果如何，都使用该格式。

  5. 呈现。 显示可视化内容。如果渲染了 Mermaid PNG，则显示其路径。

故障模式

条件行为
内容形状不明确询问：“这可以是 [X] 或 [Y]——哪种更合适？”
Mermaid 语法错误显示错误并提出修复
mmdc 不可用回退到围栏 Mermaid 代码块（可在 GitHub/web 上渲染）

跨工具说明

  • Codex / Cursor：直接运行 scripts/render-mermaid.ts 来渲染 PNG。内容形状检测由 Agent 推理完成，而不是脚本逻辑。

评论

支持 Markdown