Archy - Generador de diagramas arquitectónicos

Archy es un servidor MCP (Protocolo de Contexto de Modelo) que genera diagramas arquitectónicos utilizando la sintaxis Mermaid. Puede procesar tanto descripciones en lenguaje natural como URLs de repositorios de GitHub para crear diversos tipos de diagramas.

Características

• Generar diagramas a partir de descripciones de texto

• Generar diagramas desde repositorios de GitHub

• Compatibilidad con todos los tipos de diagramas de sirena:

  • Diagramas de flujo

  • Diagramas de secuencia

  • Diagramas de clases

  • Diagramas de estados

  • Diagramas de entidad-relación

  • Recorridos del usuario

  • Diagramas de Gantt

  • Gráficos circulares

  • Gráficos de cuadrantes

  • Diagramas de requisitos

  • Gráficos de Git

  • Diagramas C4

Instalación

Prerrequisitos

• Node.js (v16 o superior)

• npm (v7 o superior)

• TypeScript (v5.8 o superior, incluido en las dependencias)

Instalar desde la fuente

1. Clonar el repositorio:

   git clone https://github.com/phxdev1/archy.git cd archy

2. Instalar dependencias:

   npm install

3. Construir el proyecto:

   npm run build

   Esto compila los archivos fuente de TypeScript a JavaScript en el directorio build .

Instalación automatizada de MCP

Archy incluye un script de instalación conveniente que configura automáticamente el servidor MCP tanto para VS Code como para Claude:

Este guión:

• Detecta automáticamente las ubicaciones de configuración de MCP correctas para su sistema operativo

• Actualiza los archivos de configuración de MCP para VS Code y Claude

• Solicitud de un token de GitHub para el análisis del repositorio (opcional)

• Hace que el servidor sea ejecutable

¡Olvídate de editar manualmente los archivos de configuración JSON como si fueras un animal cavernícola! El script se encarga de todo el tedioso trabajo de configuración, para que puedas concentrarte en crear diagramas atractivos en lugar de lidiar con rutas de archivo y permisos.

Configuración

Configuración

Archy se puede configurar utilizando variables de entorno:

• GITHUB_TOKEN : token de API de GitHub para solicitudes autenticadas (opcional)

• OPENROUTER_API_KEY : Clave API de OpenRouter para la generación de diagramas con tecnología de IA (opcional)

Integración con OpenRouter

Archy se integra con OpenRouter a través de LangChain, lo que permite una mejor generación de diagramas con IA. Al configurar una clave API de OpenRouter, se ofrecen herramientas adicionales:

• Generación de texto a diagrama mejorada con IA : genere diagramas más sofisticados a partir de descripciones de texto

• Generación de código a diagrama : analizar el código y generar diagramas apropiados

• Visualización de diferencias : genere diagramas que muestren las diferencias entre las versiones del código

Para utilizar estas funciones:

1. Regístrese para obtener una cuenta en OpenRouter

2. Obtenga su clave API desde el panel de control de OpenRouter

3. Establezca la variable de entorno OPENROUTER_API_KEY antes de ejecutar Archy

Exportación de imágenes

Archy admite la exportación de diagramas de sirena a varios formatos de imagen:

• PNG : Formato de imagen rasterizada adecuado para la web y la documentación

• SVG : Formato de imagen vectorial que se escala sin perder calidad

• PDF : Formato de documento adecuado para imprimir y compartir.

Las imágenes se pueden exportar con dimensiones y colores de fondo personalizables.

Seguimiento de la evolución del repositorio

Archy puede analizar repositorios Git para rastrear su evolución a lo largo del tiempo:

• Git en memoria : clona y analiza repositorios sin escribir en el sistema de archivos

• Historial de confirmaciones : realiza un seguimiento de los cambios en varias confirmaciones (limitado a 10 de forma predeterminada)

• Evolución de archivos : realice un seguimiento de cómo cambian archivos específicos a lo largo del tiempo

• Visualización de la evolución : genere diagramas que muestren la evolución del repositorio

Integración MCP

Para usar Archy con un cliente MCP, agréguelo a su archivo de configuración de MCP si es masoquista:

Herramientas disponibles

generar_diagrama_a_partir_de_texto

Genera un diagrama de sirena a partir de una descripción de texto.

Parámetros:

• description : Descripción de texto del diagrama a generar.

• diagramType : Tipo de diagrama a generar (por ejemplo, 'diagrama de flujo', 'diagrama de clase', etc.)

Ejemplo:

generar_diagrama_desde_github

Genera un diagrama de sirena desde un repositorio de GitHub.

Parámetros:

• repoUrl : URL del repositorio de GitHub

• diagramType : Tipo de diagrama a generar (por ejemplo, 'classDiagram', 'sequenceDiagram', etc.)

Ejemplo:

