跳到主要内容
火花工坊
翻到一个英文原版 skill:把文字需求变成可交互的架构图,输出独立 HTML

翻到一个英文原版 skill:把文字需求变成可交互的架构图,输出独立 HTML

装好之后怎么用

什么时候会用上它:Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG, dark/light themes, optional trace motion, and PNG/JPEG/WebP/SVG/WebM export. Accept plain-language requirements or pasted Mermaid flowchart, sequenceDiagram, and stateDiagram input; inspect repository evidence when the diagram must reflect real code. Use when the user asks to visualize system architecture, infrastructure, cloud/security/network topology, technical workflows, API call sequences, request lifecycles, data pipelines, ETL/ELT, data lineage, state machines, or to convert/beautify Mermaid.

怎么用:在 AI 工具里直接描述任务即可自动触发。显式调用的写法各端不同:Claude Code / Cursor 等用 /archify,Codex 用 $archify,Kimi Code 用 /skill:archify,ZCODE 用 $archify,Gemini CLI 以自动激活为主。

这个 skill 是干什么的: 把文字需求或 Mermaid 流程图,变成一张可交互的独立 HTML 架构图。输出是一个独立的 HTML 文件,内联 SVG,带暗/亮主题切换、缩放、搜索、导出 PNG/JPEG/WebP/SVG/WebM。

支持 5 种图:

  • 架构图(architecture)
  • 流程图(workflow)
  • 序列图(sequence)
  • 数据流图(dataflow)
  • 生命周期/状态图(lifecycle)

适合谁:

  • 科研:画系统架构图、数据流图、把 Mermaid 转成可交互 HTML
  • 日常:画工作流程图、状态机、API 调用序列

注意:

  1. 这是英文原版 skill,不是中文翻译版
  2. 需要 Node.js 环境,不能只复制 SKILL.md,要整个仓库下载才能用
  3. 它不是纯 prompt 类 skill,依赖命令行工具 bin/archify.mjs

我没实操,但看版本号(v2.16)、MIT 协议、依赖结构,不是玩具。

有跑通过的朋友吗?生成的图真的能用吗?

来源:GitHub 仓库(作者 tt-a1i,基于 Cocoon-AI/architecture-diagram-generator) · 版本:v2.16,MIT 协议 · 语言:英文原版(SKILL.md 全文为英文)

评论 0

更多

登录后可点赞、收藏、评论和举报。

还没有评论,先发起一个具体问题。

0/2000