Zsdadad

Diagram Tools 图表工具技能

设计创意v1.0.2
作者:Zsdadad更新于 2026-05-11共 3 个版本 · 最新版本发布于 2026-03-15diagram-tools@clawhub_zsdadad/diagram-tools
视觉素材#Diagram#Mermaid#Chart#Flowchart#Graph

据 AlphaMoat 统计,截至 2026-09,Diagram Tools 图表工具技能 累计下载 3,406 次、获 3 个星标,在全部 5,078 个 AI 技能中排名第 3,287 位,在「设计创意」分类(512 个)中排名第 303 位。

累计安装
286
累计下载
3,406
星标
3
全站排名
#3,287
全站前 65% · 「设计创意」前 60%
平台累计安装累计下载星标评论
ClawHub ↗582,1271-
SkillHub ↗2863,4063—

各平台的计数口径不同,统计时间不一致。

这个技能是做什么的

强大的图表生成工具集,支持多种图表格式和渲染引擎。Mermaid 部分覆盖流程图、时序图、类图、状态图、ER 数据库图、甘特图、饼图、思维导图与时间线等类型;Graphviz 部分使用 DOT 语言生成有向图/无向图、层级图与树形图;另含柱状图、折线图、饼图等数据图表与自定义颜色主题配置。使用技巧包括 graph LR/TD 方向选择、保持节点标签简短、用子图分组、高清输出使用 -s 2 或 -s 3。card 提醒:生成的图表代码与渲染命令可能被改写为向项目目录写文件,运行前尤其是涉及输出路径时应审查。

资料发布于 2026-10-27

可以用来做什么

  • 为技术文档绘制流程图与时序图
  • 整理脑暴结果为思维导图
  • 绘制数据库 ER 图与架构图
  • 用 Graphviz 生成层级或树形结构图

什么时候用

  • 需要用 Mermaid/DOT 语法快速起草图表
  • 需要中文图表写作指引
  • 需要统一配色主题的图表输出

示例提示词

以下是根据技能文档生成的示例,不代表实际运行结果。

画一个用户登录的流程图(Mermaid)
把这段需求整理成思维导图
用 Graphviz 生成模块依赖的层级图

月度数据趋势

累计下载3,406
5232,0723,6202026-03 · 累计下载 7372026-05 · 累计下载 1,2702026-06 · 累计下载 1,5302026-07 · 累计下载 1,7932026-08 · 累计下载 2,2262026-09 · 累计下载 3,40626-0326-09
星标3
0232026-03 · 星标 -2026-05 · 星标 22026-06 · 星标 22026-07 · 星标 32026-08 · 星标 32026-09 · 星标 326-0326-09

2026-09 起统计方法调整:同名技能按作者分别统计,并覆盖全部技能。图中虚线为调整前的月份,与之后的数据不直接比较,也不计算跨越调整的增长。 该技能有同名的其他版本,调整前的数据归属当前下载量最大的这一个。

月份累计下载环比星标
2026-093,406—3
2026-082,226+24.1%3
2026-071,793+17.2%3
2026-061,530+20.5%2
2026-051,270—2
2026-03737—-

SKILL.md 原文

以下是作者发布的原始文件,按纯文本显示,本站未做修改或审核;其中的链接不可点击,命令请核实后再运行。抓取于 2026-10-23。

2.4 KB · ClawHub v1.0.2
---
name: diagram-tools
description: 图表工具技能 - 支持 Mermaid、Graphviz、流程图、思维导图等多种图表生成
version: 1.0.0
author: OpenClaw
tags: [diagram, chart, visualization, graph, mermaid, mindmap, flowchart]
category: productivity
homepage: https://github.com/openclaw/skills
---
展开全部(共 137 行)
# Diagram Tools 图表工具技能

强大的图表生成工具集,支持多种图表格式和渲染引擎。

## 适用场景

- 📊 流程图设计
- 🧠 思维导图
- 📈 数据可视化
- 🔄 架构图
- 📑 UML 图
- 📅 时间线图

## 核心功能

### 1. Mermaid 图表
使用 Mermaid 语法生成各类图表:
- Flowchart 流程图
- Sequence 时序图
- Class 类图
- State 状态图
- ER 数据库图
- Gantt 甘特图
- Pie 饼图
- Mindmap 思维导图
- Timeline 时间线

### 2. Graphviz 图表
使用 DOT 语言生成:
- 有向图/无向图
- 层级图
- 树形图

### 3. 数据图表
- 柱状图
- 折线图
- 饼图

## Mermaid 语法示例

### 流程图
```mermaid
graph TD
    A[开始] --> B{判断}
    B -->|是| C[处理1]
    B -->|否| D[处理2]
    C --> E[结束]
    D --> E
```

### 思维导图
```mermaid
mindmap
  root((主题))
    分支1
      子主题A
      子主题B
    分支2
      子主题C
```

### 时序图
```mermaid
sequenceDiagram
    A->>B: 消息1
    B->>A: 响应
```

## Graphviz 示例

```python
from graphviz import Digraph
dot = Digraph()
dot.node('A', '节点A')
dot.node('B', '节点B')
dot.edge('A', 'B')
dot.render('output', format='png')
```

## 支持的图表类型

| 类型 | Mermaid 语法 |
|------|-------------|
| 流程图 | `graph TD` / `graph LR` |
| 时序图 | `sequenceDiagram` |
| 类图 | `classDiagram` |
| 状态图 | `stateDiagram-v2` |
| ER图 | `erDiagram` |
| 甘特图 | `gantt` |
| 饼图 | `pie` |
| 思维导图 | `mindmap` |
| 时间线 | `timeline` |
| 四象限 | `quadrantChart` |

## 主题配置

自定义颜色主题:

```json
{
  "theme": "base",
  "themeVariables": {
    "primaryColor": "#1976d2",
    "lineColor": "#666666",
    "secondaryColor": "#4caf50"
  }
}
```

## 使用技巧

- 使用 `graph LR` 表示从左到右
- 使用 `graph TD` 表示从上到下
- 保持节点标签简短
- 使用子图分组相关组件
- 高清输出使用 `-s 2` 或 `-s 3`

## 相关技能

- `mermaid` - Mermaid 图表
- `markdown-tools` - Markdown 处理
- `meeting-notes` - Word 文档

## 更新日志

- v1.0.0 - 初始版本,整合 Mermaid 和 Graphviz

「设计创意」分类下的热门技能

Zsdadad 的其他技能

数据月份:2026-09 · 下载/星标/安装数聚合自公开技能注册库(ClawHub、SkillHub),按月更新。口径说明见数据方法。