What makes code-to-diagram notable?

2K downloads. Trust evidence available

How should code-to-diagram be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

agentCLAWHUBUnverified

code-to-diagram

分析源代码逻辑，生成 Mermaid 流程图或 SVG 架构图并渲染为 PNG 图片。官方 mermaid 渲染（与 Markdown 预览一致），支持 16 种主题、5 种视觉风格、语义图形体系和 40+ 产品图标。 Skill: code-to-diagram Owner: zhouchang1988 Summary: 分析源代码逻辑，生成 Mermaid 流程图或 SVG 架构图并渲染为 PNG 图片。官方 mermaid 渲染（与 Markdown 预览一致），支持 16 种主题、5 种视觉风格、语义图形体系和 40+ 产品图标。 Tags: latest:3.0.0 Version history: v3.0.0 | 2026-07-23T10:45:46.207Z | user Release v3.0.0 from GitHub at 2026-04-20 15:17 v2.2.2 | 2026-07-21T09:06:23.534Z | user Release v2.2.2 from GitHub at 2026-04-20 15:17 v2.2.1 | 2026-06-30T07:26:50.585Z | user Rele

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

2.0k

Updated

Oct 9, 2026

Version

3.0.0

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 2K downloads reported by the source. Last updated 10/9/2026.

Avoid when

Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor: Clawhubvendor · observed Oct 9, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 9, 2026
Adoption signal: 2K downloadsadoption · observed Oct 9, 2026
Latest release: 3.0.0release · observed Jul 23, 2026
Handshake status: UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s1720bd1njpgkfeygpnhevb7z184dag4:code-to-diagram

Setup complexity is classified as HIGH. You must provision dedicated cloud infrastructure or an isolated VM. Do not run this directly on your local workstation.
Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-zhouchang1988-code-to-diagram/snapshot"

Documentation

CLAWHUB

147,318 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
name: "code-to-diagram"
description: "分析源代码逻辑，生成 Mermaid 流程图或 SVG 架构图并渲染为 PNG 图片。官方 mermaid 渲染（与 Markdown 预览一致），支持 16 种主题、5 种视觉风格、语义图形体系和 40+ 产品图标。"
version: "3.0.0"
tags: ["diagram", "mermaid", "svg", "flowchart", "visualization", "code-analysis", "architecture", "mermaid-cli"]
bindShells: ["ClaudeCode"]
---

# Code-to-Diagram Skill

分析指定目录或文件的源代码，提取控制流 / 数据流逻辑，输出文件：

1. **Markdown 文档**（`.md`）：包含图表源码和代码逻辑解释文字
2. **渲染后的 PNG 图片**（高清，用户不需要图片时可跳过）

> Mermaid 路径中用于渲染的 `.mmd` 中间文件会在渲染完成后自动删除，最终只保留 `.md` 和 `.png`。

支持两种渲染引擎：

| 引擎 | 输入 | 渲染方式 | 适用场景 |
|------|------|----------|----------|
| **Mermaid**（默认） | `.mmd` | 官方 mermaid（mmdc）→ PNG | 流程图、时序图、类图、状态图、ER 图、XY 图，以及甘特图、思维导图、饼图等全部 mermaid 图表类型 |
| **SVG** | `.svg` | rsvg-convert → PNG | 架构图、AI 系统图、需要品牌图标或定制风格的图表 |

> Mermaid 引擎使用官方 mermaid 渲染器（mmdc / Mermaid CLI），PNG 与 GitHub、VS Code 等 Markdown 预览效果一致。
> 16 个内置主题通过 mermaid `themeVariables` 应用。

---

## 第一步 —— 读取并分析代码

使用 `Read`、`Glob`、`Grep` 工具理解代码结构，识别主要逻辑模式。

### 分析目标

从代码中提取以下信息，作为图表生成的素材：

| 提取内容 | 分析方法 | 对应图表 |
|---------|---------|---------|
| 函数调用链 / 执行路径 | Grep 函数名，追踪调用关系 | 流程图、时序图 |
| 类 / 接口 / 继承关系 | 搜索 `class`、`implements`、`extends`、`interface` | 类图 |
| 状态字段 / 状态机 | 搜索 `state`、`status`、`switch/case`、枚举定义 | 状态图 |
| HTTP / RPC 调用 | 搜索 `fetch`、`axios`、`http`、`grpc`、`request` | 时序图 |
| 数据库表 / ORM 模型 | 搜索 `CREATE TABLE`、`@Entity`、`schema`、`Model` | ER 图 |
| 模块划分 / 目录结构 | Glob 扫描目录，识别子系统边界 | 流程图（subgraph）、架构图 |
| API 路由 / 端点 | 搜索路由定义（`router`、`@Get`、`@Post`、`app.get`） | 时序图、流程图 |
| 配置 / 依赖关系 | 搜索 `import`、`require`、`dependency` | 流程图、类图 |