lista_de_tipos_de_diagramas_compatibles

Enumera todos los tipos de diagramas admitidos con descripciones.

Parámetros: Ninguno

Herramientas impulsadas por IA

Las siguientes herramientas están disponibles cuando se configura una clave API de OpenRouter:

generar_diagrama_a_partir_de_texto_con_ia

Genera un diagrama de sirena a partir de una descripción de texto utilizando IA (LangChain con OpenRouter).

Parámetros:

• description : Descripción de texto del diagrama a generar.

• diagramType : Tipo de diagrama a generar (por ejemplo, 'diagrama de flujo', 'diagrama de clase', etc.)

• useAdvancedModel : (opcional) Si se debe utilizar un modelo de IA más avanzado para diagramas complejos

Ejemplo:

generar_diagrama_a_partir_del_código

Genera un diagrama de sirena a partir del código usando IA.

Parámetros:

• code : El código para analizar y generar un diagrama a partir de

• diagramType : Tipo de diagrama a generar (por ejemplo, 'classDiagram', 'flowchart', etc.)

Ejemplo:

generar_diagrama_diff

Genera un diagrama de sirena que muestra las diferencias entre dos versiones de código.

Parámetros:

• beforeCode : El código antes de los cambios

• afterCode : El código después de los cambios

• diagramType : Tipo de diagrama a generar (por ejemplo, 'classDiagram', 'flowchart', etc.)

Ejemplo:

exportar_diagrama_a_imagen

Exporta un diagrama de sirena a un formato de imagen (PNG, SVG o PDF).

Parámetros:

• mermaidCode : El código del diagrama de sirena para exportar

• format : (Opcional) El formato de imagen al que se exportará ('png', 'svg', 'pdf', predeterminado: 'png')

• width : (opcional) El ancho de la imagen en píxeles (predeterminado: 800)

• height : (opcional) La altura de la imagen en píxeles (predeterminado: 600)

• backgroundColor : (opcional) El color de fondo de la imagen (color CSS o "transparente", predeterminado: '#ffffff')

Ejemplo:

generar_diagrama_de_evolución_del_repositorio

Genera un diagrama que muestra la evolución de un repositorio a lo largo del tiempo.

Parámetros:

• repoUrl : URL del repositorio de GitHub

• diagramType : Tipo de diagrama a generar (por ejemplo, 'gitGraph', 'flowchart', etc.)

• filepath : (opcional) Ruta a un archivo específico para rastrear

• commitLimit : (opcional) Número máximo de confirmaciones para analizar (predeterminado: 10)

Ejemplo:

Ejemplos

Generar un diagrama de clases a partir de texto

Resultado:

Generar un diagrama de flujo desde GitHub

Resultado:

Desarrollo

Ejecutando en modo de desarrollo

Para ejecutar el servidor en modo de desarrollo con recarga automática:

Esto utiliza nodemon y ts-node para ejecutar el código TypeScript directamente sin un paso de compilación separado, reiniciando automáticamente cuando los archivos cambian.

Ejecución del compilador de TypeScript

Puede ejecutar el compilador TypeScript directamente utilizando los siguientes métodos:

Usando TypeScript instalado localmente

Uso de TypeScript instalado globalmente

Si tiene TypeScript instalado globalmente:

Opciones comunes del compilador de TypeScript

• --outDir <directory> : especifica el directorio de salida para los archivos compilados

• --target <ES version> : especifica la versión de destino de ECMAScript (por ejemplo, ES2020)

• --module <module system> : especifica el sistema de módulo (por ejemplo, NodeNext)

• --declaration : Generar archivos de declaración .d.ts

• --sourceMap : Generar archivos de mapas de origen para depuración

• --strict : Habilitar todas las opciones de verificación de tipo estricta

• --noEmit : comprueba si hay errores sin generar archivos de salida

• --noImplicitAny : genera un error en expresiones con el tipo 'any' implícito

Para obtener una lista completa de las opciones del compilador, ejecute npx tsc --help o consulte la documentación de TypeScript .

Configuración de TypeScript

Archy está construido con TypeScript utilizando la siguiente configuración:

Características clave de TypeScript utilizadas:

• Objetivo ES2020 para las funciones modernas de JavaScript

• Resolución del módulo NodeNext para compatibilidad con Node.js

• Generación de archivos de declaración para un mejor soporte de tipos

• Mapas de origen para una depuración más sencilla

Estructura del proyecto

• src/ : archivos fuente de TypeScript

  • src/index.ts : Punto de entrada principal e implementación del servidor

  • src/server.ts : Implementación del servidor

  • src/generators/ : Lógica de generación de diagramas

  • src/utils/ : Funciones de utilidad y ayudantes

• build/ : Salida de JavaScript compilada

• examples/ : Ejemplos de scripts de uso

• test/ : Archivos de prueba