Esta herramienta de código abierto hace que Claude cree diagramas de arquitectura
BBetter Stack
컴퓨터/소프트웨어
스크립트
00:00:00Pídele a nuestros agentes de programación que mapeen un repositorio, y de repente tenemos Kafka, Redis o una pasarela de API que ni siquiera existe.
00:00:07Los diagramas suelen verse decentes, pero omiten muchas cosas.
00:00:10Esto es Archify, donde el agente no dibuja absolutamente nada.
00:00:14Genera un grafo tipado, Archify lo valida y luego renderiza el diagrama.
00:00:19Esta podría ser una de las mejores maneras de visualizar nuestra arquitectura.
00:00:23Estamos a punto de descubrirlo.
00:00:30Ahora bien, probablemente nuestro modelo no debería estar dibujando el diagrama en absoluto.
00:00:33La forma en que funciona Archify es describiendo el sistema como un JSON estructurado y tipado.
00:00:37Eso se valida, y solo entonces un compilador local lo convierte en el HTML final.
00:00:42Si el grafo no es válido, falla.
00:00:45Eso es Archify, y consiguió 44 000 estrellas en pocos meses porque se integra directamente con Cloud Code, Cursor y Codex.
00:00:53Así que quiero ponerlo a prueba.
00:00:54Voy a instalar Archify, apuntarlo a un repositorio y hacer que responda una pregunta sobre arquitectura.
00:01:00Luego veremos si podemos utilizar este resultado en una solicitud de extracción (PR).
00:01:03Y hay algunos casos de uso en los que definitivamente no usaría esto, pero profundizaremos en ellos pronto.
00:01:08Si te gustan las herramientas de programación que aceleran tu flujo de trabajo, asegúrate de suscribirte.
00:01:11Tenemos videos nuevos todo el tiempo.
00:01:13Muy bien, instalarlo se hace con un solo comando aquí mismo.
00:01:17Y esta no es una aplicación que esté configurando.
00:01:19En realidad es una habilidad para agentes.
00:01:22Una vez instalada, puedo usar la misma habilidad desde Cloud Code o cualquiera de los otros que mencioné antes
00:01:28sin necesidad de cambiar de editor ni de alterar mi flujo de trabajo.
00:01:32Ahora puedo enviarle una tarea real.
00:01:34No le voy a pedir que dibuje la arquitectura de este repositorio.
00:01:37Eso suena bien.
00:01:39Pero, al fin y al cabo, eso solo nos devolverá un montón de basura.
00:01:42Así que voy a hacer una pregunta concreta.
00:01:45Usa Archify, diagrama de arquitectura de 8 a 12 nodos como máximo.
00:01:49¿Qué sucede ante un fallo de caché en este servicio?
00:01:52Incluye únicamente cajas que existan en este repositorio.
00:01:54Si no puedes demostrar un componente, omítelo.
00:01:58Entrega un archivo HTML autocontenido.
00:02:00Eso es como un plan, una pregunta.
00:02:02Más o menos de 8 a 12 nodos.
00:02:04Porque si le pedimos a un agente que mapee toda nuestra base de código, ¿hemos simplificado algo o
00:02:08simplemente lo hemos hecho más difícil de entender?
00:02:10Ahora acabo de convertir el árbol de mi repositorio en un diagrama de flujo.
00:02:14El agente escribe la arquitectura en formato JSON.
00:02:16Luego Archify la valida.
00:02:18También puedo ejecutar esa validación directamente, como voy a hacer aquí mismo.
00:02:23Esta es en realidad una característica muy genial que encontré en esta herramienta.
00:02:27Los nodos también pueden incluir evidencia del repositorio vinculada a una confirmación (commit) y a un rango de líneas específico.
00:02:32Si esa prueba no está presente, el nodo no obtiene una insignia SRC solo porque suene
00:02:37convincente en la respuesta.
00:02:39De acuerdo.
00:02:39Ahora bien, ¿cómo está ayudando esto?
00:02:41Esto parece un diagrama de arquitectura.
00:02:43Sí, claro, pero no tienes que usarlo como tal.
00:02:46Puedo buscar un servicio en concreto dentro de todo esto.
00:02:50Puedo hacer clic en él e identificar inmediatamente qué hay aguas arriba y aguas abajo.
00:02:55Luego puedo reproducir esa ruta y seguir el recorrido del fallo de caché a través del sistema.
00:02:59Así que, en lugar de mirar 10 flechas e intentar rastrearlas mentalmente, ahora puedo recorrerlas
00:03:05paso a paso.
00:03:06Y además de hacer eso, puedo exportarlo.
00:03:08Puedo copiar un PNG o generar una tarjeta para compartir de 1200 por 36.
00:03:13La verdadera diferencia aquí es Mermaid, ¿verdad?
00:03:17La herramienta Mermaid es normalmente algo que se lee.
00:03:20Esto es algo a lo que le puedo hacer preguntas y contra lo que puedo consultar.
00:03:23Y el movimiento no se usa para ocultar una estructura deficiente; exportas el diagrama como una imagen estática
00:03:28y el significado sigue ahí para perdurar.
00:03:31Y hay un segundo caso de uso que podría ser aún más útil, ¿verdad?
00:03:35¿Qué opinamos?
00:03:36Bueno, estoy pensando en la revisión de código.
00:03:38Digamos que este es el sistema antes de un cambio.
00:03:41Luego añado un trabajador de reintentos existente.
00:03:44Puedo decirle al agente que actualice la arquitectura sin inventarse nada de la nada.
00:03:49Archify puede entonces comparar las dos instantáneas validadas: añadido, eliminado, movido, reencaminado.
00:03:54Así que, en lugar de obtener dos diagramas generados, puedo ver qué cambió realmente.
00:03:59Y el editor sigue siendo simplemente un chat.
00:04:02Pero si quiero que esta arquitectura perdure en la siguiente sesión del agente, confirmo (commit) el JSON.
00:04:07Llegados a este punto, la manera más fácil de entender Archify es la siguiente.
00:04:11Para la máquina virtual HTML de mapas de sistemas, el agente de programación es la interfaz de usuario.
00:04:15El JSON es la representación intermedia.
00:04:19El HTML es el resultado compilado.
00:04:21Y esa capa intermedia está haciendo gran parte del trabajo.
00:04:24El JSON sigue esquemas estrictos.
00:04:26Los campos desconocidos pueden hacer que la validación falle.
00:04:28Y hay cinco modos de diagramas.
00:04:30Arquitectura, flujo de trabajo, secuencia, flujo de datos y ciclo de vida.
00:04:34Pero una de las decisiones más interesantes es lo que el modelo no controla.
00:04:38El diseño visual (layout).
00:04:39El modelo describe el sistema.
00:04:41No decide exactamente dónde va a ir cada cuadro.
00:04:44De hecho, probaron Mermaid con temas y diseño automático por grados.
00:04:48No era mejor que el Mermaid normal.
00:04:51Además, la validación se cierra ante los fallos.
00:04:54Un JSON defectuoso no se convierte de ninguna manera en un diagrama bonito.
00:04:58Obtienes diagnósticos, códigos de reglas y reparaciones compatibles.
00:05:02Ahora bien, de todo esto, aquí es probablemente donde yo no usaría Archify.
00:05:06Si necesitas un diagrama directamente dentro de tu archivo README, tal vez no.
00:05:10Podría llevar algo de tiempo.
00:05:11GitHub lo renderiza.
00:05:12El HTML de Archify no.
00:05:15Archify está resolviendo un tipo de problema muy diferente aquí.
00:05:18Ya hay un agente en el proceso.
00:05:20Ese agente está produciendo un artefacto de arquitectura.
00:05:23Tal vez se incluya en una solicitud de extracción (PR).
00:05:25Tal vez vaya a una revisión de diseño.
00:05:27Ahí es donde el resultado comprobado comienza a importar.
00:05:30Dentro de todo esto, hubo muchas cosas que me gustaron.
00:05:32Vive dentro de las herramientas que ya usamos todos los días.
00:05:35Puedo exportar el resultado.
00:05:38La evidencia del repositorio me da algo concreto que comprobar realmente.
00:05:41Y debido a que la arquitectura está estructurada, puedo seguir editándola sin que las cosas cambien simplemente con el tiempo.
00:05:46También se ve lo suficientemente bien como para que probablemente no sienta la necesidad de tener que rediseñarlo en Figma u otra herramienta similar.
00:05:53Pero dicho todo esto, al mismo tiempo, Archify no conoce tu arquitectura.
00:05:58Un grafo puede ser completamente válido y aun así describir el sistema incorrecto.
00:06:02Aun así tienes que leerlo.
00:06:03Como sabemos, un mal modelo a menudo creará JSON que funciona, pero seguirá viéndose mal.
00:06:08Y si el destino final de tu diagrama es un archivo README, Mermaid quizás siga siendo mejor opción aquí.
00:06:13Con Archify, probablemente estés confirmando (commit) el JSON y el HTML, o exportando una imagen.
00:06:18Y hay un error que evitaría absolutamente por aquí.
00:06:21No lo apuntes a un repositorio enorme diciendo: mapea todo.
00:06:25Creo que puedes adivinar cómo va a terminar eso, porque probablemente solo obtendrás una gran cantidad de datos basura de vuelta.
00:06:29Pero eso no es realmente un fallo de Archify.
00:06:32Es más bien una mala pregunta.
00:06:34Si ya trabajas con agentes de programación y creas regularmente diagramas que vas a consultar en el futuro o que alguien más podría mirar, esto tiene sentido.
00:06:42Revisiones de solicitudes de extracción (PR), documentos de diseño... probablemente usaría esto.
00:06:47No instalaría esto porque quiero una versión más bonita de algo que ya tenemos, como Mermaid por ejemplo.
00:06:52Y definitivamente no esperaría que hiciera ingeniería inversa de nada por mí.
00:06:55La barrera para probarlo es realmente mínima.
00:06:58Un comando npx, Node en la máquina.
00:07:00Aquí no hay pesos de modelos.
00:07:02Mi M4 Pro es básicamente irrelevante en esto.
00:07:05Pero hay una regla que mantendría.
00:07:07Una pregunta por archivo.
00:07:08Si no puedes decir claramente qué pregunta está respondiendo el diagrama, no generes el diagrama.
00:07:14Soy Josh de BetterStack.
00:07:15Si te gustan los consejos y trucos de programación como este, asegúrate de suscribirte al canal.
00:07:19Nos vemos en otro video.
00:07:20Nos vemos en otro video.
커뮤니티 글
아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!
이 영상에 대해 글쓰기