# Diagram Prompter

> 分析代码库结构并生成各种架构图、流程图、时序图等的 AI 绘图提示词。使用场景：当用户需要为任何代码项目生成可视化图表时，包括系统架构图、模块依赖关系、数据流图、时序图、状态机图、部署架构图等。支持多种图表类型如 Mermaid、PlantUML、C4 模型、UML 类图、ER 图等。适用于技术文档编写、架构设计、代码评审、学习理解新项目等场景。

- Skill: `azure12355/diagram-prompter` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add azure12355/diagram-prompter`
- Raw SKILL.md: https://api.skillmd.com/api/skills/azure12355/diagram-prompter/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: azure12355 (https://skillmd.com/u/azure12355)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/azure12355/diagram-prompter

---


# 代码库图表提示词生成器

分析任意代码库的结构，生成适用于 AI 绘图模型的提示词，用于创建各种技术架构图表。

## 工作流程

### 第一步：收集代码库信息

首先需要了解代码库的基本结构：

```bash
# 查看目录结构
find . -type f -name "*.py" -o -name "*.ts" -o -name "*.tsx" -o -name "*.js" -o -name "*.go" -o -name "*.java" | head -50

# 查看项目配置文件
cat package.json 2>/dev/null || cat pyproject.toml 2>/dev/null || cat go.mod 2>/dev/null || cat pom.xml 2>/dev/null

# 查看目录树
tree -L 3 -I 'node_modules|__pycache__|.next|.git|dist|build' --dirsfirst
```

### 第二步：分析代码结构

根据项目类型选择分析策略：

**Python 项目**：分析 `*.py` 文件、`pyproject.toml`、`requirements.txt`

**JavaScript/TypeScript**：分析 `src/` 目录、`package.json`、`tsconfig.json`

**Go 项目**：分析 `go.mod`、`internal/`、`pkg/` 目录结构

**Java 项目**：分析 `pom.xml`、`src/main/java/` 结构

**多语言项目**：分别分析各语言目录

### 第三步：选择图表类型

根据用户需求选择合适的图表类型：

| 图表类型 | 适用场景 | 推荐语法 |
|---------|---------|----------|
| 系统架构图 | 整体系统结构、模块划分 | Mermaid graph |
| 组件依赖图 | 模块间依赖关系 | Mermaid graph |
| 数据流图 | 数据在系统中的流动 | Mermaid flowchart |
| 时序图 | 组件间交互顺序 | Mermaid sequence |
| 类图 | 类/接口结构关系 | Mermaid class / PlantUML |
| 状态机图 | 状态转换逻辑 | Mermaid state |
| 部署图 | 部署架构、容器编排 | Mermaid |
| ER 图 | 数据库表关系 | Mermaid erDiagram |

### 第四步：生成提示词模板

根据分析结果和选择的图表类型，生成结构化的提示词。

## 提示词生成模板

### 系统架构图提示词

```
请为以下代码项目生成一个系统架构图的 Mermaid 提示词：

项目名称：[项目名]
项目类型：[Web应用/后端API/桌面应用/移动应用/微服务]
主要功能：[核心功能描述]

技术栈：
- 前端：[框架、语言]
- 后端：[框架、语言]
- 数据库：[类型]
- 中间件：[消息队列、缓存等]
- 外部服务：[第三方API]

核心模块：
1. [模块A] - 功能描述
2. [模块B] - 功能描述
3. [模块C] - 功能描述

请生成一个清晰的系统架构图 Mermaid 提示词，要求：
- 使用 graph LR（从左到右）或 graph TB（从上到下）布局
- 按层级展示主要组件
- 用不同颜色区分前端/后端/数据库/外部服务
- 标注主要数据流向
- 样式专业、配色协调
```

### 数据流图提示词

```
请为以下数据流生成 Mermaid flowchart 提示词：

数据流起点：[数据来源]
数据流终点：[最终输出/展示]

处理步骤：
1. [步骤1] - [处理说明]
2. [步骤2] - [处理说明]
3. [步骤3] - [处理说明]

关键数据实体：
- [实体1]：[字段说明]
- [实体2]：[字段说明]

请生成一个数据流图 Mermaid 提示词，要求：
- 使用 flowchart TD（从上到下）或 LR（从左到右）
- 清晰标注每个处理步骤
- 用不同形状区分操作/决策/数据
- 标注关键数据转换
- 添加错误处理分支（如有）
```

### 时序图提示词

```
请为以下交互流程生成 Mermaid sequence diagram 提示词：

