craft-mermaid

Craft Mermaid Skill

一个面向 Codex、Claude Code 和其他本地 Agent 的 Mermaid Skill。它把

[Craft Agents](https://github.com/craft-ai-agents/craft-agents-oss) 的图表选择、

生成、渲染和视觉复检流程封装成可移植 Skill，并使用相同的

beautiful-mermaid 渲染器系列与匹配的明暗主题。

这个项目交付规范化 .mmd 源码和高分辨率 .png 文件，而不是依赖宿主对

Mermaid 代码块的默认预览。这样在不同 Agent 中使用时，图表外观更稳定。

30 秒开始

npx skills add https://github.com/chunkithwang/craft-mermaid --skill craft-mermaid

安装 Skill 后，让同一个安装 Agent 继续在实际安装目录初始化并验证渲染运行时：

CRAFT_MERMAID_DIR="/absolute/path/to/craft-mermaid"
node "$CRAFT_MERMAID_DIR/scripts/setup-runtime.mjs"

常见安装位置包括项目内的 .agents/skills/craft-mermaid、用户级的

~/.agents/skills/craft-mermaid、~/.codex/skills/craft-mermaid 或

~/.claude/skills/craft-mermaid。以安装器实际返回的路径为准。

初始化脚本会执行锁定版本的 npm ci 和 npm test；因为这一步可能访问网络

并修改 Skill 目录，安装 Agent 应先请求授权，但不应把它拆成另一项安装任务。

安装后直接对 Agent 说：

用 Craft Mermaid 把这套支付流程画成一张高清流程图，并做视觉复检。

也可以试这些请求：

把这份系统设计整理成 Craft 风格的架构图。
用时序图说明 OAuth 登录流程，使用深色主题。
把这段 Mermaid 渲染成高清 PNG，检查是否有文字裁切或节点重叠。

安装

方式一：Skills CLI 安装（推荐）

npx skills add https://github.com/chunkithwang/craft-mermaid --skill craft-mermaid

安装器完成后，让安装 Agent 使用它报告的 Skill 目录完成依赖安装与验证：

CRAFT_MERMAID_DIR="/absolute/path/to/installed/craft-mermaid"
node "$CRAFT_MERMAID_DIR/scripts/setup-runtime.mjs"

setup-runtime.mjs 不应省略。Skills CLI 只安装 Skill 文件，不会执行项目脚本；

这个初始化入口会检查 Node.js 版本、执行 npm ci，再运行 smoke test。Skill

的决策流程可以在没有依赖时被 Agent 读取，但 PNG 渲染、确定性检查和

视觉复检链路将无法完整执行。

方式二：把下面这段话直接发给 AI

> 帮我安装 craft-mermaid Skill。请按下面步骤执行：

>

> 1. 确认本机已安装 Node.js 20 或更高版本。

> 2. 执行

> npx skills add https://github.com/chunkithwang/craft-mermaid --skill craft-mermaid。

> 3. 不要在 skills add 完成后停止。找到安装器返回的实际 craft-mermaid

> 目录；依赖安装可能访问网络并修改该目录，因此先向我请求授权。

> 4. 获得授权后，运行

> node <实际安装目录>/scripts/setup-runtime.mjs。它会依次执行锁定依赖的

> npm ci 和 npm test，任一步失败都视为安装未完成。

> 5. 检查 SKILL.md、assets/、references/ 和 scripts/runtime/ 是否存在，

> 并告诉我实际安装路径和测试结果。

把这段话发给 Codex、Claude Code、Cursor 或其他有文件系统和 shell 权限的

Agent，它可以完成安装和验证。