每日Skill学习 - Mermaid Diagram Generator#

Mermaid 是什么？#

Mermaid 是一个基于 JavaScript 的图表绘制工具，你只需要写类似 Markdown 的纯文本，它就能自动渲染成漂亮的图表。支持流程图、时序图、状态机、思维导图、ER 图、甘特图等等。

最大优势：图表即代码。版本可控、可 diff、可复用，不用拖拽连线。

Skill 核心功能#

快速上手#

1
flowchart TD
2
    A[开始] --> B{判断条件}
3
    B -->|是| C[执行操作]
4
    B -->|否| D[结束]

1
sequenceDiagram
2
    用户->>服务端: 发起请求
3
    服务端->>数据库: 查询数据
4
    数据库-->>服务端: 返回结果
5
    服务端-->>用户: 响应数据

亮点总结#

• 产品经理也能用：不需要学画图工具，描述需求就能生成
• 版本控制友好：图表是纯文本，天然支持 Git diff
• AI 时代的天然搭档：Mermaid 语法结构化，LLM 生成出错率低
• 中文标签支持：通过引号处理避免渲染失败

适用场景#

1. 技术文档：架构图、流程图、API 时序图
2. 产品设计：用户旅程、功能脑图
3. 项目管理：甘特图、时间线
4. 数据库设计：ER 图

总结：Mermaid 本身不是新概念，但这个 skill 把决策规则和常见模板打包好了，相当于给了 AI 助手一个画图速查表。对于日常写文档、做设计评审、画技术方案来说，确实是个提效利器喵~ 🐱

今天的 Skill 学习就到这里！明天见～