diagram-prompter
SKILL.md
代码库图表提示词生成器
分析任意代码库的结构,生成适用于 AI 绘图模型的提示词,用于创建各种技术架构图表。
工作流程
第一步:收集代码库信息
首先需要了解代码库的基本结构:
# 查看目录结构
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,继承关系从上到下
细节层次
- 高层概览:只展示主要模块和核心关系
- 中层设计:展示主要接口和数据结构
- 底层实现:展示详细类和方法
根据用户需求选择合适的细节层次。
最佳实践
- 先理解再生成:分析代码库结构,理解核心逻辑
- 渐进式展示:从高层架构到低层细节,分步生成
- 标注清晰:每个组件、关系都应有明确标注
- 保持简洁:避免过度复杂,聚焦核心信息
- 使用标准语法:使用广泛支持的 Mermaid/PlantUML 语法
- 可编辑性:生成的提示词应易于后续调整
示例输出
示例 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,因为它语法简洁且广泛支持。
Weekly Installs
3
Repository
azure12355/weilan-skillsGitHub Stars
1
First Seen
Feb 16, 2026
Security Audits
Installed on
opencode3
antigravity3
claude-code3
codex3
openclaw3
kimi-cli3