### 分析策略

- **单文件**：从入口函数开始，沿调用链向下追踪
- **多文件 / 多模块**：先 Glob 扫描目录结构，识别模块边界和入口文件，再逐模块分析核心逻辑
- **大型代码库**：优先分析入口文件（`main`、`index`、`app`），再按依赖方向向外扩展
- **不确定图表类型时**：先提取代码特征，再对照[图表类型表](#图表类型快速判断)选择

### 多文件 / 多模块处理

当分析涉及多个文件或模块时：

1. **先画架构全景**：用 `flowchart TB` + `subgraph` 或 SVG 架构图展示模块间关系，再对核心模块单独画详细图
2. **模块间用时序图**：跨模块调用链适合 `sequenceDiagram`，参与者对应模块/服务
3. **模块内用流程图**：单个模块的内部逻辑适合 `flowchart`
4. **合并策略**：如果多个文件逻辑紧密耦合，合并为一张图；如果松散耦合，分别生成独立图表
5. **命名规范**：多张图时用 `模块名-图表类型` 命名，如 `auth-sequence.png`、`order-flow.png`

---

## 第二步 —— 选择引擎

### 使用 Mermaid 引擎

- 标准流程图、时序图、类图、状态图、ER 图、XY 图表
- 用户未要求特定视觉风格
- 快速、美观的主题化图表

### 使用 SVG 引擎

- 架构图需要产品图标（OpenAI、AWS、PostgreSQL 等）
- AI/Agent 系统图需要语义图形（六边形 Agent、圆柱向量库等）
- 用户要求特定风格（dark-terminal、blueprint、glassmorphism 等）
- 需要精细布局控制

---

## 第三步 A —— Mermaid 路径

### 生成 Mermaid 源码

根据分析结果编写 Mermaid 图表源码。确定图表类型后，仅需了解对应语法即可，不需要加载所有类型。

| 代码特征 | 图表类型 | Mermaid 关键字 | 典型场景 |
|---------|---------|----------------|---------|
| `switch/case`、状态枚举、状态字段转换 | 状态图 | `stateDiagram-v2` | 订单状态流转、连接器生命周期 |
| `class`、`implements`、`extends`、字段和方法定义 | 类图 | `classDiagram` | 领域模型、SDK 结构 |
| 函数调用链、if/else 分支、循环 | 流程图 | `flowchart TD/LR/TB` | 算法逻辑、业务流程、请求处理 |
| HTTP/RPC 调用、跨模块交互、消息传递 | 时序图 | `sequenceDiagram` | API 调用链、微服务交互 |
| `CREATE TABLE`、ORM 模型、外键关系 | ER 图 | `erDiagram` | 数据库 schema、数据模型 |
| 多模块/多服务、目录结构分层 | 架构图 | `flowchart TB` + `subgraph` | 系统架构、微服务拓扑 |
| 甘特排期、任务依赖 | 甘特图 | `gantt` | 项目计划、迭代排期 |
| 占比数据、模

README.md

# code-to-diagram

分析源代码逻辑，生成 Mermaid 流程图或 SVG 架构图，并渲染为高清 PNG 图片。同时生成包含代码逻辑解释的 Markdown 文档。

## 功能特性

- **双引擎渲染**：Mermaid（官方 mmdc，与 Markdown 预览一致）+ SVG（rsvg-convert）
- **16 种 Mermaid 主题**：github-dark、tokyo-night、dracula、nord、catppuccin-mocha 等（映射为 themeVariables）
- **5 种 SVG 视觉风格**：Flat Icon、Dark Terminal、Blueprint、Notion Clean、Glassmorphism
- **语义图形体系**：六边形 Agent、圆柱数据库、双边框 LLM 等 12 种组件图形
- **40+ 产品图标**：OpenAI、Anthropic、PostgreSQL、Kafka、AWS 等
- **SVG 5 层自动验证**：XML 语法、标签平衡、属性引号、marker 引用、rsvg-convert 验证
- **官方渲染一致性**：PNG 与 GitHub / VS Code 的 mermaid 预览使用同一渲染器，样式一致

## 安装

### 前置要求

- Node.js 16+
- mmdc（Mermaid CLI，Mermaid 引擎必需）
- rsvg-convert（SVG 引擎必需，用于 SVG → PNG 转换）

```bash
# Mermaid CLI
npm install -g @mermaid-js/mermaid-cli

# librsvg（macOS）
brew install librsvg

# librsvg（Debian / Ubuntu）
apt-get install librsvg2-bin
```

### 安装 Skill

```bash
git clone https://github.com/zhouchang1988/code-to-diagram.git ~/.claude/skills/code-to-diagram
```

也可以克隆到任意目录后创建软链接：

```bash
git clone https://github.com/zhouchang1988/code-to-diagram.git ~/projects/code-to-diagram
ln -s ~/projects/code-to-diagram ~/.claude/skills/code-to-diagram
```

## 使用方法

### Mermaid 引擎

```bash
# 基本用法（默认 markdown-preview 主题）
node scripts/code_to_diagram.js render -f diagram.mmd -n output -o ./output

# 指定主题
node scripts/code_to_diagram.js render -f diagram.mmd -t tokyo-night -n output -o ./output

# 直接传入 Mermaid 源码
node scripts/code_to_diagram.js render -c 'flowchart LR\n    A --> B' -t dracula -n output

# 透明背景
node scripts/code_to_diagram.js render -f diagram.mmd --transparent -n output

# 自定义背景色
node scripts/code_to_diagram.js render -f diagram.mmd --bg "#1a1b26" -n output
```

### SVG 引擎

```bash
# 暗色终端风格
node scripts/code_to_diagram.js render -e svg -f arch.svg --style dark-terminal -n output

# Notion 简洁风格
node scripts/code_to_diagram.js render -e svg -f arch.svg --style notion-clean -n output
```

### 命令行参数

| 参数 | 简写 | 说明 | 默认值 |
|------|------|------|--------|
| `--file` | `-f` | 输入文件（.mmd 或 .svg） | — |
| `--content` | `-c` | Mermaid 源码字符串 | — |
| `--name` | `-n` | 输出文件基础名 | diagram |
| `--output-dir` | `-o` | 输出目录 | 当前目录 |
| `--engine` | `-e` | mermaid \| svg | mermaid |
| `--theme` | `-t` | 16 个内置主题 | markdown-preview |
| `--style` | — | SVG 风格（5 种） | flat-icon |
| `--transparent` | — | 透明背景 | — |
| `--bg` | `-b` | 自定义背景色 | — |
| `--font` | — | 自定义字体 | 系统中文字体 |
| `--width` | `-W` | 画布宽度（px） | 2400 |
| `--height` | `-H` | 画布高度（px） | 4000 |
| `--scale` | `-s` | 缩放系数 | 3 |

### 可用主题

**暗色：** github-dark · tokyo-night · tokyo-night-storm · catppuccin-mocha · nord · dracula · one-dark · solarized-dark · zinc-dark

**亮色：** github-light · tokyo-night-light · catppuccin-latte · nord-light · solarized-light · zinc-light · markdown-preview

## 支持的图表类型

| 代码模式 | 推荐图表类型 | 引擎 |
|---------|-------------|------|
| 状态机 / 工作流 | `flowchart TD` / `stateDiagram-v2` | Mermaid |
| 类继承关系 | `classDiagram` | Mermaid |
| 接口 / 消息传递 | `sequenceDiagram` | Mermaid |
| 实体关系 | `erDiagram` | Mermai

_meta.json

{
  "ownerId": "kn7a799d479xj5aftb4bqm6ea984cv4m",
  "slug": "code-to-diagram",
  "version": "3.0.0",
  "publishedAt": 1784803546207
}

references/icons.md

# 图标参考：语义图形 + 箭头体系 + 产品图标库

---

## A. 语义图形库

通用图形词汇表。每种形状对应固定含义，确保不同图表间的视觉一致性。
所有代码片段中 `{cx}`、`{cy}` 表示节点中心坐标，根据实际布局替换。

### 1. LLM / 模型（双边框圆角矩形 + 闪电）

标识 AI 大语言模型节点。双边框表示"智能"组件。

```xml
<rect x="{x}" y="{y}" width="{w}" height="{h}" rx="10"
      fill="{fill}" stroke="{stroke-outer}" stroke-width="2.5"/>
<rect x="{x+3}" y="{y+3}" width="{w-6}" height="{h-6}" rx="8"
      fill="none" stroke="{stroke-inner}" stroke-width="0.8" opacity="0.5"/>
<text x="{cx}" y="{cy-6}" text-anchor="middle" font-size="14">⚡</text>
<text x="{cx}" y="{cy+10}" text-anchor="middle" fill="{text-color}"
      font-size="13" font-weight="600">{模型名称}</text>
```

### 2. Agent / 编排器（六边形）

标识自主代理或编排器组件。外接圆半径 `r` 推荐 36。

```xml
<polygon points="{cx},{cy-r} {cx+r*0.866},{cy-r*0.5} {cx+r*0.866},{cy+r*0.5} {cx},{cy+r} {cx-r*0.866},{cy+r*0.5} {cx-r*0.866},{cy-r*0.5}"
         fill="{fill}" stroke="{stroke}" stroke-width="1.5"/>
<text x="{cx}" y="{cy+5}" text-anchor="middle" fill="{text}"
      font-size="12" font-weight="600">{Agent 名称}</text>
```

r=36 时关键坐标：`r*0.866 ≈ 31.2`, `r*0.5 = 18`

### 3. 向量数据库（圆柱体 + 内环）

标识向量存储。内环线条表示数据分区，可选（无内环则为普通数据库）。

```xml
<ellipse cx="{cx}" cy="{top}" rx="{w/2}" ry="{w/6}"
         fill="{fill}" stroke="{stroke}" stroke-width="1.5"/>
<rect x="{cx-w/2}" y="{top}" width="{w}" height="{h}"
      fill="{fill}" stroke="none"/>
<line x1="{cx-w/2}" y1="{top}" x2="{cx-w/2}" y2="{top+h}"
      stroke="{stroke}" stroke-width="1.5"/>
<line x1="{cx+w/2}" y1="{top}" x2="{cx+w/2}" y2="{top+h}"
      stroke="{stroke}" stroke-width="1.5"/>
<!-- 内环（向量数据库专用） -->
<ellipse cx="{cx}" cy="{top+h*0.33}" rx="{w/2}" ry="{w/6}"
         fill="none" stroke="{stroke}" stroke-width="0.7" opacity="0.5"/>
<ellipse cx="{cx}" cy="{top+h*0.66}" rx="{w/2}" ry="{w/6}"
         fill="none" stroke="{stroke}" stroke-width="0.7" opacity="0.5"/>
<!-- 底部椭圆 -->
<ellipse cx="{cx}" cy="{top+h}" rx="{w/2}" ry="{w/6}"
         fill="{fill-dark}" stroke="{stroke}" stroke-width="1.5"/>
<text x="{cx}" y="{top+h*0.5+5}" text-anchor="middle" fill="{text}"
      font-size="11" font-weight="700">{名称}</text>
```

推荐尺寸：w=80, h=70

### 4. 工具 / 函数调用（矩形 + 齿轮）

```xml
<rect x="{x}" y="{y}" width="{w}" height="{h}" rx="6"
      fill="{fill}" stroke="{stroke}" stroke-width="1.5"/>
<text x="{cx}" y="{cy-4}" text-anchor="middle" font-size="16">⚙</text>
<text x="{cx}" y="{cy+12}" text-anchor="middle" fill="{text}"
      font-size="12">{工具名称}</text>
```

### 5. 决策点（菱形）

```xml
<polygon points="{cx},{cy-hh} {cx+hw},{cy} {cx},{cy+hh} {cx-hw},{cy}"
         fill="{fill}" stroke="{stroke}" stroke-width="1.5"/>
<text x="{cx}" y="{cy+5}" text-anchor="middle" fill="{text}"
      font-size="12">{条件?}</text>
```

推荐 hw=50, hh=35

### 6. 用户 / 人类（圆形头 + 身体）

```xml
<circle cx="{cx}" cy="{cy-18}" r="10"
        fill="{fill}" stroke="{stroke}" stroke-width="1.2"/>
<path d="M {cx-14},{cy+16} Q {cx-14},{cy-4} {cx},{cy-4} Q {cx+14},{cy-4} {cx+14},{cy+16}"
      fill="{fill}" stroke="{stroke}" stroke-width="1.2"/>
<text x="{cx}"

references/style-1-flat-icon.md

# Style 1: Flat Icon（默认）

灵感来源于 draw.io 默认风格和 Apple 文档美学。白底、清晰、专业，适合文档、博客和演示文稿。

---

## 颜色系统

| 用途 | 色值 | 说明 |
|------|------|------|
| 背景 | `#ffffff` | 纯白 |
| 面板填充 | `#ffffff` | 白色 |
| 面板描边 | `#d1d5db` | gray-300 |
| 主文字 | `#111827` | gray-900 |
| 副文字 | `#6b7280` | gray-500 |

### 语义箭头色

| 流类型 | 色值 | 说明 |
|--------|------|------|
| 主数据流 | `#2563eb` | blue-600 |
| 错误/备选路径 | `#dc2626` | red-600 |
| 数据存储/成功 | `#16a34a` | green-600 |
| 异步/事件 | `#9333ea` | purple-600 |

### 图标强调色（浅色/深色对）

| 颜色 | 浅色底 | 深色底 |
|------|--------|--------|
| 蓝色 | `#eff6ff` | `#dbeafe` |
| 红色 | `#fef2f2` | `#fee2e2` |
| 绿色 | `#f0fdf4` | `#dcfce7` |
| 紫色 | `#faf5ff` | `#ede9fe` |
| 橙色 | `#fff7ed` | `#fed7aa` |
| 青色 | `#f0fdfa` | `#ccfbf1` |

---

## 字体

```
font-family: 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', sans-serif;
```

| 用途 | 大小 | 字重 |
|------|------|------|
| 标签 | 14px | 400 |
| 副标签 | 12px | 400 |
| 标题 | 16px | 600 |

---

## 节点样式

### 标准节点

```xml
<rect x="{x}" y="{y}" width="{w}" height="{h}" rx="8" ry="8"
      fill="#ffffff" stroke="#d1d5db" stroke-width="1.5"/>
```

### 强调节点（带色底）

```xml
<rect x="{x}" y="{y}" width="{w}" height="{h}" rx="8" ry="8"
      fill="#eff6ff" stroke="#bfdbfe" stroke-width="1.5"/>
```

### 圆角半径

所有矩形节点：`rx="8"` `ry="8"`

---

## 箭头标记

在 `<defs>` 中为每种颜色定义 marker：

```xml
<defs>
  <marker id="arrow-blue" markerWidth="10" markerHeight="7"
          refX="9" refY="3.5" orient="auto">
    <polygon points="0 0, 10 3.5, 0 7" fill="#2563eb"/>
  </marker>
  <marker id="arrow-red" markerWidth="10" markerHeight="7"
          refX="9" refY="3.5" orient="auto">
    <polygon points="0 0, 10 3.5, 0 7" fill="#dc2626"/>
  </marker>
  <marker id="arrow-green" markerWidth="10" markerHeight="7"
          refX="9" refY="3.5" orient="auto">
    <polygon points="0 0, 10 3.5, 0 7" fill="#16a34a"/>
  </marker>
  <marker id="arrow-purple" markerWidth="10" markerHeight="7"
          refX="9" refY="3.5" orient="auto">
    <polygon points="0 0, 10 3.5, 0 7" fill="#9333ea"/>
  </marker>
</defs>
```

连线示例：

```xml
<line x1="100" y1="50" x2="300" y2="50"
      stroke="#2563eb" stroke-width="1.5"
      marker-end="url(#arrow-blue)"/>
```

---

## 图例

当使用 2 种以上箭头颜色时，必须在左下角添加图例：

```xml
<g transform="translate(20, 540)">
  <text x="0" y="0" fill="#111827" font-size="12" font-weight="600">图例</text>
  <line x1="0" y1="14" x2="30" y2="14" stroke="#2563eb" stroke-width="1.5" marker-end="url(#arrow-blue)"/>
  <text x="36" y="18" fill="#6b7280" font-size="12">主数据流</text>
  <line x1="0" y1="30" x2="30" y2="30" stroke="#dc2626" stroke-width="1.5" marker-end="url(#arrow-red)"/>
  <text x="36" y="34" fill="#6b7280" font-size="12">错误/备选</text>
  <line x1="0" y1="46" x2="30" y2="46" stroke="#16a34a" stroke-width="1.5" marker-end="url(#arrow-green)"/>
  <text x="36" y="50" fill="#6b7280" font-size="12">数据写入</text>
  <line x1="0" y1="62" x2="30" y2="62" stroke="#9333ea" stroke-width="1.5" marker-end="url(#arrow-purple)"/>

Github ReposUpdated 5h agoRank 70

AionUi

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

MCPOPENCLAW

Github ReposUpdated 6mo agoRank 70

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

OPENCLAW

Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.