sequenceDiagram
    participant U as 👤 用户 (User)
    participant L as 🤖 LLM
    participant C as ✅ Mermaid Checker

    U->>L: 🗣️ "画图展示TCP建联过程"
    Note right of L: 💭 思考:用户要画图,我有法宝 mermaid-checker skill 在手!✌<br/>准备检查输出结果
    
    loop 🔄 校验循环
        L->>C: 📝 "提交 Mermaid 代码 (Check)"
        alt ❌ 代码有误
            C-->>L: 🚫 报错:第n行第m个字符错误
            Note right of L: 🧠 根据报错修正代码
        else 🆗 代码正确
            C-->>L: ✅ 无语法错误
        end
    end
    
    L->>U: 📊 输出最终图表
    U->>U:👍 真省事!

mermaid可用搞定软件工程绝大多数绘图 是AI时代最佳绘图工具 因为AI最擅长输出有特定范式的文本,比如代码

问题:很多模型,即使是最新的模型,在为其提供mermaid官方知识库的情况下,仍然会因为语法错误导致输出的mermaid代码不能直接渲染出来

然后就是几轮拉扯,不但污染了上下文,还干扰了你的主任务

并且时候好几轮都解决不了,还是得人工去mermaid渲染器里面,看哪些行报错,然后修正

上面这行加粗的重复工作,就是这个SKILL的灵感来源:

  • 开发一个skill,在LLM要输出mermaid前,让调用本地的mermaid检测脚本,自动检测和修正语法错误
  • mermaid检测脚本不是写死的规则(告诉模型哪些语法需要注意), 而是调用本地的mermaid官方js,检测具体出错的行和位置以及出错原因
  • 循环这个过程,直到没有错误为止
  • 保证一次性即可输出直接可渲染的mermaid代码

SKILL

SKILL的原理

安装和使用skill

开发skill

一个规范的SKILL格式

用skill-creator创造SKILL

skill-creator 是一个工具,用来帮助你创造SKILL。 你只需要提供一个SKILL的描述,skill-creator 就会根据你的描述,自动生成一个SKILL的代码。

发布skill到skill市场

mermaid-checker

暂定叫这个名字,本地已经run起来了,效果很不错,但是还没发布到主流市场。毕竟还有很多规范要做好才能上架

安装方式

使用效果