返回技能市场

图表生成工具-免费版

图表生成工具免费版,面向个人开发者的轻量级图表制作方案。核心能力: - Mermaid 格式图表生成与编辑 - 流程图与序列图两种核心图表类型 - 自然语言描述转图表结构 - Markdown 内嵌输出,适合文档集成 适用场景: - 技术文档中的流程图与序列图 - 代码仓库 README 图表补充 - 个人项目的架构草图 差异化:免费版聚焦 Mermaid 单一格式与两种高频图表类型,零依赖、即开即用

版本: 1.0.1分类: 文档处理
中文

SKILL.md

功能说明: 本技能涵盖 中文交互、化工作流场景 等核心能力。

图表生成工具(免费版)

概述

图表生成工具免费版是一款轻量级的图表制作方案,聚焦 Mermaid 格式的流程图与序列图生成。通过自然语言描述即可生成结构化的图表代码,直接嵌入 Markdown 文档使用,无需安装额外软件。

本版本特别适合技术文档编写、代码仓库文档补充和个人项目架构草图制作。所有输出均为标准 Mermaid 语法,与 GitHub、GitLab 等平台原生兼容。

核心能力

能力说明
自然语言转图表用中文或英文描述需求,自动生成图表代码
流程图生成支持决策分支、循环、并行流程
序列图生成支持参与者、消息、激活期、注释
Markdown 内嵌输出可直接粘贴到 Markdown 文档
文件编辑可读取并修改已有的 .mmd 文件

免费版支持的图表类型

流程图 (Flowchart):
  - 线性流程
  - 决策分支 (if/else)
  - 循环结构
  - 并行流程

序列图 (Sequence):
  - 参与者定义
  - 同步/异步消息
  - 激活期
  - 注释与分组

输出: 返回免费版支持的图表类型的执行结果,包含操作状态和输出数据。

  • 执行此能力时使用input_params参数,支持创建/查询/导出操作

核心功能执行

用input_params参数进行配置。

输出: 返回核心功能执行的执行结果,包含操作状态和输出数据。

  • 执行此能力时使用input_params参数,支持创建/查询/导出操作

参数配置与调用

用config_options参数进行配置。

输出: 返回参数配置与调用的执行结果,包含操作状态和输出数据。

  • 执行此能力时使用config_options参数,支持修改/重置/导入操作 能力覆盖范围:本skill的核心能力覆盖以下场景关键词:轻量级图表生成工、Mermaid、格式流程图与序列、图的快速创建与编、图表生成工具免费、面向个人开发者的、轻量级图表制作方、核心能力、格式图表生成与编、流程图与序列图两、种核心图表类型、自然语言描述转图、表结构、内嵌输出、适合文档集成等。这些关键词对应description中声明的使用场景,均已在上述能力点中提供对应的操作支持。

使用场景

场景一:技术文档流程图

为 API 文档添加请求处理流程图。

输入描述:

用户发起请求 → 鉴权检查 → 通过则查询数据库 → 返回结果;失败则返回 401

生成结果:

flowchart TD
    A[用户发起请求] --> B{鉴权检查}
    B -->|通过| C[查询数据库]
    B -->|失败| D[返回 401]
    C --> E[返回结果]
    D --> F[结束]
    E --> F

使用方式:

# 保存为 .mmd 文件
cat > request-flow.mmd << 'EOF'
flowchart TD
    A[用户发起请求] --> B{鉴权检查}
    B -->|通过| C[查询数据库]
    B -->|失败| D[返回 401]
    C --> E[返回结果]
    D --> F[结束]
    E --> F
EOF

# 或直接嵌入 Markdown 文档
echo "将上述 mermaid 代码块粘贴到 .md 文件中即可"

场景二:微服务交互序列图

绘制服务间的调用序列。

sequenceDiagram
    participant U as 用户
    participant G as 网关
    participant A as 认证服务
    participant O as 订单服务
    participant D as 数据库

    U->>G: 下单请求
    G->>A: 验证Token
    A-->>G: 验证通过
    G->>O: 转发订单
    O->>D: 写入订单
    D-->>O: 写入成功
    O-->>G: 返回订单号
    G-->>U: 下单成功

场景三:编辑已有图表

读取并修改现有的 Mermaid 文件。

# 读取已有图表
cat architecture.mmd

# 修改后保存(新增一个节点)
cat > architecture-updated.mmd << 'EOF'
flowchart LR
    A[前端] --> B[API网关]
    B --> C[用户服务]
    B --> D[商品服务]
    B --> E[订单服务]
    E --> F[(消息队列)]
    F --> G[通知服务]
EOF

快速开始

领先步:描述你的图表需求

用自然语言告诉工具你想要什么图表:

请生成一个流程图:
- 起点:用户注册
- 步骤:填写信息 → 邮箱验证 → 手机验证
- 分支:验证成功 → 创建账户;验证失败 → 提示重试
- 终点:注册完成

第二步:获取生成的代码

工具会输出标准 Mermaid 代码:

flowchart TD
    A[用户注册] --> B[填写信息]
    B --> C[邮箱验证]
    C --> D[手机验证]
    D --> E{验证结果}
    E -->|成功| F[创建账户]
    E -->|失败| G[提示重试]
    G --> B
    F --> H[注册完成]

第三步:使用图表

# 方式1:保存为独立文件
echo 'flowchart TD\n    A[开始] --> B[结束]' > diagram.mmd

