图表生成工具-免费版

轻量级图表生成工具,支持Mermaid格式流程图与序列图的快速创建与编辑。Use when 需要AI模型调用、智能对话、Agent编排、LLM应用时使用。不适用于需要100%确定性的关键决策。适用于独立开发者、企业团队和自动化工作流场景。支持中文交互,无需复杂配置即开即用。输出结果可直接使用,减少二次加工成本。

天轰穿

@thcjp

What This Skill Does

Generates Mermaid-format flowcharts and sequence diagrams from natural language descriptions. Outputs standard Mermaid code that can be embedded directly into Markdown documents or saved as .mmd files.

Replaces manual diagram drawing tools and complex diagram-as-code setup by converting plain text descriptions into ready-to-use Mermaid syntax.

When to Use It

  • Create a flowchart for an API request handling process in technical documentation
  • Generate a sequence diagram showing microservice interaction during an order placement
  • Read and modify an existing .mmd diagram file to add new nodes or participants
  • Quickly produce a decision-branch flowchart for a user registration flow
  • Embed a Mermaid diagram into a GitHub or GitLab Markdown file without external tools
  • Export a generated diagram as a PNG image using the mermaid-cli tool

Install

$ openclaw skills install @thcjp/diagram-gen-tool-free

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

图表生成工具(免费版)

概述

图表生成工具免费版是一款轻量级的图表制作方案,聚焦 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集成: 通过标准化接口调用外部服务并处理响应
  • 命令执行: 在安全沙箱中执行系统命令并收集结果
  • 信息检索: 快速搜索和过滤目标数据

Top skills in this category

Screenshot

@ivangdavila

Capture, inspect, and compare screenshots of screens, windows, regions, web pages, simulators, and CI runs with the right tool, wait strategy, viewport, and...

3818k

Translate

@ivangdavila

Translates and localizes text, software strings, documents, subtitles, and marketing copy between any language pair. Use when translating anything, when fixing a translation that reads machine-made, or when localizing a product: ICU plurals and gender, placeholders that must survive, string catalogs (JSON, XLIFF, .po, .strings, .xcstrings, ARB, RESX, YAML), locale codes and fallback chains, RTL and bidi breakage, CJK typography, mojibake, text expansion that overflows the UI, subtitle timing and reading speed, hreflang and multilingual SEO, glossaries, translation memory and fuzzy matches, and post-editing machine output. Use when choosing register (tu/vous, tú/usted, du/Sie, keigo), between es-ES and es-419 or zh-Hans and zh-Hant, or when a certified, legal, or medical translation carries liability. Not for writing original copy natively in one language (spanish, french, german, japanese, chinese) or generating captions from audio (video-captions).

1113k

Humanizer

@biostartechnology

Remove signs of AI-generated writing from text. Use when editing or reviewing text to make it sound more natural and human-written. Based on Wikipedia's comprehensive "Signs of AI writing" guide. Detects and fixes patterns including: inflated symbolism, promotional language, superficial -ing analyses, vague attributions, em dash overuse, rule of three, AI vocabulary words, negative parallelisms, and excessive conjunctive phrases.

712130k

YouTube Watcher

@michaelgathara

Fetch and read transcripts from YouTube videos. Use when you need to summarize a video, answer questions about its content, or extract information from it.

34255k

Elite Longterm Memory

@nextfrontierbuilds

Ultimate AI agent memory system for Cursor, Claude, ChatGPT & Copilot. WAL protocol + vector search + git-notes + cloud backup. Never lose context again. Vibe-coding ready.

23564k