参与者：
1. [角色A] - [职责描述]
2. [角色B] - [职责描述]
3. [角色C] - [职责描述]

交互流程：
1. [角色A] → [角色B]：[操作1，包含参数]
2. [角色B] → [角色C]：[操作2]
3. [角色C] → [角色A]：[返回结果]

异步操作：
- [异步操作1]：超时时间、重试策略
- [异步操作2]：超时时间、重试策略

请生成一个时序图 Mermaid 提示词，要求：
- 明确定义所有参与者
- 按时间顺序展示交互
- 标注请求/响应参数
- 处理异步调用和超时
- 使用 box 声明循环或可选操作
```

### 类图提示词

```
请为以下代码结构生成 Mermaid class diagram 提示词：

核心类/接口：
1. [类A] - 属性：[属性列表]，方法：[方法列表]
2. [类B] - 属性：[属性列表]，方法：[方法列表]
3. [类C] - 属性：[属性列表]，方法：[方法列表]

关系：
- [类A] → [类B]：[关系类型，如继承、依赖、关联]
- [类B] ← [类C]：[关系类型]

设计模式：
- 使用的设计模式：[如单例、工厂、观察者等]

请生成一个类图 Mermaid 提示词，要求：
- 使用 class diagram 语法
- 明确标注类名、属性、方法
- 标注可见性（public/private/protected）
- 展示继承、实现、依赖、关联关系
- 标注基数和多重度
```

### 状态机图提示词

```
请为以下状态逻辑生成 Mermaid state diagram 提示词：

系统/模块：[名称]
状态列表：
- [状态1]：[状态描述]
- [状态2]：[状态描述]
- [状态3]：[状态描述]

转换条件：
- [状态1] → [状态2]：触发事件、条件
- [状态2] → [状态3]：触发事件、条件
- [状态3] → [状态1]：触发事件、条件

初始状态：[状态名]
终止状态：[状态名，如有]

请生成一个状态机图 Mermaid 提示词，要求：
- 使用 stateDiagram-v2 语法
- 明确标注所有状态
- 标注状态转换条件和事件
- 处理并发状态
- 标注复合状态（如有）
```

### 部署架构图提示词

```
请为以下部署架构生成 Mermaid 提示词：

部署环境：[开发/测试/生产环境]
基础设施：[云服务商、区域]

容器/服务：
1. [服务1] - [资源配置、端口、环境变量]
2. [服务2] - [资源配置、端口、环境变量]
3. [服务3] - [资源配置、端口、环境变量]

数据存储：
- [数据库1]：[类型、版本、存储大小]
- [缓存]：[类型、容量]
- [对象存储]：[桶名、用途]

网络：
- [负载均衡器]：[算法、健康检查]
- [网关/代理]：[类型、配置]

外部依赖：
- [第三方API1]：[用途、认证方式]
- [第三方API2]：[用途、认证方式]

请生成一个部署架构图 Mermaid 提示词，要求：
- 使用 graph 或 subgraph 组织层次
- 标注服务和端口
- 展示网络连接关系
- 标注数据持久化策略
- 用不同图标或颜色区分服务类型
```

### C4 模型图提示词

```
请为以下系统生成 C4 模型图的 Mermaid 提示词（使用 Structurizr 扩展）：

系统上下文 - System Context：
- 系统：[系统名称]
- 用户：[用户类型1、用户类型2]
- 外部系统：[外部系统1、外部2]

容器 - Container：
- [应用容器]：[技术栈、职责]
- [数据库容器]：[类型、版本]
- [缓存容器]：[类型、容量]
- [消息队列]：[类型、用途]

组件 - Component：
- [组件列表及其职责]

请生成 C4 模型图提示词，要求：
- 从 Context 到 Container 到 Component 逐层展开
- 明确标注容器和组件的职责
- 展示容器间的通信方式
- 使用 Structurizr 语法
```

## 通用提示词框架

### 框架模板

```
请为一个[图表类型]生成 AI 绘图提示词，使用 [Mermaid/PlantUML/其他] 语法：

# 项目概述
- 项目名称：
- 项目类型：
- 核心功能：

