archy

Archy - 建筑图表生成器

Archy 是一个 MCP（模型上下文协议）服务器，使用 Mermaid 语法生成架构图。它可以处理自然语言描述和 GitHub 仓库 URL，从而创建各种类型的图表。

特征

• 根据文本描述生成图表
• 从 GitHub 存储库生成图表
• 支持所有美人鱼图类型：
  • 流程图
  • 序列图
  • 类图
  • 状态图
  • 实体关系图
  • 用户旅程
  • 甘特图
  • 饼图
  • 象限图
  • 需求图
  • Git 图表
  • C4 图表

安装

先决条件

• Node.js（v16 或更高版本）
• npm（v7 或更高版本）
• TypeScript（v5.8 或更高版本，包含在依赖项中）

从源安装

1. 克隆存储库：
   git clone https://github.com/phxdev1/archy.git cd archy
2. 安装依赖项：
   npm install
3. 构建项目：
   npm run build
   这会将 TypeScript 源文件编译为build目录中的 JavaScript。

自动化 MCP 安装

Archy 包含一个方便的安装脚本，可以自动为 VS Code 和 Claude 配置 MCP 服务器：

此脚本：

• 自动检测您的操作系统的正确 MCP 设置位置
• 更新 VS Code 和 Claude 的 MCP 配置文件
• 提示输入 GitHub 令牌以进行存储库分析（可选）
• 使服务器可执行

无需像穴居动物那样手动编辑 JSON 配置文件！脚本会帮您处理所有繁琐的配置工作，让您可以专注于创建精美的图表，而无需费心处理文件路径和权限问题。

配置

配置

Archy 可以使用环境变量进行配置：

• GITHUB_TOKEN ：用于经过身份验证的请求的 GitHub API 令牌（可选）
• OPENROUTER_API_KEY ：用于 AI 驱动图表生成的 OpenRouter API 密钥（可选）

OpenRouter 集成

Archy 通过 LangChain 与 OpenRouter 集成，从而增强了 AI 驱动的图表生成功能。配置 OpenRouter API 密钥后，即可使用其他工具：

• 人工智能增强的文本到图表生成：从文本描述生成更复杂的图表
• 代码到图表生成：分析代码并生成适当的图表
• 差异可视化：生成显示代码版本之间差异的图表

要使用这些功能：

1. 在OpenRouter注册一个帐户
2. 从 OpenRouter 仪表板获取您的 API 密钥
3. 在运行 Archy 之前设置OPENROUTER_API_KEY环境变量

图像导出

Archy 支持将美人鱼图导出为各种图像格式：

• PNG ：适用于网络和文档的光栅图像格式
• SVG ：矢量图像格式，可缩放且不损失质量
• PDF ：适合打印和共享的文档格式

可以导出具有可自定义尺寸和背景颜色的图像。

存储库演进跟踪

Archy 可以分析 Git 存储库以跟踪其随时间的演变：

• 内存 Git ：无需写入文件系统即可克隆和分析存储库
• 提交历史记录：跟踪多个提交的更改（默认情况下限制为 10 个）
• 文件演变：跟踪特定文件随时间的变化
• 演化可视化：生成显示存储库演化的图表

MCP 集成

要将 Archy 与 MCP 客户端一起使用，如果您是受虐狂，请将其添加到您的 MCP 设置文件中：

可用工具

从文本生成图表

根据文本描述生成美人鱼图。

参数：

• description ：要生成的图表的文本描述
• diagramType ：要生成的图表类型（例如“流程图”、“classDiagram”等）

例子：

从 github 生成图表

从 GitHub 存储库生成美人鱼图。

参数：

• repoUrl ：GitHub 存储库的 URL
• diagramType ：要生成的图表类型（例如，“classDiagram”、“sequenceDiagram”等）

例子：

列出支持的图表类型

列出所有支持的图表类型并附带说明。

**参数：**无

人工智能工具

配置 OpenRouter API 密钥后，可以使用以下工具：

使用 AI 从文本生成图表

使用 AI（带有 OpenRouter 的 LangChain）根据文本描述生成美人鱼图。

参数：

• description ：要生成的图表的文本描述
• diagramType ：要生成的图表类型（例如“流程图”、“classDiagram”等）
• useAdvancedModel ：（可选）是否对复杂图表使用更高级的 AI 模型

例子：

从代码生成图表

使用人工智能从代码生成美人鱼图。

参数：

• code ：用于分析并生成图表的代码
• diagramType ：要生成的图表类型（例如，“classDiagram”、“flowchart”等）

例子：

生成差异图

生成美人鱼图，显示两个版本代码之间的差异。

参数：

• beforeCode ：更改之前的代码
• afterCode ：更改后的代码
• diagramType ：要生成的图表类型（例如，“classDiagram”、“flowchart”等）

例子：

将图表导出到图像

将美人鱼图导出为图像格式（PNG、SVG 或 PDF）。

参数：

• mermaidCode ：要导出的美人鱼图代码
• format ：（可选）要导出的图像格式（'png'，'svg'，'pdf'，默认值：'png'）
• width ：（可选）图像的宽度（以像素为单位）（默认值：800）
• height ：（可选）图像的高度（以像素为单位）（默认值：600）
• backgroundColor ：（可选）图像的背景颜色（CSS 颜色或“透明”，默认值：'#ffffff'）

例子：

生成存储库演化图

生成一个图表来显示存储库随时间的变化。

参数：

• repoUrl ：GitHub 存储库的 URL
• diagramType ：要生成的图表类型（例如“gitGraph”、“flowchart”等）
• filepath ：（可选）要跟踪的特定文件的路径
• commitLimit ：（可选）要分析的最大提交次数（默认值：10）

例子：

示例

从文本生成类图

结果：

从 GitHub 生成流程图

结果：

发展

以开发模式运行

要在开发模式下运行服务器并自动重新加载：

这使用nodemon和ts-node直接运行 TypeScript 代码，无需单独的构建步骤，并在文件更改时自动重新启动。

运行 TypeScript 编译器

您可以使用以下方法直接运行 TypeScript 编译器：

使用本地安装的 TypeScript

使用全局安装的 TypeScript

如果您全局安装了 TypeScript：

常见的 TypeScript 编译器选项

• --outDir <directory> ：指定编译文件的输出目录
• --target <ES version> ：指定 ECMAScript 目标版本（例如 ES2020）
• --module <module system> ：指定模块系统（例如，NodeNext）
• --declaration ：生成 .d.ts 声明文件
• --sourceMap ：生成用于调试的源映射文件
• --strict ：启用所有严格类型检查选项
• --noEmit ：检查错误而不生成输出文件
• --noImplicitAny ：对隐含“任何”类型的表达式引发错误

有关编译器选项的完整列表，请运行npx tsc --help或参阅TypeScript 文档。

TypeScript 配置

Archy 使用 TypeScript 构建，使用以下配置：

使用的关键 TypeScript 功能：

• ES2020 现代 JavaScript 功能的目标
• NodeNext 模块解析与 Node.js 的兼容性
• 生成声明文件以获得更好的类型支持
• 源映射，更易于调试

项目结构

• src/ ：TypeScript 源文件
  • src/index.ts ：主入口点和服务器实现
  • src/server.ts ：服务器实现
  • src/generators/ ：图表生成逻辑
  • src/utils/ ：实用程序函数和助手
• build/ ：编译后的 JavaScript 输出
• examples/ ：示例使用脚本
• test/ ：测试文件