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
累計下載
3406
星標
3
全站排名
#3,287
全站前 65% · 「設計創意」前 60%
平台累計安裝累計下載星標評論
ClawHub ↗5821271-
SkillHub ↗28634063—

各平台的計數口徑不同,統計時間不一致。

這個技能是做什麼的

強大的圖表生成工具集,支援多種圖表格式和渲染引擎。Mermaid 部分覆蓋流程圖、時序圖、類圖、狀態圖、ER 資料庫圖、甘特圖、餅圖、思維導圖與時間線等型別;Graphviz 部分使用 DOT 語言生成有向圖/無向圖、層級圖與樹形圖;另含柱狀圖、折線圖、餅圖等資料圖表與自定義顏色主題配置。使用技巧包括 graph LR/TD 方向選擇、保持節點標籤簡短、用子圖分組、高畫質輸出使用 -s 2 或 -s 3。card 提醒:生成的圖表程式碼與渲染命令可能被改寫為向專案目錄寫檔案,執行前尤其是涉及輸出路徑時應審查。

資料釋出於 2026-10-27

可以用來做什麼

  • 為技術文件繪製流程圖與時序圖
  • 整理腦暴結果為思維導圖
  • 繪製資料庫 ER 圖與架構圖
  • 用 Graphviz 生成層級或樹形結構圖

什麼時候用

  • 需要用 Mermaid/DOT 語法快速起草圖表
  • 需要中文圖表寫作指引
  • 需要統一配色主題的圖表輸出

示例提示詞

以下是根據技能文件生成的示例,不代表實際執行結果。

畫一個使用者登入的流程圖(Mermaid)
把這段需求整理成思維導圖
用 Graphviz 生成模組依賴的層級圖

月度資料趨勢

累計下載3406
523207236202026-03 · 累計下載 7372026-05 · 累計下載 12702026-06 · 累計下載 15302026-07 · 累計下載 17932026-08 · 累計下載 22262026-09 · 累計下載 340626-0326-09
星標3
0232026-03 · 星標 -2026-05 · 星標 22026-06 · 星標 22026-07 · 星標 32026-08 · 星標 32026-09 · 星標 326-0326-09

2026-09 起統計方法調整:同名技能按作者分別統計,並覆蓋全部技能。圖中虛線為調整前的月份,與之後的資料不直接比較,也不計算跨越調整的增長。 該技能有同名的其他版本,調整前的資料歸屬當前下載量最大的這一個。

月份累計下載環比星標
2026-093406—3
2026-082226+24.1%3
2026-071793+17.2%3
2026-061530+20.5%2
2026-051270—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),按月更新。口徑說明見資料方法。