# 图表要求
- 图表类型：[具体类型，如架构图/流程图/时序图等]
- 展示重点：[如模块关系、数据流向、交互顺序等]
- 风格要求：[如配色方案、布局方向、详细程度等]

# 技术信息
- 编程语言：
- 框架/库：
- 主要模块：
- 外部依赖：

# 输出格式
请生成一个可直接复制给 AI 的提示词，该提示词应包含：
1. 图表类型和语法
2. 所有必要的组件和关系
3. 清晰的结构和布局说明
4. 样式和美化要求

提示词应该是中文的，结构清晰，可以直接让 AI 生成高质量的可读图表。
```

## 图表类型选择指南

| 用户需求 | 推荐图表类型 | 语法 |
|---------|-------------|------|
| "系统整体结构" | 系统架构图 | Mermaid graph |
| "模块怎么依赖" | 组件依赖图 | Mermaid graph |
| "数据怎么流动" | 数据流图 | Mermaid flowchart |
| "A 怎么调用 B" | 时序图 | Mermaid sequence |
| "类之间的关系" | 类图 | Mermaid class / PlantUML |
| "状态怎么变化" | 状态机图 | Mermaid stateDiagram-v2 |
| "怎么部署的" | 部署架构图 | Mermaid + subgraph |
| "数据库表关系" | ER 图 | Mermaid erDiagram |
| "分层架构" | C4 模型 | Mermaid + Structurizr |

## 样式和美化建议

### 配色方案

推荐使用专业配色：
- 前端组件：蓝色系 (#3B82F6, #60A5FA)
- 后端服务：绿色系 (#10B981, #34D399)
- 数据库：橙色系 (#F59E0B, #FBBF24)
- 外部服务：紫色系 (#8B5CF6, #A78BFA)
- 数据流：灰色系 (#64748B, #94A3B8)

### 布局建议

- **架构图**：使用 `graph TB`（从上到下）展示层级
- **流程图**：使用 `flowchart TD` 或 `LR`，根据流程方向选择
- **时序图**：按时间从左到右排列参与者
- **类图**：使用 `classDiagram`，继承关系从上到下

### 细节层次

- **高层概览**：只展示主要模块和核心关系
- **中层设计**：展示主要接口和数据结构
- **底层实现**：展示详细类和方法

根据用户需求选择合适的细节层次。

## 最佳实践

1. **先理解再生成**：分析代码库结构，理解核心逻辑
2. **渐进式展示**：从高层架构到低层细节，分步生成
3. **标注清晰**：每个组件、关系都应有明确标注
4. **保持简洁**：避免过度复杂，聚焦核心信息
5. **使用标准语法**：使用广泛支持的 Mermaid/PlantUML 语法
6. **可编辑性**：生成的提示词应易于后续调整

## 示例输出

### 示例 1：Web 应用架构图提示词

```
请为以下 Next.js + FastAPI Web 应用生成系统架构图的 Mermaid 提示词：

项目：个人博客系统
前端：Next.js 14 + TypeScript + Tailwind CSS
后端：FastAPI + Python 3.11 + SQLAlchemy
数据库：PostgreSQL + Redis

主要功能：
- 文章列表和详情页
- 用户认证和授权
- 评论系统
- 文章搜索

请生成一个架构图提示词：
- graph TB 布局
- 三个主层级：用户界面 → 前端 → 后端 → 数据
- 标注所有组件及其关系
- 使用专业配色方案
```

### 示例 2：API 时序图提示词

```
请为用户登录流程生成时序图的 Mermaid 提示词：

参与者：
- 用户（浏览器）
- 前端（React 应用）
- 后端 API（/api/auth/login）
- 数据库（users 表）

流程：
1. 用户输入用户名密码
2. 前端调用 POST /api/auth/login
3. 后端验证数据库
4. 返回 JWT Token
5. 前端存储 Token

请生成 sequence diagram 提示词，包含所有必要的参数标注。
```

## 支持的图表语法

- **Mermaid**：最通用，支持架构图、流程图、时序图、类图、状态图、ER 图、甘特图、思维导图等
- **PlantUML**：更专业的 UML 支持，适合复杂的类图和用例图
- **Structurizr**：专门用于 C4 软件架构模型
- **Graphviz (DOT)**：最灵活的图形描述语言

默认推荐 Mermaid，因为它语法简洁且广泛支持。