# 方式2:嵌入 Markdown
# 将 mermaid 代码包裹在 ```mermaid ``` 代码块中

# 方式3:导出为图片(需要 mermaid-cli)
npx @mermaid-js/mermaid-cli -i diagram.mmd -o diagram.png

请参考上方使用说明进行配置和调用

result = "ready"

flowchart 方向说明:
  TD / TB  →  从上到下(默认)
  LR       →  从左到右
  RL       →  从右到左
  BT       →  从下到上

请参考上方使用说明进行配置和调用

result = "ready"

flowchart LR
    A[直角矩形] --> B(圆角矩形)
    B --> C{菱形决策}
    C -->|是| D[/平行四边形/]
    C -->|否| E[(数据库)]
    E --> F((圆形))

请参考上方使用说明进行配置和调用

result = "ready"

flowchart TD
    A[开始] --> B[处理]
    B --> C[结束]

    style A fill:#1a1a2e,stroke:#e94560,color:#fff
    style B fill:#16213e,stroke:#0f3460,color:#eee
    style C fill:#1a1a2e,stroke:#e94560,color:#fff

优选实践

  1. 保持简洁:单张图表节点不超过 15 个,复杂流程拆分为多张子图。
  2. 方向选择:线性流程用 TD,并行流程用 LR,提升可读性。
  3. 命名规范:节点 ID 用字母缩写,显示名用中文描述。
  4. 分支标注:决策分支务必标注"是/否"或具体条件。
  5. 文档集成:Mermaid 代码直接嵌入 Markdown,无需额外图片文件。
免费版优选实践检查:
[ ] 单图节点数 ≤ 15
[ ] 决策分支已标注条件
[ ] 方向选择符合阅读习惯
[ ] 节点命名清晰(ID + 显示名)
[ ] 已嵌入 Markdown 文档测试渲染

常见问题

Q: 免费版支持 Draw.io 或 Excalidraw 吗?

A: 免费版仅支持 Mermaid 格式。Draw.io(.drawio)和 Excalidraw(.excalidraw)需要升级至专业版。

Q: 生成的图表如何导出为图片?

A: 使用 mermaid-cli 工具:npx @mermaid-js/mermaid-cli -i input.mmd -o output.png。GitHub 和多数 Markdown 编辑器原生支持 Mermaid 渲染。

Q: 可以生成网络拓扑图或架构图吗?

A: 免费版支持基础的架构流程图,但复杂的网络拓扑图(含机房、区域层级)需要专业版。

Q: Mermaid 语法在哪里可以查阅?

A: 访问 mermaid 官方文档 mermaid.js.org 获取完整语法参考。

Q: 图表节点过多导致渲染拥挤怎么办?

A: 建议拆分为多张子图,或使用 subgraph 分组。单图节点超过 15 个时考虑重构。

依赖说明

运行环境

  • Agent平台: 支持SKILL.md的任意AI Agent(Claude Code / Cursor / Codex / Gemini CLI等)
  • 操作系统: Windows / macOS / Linux
  • 浏览器/编辑器: 任何支持 Mermaid 渲染的环境

依赖详情

依赖项类型是否必需获取方式
LLM APIAPI必需由Agent内置LLM提供
Mermaid.js渲染库可选CDN自动加载或编辑器内置
mermaid-cli工具可选npm install -g @mermaid-js/mermaid-cli

API Key 配置

  • 本Skill采用纯Markdown指令驱动,无需额外API Key
  • 图片导出功能(可选)需本地安装 mermaid-cli

可用性分类

  • 分类: MD+EXEC(纯Markdown指令,部分功能需要exec命令行执行能力)
  • 说明: 轻量级AI Skill,通过自然语言指令生成Mermaid格式图表
  • 适用规模: 个人开发者,技术文档编写

错误处理

错误场景原因处理方式
配置错误参数缺失或格式错误检查依赖说明中的配置要求
运行时错误运行环境不满足确认运行环境符合依赖说明
网络错误连接超时或不可达执行ping命令测试网络连通性,检查防火墙和代理设置连接后执行ping命令测试网络连通性,检查防火墙和代理设置连接后重新执行命令,参考国内替代方案

已知限制

  • 需LLM支持,无LLM环境不可用
  • 复杂业务场景建议结合人工经验判断
  • 执行效率受模型能力与网络环境影响

安全注意事项

风险类型防范措施
API密钥泄露通过环境变量配置,禁止硬编码到代码或配置文件中
命令执行风险仅执行白名单命令,避免拼接用户输入到命令行参数中
网络通信安全使用HTTPS协议,验证SSL证书有效性
敏感数据暴露输出结果中不包含密钥、令牌等敏感信息

使用前请确认已阅读依赖说明章节,确保运行环境满足安全要求。

核心功能

  • 自动化执行: 基于指令驱动的自动化流程
  • 文件处理: 支持多种文件格式的读取、解析和写入操作
  • API集成: 通过标准化接口调用外部服务并处理响应
  • 命令执行: 在安全沙箱中执行系统命令并收集结果
  • 信息检索: 快速搜索和过滤目标数据

核心功能

  • 自动化执行: 基于指令驱动的自动化流程
  • 文件处理: 支持多种文件格式的读取、解析和写入操作
  • API集成: 通过标准化接口调用外部服务并处理响应
  • 命令执行: 在安全沙箱中执行系统命令并收集结果
  • 信息检索: 快速搜索和过滤目标数据

评论与讨论

0/2000

还没有评论,分享你的体验吧。