陌讯skills聚合平台

diagram-prompter

📁 azure12355/weilan-skills 📅 13 days ago
2
总安装量
2
周安装量
#71092
全站排名
安装命令
npx skills add https://github.com/azure12355/weilan-skills --skill diagram-prompter

Agent 安装分布

openclaw 2
antigravity 2
claude-code 2
codex 2
windsurf 2
kimi-cli 2

Skill 文档

代码库图表提示词生成器

分析任意代码库的结构，生成适用于 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，继承关系从上到下

细节层次

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

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

最佳实践

  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，因为它语法简洁且广泛支持。

GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台
本页面由 陌讯 Skills 聚合平台 收录整理，数据定期更新。